komane/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Farbe nach Tageszeit (Roundtrip 2)

Browse source
This commit is contained in:
Tahar Lamred & Theresa Nerz 2026-06-14 15:23:29 +02:00
parent 9cf614bd5c
commit bdd40b25af
3 changed files with 71 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
css/style.css
View file

@ -25,18 +25,18 @@ body {
.logo-container img { .logo-container img {
height: 100px; height: 100px;
} }
/* Navigation Bar */ /* Navigation Bar */
nav { nav {
display: flex; display: flex;
justify-content: space-between; /* links left, button right */ justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
background: #90EE90; /* light green */ background: #90EE90;
padding: 1rem 2rem; padding: 1rem 2rem;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
/* Sticky */
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
@ -52,7 +52,7 @@ nav {
/* Individual Links */ /* Individual Links */
nav a { nav a {
text-decoration: none; text-decoration: none;
color: #000000; /* black text */ color: #000000;
font-weight: 500; font-weight: 500;
} }
@ -70,6 +70,7 @@ nav a:hover {
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
} }
#dark-mode-toggle:hover { #dark-mode-toggle:hover {
background-color: #1e40af; background-color: #1e40af;
} }
@ -94,6 +95,7 @@ nav a:hover {
.galerie img:hover { .galerie img:hover {
transform: scale(1.03); transform: scale(1.03);
} }
/* Progress Bar */ /* Progress Bar */
#balken-container { #balken-container {
width: 100%; width: 100%;
@ -120,6 +122,7 @@ body.dark header,
body.dark nav { body.dark nav {
background-color: #1e1e1e; background-color: #1e1e1e;
} }
body.dark input, body.dark input,
body.dark button { body.dark button {
background-color: #333; background-color: #333;
@ -130,3 +133,16 @@ body.dark button {
body.dark #balken-container { body.dark #balken-container {
background-color: #333; background-color: #333;
} }
/* -------------------------------------- */
/* Roundtrip 2 — Farben nach Tageszeit */
/* -------------------------------------- */
.morgen {
color: #d97706; /* warmes Orange */
}
.tag {
color: #16a34a; /* frisches Grün */
}

12
index.html
View file

@ -11,7 +11,6 @@
<body> <body>
<header> <header>
<!-- Centered Logo --> <!-- Centered Logo -->
<div class="logo-container"> <div class="logo-container">
<img src="./img/Logo.png" alt="Logo"> <img src="./img/Logo.png" alt="Logo">
@ -30,7 +29,6 @@
<button id="dark-mode-toggle">Dark Mode</button> <button id="dark-mode-toggle">Dark Mode</button>
</nav> </nav>
</header> </header>
<main> <main>
@ -46,13 +44,15 @@
<!-- Dark Mode Script --> <!-- Dark Mode Script -->
<script> <script>
const toggle = document.getElementById('dark-mode-toggle'); document.addEventListener("DOMContentLoaded", () => {
toggle.addEventListener('click', () => { const toggle = document.getElementById("dark-mode-toggle");
document.body.classList.toggle('dark'); toggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
}); });
</script> </script>
<!-- Deine externe script.js --> <!-- Externe script.js -->
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>

101
js/script.js
View file

@ -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', () => { img.addEventListener('click', () => {
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.style.cssText = overlay.style.cssText =
@ -11,70 +14,56 @@ document.querySelectorAll('.galerie img').forEach(img => {
big.style.maxHeight = '90vh'; big.style.maxHeight = '90vh';
big.style.borderRadius = '10px'; 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.appendChild(big);
overlay.addEventListener('click', () => overlay.remove()); overlay.addEventListener('click', () => overlay.remove());
document.body.appendChild(overlay); document.body.appendChild(overlay);
}); });
}); });
// 🌙 Dark Mode Schalter
console.log("Meine Seite läuft!");
// ---------------------------------------------
// Dark Mode Schalter
// ---------------------------------------------
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const toggle = document.getElementById("dark-mode-toggle"); const toggle = document.getElementById("dark-mode-toggle");
// Beim Laden: gespeicherten Zustand wiederherstellen // gespeicherten Zustand wiederherstellen
if (localStorage.getItem("darkMode") === "true") { if (localStorage.getItem("darkMode") === "true") {
document.body.classList.add("dark"); document.body.classList.add("dark");
toggle.textContent = "Light Mode"; toggle.textContent = "Light Mode";
} }
// Beim Klick: Zustand umschalten und speichern // Klick-Event
toggle.addEventListener("click", () => { toggle.addEventListener("click", () => {
document.body.classList.toggle("dark"); document.body.classList.toggle("dark");
const isDark = document.body.classList.contains("dark"); const isDark = document.body.classList.contains("dark");
localStorage.setItem("darkMode", isDark); localStorage.setItem("darkMode", isDark);
toggle.textContent = isDark ? "Light Mode" : "Dark Mode"; 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);
}); });
}); });
// 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;
});