ClaudeandClaude Opus 5.5
a6a4eae294
public/embed/zeiten.js ruft die öffentliche Zeiten-API einmal je Seite ab und füllt die Platzhalter [data-webklar-zeiten] (tabelle, status, badge; data-plan, Hauptplan ohne Angabe). Reine Funktionen (waehleWechsel, naechsterWechsel, waehleHinweis, jetztMitServer, tabelleDaten) stehen zwischen den Marken @rein-anfang/@rein-ende. Timer auf den nächsten Wechsel (jede Wartezeit auf 10 Minuten begrenzt), Neuladen höchstens alle 10 Minuten, Daten älter als 24 Stunden, Fehler oder aktiv:false lassen das Ersatz-HTML stehen bzw. stellen es wieder her. Testseite zeiten-demo.html. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
58 lines
2.6 KiB
HTML
58 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex">
|
|
<title>Öffnungszeiten Testseite</title>
|
|
<style>
|
|
body{margin:0;font-family:system-ui,sans-serif;background:#f6f7f9;color:#1f2937;line-height:1.5}
|
|
header,footer{padding:16px 24px;background:#e8ebf0}
|
|
main{max-width:760px;margin:0 auto;padding:32px 16px}
|
|
h2{margin:32px 0 12px}
|
|
.ersatz{margin:0;padding:12px 16px;border:2px dashed #94a3b8;border-radius:12px;background:#fff}
|
|
.ersatz table{border-collapse:collapse}
|
|
.ersatz th,.ersatz td{padding:.25em .75em .25em 0;text-align:left}
|
|
/* Gestaltung ueber CSS-Variablen der Seite (alle optional): [data-webklar-zeiten]{ --wkz-offen:#0f766e; --wkz-heute:#fde68a; } */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>Testseite der Kundenwebsite (intern, nicht verlinkt)</header>
|
|
<main>
|
|
<h1>Öffnungszeiten</h1>
|
|
<p>Der siteKey unten ist ein Platzhalter: für echte Daten <code>data-site</code> durch den siteKey des Projekts ersetzen (und bei Bedarf <code>data-api</code> am Script-Tag ergänzen). Ohne Daten (oder bei einem Fehler) bleibt überall das Ersatz-HTML stehen.</p>
|
|
|
|
<h2>Tabelle (Hauptplan)</h2>
|
|
<div data-webklar-zeiten data-modus="tabelle">
|
|
<div class="ersatz">
|
|
<table>
|
|
<caption>Öffnungszeiten</caption>
|
|
<tr><th scope="row">Montag</th><td>09:00 – 18:00</td></tr>
|
|
<tr><th scope="row">Dienstag</th><td>09:00 – 18:00</td></tr>
|
|
<tr><th scope="row">Mittwoch</th><td>09:00 – 18:00</td></tr>
|
|
<tr><th scope="row">Donnerstag</th><td>09:00 – 18:00</td></tr>
|
|
<tr><th scope="row">Freitag</th><td>09:00 – 18:00</td></tr>
|
|
<tr><th scope="row">Samstag</th><td>09:00 – 13:00</td></tr>
|
|
<tr><th scope="row">Sonntag</th><td>geschlossen</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Status (Hauptplan)</h2>
|
|
<div data-webklar-zeiten data-modus="status">
|
|
<p class="ersatz">Mo–Fr 09:00 – 18:00 Uhr, Sa 09:00 – 13:00 Uhr.</p>
|
|
</div>
|
|
|
|
<h2>Badge (Plan „haupt“, im Fließtext)</h2>
|
|
<p>Wir haben gerade <span data-webklar-zeiten data-modus="badge" data-plan="haupt">Mo–Fr 09:00 – 18:00 Uhr</span> für Sie da.</p>
|
|
|
|
<h2>Unbekannter Plan (Ersatz-HTML bleibt, Warnung in der Konsole)</h2>
|
|
<div data-webklar-zeiten data-modus="status" data-plan="gibt-es-nicht">
|
|
<p class="ersatz">Dieser Platzhalter nennt einen Plan, den es nicht gibt.</p>
|
|
</div>
|
|
</main>
|
|
<footer>Fußbereich</footer>
|
|
<script src="/embed/zeiten.js" data-site="abcdefghijklmnop" defer></script>
|
|
</body>
|
|
</html>
|