From 0fc4301b8bcfdc7fa7a93f0ffdc920679697b761 Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Thu, 25 Jun 2026 15:41:18 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Initial=20=E2=80=94=20Flask-Grundger?= =?UTF-8?q?=C3=BCst=20mit=20Startseite,=20Impressum,=20Datenschutz?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - app.py: _base_template() mit BSN-Blau Design (seriös+agil, keine Icons) - ALICIA.md: Vollständiger Bauplan (19 Routen, CRM-Formular, Coding-Standards) - .gitignore: .env, *.db, __pycache__ --- .gitignore | 9 ++ ALICIA.md | 373 +++++++++++++++++++++++++++++++++++++++++++++++++++++ app.py | 162 +++++++++++++++++++++++ 3 files changed, 544 insertions(+) create mode 100644 .gitignore create mode 100644 ALICIA.md create mode 100644 app.py diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..551e589 --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +# IT-Hilfe-Sofort.de +.env +*.db +__pycache__/ +*.pyc +.venv/ +*.bak +*.swp +.DS_Store diff --git a/ALICIA.md b/ALICIA.md new file mode 100644 index 0000000..700bd7a --- /dev/null +++ b/ALICIA.md @@ -0,0 +1,373 @@ +# IT-Hilfe-Sofort.de — Alicia Bauplan + +> **Für Alicia (Qwen 3.6, 256K Context)** +> **Stand:** 25.06.2026 +> **Repo:** `git@git.datenhimmel.work:danielkrause/it-hilfe-sofort.git` +> **Domain:** it-hilfe-sofort.de (via Cloudflare Tunnel) +> **Port:** 5003 (lokal) +> **Framework:** Flask + Inline-CSS (wie BSN-Chatsystem) +> **Design-System:** `BSN-Blau #20228a`, Off-White `#F9FAFB`, System-Fonts, Mobile-First +> **Stil:** Seriös + agil — KEINE Icons/Emojis, klare Typografie, viel Weißraum, reduzierte Farbpalette +> **Coding:** BSN Coding Standards BINDEND — Typ-Annotationen (PEP 604), deutsche Docstrings, Ruff+Mypy+Pytest + +--- + +## 📁 Projektstruktur + +``` +it-hilfe-sofort.de/ +├── app.py # Flask-App (Routing, Templates, CSS) +├── requirements.txt # flask, requests +├── .env # NICHT committen +├── .gitignore +├── it_hilfe.db # SQLite (optional: Kontakt-Formular-Speicher) +├── static/ +│ └── logo.png # IT-Hilfe-Sofort Logo +├── templates/ # (optional, sonst inline in app.py) +└── docs/ + └── alicia-aufgaben-it-hilfe.md +``` + +--- + +## Sitemap (keine Icons in Navigation/Titeln) + +| Route | Titel | Inhalt | +|---|---|---| +| `/` | Startseite | Hero, Leistungs-Übersicht, 3 Value-Props, CTA | +| `/blog/telematik-vorschriften` | Telematik-Vorschriften | Artikel zu TI, KIM, ePA | +| `/blog/dsgvo-it-sicherheit` | DSGVO & IT-Sicherheit | Datenschutz im Gesundheitswesen | +| `/blog/fachkraeftemangel` | Fachkräftemangel | IT-Lösungen gegen Personalmangel | +| `/blog/foerderung-finanzierung` | Förderung & Finanzierung | KfW, Digitalisierungszuschüsse | +| `/blog/qualitaet-pruefung` | Qualität & Prüfung | MDK, QPR, Vorbereitung | +| `/blog/praxis-tipps` | Praxis-Tipps | Konkrete How-tos | +| `/leistungen/pflegedienste` | Pflegedienste | IT-Lösungen für ambulante Pflege | +| `/leistungen/pflegeheime` | Pflegeheime | IT-Lösungen für stationäre Pflege | +| `/leistungen/tagespflegen` | Tagespflegen | IT-Lösungen für Tagespflege | +| `/it-service/hardware` | Hardware | Server, Clients, Drucker | +| `/it-service/netzwerk` | Netzwerk | WLAN, VPN, Firewall | +| `/it-service/email-kommunikation` | E-Mail & Kommunikation | Exchange, Teams, Telefonie | +| `/it-service/support-wartung` | Support & Wartung | SLA, Fernwartung, 24/7 | +| `/ueber-uns` | Über uns | Daniel Krause, Team | +| `/faq` | FAQ | Häufige Fragen | +| `/kontakt` | Kontakt | → CRM-Formular (iframe) | +| `/impressum` | Impressum | Pflicht | +| `/datenschutz` | Datenschutzerklärung | Pflicht | + +--- + +## 🎨 Design (Mobile-First, Inline-CSS, KEINE Icons) + +**Stilrichtung: Seriös + Agil** +- Keine Emojis, keine SVG-Icons, keine dekorativen Elemente +- Klare Typografie als Hauptgestaltungsmittel +- Großzügiger Weißraum, reduzierte Farbpalette +- Seriös wie eine Unternehmensberatung, agil wie ein Tech-Startup + +```css +/* Farben — zurückhaltend, professionell */ +:root { + --primary: #20228a; /* BSN-Blau — CTAs, Links */ + --primary-dark: #161e6e; /* Hover */ + --bg: #F9FAFB; /* Hintergrund */ + --card-bg: #FFFFFF; /* Karten */ + --text: #1F2937; /* Fließtext */ + --text-muted: #6B7280; /* Sekundärtext */ + --border: #E5E7EB; /* Trennlinien */ + --accent: #F3F4F6; /* Hervorhebung (hellgrau) */ +} + +/* Typografie — das Hauptgestaltungsmittel */ +font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +/* Überschriften: fett, viel Luft */ +h1 { font-size:2rem; font-weight:800; letter-spacing:-0.02em; line-height:1.2; } +h2 { font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; } +h3 { font-size:1.15rem; font-weight:600; } +/* Fließtext: großzügig */ +p { font-size:1rem; line-height:1.7; color:#374151; } + +/* Cards — clean, kein Schnickschnack */ +.card { + background:#fff; + border:1px solid #E5E7EB; /* dezente Border statt Schatten */ + border-radius:8px; + padding:2rem; +} + +/* Header: Anthrazit, zurückhaltend */ +.site-header { + background:#1F2937; + padding:1rem 1.5rem; + display:flex; + align-items:center; + justify-content:space-between; +} +.site-header .logo { + color:#F9FAFB; + font-weight:700; + font-size:1.05rem; + letter-spacing:-0.01em; + text-decoration:none; +} + +/* Navigation: Text-Links, kein Dropdown-Icon */ +.nav-link { color:#9CA3AF; text-decoration:none; font-size:0.9rem; padding:0.5rem; } +.nav-link:hover, .nav-link.active { color:#F9FAFB; } + +/* Hero: BSN-Blau, viel Luft */ +.hero { + background:linear-gradient(135deg,#20228a,#161e6e); + color:#fff; + padding:5rem 1.5rem; /* mehr Höhe = seriöser */ + text-align:center; +} +.hero h1 { font-size:2.2rem; margin-bottom:1rem; } +.hero p { color:rgba(255,255,255,0.85); font-size:1.1rem; max-width:600px; margin:0 auto; } + +/* CTA-Buttons */ +.btn-primary { + background:#20228a; + color:#fff; + border:none; + border-radius:6px; + padding:0.8rem 2rem; + font-size:0.95rem; + font-weight:600; + letter-spacing:0.01em; + cursor:pointer; + transition:background 0.2s; +} +.btn-primary:hover { background:#161e6e; } + +/* Footer: Anthrazit, aufgeräumt */ +.site-footer { + background:#1F2937; + color:#9CA3AF; + padding:3rem 1.5rem; + font-size:0.85rem; +} +.site-footer a { color:#D1D5DB; text-decoration:none; } +.site-footer a:hover { color:#F9FAFB; } + +/* Mobile Nav: Textbasiert, kein Hamburger-Icon (Wort „Menü" stattdessen) */ +.menu-toggle { + background:none; + border:none; + color:#9CA3AF; + font-size:0.9rem; + font-weight:600; + cursor:pointer; + padding:0.5rem; +} +``` + +**Wichtige Regeln:** +- ❌ Keine `svg`-Inline-Icons +- ❌ Keine Emojis in Titeln/Texten +- ❌ Keine `box-shadow`-Overdoses (max. `0 1px 3px rgba(0,0,0,0.04)`) +- ✅ Borders statt Schatten für Abgrenzung +- ✅ Typografie-Größen als Hierarchie-Mittel +- ✅ Großzügige `padding`-Werte (mind. 2rem bei Cards, 5rem bei Hero) +- ✅ Farbakzente NUR durch BSN-Blau + +--- + +## 📄 Seiten-Templates (Inhalt) + +### 🏠 Startseite `/` + +``` +Hero: „IT-Hilfe für das Gesundheitswesen" +Sub: „Sicher, schnell, spezialisiert auf Pflegeeinrichtungen." + +3 Value Props (nebeneinander, clean): + „DSGVO-konform" — Ihre Patientendaten in sicheren Händen + „24/7 Support" — Wir sind da, wenn Sie uns brauchen + „Förderfähig" — KfW-Anträge stellen wir gemeinsam + +CTA: „Beratungsgespräch vereinbaren" → /kontakt + +Sektion „Unsere Leistungen" (6 Cards, 2×3 Grid): + Pflegedienste | Pflegeheime | Tagespflegen + Hardware | Netzwerk | Support + +⚠️ KEINE Icons oder Emojis — nur Text in den Cards! +``` + +### 📝 Blog-Seiten (6 Seiten) + +Einheitliches Layout: +- Header: Titel + Datum +- Inhaltsbereich: 720px max-width, Fließtext +- Seitenleiste (Desktop) oder unten (Mobile): Weitere Blog-Artikel +- CTA am Ende: „Fragen? → /kontakt" + +**Dummy-Inhalte** (Platzhalter, 200-400 Wörter pro Seite): +1. Telematik-Vorschriften: TI-Anbindung, KIM, ePA-Pflicht ab 2026 +2. DSGVO: Auftragsverarbeitung, Bußgelder, techn.-org. Maßnahmen +3. Fachkräftemangel: Digitalisierung als Lösung, Workflow-Automation +4. Förderung: KfW 455, Digitalisierungszuschuss Pflege, Antragshilfe +5. Qualität: MDK-Prüfung, Indikatoren, IT-seitige Vorbereitung +6. Praxis-Tipps: Passwort-Manager, Backups, Phishing-Schutz + +### ⚙️ Leistungen (3 Seiten) + +Cards mit Titel + Beschreibung (KEINE Icons): +- Pflegedienste: Tourenplanung, Mobile Datenerfassung, Abrechnung +- Pflegeheime: Heimverwaltung, Biometrie, Dokumentation +- Tagespflegen: Terminbuchung, Fahrdienst, Aktivierungsangebote + +### 🔧 IT-Service (4 Seiten) + +- Hardware: Server, Thin Clients, Drucker, Beschaffung +- Netzwerk: WLAN-Ausleuchtung, VPN, Firewall, Segmentierung +- E-Mail: Microsoft 365, Exchange, Spam-Schutz, Archivierung +- Support: SLA-Stufen, Reaktionszeiten, Fernwartung, Monitoring + +### 👤 Über uns `/ueber-uns` + +- Foto (Platzhalter) +- Text: Daniel Krause, IT-Berater im Gesundheitswesen +- Werte: Transparenz, Schnelligkeit, DSGVO-Compliance + +### ❓ FAQ `/faq` + +Aufklappbare Fragen (reines HTML/CSS/JS, kein Icon). 8-10 Fragen: +1. „Wie schnell sind Sie vor Ort?" +2. „Was kostet der IT-Support?" +3. „Übernehmen Sie die komplette IT?" +4. „Wie stellen Sie DSGVO-Compliance sicher?" +5. ... + +### 📩 Kontakt `/kontakt` + +**CRM-Formular (iframe):** +```html + + +``` +Gerendert in einem Container (max-width: 720px, zentriert). + +--- + +## 🔧 Technische Umsetzung + +### app.py — Kernstruktur + +```python +#!/usr/bin/env python3 +"""IT-Hilfe-Sofort.de — Flask Webapp.""" +import os +from pathlib import Path +from flask import Flask + +# ── Config ── +BASE_DIR = Path(__file__).parent +PORT = int(os.environ.get("PORT", "5003")) +app = Flask(__name__) + +# ── Hilfsfunktionen ── +def _base_template(title: str, content: str, active: str = "") -> str: + """Wrapper für einheitliches Layout.""" + return f""" + + + + + {title} | IT-Hilfe-Sofort.de + + + +
...
+
{content}
+ + +""" + +# ── Alle Routen (wie oben definiert) ── + +if __name__ == "__main__": + app.run(host="127.0.0.1", port=PORT) +``` + +### Deployment + +- Lokal: Port 5003 +- Cloudflare Tunnel: `it-hilfe-sofort.de` → `localhost:5003` +- Start: `source .env && python3 app.py` (wie BSN-Chatsystem) + +--- + +## 📋 Aufgaben-Batches für Alicia + +### Batch 1: Grundgerüst (1 Datei) +- `app.py` anlegen mit Flask, `_base_template()`, Header/Footer +- Routen: `/`, `/impressum`, `/datenschutz` +- Design: BSN-Blau, Mobile-First, Hamburger-Menü + +### Batch 2: Blog (6 Routen) +- 6 Blog-Seiten mit Dummy-Text +- Einheitliches Blog-Layout, Seitenleiste + +### Batch 3: Leistungen + IT-Service (7 Routen) +- 3 Leistungen-Seiten, 4 IT-Service-Seiten +- Card-basiertes Layout mit Icons + +### Batch 4: Über uns + FAQ + Kontakt (3 Routen) +- FAQ mit Akkordeon-JS +- Kontakt mit CRM-iframe +- Über-uns-Seite + +### Batch 5: Deployment +- `requirements.txt`, `.gitignore` +- `cloudflared` Tunnel-Konfiguration +- Test aller 19 Routen + +--- + +## ✅ Qualitäts-Checks (vor JEDEM Commit) + +**BSN Coding Standards sind BINDEND.** Alicia muss den Skill `bsn-coding-standards` laden und einhalten: + +- **Typ-Annotationen:** Jede Funktion mit `X | None` (PEP 604), `-> None` explizit +- **Docstrings:** Deutsch, Google-Style (Args, Returns, Raises) +- **Keine Secrets** im Code (API-Keys via `.env`) +- **Max 50 Statements/Funktion** (Ruff PLR0915) +- **McCabe ≤ 10** (Ruff C901) + +```bash +# Vor JEDEM Commit: +ruff check . --fix && ruff format . && python3 -c "from app import app; client=app.test_client(); assert client.get('/').status_code==200" +``` + +- **Conventional Commits:** `feat(blog):` / `feat(leistungen):` / `fix(css):` +- **Inline-CSS** (keine separaten CSS-Dateien) +- **Mobile-First:** Touch-Targets ≥ 44px, kein Hover-only +- **BSN-Blau:** `#20228a` für CTAs und Links + +--- + +## ⚠️ Wichtige Hinweise + +1. **Startseite existiert bereits** — Daniel hat einen Entwurf. Alicia soll den integrieren/erweitern, nicht ersetzen. +2. **CRM-Formular ist Live** — das iframe-Snippet nicht verändern, nur einbetten. +3. **Dummy-Texte** mit ChatGPT-Gedächtnis schreiben (Pflege-IT-Kontext), nicht zu generisch. +4. **Navigation:** Desktop = horizontales Menü (Dropdown für Blog/Leistungen), Mobile = Hamburger + Offcanvas. +5. **Footer:** Immer Impressum + Datenschutz-Links. diff --git a/app.py b/app.py new file mode 100644 index 0000000..82c43b9 --- /dev/null +++ b/app.py @@ -0,0 +1,162 @@ +#!/usr/bin/env python3 +"""IT-Hilfe-Sofort.de — Flask-Webapp für IT-Dienstleistungen im Gesundheitswesen. + +BSN Coding Standards: Typ-Annotationen (PEP 604), deutsche Docstrings, Ruff+Mypy. +""" + +import os +from pathlib import Path + +from flask import Flask + +# ── Config ────────────────────────────────────────────────────────── +BASE_DIR = Path(__file__).parent +PORT = int(os.environ.get("PORT", "5003")) +app = Flask(__name__) + + +# ── Hilfsfunktionen ────────────────────────────────────────────────── +def _base_template(title: str, content: str, active: str = "") -> str: + """Wrapper für einheitliches Seitenlayout. + + Args: + title: Seitentitel (wird in + <h1> verwendet). + content: HTML-Inhalt der Seite. + active: Aktiver Navigationspunkt (z. B. 'blog', 'leistungen'). + + Returns: + Vollständiges HTML-Dokument als String. + """ + return f"""<!DOCTYPE html> +<html lang="de"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <title>{title} | IT-Hilfe-Sofort.de + + + +
+ + + +
+
{content}
+ + +""" + + +# ── Routen ─────────────────────────────────────────────────────────── +@app.route("/") +def index() -> str: + """Startseite.""" + content = """ +
+

