Add landing page in front of web converter

2026-03-02 22:49:51 +01:00
parent 02b005376f
commit 144d13989d
3 changed files with 104 additions and 3 deletions
--- a/WEB_README.md
+++ b/WEB_README.md
@@ -13,8 +13,9 @@ Diese Variante stellt den PDF-zu-ICS-Konverter im Browser bereit, damit die Nutz
 Doppelklick auf `start_web.cmd`

 Danach im Browser öffnen:
- Lokal: `http://localhost:8000`
- Im Netzwerk (z. B. Smartphone): `http://<IP-des-Rechners>:8000`
+- Landingpage: `http://localhost:8000`
+- Anwendung: `http://localhost:8000/app`
+- Im Netzwerk (z. B. Smartphone): `http://<IP-des-Rechners>:8000/app`

 ## Docker (Server ohne VPN)

@@ -27,7 +28,8 @@ docker compose up -d --build
 ```

 Aufruf:
- Direkt per IP/Port: `http://<SERVER-IP>:8000`
+- Landingpage: `http://<SERVER-IP>:8000`
+- Anwendung: `http://<SERVER-IP>:8000/app`
 - Oder mit Domain über Reverse Proxy (empfohlen)

 ### 2) Status und Logs
--- a/web/app.py
+++ b/web/app.py
@@ -45,6 +45,16 @@ def require_auth(credentials: HTTPBasicCredentials = Depends(security)):


@app.get("/", response_class=HTMLResponse)
+def landing(request: Request):
+    return templates.TemplateResponse(
+        "landing.html",
+        {
+            "request": request,
+        },
+    )
+
+
+@app.get("/app", response_class=HTMLResponse)
 def index(request: Request, _: None = Depends(require_auth)):
    return templates.TemplateResponse(
        "index.html",
--- a/web/templates/landing.html
+++ b/web/templates/landing.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>PDF zu ICS – Dienstplan einfach importieren</title>
+  <style>
+    :root { color-scheme: light; }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+      background: #f5f7fb;
+      color: #111827;
+    }
+    .wrap {
+      max-width: 760px;
+      margin: 0 auto;
+      padding: 20px 14px 28px;
+    }
+    .card {
+      background: #fff;
+      border-radius: 14px;
+      padding: 18px;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+      margin-bottom: 12px;
+    }
+    h1 {
+      margin: 0 0 8px;
+      font-size: 1.5rem;
+    }
+    h2 {
+      margin: 0 0 8px;
+      font-size: 1.05rem;
+    }
+    p, li {
+      color: #4b5563;
+      line-height: 1.45;
+      margin: 0 0 10px;
+    }
+    ul {
+      margin: 0;
+      padding-left: 18px;
+    }
+    .cta {
+      display: inline-block;
+      text-decoration: none;
+      border-radius: 10px;
+      padding: 11px 14px;
+      font-weight: 700;
+      background: #2563eb;
+      color: #fff;
+    }
+    .hint {
+      font-size: 0.9rem;
+      color: #6b7280;
+      margin-top: 8px;
+    }
+  </style>
+</head>
+<body>
+  <main class="wrap">
+    <section class="card">
+      <h1>PDF zu ICS Konverter</h1>
+      <p>Diese Anwendung wandelt Dienstplan-PDFs in iCalendar-Dateien (.ics) um, damit Schichten schnell in Kalender-Apps übernommen werden können.</p>
+      <a class="cta" href="/app">Zur Anwendung</a>
+      <p class="hint">Die Konvertierung erfolgt serverseitig, Uploads werden nur temporär verarbeitet.</p>
+    </section>
+
+    <section class="card">
+      <h2>Warum sinnvoll?</h2>
+      <ul>
+        <li>Kein manuelles Eintragen von Diensten in den Kalender</li>
+        <li>Importierbar in gängige Kalender (Google, Outlook, Apple, Thunderbird)</li>
+        <li>Vorschau vor dem Download der ICS-Datei</li>
+      </ul>
+    </section>
+
+    <section class="card">
+      <h2>So funktioniert es</h2>
+      <ul>
+        <li>Dienstplan-PDF hochladen</li>
+        <li>Extrahierte Schichten in der Vorschau prüfen</li>
+        <li>ICS herunterladen und im Kalender importieren</li>
+      </ul>
+    </section>
+  </main>
+</body>
+</html>