Entwicklungsplan

HTML, CSS, JS, Media-Ordner

object-fit: cover — funktioniert auf allen Auflösungen

Pulsierender Gold-Effekt, Hover-Label, korrekte Positionierung bei allen Bildschirmgrößen

Glasmorphism, Icon, Titel, Beschreibung, Links. Schließbar via ×, ESC, Außenklick

logo_hebold_de_f.png, mix-blend-mode: multiply, thront oben über der Homepage

Changelog, Handbuch, What's New, Entwicklungsplan

Alle 9 Punkte exakt auf die Objekte setzen, ggf. bei neuem Startbild wiederholen

Platzhaltertexte und # ersetzen durch echte Beschreibungen und URLs

Browser-Tab-Icon auf Basis des Logos erstellen

@media (max-width: 768px): Panel als Bottom Sheet, kompakter Header, Hamburger-Menü mit Pull-Down-Navigation, größere Hotspot-Ringe, Labels immer sichtbar. Touch-Support via touchstart.

Kurzes Intro wenn das Startbild lädt — kein weißer Flash

Gesetzlich vorgeschriebene Seiten angelegt — Adresse noch eintragen

DSGVO-konformer Hinweis auf technisch notwendige Cookies

SVG-Favicon (goldenes h), robots.txt sperrt api/, data/, config/

impressum.html und datenschutz.html mit echter Adresse vervollständigen

Fonts lokal einbinden statt via Google CDN — verbessert Datenschutz und Ladezeit

blog.html (öffentlich) und admin.html (geschützt) als erste Unterseiten. Bücher-Hotspot zeigt Blog-Vorschau direkt im Panel.

Spotlight-Effekt: Hover über Hotspot verdunkelt das Bild, nur der Bereich um das Objekt bleibt beleuchtet. Radius pro Objekt individuell konfigurierbar.

Im „Kontakt"-Panel direkt ausfüllbar, auch über Nav-Menü erreichbar. PHP-Mailversand mit Honeypot-Spamschutz.

admin.html mit TinyMCE 7 WYSIWYG-Editor (jsDelivr CDN, kein API-Key), Day/Night-Toggle, Cover-Bild-Upload. PHP-Backend (api/posts.php) speichert als JSON. Auth-geschützt.

api/upload.php — MIME-Validierung (finfo), max. 8 MB, speichert in media/uploads/. TinyMCE-Integration: Bilder direkt in den Editor laden.

blog.html — Papier-Textur, Masthead "Der frühe Vogel kriegt den Mittelsitz", 4-Spalten-Grid, Rubrikenbalken, "In dieser Ausgabe"-Strip, Cover-Bilder, Drop Caps, Artikel-Reader-Overlay. Fonts: Playfair Display + Lora.

blog_test.html — BlogZeitung.png als Vollbild-Hintergrund (wie Schreibtisch), transparente Artikel-Zonen über den Zeitungsbereichen, Spotlight-Hover, Artikel-Reader-Overlay.

Leuchtender Kern mit Glow-Effekt und dot-glow-Animation, zwei konzentrische Ringe expandieren via box-shadow (Radar-Effekt). Größe von 20px auf 28px.

☀/🌙-Button im Header schaltet helles Design um. CSS custom properties auf body.light-mode überschreiben alle Farben (Header, Panel, Modals, Tour, Spotlight). Auswahl wird in localStorage gespeichert.

Startbild wechselt automatisch je nach Jahreszeit (4 Varianten). Nach Login: manueller Season-Picker mit Dropdown, Auswahl in localStorage. js/season.js verwaltet Bildwechsel mit sanftem Crossfade.

notizen.html mit öffentlichen Gedanken (für alle) und privaten Notizen (nur nach Login). Kategorien, Ablaufdatum mit Countdown, CRUD. Hotspot 'skizze' zeigt Vorschau, Nav-Link im Header.

