NaymeD
176f781394
Komplette Seite in einer Datei, ohne externe Abhängigkeiten: Schriften, Logo, Wolken-SVGs und Deutschlandkarte sind eingebettet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
52 lines
2.2 KiB
Markdown
52 lines
2.2 KiB
Markdown
# MFI – Mittelfranken Informatik · Webseite
|
||
|
||
IT-Systemhaus aus Wittelshofen. Managed Services, Netzwerk, Microsoft 365, IT-Sicherheit.
|
||
|
||
## Aufbau
|
||
|
||
Die komplette Seite ist **eine einzige Datei**: `index.html`.
|
||
Alles ist darin eingebettet — es gibt bewusst keine externen Abhängigkeiten:
|
||
|
||
- **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
|
||
|
||
## Öffnen und bearbeiten
|
||
|
||
`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.
|
||
|
||
## 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). |
|
||
|
||
## Wolken-Kit
|
||
|
||
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.
|