feat: Initial — Flask-Grundgerüst mit Startseite, Impressum, Datenschutz
- 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__
This commit is contained in:
Hermes Agent
@@ -0,0 +1,9 @@
|
|||||||
|
# IT-Hilfe-Sofort.de
|
||||||
|
.env
|
||||||
|
*.db
|
||||||
|
__pycache__/
|
||||||
|
*.pyc
|
||||||
|
.venv/
|
||||||
|
*.bak
|
||||||
|
*.swp
|
||||||
|
.DS_Store
|
||||||
@@ -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
|
||||||
|
<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.
|
||||||
@@ -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 <title> + <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</title>
|
||||||
|
<style>
|
||||||
|
*,*::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}}
|
||||||
|
/* Header */
|
||||||
|
.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}}
|
||||||
|
.nav-link{{color:#9CA3AF;text-decoration:none;font-size:0.9rem;padding:0.5rem}}
|
||||||
|
.nav-link:hover,.nav-link.active{{color:#F9FAFB}}
|
||||||
|
.menu-toggle{{background:none;border:none;color:#9CA3AF;font-size:0.9rem;font-weight:600;cursor:pointer;padding:0.5rem}}
|
||||||
|
/* Hero */
|
||||||
|
.hero{{background:linear-gradient(135deg,#20228a,#161e6e);color:#fff;padding:5rem 1.5rem;text-align:center}}
|
||||||
|
.hero h1{{font-size:2.2rem;font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin-bottom:1rem}}
|
||||||
|
.hero p{{color:rgba(255,255,255,0.85);font-size:1.1rem;max-width:600px;margin:0 auto}}
|
||||||
|
/* Cards */
|
||||||
|
.card{{background:#fff;border:1px solid #E5E7EB;border-radius:8px;padding:2rem}}
|
||||||
|
.card h2{{font-size:1.5rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.5rem}}
|
||||||
|
.card p{{font-size:1rem;line-height:1.7;color:#374151}}
|
||||||
|
.card-grid{{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:1100px;margin:0 auto;padding:0 1.5rem}}
|
||||||
|
@media(min-width:768px){{.card-grid{{grid-template-columns:repeat(3,1fr)}}}}
|
||||||
|
/* Buttons */
|
||||||
|
.btn-primary{{display:inline-block;background:#20228a;color:#fff;border:none;border-radius:6px;padding:0.8rem 2rem;font-size:0.95rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background 0.2s}}
|
||||||
|
.btn-primary:hover{{background:#161e6e}}
|
||||||
|
/* Content */
|
||||||
|
.content{{max-width:720px;margin:2rem auto;padding:0 1.5rem}}
|
||||||
|
.content h1{{font-size:2rem;font-weight:800;margin-bottom:1rem}}
|
||||||
|
.content h2{{font-size:1.5rem;font-weight:700;margin:2rem 0 1rem}}
|
||||||
|
.content p{{margin-bottom:1rem;line-height:1.7}}
|
||||||
|
/* Footer */
|
||||||
|
.site-footer{{background:#1F2937;color:#9CA3AF;padding:3rem 1.5rem;font-size:0.85rem;text-align:center}}
|
||||||
|
.site-footer a{{color:#D1D5DB;text-decoration:none;margin:0 0.5rem}}
|
||||||
|
.site-footer a:hover{{color:#F9FAFB}}
|
||||||
|
/* Section */
|
||||||
|
.section{{padding:4rem 1.5rem}}
|
||||||
|
.section h2{{font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:2rem}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
|
<a href="/" class="logo">IT-Hilfe-Sofort.de</a>
|
||||||
|
<nav id="mainNav" style="display:flex;align-items:center;gap:0.5rem">
|
||||||
|
<a href="/blog/telematik-vorschriften" class="nav-link{' active' if active=='blog' else ''}">Blog</a>
|
||||||
|
<a href="/leistungen/pflegedienste" class="nav-link{' active' if active=='leistungen' else ''}">Leistungen</a>
|
||||||
|
<a href="/it-service/hardware" class="nav-link{' active' if active=='it-service' else ''}">IT-Service</a>
|
||||||
|
<a href="/ueber-uns" class="nav-link{' active' if active=='ueber-uns' else ''}">Über uns</a>
|
||||||
|
<a href="/kontakt" class="btn-primary" style="padding:0.5rem 1.2rem;font-size:0.85rem">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
<button class="menu-toggle" id="menuToggle" onclick="document.getElementById('mainNav').classList.toggle('open')">Menü</button>
|
||||||
|
</header>
|
||||||
|
<main>{content}</main>
|
||||||
|
<footer class="site-footer">
|
||||||
|
<p>IT-Hilfe-Sofort.de — Spezialisiert auf Pflegeeinrichtungen</p>
|
||||||
|
<p style="margin-top:0.5rem">
|
||||||
|
<a href="/impressum">Impressum</a>
|
||||||
|
<a href="/datenschutz">Datenschutz</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>"""
|
||||||
|
|
||||||
|
|
||||||
|
# ── Routen ───────────────────────────────────────────────────────────
|
||||||
|
@app.route("/")
|
||||||
|
def index() -> str:
|
||||||
|
"""Startseite."""
|
||||||
|
content = """
|
||||||
|
<section class="hero">
|
||||||
|
<h1>IT-Hilfe für das Gesundheitswesen</h1>
|
||||||
|
<p>Sicher, schnell, spezialisiert auf Pflegeeinrichtungen.</p>
|
||||||
|
<p style="margin-top:2rem"><a href="/kontakt" class="btn-primary">Beratungsgespräch vereinbaren</a></p>
|
||||||
|
</section>
|
||||||
|
<section class="section">
|
||||||
|
<h2>Unsere Werte</h2>
|
||||||
|
<div class="card-grid">
|
||||||
|
<div class="card">
|
||||||
|
<h2>DSGVO-konform</h2>
|
||||||
|
<p>Ihre Patientendaten in sicheren Händen — mit lückenloser Dokumentation und zertifizierten Prozessen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2>24/7 Support</h2>
|
||||||
|
<p>Wir sind da, wenn Sie uns brauchen — mit garantierter Reaktionszeit und persönlichem Ansprechpartner.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2>Förderfähig</h2>
|
||||||
|
<p>KfW-Anträge stellen wir gemeinsam — digitale Infrastruktur ohne finanzielle Hürden.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section" style="background:#fff">
|
||||||
|
<h2>Unsere Leistungen</h2>
|
||||||
|
<div class="card-grid">
|
||||||
|
<div class="card"><h2>Pflegedienste</h2><p>Tourenplanung, mobile Datenerfassung, Abrechnung.</p></div>
|
||||||
|
<div class="card"><h2>Pflegeheime</h2><p>Heimverwaltung, Biometrie, Dokumentation.</p></div>
|
||||||
|
<div class="card"><h2>Tagespflegen</h2><p>Terminbuchung, Fahrdienst, Aktivierungsangebote.</p></div>
|
||||||
|
<div class="card"><h2>Hardware</h2><p>Server, Thin Clients, Drucker — Beschaffung & Einrichtung.</p></div>
|
||||||
|
<div class="card"><h2>Netzwerk</h2><p>WLAN-Ausleuchtung, VPN, Firewall, Netzwerksegmentierung.</p></div>
|
||||||
|
<div class="card"><h2>Support</h2><p>SLA-Stufen, Fernwartung, Monitoring — maßgeschneidert.</p></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
"""
|
||||||
|
return _base_template("Startseite", content)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/impressum")
|
||||||
|
def impressum() -> str:
|
||||||
|
"""Impressum."""
|
||||||
|
content = """<div class="content">
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
<p>Daniel Krause<br>Musterstraße 1<br>12345 Musterstadt</p>
|
||||||
|
<p>E-Mail: info@it-hilfe-sofort.de</p>
|
||||||
|
</div>"""
|
||||||
|
return _base_template("Impressum", content)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/datenschutz")
|
||||||
|
def datenschutz() -> str:
|
||||||
|
"""Datenschutzerklärung."""
|
||||||
|
content = """<div class="content">
|
||||||
|
<h1>Datenschutzerklärung</h1>
|
||||||
|
<p>Platzhalter — vollständige Datenschutzerklärung folgt.</p>
|
||||||
|
</div>"""
|
||||||
|
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)
|
||||||
Reference in New Issue
Block a user