Template
NotPika69andClaude Opus 5.5
ad155124b1
- Cursor-Effekt im Hero entfernt (Messfadenkreuz, Temperatur-Skala, Maus-Wärmespur); Wärmebild läuft nur noch ruhig im Hintergrund - Preloader, Laufbänder, Intro, Ablauf-Block, Kennzahlen, Footer-CTA, kursive Akzentwörter, Verlaufstext und Nummern-Pillen entfernt - Texte in allen Abschnitten deutlich gekürzt, schlichte Überschriften - Leistungen: auf Handy/Tablet wischbare Kärtchen mit Zähler und Pfeilen - Neue, zusammenhängende Illustrationen für die fünf Leistungs-Kärtchen - Heizungs-Finder ohne Prozent-Balken, kürzere Ergebnistexte - Energie-Haus: Tabs als Wischleiste am Handy, kein Autoplay - GSAP, ScrollTrigger, SplitText, Lenis und Instrument Serif entfernt - Barrierefreiheit: Kontrast, Fokusring, Fokus im Kartenstapel, Telefon-Button mit Namen, Menü sperrt Hintergrund - Cache-Busting (?v=20261004) für CSS und JS, README aktualisiert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
92 lines
5.5 KiB
Markdown
92 lines
5.5 KiB
Markdown
# Olzinger Haustechnik – Website
|
||
|
||
Maßgeschneiderter Neuauftritt für die **Olzinger GmbH** (Heizung · Sanitär · Lüftung · Regenerative Energien, Ergolding bei Landshut, seit 1985).
|
||
|
||
Statische Website ohne Build-Schritt: HTML, CSS und JavaScript ohne Bibliotheken, Schrift lokal eingebunden (kein CDN, keine Cookies, kein Tracking).
|
||
|
||
## Gestaltungsidee: „Wärmebild“
|
||
|
||
Haustechnik sieht man nicht – man spürt sie. Deshalb zeigt der Einstieg ein ruhiges, live berechnetes **Wärmebild** (WebGL) mit Isothermen wie bei einer Thermografie-Kamera. Eine langsam wandernde Wärmequelle hält das Bild in Bewegung – ohne Maus- oder Touch-Effekte. Durch die Seite zieht sich das Motiv **warm trifft kalt** (Vorlauf/Rücklauf): Farbverlauf Blau → Magenta → Orange, das Logo als Thermostat-Skala.
|
||
|
||
Grundsatz: wenig Text, wenig Bewegung, gut bedienbar am Handy.
|
||
|
||
## Bereiche der Startseite
|
||
|
||
| Bereich | Besonderheit |
|
||
|---|---|
|
||
| Hero | Ruhiges WebGL-Wärmebild, Live-Öffnungsstatus (inkl. bayerischer Feiertage), Anfrage- und Telefon-Button |
|
||
| Leistungen | 5 Karten mit Illustrationen; am Desktop als Kartenstapel, unter 900 px wischbare Karten mit Zähler (1 / 5) und Pfeilen |
|
||
| Energie-Haus | Hausschnitt: Wärmepumpe, Solarthermie, Speicher, Fußbodenheizung, Bad, Lüftung – der gewählte Kreislauf wird hervorgehoben |
|
||
| Heizungs-Finder | 4 Fragen → Empfehlung (Wärmepumpe / Pellets / Hybrid); Ergebnis lässt sich ins Kontaktformular übernehmen |
|
||
| Über uns | Kurze Chronik 1985 → heute |
|
||
| Karriere | Ausbildung Anlagenmechaniker SHK, Initiativbewerbung |
|
||
| Kontakt | Kontaktkarten, Öffnungszeiten mit „Heute“-Markierung, Formular |
|
||
| Footer | Adresse, Kontakt, Öffnungszeiten, Links |
|
||
|
||
Außerdem: `impressum.html`, `datenschutz.html`, `404.html` („Kein Anschluss unter dieser Adresse“), SEO-Daten (Schema.org `HVACBusiness`, Open-Graph-Bild, Sitemap).
|
||
|
||
## Lokal ansehen
|
||
|
||
```bash
|
||
python3 -m http.server 8000
|
||
# dann http://localhost:8000 öffnen
|
||
```
|
||
|
||
`index.html` lässt sich auch direkt per Doppelklick öffnen; das Kontaktformular nutzt dann den E-Mail-Fallback.
|
||
|
||
## Veröffentlichen
|
||
|
||
Den kompletten Ordnerinhalt auf den Webspace laden (z. B. per FTP). Voraussetzungen:
|
||
|
||
- Beliebiger Webserver; für den direkten Formularversand **PHP 7.4+** mit funktionierender `mail()`-Funktion (`kontakt.php`).
|
||
- Ohne PHP funktioniert das Formular trotzdem: Es öffnet dann das E-Mail-Programm des Besuchers mit vorbereiteter Nachricht.
|
||
- `.htaccess` (Apache) setzt die 404-Seite, Caching und Sicherheits-Header. Bei anderen Servern einfach ignorieren.
|
||
- `404.html` nutzt absolute Pfade (`/assets/...`) – liegt die Seite in einem Unterordner, Pfade dort anpassen.
|
||
- CSS und JS werden eine Woche gecacht. Nach Änderungen an `main.css` oder den Skripten die Versionsnummer `?v=…` in allen HTML-Dateien hochzählen, damit Besucher nicht alte Dateien sehen.
|
||
|
||
## Vor dem Livegang prüfen (TODO)
|
||
|
||
Die Firmendaten stammen aus öffentlich zugänglichen Quellen. Bitte bestätigen bzw. ergänzen:
|
||
|
||
- [ ] **Impressum:** Umsatzsteuer-ID und berufsrechtliche Angaben (Kammer, Berufsbezeichnung) – als Kommentar in `impressum.html` vorbereitet.
|
||
- [ ] **Datenschutz:** Hosting-Anbieter, Speicherdauer der Server-Logs, Vertrag zur Auftragsverarbeitung – als `TODO` in `datenschutz.html` markiert. Rechtstexte sind Entwürfe und ersetzen keine Rechtsberatung.
|
||
- [ ] **Inhalte:** Mitarbeiterzahl (≈ 25), Ausbildungsstart (September), Leistungsliste, Texte zur Karriere.
|
||
- [ ] **Formular:** In `kontakt.php` Empfänger/Absender prüfen (`RECIPIENT`, `SENDER`); einmal testweise absenden.
|
||
- [ ] Optional: echte Fotos (Team, Projekte, Bäder) ergänzen – die Illustrationen sind so gestaltet, dass sie auch ohne Fotos tragen.
|
||
|
||
## Struktur
|
||
|
||
```
|
||
index.html Startseite
|
||
impressum.html Impressum
|
||
datenschutz.html Datenschutzerklärung
|
||
404.html Fehlerseite
|
||
kontakt.php Formularversand (optional, PHP)
|
||
assets/css/main.css Design-System und alle Styles
|
||
assets/js/thermal.js WebGL-Wärmebild
|
||
assets/js/main.js Navigation, mobiles Menü, Einblendungen, Leistungs-Karussell/Kartenstapel
|
||
assets/js/house.js Energie-Haus (Tabs, Hotspots)
|
||
assets/js/finder.js Heizungs-Finder (Bewertungslogik + Ergebnis)
|
||
assets/js/contact.js Öffnungszeiten live, Feiertage, Kontaktformular
|
||
assets/fonts/ Instrument Sans (OFL, lokal)
|
||
assets/img/ Favicon, Logo, Open-Graph-Bild
|
||
tools/og-template.html Vorlage zum Neu-Rendern des Open-Graph-Bilds
|
||
```
|
||
|
||
## Anpassen
|
||
|
||
- **Farben, Abstände, Schriften:** Design-Tokens am Anfang von `assets/css/main.css` (`--warm`, `--cool`, `--ink`, `--paper` …).
|
||
- **Öffnungszeiten:** in `assets/js/contact.js` (`SCHEDULE`) sowie in `index.html` (Text und Schema.org-Daten).
|
||
- **Heizungs-Finder:** Gewichtung in `assets/js/finder.js` (`evaluate`), Texte in `TEXTS`.
|
||
- **Open-Graph-Bild:** `tools/og-template.html` im Browser öffnen (über einen lokalen Server) und einen Screenshot mit 1200 × 630 px als `assets/img/og-image.jpg` speichern.
|
||
|
||
## Qualität
|
||
|
||
- Barrierefreiheit: Tastaturbedienung für Menü, Tabs, Karussell und Finder; `prefers-reduced-motion` wird respektiert (keine Einblendungen, Wärmebild als Standbild).
|
||
- Ohne JavaScript bleiben alle Texte sichtbar; Energie-Haus und Heizungs-Finder brauchen JavaScript für die Bedienung.
|
||
- Getestet in Chromium: Desktop (1024–1920 px), Tablet (768/834 px, hoch und quer) und Smartphone (360–414 px).
|
||
|
||
## Lizenzen
|
||
|
||
Instrument Sans (SIL OFL 1.1) – Lizenztext in `assets/fonts/OFL-InstrumentSans.txt`. Keine weiteren Bibliotheken.
|