144 lines
4.5 KiB
HTML
144 lines
4.5 KiB
HTML
<!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;
|
||
}
|
||
.server-note {
|
||
font-size: 0.88rem;
|
||
color: #6b7280;
|
||
margin: 10px 2px 0;
|
||
}
|
||
.image-guide {
|
||
margin-top: 18px;
|
||
}
|
||
.image-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
.image-item {
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
padding: 10px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||
}
|
||
.image-item img {
|
||
display: block;
|
||
width: 100%;
|
||
border-radius: 10px;
|
||
height: auto;
|
||
}
|
||
.image-caption {
|
||
margin: 8px 2px 2px;
|
||
font-size: 0.92rem;
|
||
color: #4b5563;
|
||
}
|
||
</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>
|
||
|
||
<section class="image-guide" aria-label="PDF-Export in iPD">
|
||
<h2>PDF-Export in iPD</h2>
|
||
<p>Die folgenden Bilder zeigen, wie der Dienstplan in iPD als PDF exportiert wird.</p>
|
||
<p class="server-note">Hinweis: Die Bilder werden nur angezeigt, wenn die Seite über den laufenden Webserver geöffnet wird (z. B. http://127.0.0.1:8000/) und nicht als lokale Datei in der Editor-Vorschau.</p>
|
||
<div class="image-grid">
|
||
<figure class="image-item">
|
||
<img src="{{ request.url_for('static', path='images/iPD01.jpg') }}" alt="iPD Schritt 1: Dienstplanansicht öffnen" loading="lazy">
|
||
<figcaption class="image-caption">Schritt 1: Dienstplanansicht in iPD öffnen.</figcaption>
|
||
</figure>
|
||
<figure class="image-item">
|
||
<img src="{{ request.url_for('static', path='images/iPD02.jpg') }}" alt="iPD Schritt 2: Export- oder Druckmenü auswählen" loading="lazy">
|
||
<figcaption class="image-caption">Schritt 2: Export- oder Druckfunktion auswählen.</figcaption>
|
||
</figure>
|
||
<figure class="image-item">
|
||
<img src="{{ request.url_for('static', path='images/iPD03.jpg') }}" alt="iPD Schritt 3: PDF-Export starten" loading="lazy">
|
||
<figcaption class="image-caption">Schritt 3: PDF-Export starten.</figcaption>
|
||
</figure>
|
||
<figure class="image-item">
|
||
<img src="{{ request.url_for('static', path='images/iPD03_1.jpg') }}" alt="iPD Schritt 4: PDF speichern" loading="lazy">
|
||
<figcaption class="image-caption">Schritt 4: PDF speichern und anschließend hier hochladen.</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|