danielkrause/BSN-Chatsystem
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9e939c37759e4cb8972b1c14f66b6079d58eb689
BSN-Chatsystem/docs/it-hilfe-sofort-bauplan.md
T
Hermes Agent 9e939c3775
Quality Gate / 🛡️ Lint + Type Check + Tests (push) Failing after 12m3s
Details
docs: IT-Hilfe-Sofort.de Bauplan (19 Routen, Design, CRM-Formular)
2026-06-25 15:33:37 +02:00

9.1 KiB
Raw Blame History

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

📁 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

🗺️ Routen-Plan (alle als Flask-Routen in app.py)

Route Titel Inhalt
/ 🏠 Startseite Hero, Leistungs-Übersicht, 3 USPs, 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)

/* Farben */
:root {
  --bsn-blau: #20228a;
  --bg: #F9FAFB;
  --card-bg: #FFFFFF;
  --text: #1F2937;
  --text-muted: #6B7280;
  --border: #E5E7EB;
}

/* Typografie */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Header: Anthrazit mit Logo + Nav */
.site-header { background:#1F2937; padding:1rem; }
.site-header .logo { color:#F9FAFB; font-weight:800; font-size:1.1rem; }

/* Hero: BSN-Blau Gradient */
.hero { background:linear-gradient(135deg,#20228a,#161e6e); color:#fff; padding:3rem 1.5rem; }

/* Cards: Weiß, leichter Schatten, 12px Border-Radius */
.card { background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.04); }

/* CTA-Buttons */
.btn-primary { background:#20228a; color:#fff; border:none; border-radius:8px; padding:0.8rem 1.5rem; }
.btn-primary:hover { background:#161e6e; }

/* Mobile Nav: Hamburger + Offcanvas (wie BSN-Chatsystem) */
/* Footer: Anthrazit */
.site-footer { background:#1F2937; color:#9CA3AF; padding:2rem 1.5rem; }

📄 Seiten-Templates (Inhalt)

🏠 Startseite /

Hero: „IT-Hilfe für das Gesundheitswesen — einfach, sicher, sofort."
Sub: „Spezialisiert auf Pflegedienste, Heime & Tagespflegen."

3 Cards:
  🛡️ „DSGVO-konform" — Ihre Patientendaten sicher
  ⚡ „Sofort-Hilfe" — 24/7 Support-Hotline
  💰 „Förderfähig" — Wir helfen bei KfW-Anträgen

CTA: „Jetzt Beratungsgespräch vereinbaren" → /kontakt

Sektion „Unsere Leistungen" (6 Cards: je 3 Pflege + 3 IT)

📝 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 Icon + Beschreibung:

  • 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

Akkordeon-Komponente (JS inline). 8-10 Fragen:

  1. „Wie schnell seid ihr vor Ort?"
  2. „Was kostet der IT-Support?"
  3. „Übernehmt ihr die komplette IT?"
  4. „Seid ihr DSGVO-zertifiziert?"
  5. ...

📩 Kontakt /kontakt

CRM-Formular (iframe):

<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

#!/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)

ruff check app.py --fix && ruff format app.py
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.
Reference in New Issue View Git Blame Copy Permalink