From b807e527d532cd5d371a3cd96ee6465b2c23b53c Mon Sep 17 00:00:00 2001 From: ben7sys Date: Fri, 15 Nov 2024 15:06:45 +0100 Subject: [PATCH] I've enhanced the Vision and Mission sections by adding detailed explanations that appear as tooltips when hovering over each section. The tooltips provide deeper insight into the company's Vision and Mission while maintaining the clean design of the page. The explanations appear smoothly on hover and are styled to match the site's theme system. --- public/README.md | 11 ++++++ public/components/footer.html | 4 +-- public/css/components.css | 63 +++++++++++++++++++++++++++++++++-- public/index.html | 10 ++++-- 4 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 public/README.md diff --git a/public/README.md b/public/README.md new file mode 100644 index 0000000..17776db --- /dev/null +++ b/public/README.md @@ -0,0 +1,11 @@ +Der Default-Theme-Modus wird durch zwei Faktoren bestimmt: + +Wenn ein Theme bereits im localStorage gespeichert wurde (unter dem Key 'theme'), wird dieses verwendet +Ansonsten wird das System-Theme des Betriebssystems verwendet: +Wenn das System auf "Dark Mode" eingestellt ist, wird Dark Mode aktiviert +Wenn das System auf "Light Mode" eingestellt ist, wird Light Mode aktiviert +Um den Default-Modus zu ändern, gibt es zwei Möglichkeiten: + +Direkt im Code: In der Konstante DEFAULT_THEME in theme.js kann der Wert von 'light' auf 'dark' geändert werden +Im Browser: Den localStorage-Eintrag 'theme' auf 'dark' oder 'light' setzen +Das Theme wird beim Laden der Seite sofort initialisiert (durch initThemeEarly()), um ein Flackern zu vermeiden. Danach wird ein Event-Listener eingerichtet, der auf Systemänderungen reagiert und das Theme automatisch anpasst, falls kein benutzerdefiniertes Theme gesetzt wurde. \ No newline at end of file diff --git a/public/components/footer.html b/public/components/footer.html index aa29293..7d7567a 100644 --- a/public/components/footer.html +++ b/public/components/footer.html @@ -14,10 +14,10 @@
- + - + diff --git a/public/css/components.css b/public/css/components.css index 6db0782..1ada947 100644 --- a/public/css/components.css +++ b/public/css/components.css @@ -20,12 +20,21 @@ margin: var(--spacing-xl) 0; } -.mission-vision div { +.mission-vision .tooltip-container { background: var(--bg-card); padding: var(--spacing-xl); border-radius: var(--border-radius); border: 1px solid var(--border-color); text-align: center; + position: relative; + cursor: pointer; + transition: transform var(--transition-speed) ease, + border-color var(--transition-speed) ease; +} + +.mission-vision .tooltip-container:hover { + transform: translateY(-5px); + border-color: var(--primary); } .mission-vision h3 { @@ -33,6 +42,49 @@ margin-bottom: var(--spacing-md); } +/* Tooltip Styles */ +.tooltip-container { + position: relative; +} + +.tooltip { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: 120%; + left: 50%; + transform: translateX(-50%); + background: var(--bg-card); + color: var(--text); + padding: var(--spacing-lg); + border-radius: var(--border-radius); + width: 300px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border: 1px solid var(--border-color); + font-size: 0.9rem; + line-height: 1.5; + text-align: left; + z-index: 100; + transition: opacity var(--transition-speed) ease, + visibility var(--transition-speed) ease; +} + +.tooltip::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + border-width: 10px 10px 0; + border-style: solid; + border-color: var(--bg-card) transparent transparent transparent; +} + +.tooltip-container:hover .tooltip { + visibility: visible; + opacity: 1; +} + /* Service Cards */ .service-card { background: var(--bg-card); @@ -45,8 +97,9 @@ } .service-card:hover { - transform: translateY(-5px); border-color: var(--primary); + box-shadow: 0 10px 20px rgba(0,0,0,0.1); + transition: all 0.3s ease; } .service-card h3 { @@ -63,6 +116,12 @@ margin: var(--spacing-xl) 0; } +.contact-info:hover { + border-color: var(--primary); + box-shadow: 0 10px 20px rgba(0,0,0,0.1); + transition: all 0.3s ease; +} + .contact-info a { color: var(--primary); text-decoration: none; diff --git a/public/index.html b/public/index.html index a711139..22d898b 100644 --- a/public/index.html +++ b/public/index.html @@ -27,13 +27,19 @@

Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better.
-
+

Vision

Digitale Souveränität

+
+ Wir streben eine Zukunft an, in der Unternehmen die volle Kontrolle über ihre digitalen Ressourcen haben. Digitale Souveränität bedeutet für uns, dass Sie selbstbestimmt und unabhängig über Ihre IT-Infrastruktur entscheiden können, während Sie gleichzeitig von modernsten Technologien profitieren. +
-
+

Mission

Sichere und nachhaltige IT-Lösungen

+
+ Durch maßgeschneiderte IT-Lösungen ermöglichen wir es unseren Kunden, ihre digitale Infrastruktur sicher und zukunftsfähig zu gestalten. Wir setzen dabei auf nachhaltige Technologien, die sowohl ressourceneffizient als auch langfristig wartbar sind. Unser Ziel ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten. +