← Zurück zur Homepage

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:

hebold.de/
├── index.html ← Hauptseite (Homepage)
├── handbuch.html ← Diese Datei
├── entwicklungsplan.html ← Roadmap & To-Dos
├── changelog.txt ← Versionshistorie
├── css/
│ └── style.css ← Alle Styles
├── js/
│ └── main.js ← Logik & Hotspot-Konfiguration
└── media/
├── startbild.png ← Schreibtisch-Bild
├── logo_hebold_de_f.png ← Logo (farbig)
└── logo_hebold_de_n.png ← Logo (Skizze)

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.

Wichtig: Alle Inhalte (Texte, Links, Panel-Beschreibungen) werden direkt in js/main.js gepflegt — kein Backend, kein CMS, keine Datenbank nötig.

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

ID	Objekt	Label	Position (x / y)
mac	iMac	Projekte	50% / 38%
buecher	Bücherstapel	Lesen	10% / 50%
stifte	Stiftehalter	Design	20% / 70%
uhr	Tischuhr	Über mich	65% / 64%
radio	Radio	Medien	80% / 63%
becher	CREATE-Becher	Kontakt	88% / 64%
globus	Globus	Welt	74% / 50%
kerze	Kerze	Inspiration	69% / 57%
skizze	Skizzenblock	Notizen	42% / 82%

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: '#' },
        ]
    }
},

Tipp: Um die richtige Position (x/y) zu ermitteln, öffne die Homepage im Browser, mache Rechtsklick → „Untersuchen" (DevTools), wähle das Bild aus und notiere die Mausposition relativ zur Bildgröße.

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 austauschen

Lege das neue Bild in media/ und ändere in index.html den src-Pfad des Bildes mit der ID sceneImage:

<img src="media/neues-startbild.png" id="sceneImage" ...>

Hinweis: Nach einem Bildwechsel müssen die Hotspot-Positionen (x/y-Werte in js/main.js) neu kalibriert werden, da sich die Objekte auf dem Bild verschoben haben.

CSS-Variablen (Farben & Design)

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

Variable	Wert	Verwendung
`--gold`	#c9a84c	Hotspot-Farbe, Akzente
`--gold-light`	#e8c97e	Hover-Zustände
`--panel-bg`	rgba(20,16,10,0.92)	Panel-Hintergrund
`--panel-border`	rgba(201,168,76,0.25)	Panel-Rahmen
`--text-primary`	#f0ead8	Haupttext
`--text-muted`	#a09070	Fließtext, Labels

Tastaturkürzel

Taste	Aktion
`ESC`	Geöffnetes Panel schließen

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

Datei	Was fehlt
`impressum.html`	Straße, PLZ, Ort — ggf. Telefon
`datenschutz.html`	Gleiche Adresse wie im Impressum

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/