Handbuch

Alles was du wissen musst, um hebold.de zu verstehen, zu pflegen und weiterzuentwickeln. Keine technischen Vorkenntnisse nötig — die wichtigsten Dinge sind so einfach wie eine Textdatei bearbeiten.

Dateistruktur

Das Projekt besteht aus wenigen übersichtlichen Dateien:

Konzept

Die Homepage zeigt ein Vollbild-Foto eines Schreibtisches. Auf verschiedenen Objekten dieses Schreibtisches sitzen interaktive Hotspots — leuchtende Punkte, die beim Hover ihr Label zeigen. Ein Klick öffnet ein Slide-in-Panel von rechts mit weiteren Informationen und Links.

Das Bild füllt immer den gesamten Bildschirm — egal ob 4K-Monitor, Laptop oder Tablet. Die Hotspots werden rechnerisch korrekt positioniert, sodass sie auch bei anderen Auflösungen exakt auf den Objekten sitzen.

Wie funktionieren Hotspots?

Hotspots sind goldene, pulsierende Punkte auf dem Schreibtisch-Bild. Jeder Hotspot ist in der Datei js/main.js als ein Objekt im Array HOTSPOTS definiert.

Die Position wird in Prozent des Originalbildes angegeben (x von links, y von oben). Das JavaScript rechnet diese Werte bei jeder Bildschirmgröße neu in Pixel um.

Aktuelle Hotspots

Hotspot hinzufügen

Öffne js/main.js und füge im Array HOTSPOTS ein neues Objekt hinzu. Kopiere am besten einen bestehenden Eintrag und passe ihn an:

{
    id:         'stuhl',         // einmalige ID (keine Leerzeichen)
    x:          35,              // Position von links in % (0–100)
    y:          90,              // Position von oben in % (0–100)
    icon:       '🪑',            // Emoji für das Panel
    label:      'Lounge',        // Text im Hover-Label & Panel-Titel
    subtitle:   'Entspannung',   // Kleiner Text unter dem Titel
    labelBelow: false,           // true = Label erscheint unterhalb des Punktes
    content: {
        description: 'Ein Platz zum Durchatmen.',
        links: [
            { text: 'Mehr erfahren', href: '#' },
        ]
    }
},

Hotspot entfernen

Öffne js/main.js und lösche einfach das gesamte Objekt aus dem HOTSPOTS-Array — von der öffnenden geschwungenen Klammer { bis zum schließenden }, (inklusive Komma).

Position eines Hotspots anpassen

Ändere in js/main.js die x- oder y-Werte des jeweiligen Hotspot-Objekts. Speichern → Browser neu laden → fertig.

x = Abstand vom linken Bildrand (0 = ganz links, 100 = ganz rechts)
y = Abstand vom oberen Bildrand (0 = ganz oben, 100 = ganz unten)

Panel-Inhalt ändern

Jeder Hotspot hat einen content-Block mit description (Fließtext) und links (Liste).

content: {
    description: 'Dieser Text erscheint im Panel.',
    links: [
        { text: 'Link-Text',      href: 'https://...' },
        { text: 'E-Mail',          href: 'mailto:du@example.de' },
        { text: 'Interner Anker',  href: '#abschnitt' },
    ]
}

Logo austauschen

Lege die neue Logo-Datei in den Ordner media/. Dann ändere in index.html den Pfad im <img>-Tag innerhalb .logo-header:

<img src="media/neues-logo.png" alt="hebold.de" class="logo-img">

Das Logo nutzt mix-blend-mode: multiply — das bedeutet: weißer Hintergrund wird transparent, farbige/dunkle Bereiche bleiben sichtbar. Das funktioniert nur korrekt wenn das Logo einen weißen (nicht transparenten) Hintergrund hat.

Startbild & Saisonale Bildwechsel

Das Startbild wird automatisch je nach Jahreszeit gewechselt. Die Bildpfade sind in js/season.js im Objekt SEASONS konfiguriert:

const SEASONS = {
    fruehling: { img: 'media/startbild.png',        ... },
    sommer:    { img: 'media/startbild_sommer.png',  ... },
    herbst:    { img: 'media/startbild_herbst.png',  ... },
    winter:    { img: 'media/startbild_winter.png',  ... },
};

