26ef0ec05f
- Static HTML guide at /bedienungsanleitung.html with DATACREW logo - Fixed image paths and anchor links for standalone hosting - Added "Hilfe" link in admin bar (opens guide in new tab) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
332 lines
17 KiB
HTML
332 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Bedienungsanleitung - Bürgerportal Weißkirchen an der Traun</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.header {
|
||
background: #0a0a0a;
|
||
padding: 20px 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.logo-area { display: flex; align-items: center; gap: 16px; }
|
||
.logo-area img { height: 40px; }
|
||
|
||
.header-badge {
|
||
background: #FCDC31;
|
||
color: #0a0a0a;
|
||
padding: 6px 18px;
|
||
border-radius: 4px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero {
|
||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
|
||
padding: 80px 40px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%; left: -50%;
|
||
width: 200%; height: 200%;
|
||
background: radial-gradient(circle at 30% 50%, rgba(252,220,49,0.08) 0%, transparent 50%);
|
||
}
|
||
|
||
.hero h1 { color: #fff; font-size: 42px; font-weight: 800; margin-bottom: 12px; position: relative; }
|
||
.hero h1 span { color: #FCDC31; }
|
||
.hero p { color: rgba(255,255,255,0.7); font-size: 18px; font-weight: 300; position: relative; }
|
||
|
||
.hero .subtitle {
|
||
display: inline-block; margin-top: 20px;
|
||
background: rgba(252,220,49,0.15); border: 1px solid rgba(252,220,49,0.3);
|
||
color: #FCDC31; padding: 8px 24px; border-radius: 30px; font-size: 14px; font-weight: 500;
|
||
}
|
||
|
||
.container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
|
||
|
||
.toc {
|
||
background: #fff; border-radius: 12px; padding: 32px; margin-bottom: 40px;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-left: 4px solid #FCDC31;
|
||
}
|
||
.toc h2 { font-size: 20px; font-weight: 700; color: #0a0a0a; margin-bottom: 16px; }
|
||
.toc ol { padding-left: 20px; }
|
||
.toc ol li { padding: 6px 0; color: #555; font-size: 15px; }
|
||
.toc ol li a { color: #0a0a0a; text-decoration: none; font-weight: 500; }
|
||
.toc ol li a:hover { color: #FCDC31; }
|
||
.toc ol ol { margin-top: 4px; }
|
||
.toc ol ol li { font-size: 14px; }
|
||
|
||
.section {
|
||
background: #fff; border-radius: 12px; padding: 40px; margin-bottom: 30px;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.section-number {
|
||
display: inline-block; background: #FCDC31; color: #0a0a0a; font-weight: 800; font-size: 14px;
|
||
width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 8px; margin-bottom: 12px;
|
||
}
|
||
|
||
.section h2 { font-size: 26px; font-weight: 800; color: #0a0a0a; margin-bottom: 20px; }
|
||
.section h3 { font-size: 20px; font-weight: 700; color: #0a0a0a; margin-top: 28px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #FCDC31; display: inline-block; }
|
||
.section h4 { font-size: 16px; font-weight: 600; color: #333; margin-top: 20px; margin-bottom: 10px; }
|
||
.section p { margin-bottom: 14px; color: #444; font-size: 15px; }
|
||
|
||
.step-box {
|
||
background: #fafafa; border: 1px solid #eee; border-radius: 10px;
|
||
padding: 24px; margin: 16px 0; position: relative; padding-left: 70px;
|
||
}
|
||
.step-box .step-num {
|
||
position: absolute; left: 20px; top: 24px; background: #0a0a0a; color: #FCDC31;
|
||
font-weight: 800; font-size: 18px; width: 36px; height: 36px; line-height: 36px;
|
||
text-align: center; border-radius: 50%;
|
||
}
|
||
.step-box h4 { margin-top: 0; font-size: 17px; font-weight: 700; color: #0a0a0a; }
|
||
.step-box p { margin-bottom: 8px; font-size: 14px; }
|
||
|
||
.info-box {
|
||
background: rgba(252,220,49,0.1); border: 1px solid rgba(252,220,49,0.3);
|
||
border-radius: 10px; padding: 18px 24px; margin: 16px 0; font-size: 14px; color: #333;
|
||
}
|
||
.info-box strong { color: #0a0a0a; }
|
||
|
||
.warning-box {
|
||
background: rgba(220,53,69,0.06); border: 1px solid rgba(220,53,69,0.2);
|
||
border-radius: 10px; padding: 18px 24px; margin: 16px 0; font-size: 14px; color: #333;
|
||
}
|
||
|
||
.feature-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; }
|
||
.feature-item:last-child { border-bottom: none; }
|
||
.feature-icon {
|
||
background: #0a0a0a; color: #FCDC31; font-weight: 700; font-size: 12px;
|
||
min-width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 6px; flex-shrink: 0;
|
||
}
|
||
.feature-item .feature-text strong { display: block; color: #0a0a0a; font-size: 15px; margin-bottom: 2px; }
|
||
.feature-item .feature-text span { color: #666; font-size: 14px; }
|
||
|
||
.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
|
||
.data-table th {
|
||
background: #0a0a0a; color: #FCDC31; padding: 12px 16px; text-align: left;
|
||
font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
|
||
}
|
||
.data-table td { padding: 10px 16px; border-bottom: 1px solid #eee; color: #444; }
|
||
.data-table tr:hover td { background: #fafafa; }
|
||
.data-table code { background: #f0f0f0; padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #666; }
|
||
|
||
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
|
||
.badge-green { background: #e6f9ee; color: #1a8a4a; }
|
||
.badge-orange { background: #fff3e0; color: #e65100; }
|
||
.badge-red { background: #fce4ec; color: #c62828; }
|
||
|
||
.footer { background: #0a0a0a; padding: 40px; text-align: center; margin-top: 40px; }
|
||
.footer img { height: 35px; margin-bottom: 12px; }
|
||
.footer p { color: rgba(255,255,255,0.5); font-size: 13px; }
|
||
.footer a { color: #FCDC31; text-decoration: none; }
|
||
|
||
.section-divider { height: 3px; background: linear-gradient(to right, #FCDC31, transparent); border: none; margin: 0 0 30px 0; border-radius: 3px; }
|
||
|
||
@media print { .header { position: relative; } .section { break-inside: avoid; } body { background: #fff; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="header">
|
||
<div class="logo-area">
|
||
<img src="/datacrew-logo-ver3.svg" alt="DATACREW Logo">
|
||
</div>
|
||
<div class="header-badge">Dokumentation</div>
|
||
</div>
|
||
|
||
<div class="hero">
|
||
<h1>Bedienungsanleitung<br><span>Bürgerportal</span></h1>
|
||
<p>Gemeinde Weißkirchen an der Traun</p>
|
||
<div class="subtitle">Version 1.0 | März 2026</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
|
||
<div class="toc">
|
||
<h2>📑 Inhaltsverzeichnis</h2>
|
||
<ol>
|
||
<li><a href="#uebersicht">Übersicht</a></li>
|
||
<li><a href="#buerger">Bürger-Bereich</a>
|
||
<ol><li><a href="#pool">Pool-Befüllung anmelden</a></li><li><a href="#wasser">Wasserzähler melden</a></li></ol>
|
||
</li>
|
||
<li><a href="#admin">Mitarbeiter-Bereich (Admin)</a>
|
||
<ol><li><a href="#login">Anmeldung</a></li><li><a href="#dashboard">Dashboard-Übersicht</a></li><li><a href="#poolbuchungen">Pool-Buchungen</a></li><li><a href="#wasserzaehler">Wasserzähler</a></li><li><a href="#einstellungen">Einstellungen</a></li></ol>
|
||
</li>
|
||
<li><a href="#kontakt">Kontakt & Support</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="section" id="uebersicht">
|
||
<div class="section-number">1</div>
|
||
<h2>Übersicht</h2>
|
||
<p>Das <strong>Bürgerportal der Gemeinde Weißkirchen an der Traun</strong> dient zur Koordinierung großer Wasserentnahmen, damit die Versorgung für alle Bürgerinnen und Bürger gesichert bleibt.</p>
|
||
<p>Das Portal besteht aus zwei Hauptbereichen:</p>
|
||
<div class="feature-item"><div class="feature-icon">🏊</div><div class="feature-text"><strong>Pool-Befüllung anmelden</strong><span>Bürger können online einen Wunschtermin für die Pool-Befüllung reservieren.</span></div></div>
|
||
<div class="feature-item"><div class="feature-icon">💧</div><div class="feature-text"><strong>Wasserzähler melden</strong><span>Über einen persönlichen QR-Code kann der aktuelle Wasserzählerstand gemeldet werden.</span></div></div>
|
||
<div class="feature-item"><div class="feature-icon">⚙️</div><div class="feature-text"><strong>Mitarbeiter-Zugang (Admin)</strong><span>Verwaltungsbereich für Gemeindemitarbeiter zur Verwaltung aller Buchungen und Zähler.</span></div></div>
|
||
<p>Die Startseite des Portals zeigt die beiden Bürgerdienste sowie unten den Link „Mitarbeiter-Zugang".</p>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<div class="section" id="buerger">
|
||
<div class="section-number">2</div>
|
||
<h2>Bürger-Bereich</h2>
|
||
|
||
<h3 id="pool">2.1 Pool-Befüllung anmelden</h3>
|
||
<p>Über diese Funktion können Bürger einen Termin zur Pool-Befüllung reservieren. Der Vorgang ist in <strong>drei einfache Schritte</strong> gegliedert.</p>
|
||
|
||
<div class="step-box"><div class="step-num">1</div><h4>Termin wählen</h4>
|
||
<p>Ein Kalender zeigt den aktuellen Monat an. Die <strong>Saison</strong> läuft vom 15. März bis 30. Juni. Oben wird die Anzahl der verfügbaren Tage im Monat angezeigt.</p>
|
||
<p>Die Tage sind farblich markiert: <span class="badge badge-green">Frei</span> <span class="badge badge-orange">Fast voll</span> <span class="badge badge-red">Voll</span></p>
|
||
<p>Mit den Pfeilen neben dem Monatsnamen wechselt man zwischen Monaten. Nach Auswahl eines Tages erscheint eine Bestätigung. Danach klickt man auf <strong>„Weiter"</strong>.</p>
|
||
</div>
|
||
|
||
<div class="step-box"><div class="step-num">2</div><h4>Daten eingeben</h4>
|
||
<p>Hier werden die persönlichen Daten eingegeben. Der gewählte Termin kann über <strong>„Ändern"</strong> angepasst werden.</p>
|
||
<table class="data-table">
|
||
<tbody><tr><th>Feld</th><th>Pflicht</th><th>Beschreibung</th></tr>
|
||
<tr><td>Name</td><td>Ja</td><td>Vor- und Nachname</td></tr>
|
||
<tr><td>Straße & Hausnummer</td><td>Nein</td><td>Wohnadresse</td></tr>
|
||
<tr><td>Telefon</td><td>Ja</td><td>Telefonnummer für Rückfragen</td></tr>
|
||
<tr><td>E-Mail</td><td>Ja</td><td>E-Mail-Adresse</td></tr>
|
||
<tr><td>Wasserquelle</td><td>Ja</td><td>„Eigener Brunnen" oder „Ortswasserleitung"</td></tr>
|
||
</tbody></table>
|
||
<p>Vor dem Absenden muss ein <strong>Cloudflare-Captcha</strong> bestätigt werden.</p>
|
||
</div>
|
||
|
||
<div class="step-box"><div class="step-num">3</div><h4>Fertig</h4>
|
||
<p>Nach dem Klick auf <strong>„Anmeldung absenden"</strong> wird die Buchung bestätigt.</p>
|
||
</div>
|
||
|
||
<h3 id="wasser">2.2 Wasserzähler melden</h3>
|
||
<p>Diese Funktion ermöglicht es Bürgern, ihren aktuellen Wasserzählerstand online zu melden.</p>
|
||
<div class="warning-box">⚠️ <strong>Wichtig:</strong> Der Zugang erfolgt ausschließlich über einen <strong>persönlichen QR-Code</strong> auf dem Ableseblatt. Ohne gültigen QR-Code erscheint „Ungültiger Zugang".</div>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<div class="section" id="admin">
|
||
<div class="section-number">3</div>
|
||
<h2>Mitarbeiter-Bereich (Admin-Dashboard)</h2>
|
||
|
||
<h3 id="login">3.1 Anmeldung</h3>
|
||
<p>Auf der Startseite befindet sich unten der Link <strong>„Mitarbeiter-Zugang"</strong>. Die Anmeldung erfolgt mit E-Mail und Passwort.</p>
|
||
<div class="info-box">💡 Oben links wird <strong>ADMIN</strong> angezeigt, oben rechts der Link <strong>„Abmelden"</strong> zum Ausloggen.</div>
|
||
|
||
<h3 id="dashboard">3.2 Dashboard-Übersicht</h3>
|
||
<p>Oben werden drei <strong>Kennzahlen-Kacheln</strong> angezeigt:</p>
|
||
<table class="data-table">
|
||
<tbody><tr><th>Kachel</th><th>Bedeutung</th></tr>
|
||
<tr><td><strong>Heute</strong></td><td>Anzahl der Pool-Buchungen für heute</td></tr>
|
||
<tr><td><strong>m³ heute</strong></td><td>Kubikmeter Wasserverbrauch heute</td></tr>
|
||
<tr><td><strong>Gesamt aktiv</strong></td><td>Gesamtzahl aller aktiven Buchungen</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3 id="poolbuchungen">3.3 Tab: Pool-Buchungen</h3>
|
||
<p>Zeigt alle Pool-Befüllungs-Anmeldungen in einer Tabelle.</p>
|
||
|
||
<h4>Tabellenspalten</h4>
|
||
<table class="data-table">
|
||
<tbody><tr><th>Spalte</th><th>Beschreibung</th></tr>
|
||
<tr><td>Datum</td><td>Gewünschter Befüllungstermin</td></tr>
|
||
<tr><td>Name</td><td>Name des Antragstellers</td></tr>
|
||
<tr><td>Straße</td><td>Adresse</td></tr>
|
||
<tr><td>Telefon</td><td>Telefonnummer (klickbar)</td></tr>
|
||
<tr><td>E-Mail</td><td>E-Mail-Adresse</td></tr>
|
||
<tr><td>Quelle</td><td>„Brunnen" oder „Leitung"</td></tr>
|
||
<tr><td>M³</td><td>Wasserverbrauch in Kubikmetern</td></tr>
|
||
<tr><td>Status</td><td><span class="badge badge-green">aktiv</span> <span class="badge badge-orange">storniert</span> <span class="badge badge-green">erledigt</span></td></tr>
|
||
<tr><td>Aktion</td><td>„Stornieren"-Button</td></tr>
|
||
</tbody></table>
|
||
|
||
<h4>Verfügbare Funktionen</h4>
|
||
<div class="feature-item"><div class="feature-icon">+</div><div class="feature-text"><strong>Manuell eintragen</strong><span>Dialogfenster für telefonische Anmeldungen. Felder: Name*, Straße*, Telefon*, E-Mail (optional), Wunschtermin*, Wasserquelle.</span></div></div>
|
||
<div class="feature-item"><div class="feature-icon">📅</div><div class="feature-text"><strong>Datumsfilter</strong><span>Filtert die Tabelle nach einem bestimmten Datum (tt.mm.jjjj).</span></div></div>
|
||
<div class="feature-item"><div class="feature-icon">🔽</div><div class="feature-text"><strong>Statusfilter</strong><span>Dropdown: „Alle Status", „Aktiv", „Storniert", „Erledigt".</span></div></div>
|
||
<div class="feature-item"><div class="feature-icon">📊</div><div class="feature-text"><strong>CSV Export</strong><span>Exportiert Buchungsdaten als CSV-Datei.</span></div></div>
|
||
<div class="feature-item"><div class="feature-icon">✕</div><div class="feature-text"><strong>Stornieren</strong><span>Roter Link in der Aktions-Spalte zum Stornieren einer Buchung.</span></div></div>
|
||
|
||
<h3 id="wasserzaehler">3.4 Tab: Wasserzähler</h3>
|
||
<p>Übersicht aller registrierten Wasserzähler-Haushalte.</p>
|
||
<table class="data-table">
|
||
<tbody><tr><th>Spalte</th><th>Beschreibung</th></tr>
|
||
<tr><td>Haushalt</td><td>Name des Haushalts</td></tr>
|
||
<tr><td>Adresse</td><td>Adresse</td></tr>
|
||
<tr><td>Zählernr.</td><td>Wasserzähler-Nummer</td></tr>
|
||
<tr><td>Alter Stand</td><td>Letzter Zählerstand (m³)</td></tr>
|
||
<tr><td>Neuer Stand</td><td>Aktuell gemeldeter Stand (m³)</td></tr>
|
||
<tr><td>Verbrauch</td><td>Differenz in m³</td></tr>
|
||
<tr><td>Ablesedatum</td><td>Datum der letzten Ablesung</td></tr>
|
||
<tr><td>Token</td><td>QR-Code-Schlüssel</td></tr>
|
||
</tbody></table>
|
||
<div class="info-box">💡 Nach Meldung durch den Bürger erscheinen automatisch Werte in „Neuer Stand", „Verbrauch" und „Ablesedatum". Auch hier: <strong>CSV Export</strong> verfügbar.</div>
|
||
|
||
<h3 id="einstellungen">3.5 Tab: Einstellungen</h3>
|
||
<p>Grundlegende Portal-Parameter konfigurieren.</p>
|
||
<div class="warning-box">⚠️ <strong>Automatisches Speichern:</strong> Änderungen werden beim Verlassen des Feldes gespeichert – kein separater Speichern-Button.</div>
|
||
<table class="data-table">
|
||
<tbody><tr><th>Einstellung</th><th>Schlüssel</th><th>Beschreibung</th></tr>
|
||
<tr><td>Adresse des Gemeindeamts</td><td><code>gemeinde_adresse</code></td><td>Postadresse</td></tr>
|
||
<tr><td>E-Mail der Gemeinde</td><td><code>gemeinde_email</code></td><td>Kontakt-E-Mail</td></tr>
|
||
<tr><td>Name der Gemeinde</td><td><code>gemeinde_name</code></td><td>Angezeigter Name</td></tr>
|
||
<tr><td>Telefon der Gemeinde</td><td><code>gemeinde_telefon</code></td><td>Telefonnummer</td></tr>
|
||
<tr><td>Max. Pool-Befüllungen/Tag</td><td><code>max_pools_per_day</code></td><td>Bestimmt Verfügbarkeitsanzeige</td></tr>
|
||
<tr><td>Saisonende</td><td><code>saison_ende</code></td><td>Format MM-DD (z.B. 06-30)</td></tr>
|
||
<tr><td>Saisonstart</td><td><code>saison_start</code></td><td>Format MM-DD (z.B. 03-15)</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<div class="section" id="kontakt">
|
||
<div class="section-number">4</div>
|
||
<h2>Kontakt & Support</h2>
|
||
<p>Bei Fragen oder technischen Problemen:</p>
|
||
<div style="background:#fafafa;border-radius:10px;padding:24px;margin-top:16px;display:flex;gap:40px;flex-wrap:wrap;">
|
||
<div><strong style="color:#0a0a0a;display:block;margin-bottom:4px;">Gemeindeamt Weißkirchen an der Traun</strong><span style="color:#666;font-size:14px;">Gemeindeplatz 1, 4616 Weißkirchen</span></div>
|
||
<div><strong style="color:#0a0a0a;display:block;margin-bottom:4px;">Telefon</strong><span style="color:#666;font-size:14px;">+43 7243 50600</span></div>
|
||
<div><strong style="color:#0a0a0a;display:block;margin-bottom:4px;">E-Mail</strong><span style="color:#666;font-size:14px;">gemeinde@weisskirchen.ooe.gv.at</span></div>
|
||
</div>
|
||
<div style="background:#fafafa;border-radius:10px;padding:24px;margin-top:12px;">
|
||
<strong style="color:#0a0a0a;display:block;margin-bottom:4px;">Technischer Support</strong>
|
||
<span style="color:#666;font-size:14px;">DATACREW GmbH | office@datacrew.at | +43 664 8352533</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<img src="/datacrew-logo-ver3.svg" alt="DATACREW Logo">
|
||
<p>Erstellt von <a href="https://datacrew.at/">DATACREW GmbH</a> | support & solutions</p>
|
||
<p style="margin-top:6px;">© 2026 Alle Rechte vorbehalten</p>
|
||
</div>
|
||
|
||
</body></html> |