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 {
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 */
}

12
index.html
View file

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