Um ein Bild zu ersetzen: neue Datei in media/ ablegen und den Pfad in js/season.js anpassen. Der Season-Picker (nach Login sichtbar) erlaubt manuelles Umschalten zwischen den vier Jahreszeiten — die Wahl gilt nur für das eigene Gerät (localStorage).

Öffentliche Blog-Seite (blog.html)

Die Blog-Seite ist unter blog.html erreichbar und zeigt alle veröffentlichten Artikel im Zeitungs-Design. Entwürfe sind nur im Admin-Bereich sichtbar.

Das Layout ordnet Artikel automatisch:

Klick auf einen Artikel öffnet den vollständigen Text im Overlay — ohne Seitenwechsel.

Artikel schreiben (admin.html)

Nur für eingeloggte Nutzer erreichbar. Den Link findet man im Header nach dem Anmelden.

Bilder im Editor

TinyMCE bietet drei Wege für Bilder:

Hochgeladene Bilder liegen in media/uploads/ auf dem Server. Erlaubte Formate: JPG, PNG, GIF, WebP. Maximalgröße: 8 MB.

Reisen & Bilder — Album-Übersicht

Die Seite fotos.html zeigt alle veröffentlichten Foto-Alben im Zeitungs-Stil. Das neueste Album erscheint groß (featured), die weiteren als gleichmäßiges Karten-Raster. Ein Klick öffnet das Album direkt — die URL wechselt auf fotos.html#album-id, sodass Browser-Zurück funktioniert.

Erreichbar über:

