Neuer Stand aus website-mfi uebernommen: Wolkensystem Stich, Wolkenreich-Uebergaenge, Daemmerung vor dem Footer, SEO/DSGVO-Fixes
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+56
-38
@@ -1,51 +1,69 @@
|
||||
# MFI – Mittelfranken Informatik · Webseite
|
||||
# MFI – Mittelfranken Informatik: Website
|
||||
|
||||
IT-Systemhaus aus Wittelshofen. Managed Services, Netzwerk, Microsoft 365, IT-Sicherheit.
|
||||
Statische Website, reines HTML/CSS/JavaScript – kein Framework, kein
|
||||
Build-Step, läuft auf jedem einfachen Webhoster per Datei-Upload.
|
||||
|
||||
## Aufbau
|
||||
Die **Startseite ist eine einzige, eigenständige `index.html`**: Schriften
|
||||
(New Rocker, IM Fell English, Stack Sans Headline, IBM Plex Mono), Logo und
|
||||
alle Grafiken sind eingebettet. Keine externen Requests, kein CDN, keine
|
||||
Tracker – DSGVO-sauber per Konstruktion.
|
||||
|
||||
Die komplette Seite ist **eine einzige Datei**: `index.html`.
|
||||
Alles ist darin eingebettet — es gibt bewusst keine externen Abhängigkeiten:
|
||||
## Lokal öffnen
|
||||
|
||||
- **Schriften** (New Rocker, IM Fell English, IBM Plex Mono, Stack Sans Headline)
|
||||
als WOFF2 im CSS eingebettet, kein Google-Fonts-Aufruf
|
||||
- **Logo** als PNG mit Transparenz eingebettet
|
||||
- **Wolken** als Inline-SVG (Kupferstich-Kit, siehe unten)
|
||||
- **Deutschlandkarte** als Inline-SVG mit allen 16 Bundesländern
|
||||
- **JavaScript** inline, kein Framework
|
||||
`index.html` im Browser öffnen. Für eine realistischere Vorschau:
|
||||
|
||||
## Öffnen und bearbeiten
|
||||
```
|
||||
python -m http.server 8000
|
||||
```
|
||||
|
||||
`index.html` im Browser öffnen — das ist die Vorschau. Zum Bearbeiten die Datei
|
||||
in einem Editor öffnen. Kein Build-Schritt, kein `npm install`, kein Server nötig.
|
||||
und `http://localhost:8000` aufrufen.
|
||||
|
||||
## Struktur
|
||||
|
||||
```
|
||||
index.html Startseite (eigenständig, alles inline)
|
||||
impressum.html Impressum – ACHTUNG: noch Platzhalterdaten!
|
||||
datenschutz.html Datenschutz – ACHTUNG: noch Platzhalterdaten!
|
||||
robots.txt
|
||||
sitemap.xml
|
||||
css/style.css Stylesheet der Rechtsseiten
|
||||
js/main.js Menü/Reveal der Rechtsseiten
|
||||
img/mfi-logo.png Logo als Datei (OG-Bild, Apple-Touch-Icon)
|
||||
DESIGN_NOTES.md Tokens, Wolken-Spezifikation, Entscheidungsprotokoll
|
||||
```
|
||||
|
||||
Die früheren Platzhalter-Unterseiten (leistungen/ueber-uns/kontakt) wurden
|
||||
entfernt; ihre Inhalte deckt die Startseite ab. Die Navigationen der
|
||||
Rechtsseiten zeigen auf die Anker der Startseite.
|
||||
|
||||
## Wolkensystem „Stich"
|
||||
|
||||
Die Wolken sind handgesetzte Inline-SVGs im Sprite `<svg class="wk-defs">`
|
||||
oben im `<body>` (Details in `DESIGN_NOTES.md`). Kurzregeln:
|
||||
|
||||
- Licht kommt **immer von oben links** – Wolken nie vertikal spiegeln.
|
||||
- Flache Basis, unregelmäßiges Oberteil; kein Reinweiß (`--wk-paper`,
|
||||
`--wk-ink`, `--wk-shadow` in `:root`).
|
||||
- Fern-Ebene = nur Silhouette (`#wk-*-b`) im Dunstton, Mittel/Nah über
|
||||
CSS-Variablen `--wk-inkop`, `--wk-x`, `--wk-heavy` gesteuert.
|
||||
- Trenner sind Wolkenbänke (`#wk-bank-d/-m/-low/-low2`) mit
|
||||
`preserveAspectRatio="xMidYMax slice"` – sie beschneiden, statt zu
|
||||
quetschen; unter 700 px greift die eigene Mobilbank.
|
||||
- Keine Wolke darf Text überdecken (Deko liegt auf z-index 0, Inhalt auf 2).
|
||||
|
||||
## Interaktive Elemente
|
||||
|
||||
| Element | Verhalten |
|
||||
|---|---|
|
||||
| Deutschlandkarte (Abschnitt Standort) | Hover über Mittelfranken färbt die Region; Klick zoomt hinein und zeigt den Büro-Pin. Klick auf den Pin öffnet die Adresskarte mit Route. |
|
||||
| Schritt-Pfad 1–2–3 (Abschnitt Ablauf) | Easter Egg: mit der Maus darüberfahren lässt die Schritte orange/gelb/grün aufleuchten. Auf Touch per Tap. |
|
||||
| Leistungs- und Sicherheitskarten | Klick klappt Detailtext auf. |
|
||||
| Wolken | Schweben dauerhaft (langsamer Drift + Auf/Ab). |
|
||||
| Kopfzeile | Farbton folgt der Tageszeit beim Scrollen (`--head-bg`), Höhe in `--header-h` |
|
||||
| Systemwetter | Statuskarte im Hero (Signature-Moment) |
|
||||
| Deutschlandkarte | Mittelfranken klicken → Zoom, Pin → Bürokarte, „Route planen" |
|
||||
| Ablauf 1-2-3 | Easter Egg: leuchtet beim Überfahren mit der Maus |
|
||||
| Anfrage | Formular baut eine E-Mail und öffnet das Mailprogramm (kein Server nötig) |
|
||||
|
||||
## Wolken-Kit
|
||||
## Noch offen (vor Livegang zwingend)
|
||||
|
||||
Die Wolken kommen aus `wolken-kit.html` (Kupferstich-Stil). Beim Bearbeiten gilt:
|
||||
|
||||
- **Kein** `preserveAspectRatio` auf den Wolken-SVGs setzen
|
||||
- viewBox `0 0 300 150` (freie Wolke) bzw. `0 0 1440 104` (Band) nicht ändern
|
||||
- `.cl-base` bekommt keine Kontur
|
||||
- Die Wolken-IDs existieren genau einmal pro Seite und werden geteilt — nicht umbenennen
|
||||
- Animiert werden nur die Wrapper `.cl-drift` / `.cl-bob` / `.cl-bobb`
|
||||
|
||||
## Noch offen
|
||||
|
||||
- **Telefonnummer und E-Mail sind Platzhalter** (`hallo@mfi-mittelfranken.de`, `0911 000 000`)
|
||||
und müssen vor dem Livegang ersetzt werden. Beide stehen im Footer-Abschnitt.
|
||||
- Impressum und Datenschutz fehlen noch (in Deutschland Pflicht).
|
||||
|
||||
## Barrierefreiheit
|
||||
|
||||
Alle Texte erfüllen WCAG AA im Kontrast (geprüft gegen den Himmelverlauf),
|
||||
Tastaturbedienung und sichtbarer Fokus sind vorhanden, `prefers-reduced-motion`
|
||||
schaltet alle Animationen ab.
|
||||
- **Telefon und E-Mail sind Platzhalter** (`0911 000 000`, `hallo@mfi-mittelfranken.de`).
|
||||
- **Impressum und Datenschutzerklärung enthalten `[PLATZHALTER: …]`** – Name,
|
||||
Anschrift, USt-IdNr., Gesellschafter fehlen. In Deutschland Pflicht.
|
||||
- OG-Bild ist derzeit das Logo; ein echtes 1200×630-Bild wäre besser.
|
||||
|
||||
Reference in New Issue
Block a user