Erledigt
In Arbeit
Geplant
Idee / Offen
Abgeschlossen Phase 1 — Fundament Grundstruktur & Interaktivität
Projektstruktur anlegen
HTML, CSS, JS, Media-Ordner
Tech
Vollbild-Schreibtisch-Bild
object-fit: cover — funktioniert auf allen Auflösungen
Design
9 interaktive Hotspots
Pulsierender Gold-Effekt, Hover-Label, korrekte Positionierung bei allen Bildschirmgrößen
Tech
Slide-in Panel
Glasmorphism, Icon, Titel, Beschreibung, Links. Schließbar via ×, ESC, Außenklick
Design
Logo volle Breite
logo_hebold_de_f.png, mix-blend-mode: multiply, thront oben über der Homepage
Design
Dokumentation
Changelog, Handbuch, What's New, Entwicklungsplan
Inhalt
In Arbeit Phase 2 — Inhalte & Feinschliff Echte Texte, echte Links
Hotspot-Positionen kalibrieren
Alle 9 Punkte exakt auf die Objekte setzen, ggf. bei neuem Startbild wiederholen
Design
Echte Inhalte in alle Panels
Platzhaltertexte und # ersetzen durch echte Beschreibungen und URLs
Inhalt
Favicon
Browser-Tab-Icon auf Basis des Logos erstellen
Design
Mobile Ansicht
@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.
Tech
Ladeanimation
Kurzes Intro wenn das Startbild lädt — kein weißer Flash
Design
Impressum & Datenschutzerklärung
Gesetzlich vorgeschriebene Seiten angelegt — Adresse noch eintragen
Inhalt
Cookie-Hinweis
DSGVO-konformer Hinweis auf technisch notwendige Cookies
Design
Favicon & robots.txt
SVG-Favicon (goldenes h), robots.txt sperrt api/, data/, config/
Tech
Adresse im Impressum eintragen
impressum.html und datenschutz.html mit echter Adresse vervollständigen
Inhalt
Google Fonts selbst hosten
Fonts lokal einbinden statt via Google CDN — verbessert Datenschutz und Ladezeit
Tech
In Arbeit Phase 3 — Erweiterte Features Mehr Tiefe & Interaktion
Unterseiten für Hotspot-Inhalte
blog.html (öffentlich) und admin.html (geschützt) als erste Unterseiten. Bücher-Hotspot zeigt Blog-Vorschau direkt im Panel.
Tech
Bild-Hover-Effekt
Spotlight-Effekt: Hover über Hotspot verdunkelt das Bild, nur der Bereich um das Objekt bleibt beleuchtet. Radius pro Objekt individuell konfigurierbar.
Design
Kontaktformular
Im „Kontakt"-Panel direkt ausfüllbar, auch über Nav-Menü erreichbar. PHP-Mailversand mit Honeypot-Spamschutz.
Tech
Admin-Panel: Blog-Editor (TinyMCE)
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.
Tech
Admin-Panel: Bild-Upload
api/upload.php — MIME-Validierung (finfo), max. 8 MB, speichert in media/uploads/. TinyMCE-Integration: Bilder direkt in den Editor laden.
Tech
Blog-System: Zeitungs-Design
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.
Design
Blog-Testseite mit Zeitungs-Hintergrund
blog_test.html — BlogZeitung.png als Vollbild-Hintergrund (wie Schreibtisch), transparente Artikel-Zonen über den Zeitungsbereichen, Spotlight-Hover, Artikel-Reader-Overlay.
Design
Hotspot-Animation: Radar-Doppelring
Leuchtender Kern mit Glow-Effekt und dot-glow-Animation, zwei konzentrische Ringe expandieren via box-shadow (Radar-Effekt). Größe von 20px auf 28px.
Design
Tageslicht-Modus
☀/🌙-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.
Design
Saisonale Bildwechsel
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.
Design
Notizen-Feature
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.
Tech
Motto des Tages
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.
Design
Profil-Links im Panel
LinkedIn (Mein Weg) und Instagram (Jetzt & Hier) im Uhr-Hotspot hinterlegt. Externe Links öffnen automatisch in neuem Tab.
Inhalt
Blog: Datum & geplante Veröffentlichung
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).
Tech
Blog: Bild als Titel
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.
Design
Blog: globales Design konfigurierbar
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.
Design
Blog: Masthead-Bild
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.
Design
Schaltbarer Zugangsschutz mit Besucher-Accounts
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.
Tech
Ambient-Sound
Optionales leises Hintergrundgeräusch (Schreibtischambiente, Regen, etc.)
Idee
Zukunft Phase 4 — Langfristig Ideen & Visionen
Easter Eggs & Highscore-System
Tastaturkombinationen (π, 42, Semper Fi) lösen Konfetti + Highscore-Modal aus. Bestenliste mit Name & Datum im Kerze-Panel. E-Mail-Benachrichtigung bei neuem Eintrag.
Feature
?
CMS-Anbindung
Panel-Inhalte über ein einfaches Backend pflegen statt direkt im JS
Tech
?
3D-Schreibtisch
Interaktive 3D-Szene statt statischem Foto — mit Three.js o.ä.
Idee
Foto-Album-System
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).
Feature
Wetter-System mit Glasscheiben-Effekten
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.
Feature