Frosted-Glass-Bar am unteren Bildschirmrand auf der Startseite. Sprüche in data/motto.txt (eine Zeile = ein Spruch, # = Kommentar). Deterministisch nach Kalendertag — gleicher Spruch den ganzen Tag für alle Besucher.

LinkedIn (Mein Weg) und Instagram (Jetzt & Hier) im Uhr-Hotspot hinterlegt. Externe Links öffnen automatisch in neuem Tab.

Artikel nach Erstellungsdatum sortiert (neueste zuerst). Manuelles Datum setzbar. Status "Geplant" mit Zeitstempel — Artikel wird automatisch veröffentlicht wenn die Zeit erreicht ist (lazy evaluation beim nächsten GET, kein Cron nötig).

Pro Artikel optional: Cover-Bild ersetzt die Überschrift. In der Übersicht und im Reader-Overlay wird dann nur das Bild angezeigt (kein Titeltext). Flag "cover_as_title" in posts.json.

Hintergrundfarbe, Schriftfarbe und Akzentfarbe des Blogs im Admin-Panel einstellbar (Farbpicker + Hex-Eingabe). Wird in data/blog_config.json gespeichert und für alle Besucher wirksam. localStorage-Cache verhindert Farbflackern beim Laden.

Der Blog-Titelschriftzug kann durch ein eigenes Bild (z. B. Logo, Schriftzug als Grafik) ersetzt werden. Upload im Admin-Panel, wird in blog_config.json gespeichert. Empfohlenes Format: breit/querformat, max. 160px Höhe.

Die gesamte Homepage kann per Toggle in admin.html (Tab „Zugang") hinter eine Anmeldeschranke gelegt werden. Besucher-Accounts (Rolle: viewer) geben gezielten Zugang ohne Admin-Rechte. Jede Anmeldung wird mit Zeitstempel und IP in data/access_log.json protokolliert. Gate läuft über js/gate.js (wird in alle Seiten eingebunden). Admin-Seiten sind für Viewer-Rolle grundsätzlich gesperrt.

Optionales leises Hintergrundgeräusch (Schreibtischambiente, Regen, etc.)

Tastaturkombinationen (π, 42, Semper Fi) lösen Konfetti + Highscore-Modal aus. Bestenliste mit Name & Datum im Kerze-Panel. E-Mail-Benachrichtigung bei neuem Eintrag.

Panel-Inhalte über ein einfaches Backend pflegen statt direkt im JS

Interaktive 3D-Szene statt statischem Foto — mit Three.js o.ä.

fotos.html als eigene SPA: Album-Übersicht im Blog-Stil, Album-Detail mit 4 Layouts (Oben / Links / Rechts / Panorama), variierte Bildgrößen (1×1 bis 4×1), gap-auto-flow:dense für lückenlose Grids, Abstand- und Breakout-Toggle, Lightbox. Admin-Tab „Reisen" zum Anlegen und Verwalten von Alben inkl. Foto-Upload und Größenzuweisung. Hotspot „Welt" → „Reisen", Panel zeigt die 3 neuesten Alben als Thumbnails. Sichtbarkeitssteuerung pro Album: Öffentlich / Nur Mitglieder / Ausgewählt (Gruppen + Einzelpersonen), server-seitig gefiltert. Gruppen-Verwaltung im Admin (anlegen, umbenennen, Mitglieder zuweisen, löschen). Datum-Override (sort_date), Themen-Tags mit Filter-Leiste, Blog-Integration (show_in_blog-Checkbox).

Open-Meteo API (Nürnberg, kein Key). Widget unten links: Temperatur, Wetterlage, Wind, 7-Tage-Vorschau aufklappbar. Effekte auf 2 Canvas-Ebenen: Luft (Regen/Schnee/Wind/Blitze/Sonnenstrahlen) + Glas (Tropfen laufen runter, Schweif, Ripple, Schneehaufen, Frost bei < 2°C). Wind bläst alles weg. weather_mockup.html zum Testen aller Effekte.