Hermes Agent
0fc4301b8b
- 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__
374 lines
12 KiB
Markdown
374 lines
12 KiB
Markdown
# 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
|
||
<iframe
|
||
src="https://crm.companyhub.io/widget/form/iEDHWbU9iII32UkhXj2b"
|
||
style="width:100%;height:100%;border:none;border-radius:8px"
|
||
id="inline-iEDHWbU9iII32UkhXj2b"
|
||
data-layout="{'id':'INLINE'}"
|
||
data-trigger-type="alwaysShow"
|
||
data-activation-type="alwaysActivated"
|
||
data-deactivation-type="neverDeactivate"
|
||
data-form-name="Daniel Krause IT-Buddy.Care"
|
||
data-height="946"
|
||
data-form-id="iEDHWbU9iII32UkhXj2b"
|
||
title="Daniel Krause IT-Buddy.Care">
|
||
</iframe>
|
||
<script src="https://crm.companyhub.io/js/form_embed.js"></script>
|
||
```
|
||
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"""<!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</title>
|
||
<style>
|
||
/* ── Global Styles ── */
|
||
*,*::before,*::after{{box-sizing:border-box;margin:0;padding:0}}
|
||
body{{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#F9FAFB;color:#1F2937;line-height:1.6}}
|
||
...
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">...</header>
|
||
<main>{content}</main>
|
||
<footer class="site-footer">...</footer>
|
||
</body>
|
||
</html>"""
|
||
|
||
# ── 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.
|