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.

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:

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/