Badi Öffnungszeiten Widget

✓ Gute Nachricht: Du brauchst KEIN npm oder Entwicklungs-Setup! Einfach kopieren und einbetten.

Live Demo

So bindest du das Widget ein

✓ Standard-Einbettung (Für externe Websites)

Kopiere einfach diese zwei Zeilen auf deine Website — kein npm nötig!

<badi-hours></badi-hours>
<script src="https://badi-stawi.duckdns.org/badi-widget.js"></script>

Das Widget lädt sich selbst und zeigt die aktuellen Öffnungszeiten an.

Option 2: Mit Custom API URL (für Entwicklung/lokale Tests)

Wenn du lokal entwickelst, starte den Dev-Server und verwende localhost:

<badi-hours api-url="http://localhost:3000"></badi-hours>
<script src="http://localhost:3000/badi-widget.js"></script>

Starte erst npm run dev, dann öffne http://localhost:3000/widget-demo.html

Option 3: Mit Custom Styling

Du kannst CSS-Variablen customizen:

<style>
  badi-hours {
    --primary-color: #your-color;
    --border-radius: 15px;
  }
</style>
<badi-hours></badi-hours>
<script src="https://badi-stawi.duckdns.org/badi-widget.js"></script>

Wichtig: Das Widget verwendet Shadow DOM, daher beeinträchtigt es die Styles deiner Website nicht und umgekehrt.

Features

✓ Responsive Design (Mobile + Desktop)
✓ Tages-Navigation mit Pfeilen
✓ Swipe-Gesten auf Mobile
✓ Auto-Refresh alle 60 Sekunden (nur heute)
✓ Zeigt Status: Geöffnet / Geschlossen / Sonderöffnung
✓ Öffnungszeiten und Notizen
✓ Shadow DOM Isolation (kein Style-Konflikt)
✓ Bis zu 7 Tage in die Zukunft schaubar

Anpassbare CSS-Variablen

--primary-color: #0077be;        /* Hauptfarbe */
--primary-light: #00a8e8;      /* Helle Variante */
--bg-color: white;            /* Hintergrund */
--text-color: #333;           /* Textfarbe */
--border-radius: 20px;        /* Ecken-Radius */
--shadow: 0 10px 40px rgba(0,0,0,0.2); /* Schatten */

Beispiel zum Anpassen:

<style>
  badi-hours {
    --primary-color: #ff6b35;
    --bg-color: #f0f0f0;
    --border-radius: 10px;
  }
</style>

Komplettes Beispiel (Für deine Website)

So sieht eine komplette Website mit eingebettetem Widget aus:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Website mit Badi Öffnungszeiten</title>
</head>
<body>
  <h1>Öffnungszeiten der Badi Starrkirch-Wil</h1>
  <p>Hier sind die aktuellen Öffnungszeiten:</p>

  <!-- Badi Widget einbetten (2 Zeilen!) -->
  <badi-hours></badi-hours>
  <script src="https://badi-stawi.duckdns.org/badi-widget.js"></script>

</body>
</html>