• Nav-Menü auf jeder Seite (Link „Reisen")
• Hotspot „Reisen" (Globus) auf der Startseite → Panel mit 3 Thumbnail-Vorschau
• Blog-Navigation oben

Album anlegen & verwalten

1. admin.html öffnen → Tab „Reisen"
2. „+ Neu" klicken
3. Felder ausfüllen:
   • Titel — Pflichtfeld, erscheint als Hauptüberschrift
   • Ort · Datum — z. B. „Mallorca · März 2026", erscheint als Badge und Unterzeile
   • Einleitungstext — 1–3 Sätze, erscheinen als Intro über dem Foto-Grid
   • Datum (Sortierung) — optional; überschreibt die automatische Sortierung (siehe unten)
   • Themen-Tags — optional; kommagetrennte Schlagwörter für den Tag-Filter
4. Titelbild hochladen — erscheint als Hero (Vollbild)
5. Fotos hochladen — Mehrfachauswahl möglich; pro Foto:
   • Bildunterschrift — erscheint beim Hover und in der Lightbox
   • Größe — bestimmt wie viel Platz das Bild im Grid einnimmt (siehe unten)
6. Status auf „Veröffentlicht" setzen → Speichern

Layouts, Größen & Optionen

Layout — wählbar pro Album:

Bildgrößen im Grid (CSS Grid Spans):

Weitere Optionen:

Diese Optionen sind auf fotos.html auch für Besucher umschaltbar (Leiste unter dem Zurück-Button). Im Admin wird der Default-Wert für das Album gesetzt.

Datum, Tags & Blog-Integration

Datum (Sortierung)

Alben werden standardmäßig nach ihrem Erstellungsdatum sortiert — neueste zuerst. Mit dem Feld „Datum (Sortierung)" kann dieses Datum überschrieben werden, z. B. um einen alten Urlaub ans richtige Ende der Zeitlinie zu setzen.

Themen-Tags

Tags ermöglichen es, thematisch zusammengehörende Alben zu bündeln — z. B. Gardasee, Portrait oder München. Besucher sehen auf fotos.html eine Filter-Leiste und können auf einen Tag klicken, um nur die passenden Alben anzuzeigen.

• Tags im Admin im Feld „Themen-Tags" eingeben — Enter oder Komma bestätigt einen Tag
• Goldene Chip-Buttons erscheinen, einzeln löschbar per ×
• Tag-Filter auf fotos.html erscheint automatisch, sobald mindestens ein Album Tags hat
• „Alle" setzt den Filter zurück

Album im Blog anzeigen

Mit der Checkbox „Im Blog anzeigen" (in den Optionen des Album-Editors) erscheint das Album auf blog.html als Karte, nach Datum eingemischt zwischen regulären Blog-Artikeln.

• Kicker: „📷 Reisen & Bilder"
• Zeigt Titelbild, Titel, Untertitel, Beschreibung und Bildanzahl
• Klick öffnet direkt fotos.html#album-id — kein Blog-Overlay
• „In dieser Ausgabe"-Leiste listet Album-Einträge mit 📷-Prefix

Album-Sichtbarkeit & Gruppen

Jedes Album kann individuell gesteuert werden — wer es sehen darf. Die Einstellung findet sich im Admin-Tab „Reisen" im Bereich Sichtbarkeit.

Gruppen anlegen und befüllen:

1. admin.html → Tab „Reisen"
2. Sidebar: Bereich „Gruppen verwalten" aufklappen
3. Gruppenname eingeben (z. B. „Familie" oder „Freunde") → Anlegen
4. Auf das Stift-Symbol ✎ klicken → Besucher-Accounts anhaken → Speichern

Album für Gruppen/Personen freischalten:

1. Album in der Sidebar anklicken
2. Sichtbarkeit auf „Ausgewählt" setzen
3. Gewünschte Gruppen und/oder Einzelpersonen anhaken
4. Speichern

Wetter-Widget

Das Wetter-Widget erscheint unten links auf der Startseite. Es zeigt die aktuelle Temperatur, Wetterlage und Windgeschwindigkeit für Nürnberg. Ein Klick auf das Widget klappt eine 7-Tage-Vorschau auf.

• Daten: Open-Meteo API — kostenlos, kein API-Key nötig
• Standort fest auf Nürnberg (49.4521 / 11.0767) — nicht konfigurierbar
• Widget aktualisiert sich beim Seitenaufruf automatisch

Wettereffekte auf dem Startbild

Je nach aktuellem Wetter erscheinen animierte Effekte auf dem Startbild. Zwei Canvas-Ebenen liegen über dem Bild:

Effekte nach WMO-Wettercode:

Zum Testen aller Effekte: weather_mockup.html öffnen — dort lassen sich alle Wettereffekte per Knopfdruck durchschalten.

Zugangsschutz aktivieren

Die gesamte Homepage kann hinter eine Anmeldeschranke gelegt werden — schaltbar per Toggle im Admin-Panel. Wenn aktiv, werden nicht angemeldete Besucher automatisch zur Anmeldeseite (login.html) weitergeleitet. Ohne Anmeldung ist nichts sichtbar.

1. admin.html öffnen → Tab „Zugang"
2. Schalter „Zugangsschutz aktiv/inaktiv" umlegen → sofort wirksam

Besucher-Accounts anlegen

Besucher-Accounts ermöglichen es, bestimmten Personen Zugang zur Seite zu geben, ohne ihnen Admin-Rechte zu erteilen. Jede Anmeldung wird protokolliert.

1. admin.html → Tab „Zugang" → Abschnitt „Besucher-Accounts"
2. Benutzername, Anzeigename und Passwort eingeben → „+ Hinzufügen"
3. Zugangsdaten an die Person weitergeben

Besucher-Accounts haben keinen Zugriff auf admin.html, handbuch.html oder entwicklungsplan.html. Passwort zurücksetzen und Account löschen ist jederzeit im gleichen Tab möglich.

Zugriffsprotokoll

Jede erfolgreiche Anmeldung — egal ob Admin oder Besucher — wird automatisch in data/access_log.json protokolliert.

Das Protokoll zeigt:

• Nutzername & Anzeigename
• Rolle (admin / viewer)
• Datum und Uhrzeit der Anmeldung
• IP-Adresse des Besuchers

Einsehbar unter admin.html → Zugang → Zugriffsprotokoll. Das Protokoll kann dort auch geleert werden. Es werden maximal 500 Einträge gespeichert (älteste werden automatisch verworfen).

Auf einem neuen Rechner einrichten

Das gesamte Projekt steckt in einem einzigen Ordner — einfach kopieren. Die statischen Seiten (index.html, blog.html etc.) funktionieren sofort im Browser ohne weitere Software. Für das Blog-Backend (Artikel laden, Bilder hochladen, Login) ist ein lokaler PHP-Server nötig.

Variante A — Nur anschauen (kein PHP)

Ordner kopieren → index.html im Browser öffnen. Alles außer dem Blog-Backend funktioniert. Blog-Artikel sind lokal nicht sichtbar (kein PHP), der Rest der Seite schon.

Variante B — Vollständig lokal (mit PHP)

Lokalen PHP-Server installieren, z.B.:

Projektordner in das Web-Root legen (z.B. C:\laragon\www\hebold.de\) → im Browser http://localhost/hebold.de/ aufrufen.

Dateien auf den Server laden (Strato)

Alle Dateien aus dem Projektordner per FTP oder Strato-Dateimanager hochladen. Folgende Verzeichnisse müssen auf dem Server schreibbar sein:

Wichtig für Strato: Die Datei .user.ini muss im Wurzelverzeichnis liegen (nicht löschen). Sie setzt PHP-Session-Sicherheitsoptionen für Strato's FastCGI-Betrieb. PHP-Einstellungen dürfen bei Strato nicht in .htaccess stehen.

Ersteinrichtung nach dem Upload

Nach dem ersten Server-Upload einmalig ausführen:

CSS-Variablen (Farben & Design)

Alle Designfarben sind in css/style.css als Variablen am Anfang der Datei definiert:

Easter Eggs & Highscores

Auf der Startseite sind versteckte Tastaturkombinationen eingebaut. Wer eine Kombination eintippt (ohne Fokus in einem Eingabefeld), löst das Easter Egg aus: Konfetti-Regen, ein Modal zum Namenseintrag und eine E-Mail-Benachrichtigung. Die Bestenliste ist über den Kerze-Hotspot 🏆 erreichbar.

Einträge werden in data/highscores.json gespeichert. Bei jedem neuen Eintrag geht eine E-Mail an sascha.nutzt@gmx.net.

Neues Easter Egg hinzufügen

Zwei Stellen müssen angepasst werden:

1. js/easter_eggs.js — Eintrag in window.EASTER_EGGS ergänzen:

{
    id:       'meincode',          // eindeutige ID (nur Kleinbuchstaben/Zahlen)
    label:    'Mein Highscore',    // Anzeigename im Panel und Modal
    icon:     '⭐',                // Emoji für die Karte
    hint:     'Ein rätselhafter Hinweis.', // sichtbar im Panel — kein Lösungshinweis!
    sequence: ['h','e','l','l','o'],  // Buchstaben/Zeichen nacheinander tippen
},

2. api/highscores.php — ID in die Whitelist eintragen:

$validCodes = ['pi', '42', 'semperfi', 'meincode'];

Tastaturkürzel

Impressum & Datenschutz

Beide Seiten liegen als eigenständige HTML-Dateien vor und sind im Footer der Homepage verlinkt. Vor dem Launch bitte ausfüllen:

Was noch eingetragen werden muss

Cookie-Hinweis

Der Cookie-Hinweis erscheint beim ersten Besuch als schmale Leiste. Nach Klick auf „OK" wird er via localStorage dauerhaft weggeklickt. Er enthält einen Link zur Datenschutzerklärung.

Da ausschließlich technisch notwendige Cookies (PHP-Session nach Login) und Google Fonts verwendet werden, ist keine aktive Einwilligung erforderlich — der Hinweis reicht aus.

Favicon & robots.txt

Favicon

Das Favicon (favicon.svg) zeigt ein goldenes „h" auf dunklem Grund. Es wird in alle HTML-Dateien über folgenden Tag eingebunden:

<link rel="icon" type="image/svg+xml" href="favicon.svg">

Für bessere Browser-Kompatibilität empfiehlt sich zusätzlich eine favicon.ico Datei (32×32px) — z.B. mit realfavicongenerator.net erstellen.

robots.txt

Die robots.txt im Wurzelverzeichnis sperrt Suchmaschinen aus den internen Ordnern aus:

Disallow: /api/
Disallow: /data/
Disallow: /config/