Website-Entwurf für HEB Bauelemente (normtor.de)

Akquise-Demo mit Startseite (Tor-Intro, 24-h-Renovierung mit Uhr, Über uns, Fachbetrieb statt Discount), Galerie mit Filter und Großansicht, Kontaktseite mit Anfrageformular sowie Impressum- und Datenschutz-Entwürfen. Statisches HTML/CSS/JS, Seiten und Bilder werden über tools/ erzeugt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 22:52:10 +02:00
commit bec24e5bbc
@@ -0,0 +1,62 @@
+# HEB Bauelemente (normtor.de) — Website-Entwurf
+
+Akquise-Demo für **HEB Bauelemente, Wolfgang Haas** (Essenbach-Mirskofen): Normstahl-Garagentore,
+Sommer-Antriebe, Reparatur und Garagen-Renovierung in 24 Stunden. Die alte Seite `normtor.de` läuft auf
+WebsiteBaker (Stand 2022). Statisches HTML/CSS/JS, keine Bibliotheken, kein Cookie-Banner, keine Fremdanfragen.
+
+| Datei | Seite |
+|---|---|
+| `index.html` | Start (Tor-Intro, Vertrauensleiste, Leistungen, 24-h-Renovierung mit Uhr, Projekt-Streifen, Über uns, Fachbetrieb statt Discount, Partner) |
+| `projekte.html` | Galerie „Tore & Projekte“ mit Filter und Großansicht (27 Fotos) |
+| `kontakt.html` | Telefon, Adresse, Anfrageformular (im Entwurf ohne Versand) |
+| `impressum.html`, `datenschutz.html` | Rechtstexte (Entwürfe, offene Punkte rot markiert) |
+| `assets/site.css` | Tokens und alle Komponenten |
+| `assets/site.js` | Intro, Navigation, Einblendungen, 24-h-Uhr, Galerie, Formular |
+| `tools/build_pages.py` | **Quelle der Seiten** — Inhalte hier ändern, dann neu erzeugen |
+| `tools/build_images.py` | Fotos aus `tools/orig/` → `assets/img/` (AVIF + WebP, 800/1200 px) |
+
+Design-Entscheidungen und Tokens: [`DESIGN.md`](DESIGN.md).
+
+## Lokal ansehen
+
+```bash
+python3 -m http.server 4175
+```
+
+Dann http://localhost:4175 öffnen. Das Tor-Intro läuft nur einmal pro Browser-Sitzung
+(zum erneuten Ansehen: Tab schließen oder `sessionStorage.clear()` in der Konsole).
+
+## Seiten ändern
+
+```bash
+python3 tools/build_pages.py
+```
+
+Neue Fotos: in `tools/orig/` ablegen, in `tools/build_images.py` unter `IMAGES` eintragen,
+`python3 tools/build_images.py` laufen lassen und das Bild in `GALLERY` in `build_pages.py` aufnehmen.
+
+## Entwurfsmodus
+
+`DEMO = True` in `build_pages.py` setzt `noindex` und einen Hinweis ins Formular; `robots.txt` sperrt alles.
+Vor dem Launch: `DEMO = False`, `robots.txt` öffnen, Sitemap ergänzen.
+
+## Was für den Launch noch fehlt
+
+1. **Formularversand.** Das Formular verschickt nichts. Beim Hoster einen PHP-Mailer anschließen
+   (Muster: `Olzinger/kontakt.php`).
+2. **E-Mail-Adresse im Impressum.** Die alte Seite nennt nur das Kontaktformular — § 5 DDG verlangt
+   eine direkte E-Mail-Adresse.
+3. **Datenschutz:** Hoster, AV-Vertrag, Logfile-Speicherdauer, Formularversand eintragen (rot markiert).
+   Beide Rechtstexte sind Entwürfe — juristisch prüfen lassen.
+4. **Logo als Vektor.** Das HEB-Zeichen ist aus dem 200-px-Rasterlogo nachgezeichnet, ohne die kleinen
+   Schriftzüge „Haas“/„Essenbach“. Original anfragen.
+
+### Vom Kunden zu klären
+
+- **Fotos:** Die Header-Bilder der alten Seite haben nur 640×300 px und werden nicht verwendet. Der Hero
+  nutzt ein Normstahl-Modellbild. Bessere eigene Fotos (Tore im Einsatz, Team, Fahrzeug) würden stärker wirken.
+- **Herstellerbilder** (Smart, Superior, Seitensektionaltore): Nutzungsrecht als Fachhändler bestätigen.
+- **Partnerlogos** von Normstahl/Sommer: derzeit nur als Text, Logos nach Freigabe einbauen.
+- **Sommer-Zertifikat** von der alten Seite einbinden? (Vertrauensleiste nennt „Sommer-Servicepartner“.)
+- **Öffnungszeiten** gibt es auf der alten Seite nicht — würden Kontaktseite und Google-Eintrag stärken.
+- **Aktion/Flyer** (Smart-Tor zum Aktionspreis, Stand 2022) ist veraltet und wurde nicht übernommen.