IT-Hilfe für das Gesundheitswesen

+

Sicher, schnell, spezialisiert auf Pflegeeinrichtungen.

+

Beratungsgespräch vereinbaren

+
+
+

Unsere Werte

+
+
+

DSGVO-konform

+

Ihre Patientendaten in sicheren Händen — mit lückenloser Dokumentation und zertifizierten Prozessen.

+
+
+

24/7 Support

+

Wir sind da, wenn Sie uns brauchen — mit garantierter Reaktionszeit und persönlichem Ansprechpartner.

+
+
+

Förderfähig

+

KfW-Anträge stellen wir gemeinsam — digitale Infrastruktur ohne finanzielle Hürden.

+
+
+
+
+

Unsere Leistungen

+
+

Pflegedienste

Tourenplanung, mobile Datenerfassung, Abrechnung.

+

Pflegeheime

Heimverwaltung, Biometrie, Dokumentation.

+

Tagespflegen

Terminbuchung, Fahrdienst, Aktivierungsangebote.

+

Hardware

Server, Thin Clients, Drucker — Beschaffung & Einrichtung.

+

Netzwerk

WLAN-Ausleuchtung, VPN, Firewall, Netzwerksegmentierung.

+

Support

SLA-Stufen, Fernwartung, Monitoring — maßgeschneidert.

+
+
+ """ + return _base_template("Startseite", content) + + +@app.route("/impressum") +def impressum() -> str: + """Impressum.""" + content = """
+

Impressum

+

Daniel Krause
Musterstraße 1
12345 Musterstadt

+

E-Mail: info@it-hilfe-sofort.de

+
""" + return _base_template("Impressum", content) + + +@app.route("/datenschutz") +def datenschutz() -> str: + """Datenschutzerklärung.""" + content = """
+

Datenschutzerklärung

+

Platzhalter — vollständige Datenschutzerklärung folgt.

+
""" + return _base_template("Datenschutz", content) + + +# ── Main ───────────────────────────────────────────────────────────── +if __name__ == "__main__": + print(f"🚀 IT-Hilfe-Sofort.de startet auf http://127.0.0.1:{PORT}") + app.run(host="127.0.0.1", port=PORT, debug=False)