diff --git a/css/style.css b/css/style.css index e79e59c..07f932c 100644 --- a/css/style.css +++ b/css/style.css @@ -25,18 +25,18 @@ body { .logo-container img { height: 100px; } + /* Navigation Bar */ nav { display: flex; - justify-content: space-between; /* links left, button right */ + justify-content: space-between; align-items: center; flex-wrap: wrap; - background: #90EE90; /* light green */ + background: #90EE90; padding: 1rem 2rem; border-bottom: 1px solid #e2e8f0; - /* Sticky */ position: sticky; top: 0; z-index: 1000; @@ -52,7 +52,7 @@ nav { /* Individual Links */ nav a { text-decoration: none; - color: #000000; /* black text */ + color: #000000; font-weight: 500; } @@ -70,6 +70,7 @@ nav a:hover { cursor: pointer; font-weight: 500; } + #dark-mode-toggle:hover { background-color: #1e40af; } @@ -94,6 +95,7 @@ nav a:hover { .galerie img:hover { transform: scale(1.03); } + /* Progress Bar */ #balken-container { width: 100%; @@ -120,6 +122,7 @@ body.dark header, body.dark nav { background-color: #1e1e1e; } + body.dark input, body.dark button { background-color: #333; @@ -130,3 +133,16 @@ body.dark button { body.dark #balken-container { background-color: #333; } + +/* -------------------------------------- */ +/* Roundtrip 2 — Farben nach Tageszeit */ +/* -------------------------------------- */ + +.morgen { + color: #d97706; /* warmes Orange */ +} + +.tag { + color: #16a34a; /* frisches Grün */ +} + diff --git a/index.html b/index.html index 673211f..ad75931 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@
-
Logo @@ -30,7 +29,6 @@ -
@@ -46,13 +44,15 @@ - + diff --git a/js/script.js b/js/script.js index 820dd48..21ca5ec 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,7 @@ -document.querySelectorAll('.galerie img').forEach(img => { +// --------------------------------------------- +// Galerie-Zoom (einmal sauber, ohne Duplikate) +// --------------------------------------------- +document.querySelectorAll('.galerie img, .gallery img').forEach(img => { img.addEventListener('click', () => { const overlay = document.createElement('div'); overlay.style.cssText = @@ -11,70 +14,56 @@ document.querySelectorAll('.galerie img').forEach(img => { big.style.maxHeight = '90vh'; big.style.borderRadius = '10px'; - overlay.appendChild(big); - overlay.addEventListener('click', () => overlay.remove()); - document.body.appendChild(overlay); - }); -});console.log("Meine Seite läuft!"); -document.querySelectorAll('.galerie img').forEach(img => { - img.addEventListener('click', () => { - const overlay = document.createElement('div'); - overlay.style.cssText = - 'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;' + - 'align-items:center;justify-content:center;cursor:pointer;z-index:999'; - const big = document.createElement('img'); - big.src = img.src; - big.style.maxWidth = '90vw'; - big.style.maxHeight = '90vh'; overlay.appendChild(big); overlay.addEventListener('click', () => overlay.remove()); document.body.appendChild(overlay); }); }); -// 🌙 Dark Mode Schalter + +console.log("Meine Seite läuft!"); + + +// --------------------------------------------- +// Dark Mode Schalter +// --------------------------------------------- document.addEventListener("DOMContentLoaded", () => { - const toggle = document.getElementById("dark-mode-toggle"); + const toggle = document.getElementById("dark-mode-toggle"); - // Beim Laden: gespeicherten Zustand wiederherstellen - if (localStorage.getItem("darkMode") === "true") { - document.body.classList.add("dark"); - toggle.textContent = "Light Mode"; - } + // gespeicherten Zustand wiederherstellen + if (localStorage.getItem("darkMode") === "true") { + document.body.classList.add("dark"); + toggle.textContent = "Light Mode"; + } - // Beim Klick: Zustand umschalten und speichern - toggle.addEventListener("click", () => { - document.body.classList.toggle("dark"); - const isDark = document.body.classList.contains("dark"); - localStorage.setItem("darkMode", isDark); - toggle.textContent = isDark ? "Light Mode" : "Dark Mode"; - }); -}); - -document.querySelectorAll('.gallery img').forEach(img => { - img.addEventListener('click', () => { - const overlay = document.createElement('div'); - overlay.style.cssText = - 'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;' + - 'align-items:center;justify-content:center;cursor:pointer;z-index:999'; - const big = document.createElement('img'); - big.src = img.src; - big.style.maxWidth = '90vw'; - big.style.maxHeight = '90vh'; - overlay.appendChild(big); - overlay.addEventListener('click', () => overlay.remove()); - document.body.appendChild(overlay); + // Klick-Event + toggle.addEventListener("click", () => { + document.body.classList.toggle("dark"); + const isDark = document.body.classList.contains("dark"); + localStorage.setItem("darkMode", isDark); + toggle.textContent = isDark ? "Light Mode" : "Dark Mode"; }); }); -// Begruessung nach Tageszeit -const stunde = new Date().getHours(); -let text; -if (stunde < 10) { - text = "Guten Morgen!"; -} else if (stunde < 18) { - text = "Hallo, schön dass du da bist!"; -} else { - text = "Guten Abend!"; -} -document.getElementById("begruessung").textContent = text; +// --------------------------------------------- +// Roundtrip 1 + 2 — Begrüßung + Farbe nach Zeit +// --------------------------------------------- +document.addEventListener("DOMContentLoaded", () => { + const stunde = new Date().getHours(); + const el = document.getElementById("begruessung"); + + let text = ""; + + if (stunde < 10) { + text = "Guten Morgen!"; + el.classList.add("morgen"); + } else if (stunde < 18) { + text = "Hallo, schön dass du da bist!"; + el.classList.add("tag"); + } else { + text = "Guten Abend!"; + el.classList.add("abend"); + } + + el.textContent = text; +});