70 lines
2.8 KiB
Markdown
70 lines
2.8 KiB
Markdown
# MFI – Mittelfranken Informatik: Website
|
||
|
||
Statische Website, reines HTML/CSS/JavaScript – kein Framework, kein
|
||
Build-Step, läuft auf jedem einfachen Webhoster per Datei-Upload.
|
||
|
||
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.
|
||
|
||
## Lokal öffnen
|
||
|
||
`index.html` im Browser öffnen. Für eine realistischere Vorschau:
|
||
|
||
```
|
||
python -m http.server 8000
|
||
```
|
||
|
||
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 |
|
||
|---|---|
|
||
| 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) |
|
||
|
||
## Noch offen (vor Livegang zwingend)
|
||
|
||
- **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.
|