U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16 Uhr

2026-06-03 12:37:38 +00:00 · 2026-06-03 12:37:38 +00:00 · b193c5daa0
commit b193c5daa0
parent 6bfb49d4e3
14 changed files with 97 additions and 6 deletions
--- a/README.md
+++ b/README.md
@ -57,7 +57,8 @@ https://isa##.edumake.de

 ### Features
 - ✅ Responsive Design (Mobile, Tablet, Desktop)
- ✅ Dark Mode (Toggle + localStorage)
+- ✅ Dark Mode (Toggle + localStorage; Auto-Dark ab 16:00 Uhr)
+- ✅ Begrüssung nach Tageszeit im Header (Morgen/Mittag/Abend + Uhrzeit, live)
 - ✅ Hamburger-Menü (Mobile)
 - ✅ Einheitliche Navigation (11 Seiten)
 - ✅ Kontaktformular mit feldspezifischer JS-Validierung
@ -120,7 +121,8 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 ## 🔧 JavaScript-Funktionen

 ### script.js (Basis)
- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE)
+- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE); ab 16:00 Uhr automatisch Dark Mode (wenn kein manueller Override gespeichert)
+- **Begrüssung nach Tageszeit (U13)** – zeigt „Guten Morgen/Mittag/Abend, es ist HH:MM Uhr" im Header; Uhrzeit aktualisiert sich jede Minute (`setInterval`)
 - **Hamburger-Navigation** – Mobile Menü mit aria-Attributen
 - **Navigation-Highlighting** – Aktiver Link basierend auf URL
 - **Lightbox-Galerie** – Klick auf Bilder öffnet vergrößerte Ansicht (ESC/Overlay zum Schließen)
@ -196,6 +198,7 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:

 | Datum | Änderung |
 |-------|----------|
+| 03.06.2026 | U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16:00 Uhr |
 | 20.05.2026 | Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau |
 | 20.05.2026 | Galerie: teambild.jpeg eingefügt |
 | 20.05.2026 | Mega-Bonus: Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export) |
@ -215,4 +218,4 @@ Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwe

 ---

-**Zuletzt aktualisiert:** 20. Mai 2026
+**Zuletzt aktualisiert:** 3. Juni 2026
--- a/api.html
+++ b/api.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/css/style.css
+++ b/css/style.css
@ -50,9 +50,24 @@ body::before {
   Dark Mode Styles
   =========================== */

+/* Begrüssung nach Tageszeit (U13) */
+.begruessung {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #be185d;
+  background: rgba(252, 231, 243, 0.85);
+  border: 1px solid #f9a8d4;
+  border-radius: 20px;
+  padding: 0.3rem 0.85rem;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+  margin-top: -38px;
+  pointer-events: none;
+  user-select: none;
+}
+
 /* Dark Mode Toggle Button */
 .dark-mode-toggle {
-  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 50%;
@ -377,6 +392,13 @@ body.dark .dark-mode-toggle:hover {
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6), inset 0 0 15px rgba(96, 165, 250, 0.3);
 }

+/* Begrüssung – Dark Mode */
+body.dark .begruessung {
+  color: #f9a8d4;
+  background: rgba(30, 30, 46, 0.85);
+  border-color: #7c3aed55;
+}
+
 /* ===========================
   Typography
   =========================== */
@ -2630,6 +2652,13 @@ body.dark .nav-toggle span {
    font-size: 1.3rem;
  }

+  /* Begrüssung auf kleinen Screens verkleinern */
+  .begruessung {
+    font-size: 0.72rem;
+    padding: 0.25rem 0.6rem;
+    margin-top: -32px;
+  }
+
  /* Hamburger anzeigen */
  .nav-toggle {
    display: flex;
@ -2821,6 +2850,11 @@ body.dark .nav-toggle span {
    font-size: 1.1rem;
  }

+  /* Begrüssung auf sehr kleinen Screens ausblenden */
+  .begruessung {
+    display: none;
+  }
+
  .nav-toggle {
    width: 38px;
    height: 38px;
--- a/eis_projekt.html
+++ b/eis_projekt.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/galerie.html
+++ b/galerie.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/impressum.html
+++ b/impressum.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/index.html
+++ b/index.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/js/script.js
+++ b/js/script.js
@ -3,8 +3,14 @@
 // ===========================

 // Sofort beim Laden: Dark Mode Preference wiederherstellen
+// Ab 16:00 Uhr automatisch Dark Mode, sofern kein manueller Override gespeichert ist
 (function() {
-  if (localStorage.getItem('darkMode') === 'true') {
+  const saved = localStorage.getItem('darkMode');
+  const hour  = new Date().getHours();
+  const autoDark = hour >= 16;
+  const useDark  = saved !== null ? saved === 'true' : autoDark;
+
+  if (useDark) {
    document.documentElement.classList.add('dark');
    document.body.classList.add('dark');
  }
@ -30,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function() {
      document.body.classList.toggle('dark');
      document.documentElement.classList.toggle('dark');
      
-      // Speichern in localStorage
+      // Manuellen Override in localStorage speichern
      const darkModeState = document.body.classList.contains('dark');
      localStorage.setItem('darkMode', darkModeState ? 'true' : 'false');
      
@ -93,6 +99,32 @@ document.addEventListener('DOMContentLoaded', function() {

  // Initialize contact form
  initializeContactForm();
+
+  // ===========================
+  // Begrüssung nach Tageszeit (U13)
+  // ===========================
+  function aktualisiereUhrzeit() {
+    const el = document.getElementById('begruessung');
+    if (!el) return;
+
+    const jetzt  = new Date();
+    const stunde = jetzt.getHours();
+    const minute = String(jetzt.getMinutes()).padStart(2, '0');
+
+    let gruss;
+    if (stunde < 12) {
+      gruss = 'Guten Morgen';
+    } else if (stunde < 17) {
+      gruss = 'Guten Mittag';
+    } else {
+      gruss = 'Guten Abend';
+    }
+
+    el.textContent = gruss + ', es ist ' + stunde + ':' + minute + ' Uhr';
+  }
+
+  aktualisiereUhrzeit();
+  setInterval(aktualisiereUhrzeit, 60000); // jede Minute aktualisieren
 });

 // ===========================
--- a/kanban.html
+++ b/kanban.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
      </button>
--- a/kontakt.html
+++ b/kontakt.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/notenrechner.html
+++ b/notenrechner.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/team.html
+++ b/team.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/textanalyse.html
+++ b/textanalyse.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>
--- a/ueber_uns.html
+++ b/ueber_uns.html
@ -18,6 +18,8 @@
          <span class="project">EIS Projekt</span>
        </div>
      </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
      <!-- Dark Mode Toggle Button -->
      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
        <span class="dark-mode-icon">🌙</span>