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-shadowin:root). - Fern-Ebene = nur Silhouette (
#wk-*-b) im Dunstton, Mittel/Nah über CSS-Variablen--wk-inkop,--wk-x,--wk-heavygesteuert. - Trenner sind Wolkenbänke (
#wk-bank-d/-m/-low/-low2) mitpreserveAspectRatio="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.