Einbettbarer Badge-Generator

Einbettbarer Status-Badge

Basiskonfiguration

Arbeitszeitzone

Startzeit

Endzeit

Arbeitstage

Arbeiten

Pause

Erscheinungsbild

Badge-Form

Arbeit (Hintergrund / Text)

Pause (Hintergrund / Text)

Feiertage ausschließen

Nationale Feiertage importieren

Datum manuell hinzufügen

Live-Vorschau

Die Vorschau zeigt das Badge für das gewählte Datum — wechsle zu einem Wochenende oder Feiertag, um den Pausenstatus zu sehen.

Heller Hintergrund

Dunkler Hintergrund

Markdown — GitHub / npm README

[![Arbeiten](http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=Arbeiten&unavailableText=Pause&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat)](http://localhost/)

HTML-Bild — Webseiten / E-Mail-Signaturen

Live-Vorschau

Funktioniert überall, wo das img-Tag unterstützt wird — keine CSP-frame-src-Konfiguration nötig; das Badge ist mit einem Link auf seine Länderseite umschlossen. Das SVG wird gecacht (~5 Min. per CDN; GitHub camo ggf. Stunden). Minütliche Echtzeit-Updates auf der eigenen Webseite? Nutze stattdessen den iframe-Schnipsel unten.

Iframe — Echtzeit-Aktualisierung (jede Minute)

Anleitung

Lege Arbeits-Zeitzone, Arbeitszeiten, Arbeitstage und Status-Texte fest.
Füge den Markdown-Schnipsel in dein GitHub / npm README ein.
Füge den HTML-Badge-Schnipsel (verlinktes Bild) in Webseiten oder E-Mail-Signaturen ein.
Der Status aktualisiert sich per CDN-Cache etwa alle 5 Minuten automatisch.

Frequently Asked Questions

Wie verwende ich das Status-Badge?

1. Grundeinrichtung: Zeitzone, Arbeitszeiten und Arbeitstage festlegen.

2. Status-Texte: Anzeigetexte für Arbeit und Pause anpassen.

3. Code kopieren: Markdown-Schnipsel für READMEs, HTML-Bild-Schnipsel für Webseiten und E-Mail-Signaturen.

Welche Funktionen hat das Badge?

Echtzeit-Status: Zeigt je nach Arbeitszeiten automatisch "Arbeit" oder "Pause" an.

Leichtgewichtig: ein einzelnes statisches SVG-Bild ohne JavaScript.

Feiertagserkennung: zeigt an Feiertagen automatisch den Pausenstatus.

Vorschau: Zeitzone und Datum simulieren, um Feiertage und Wochenenden zu prüfen.

Wo kann das Badge eingesetzt werden?

GitHub / npm README: Markdown-Schnipsel einfügen.

Webseiten und Blogs: HTML-Bild-Schnipsel einfügen.

E-Mail-Signaturen: HTML-Bild-Schnipsel verwenden, sofern externe Bilder erlaubt sind.

Hinweis: GitHubs Bild-Proxy kann das Badge mehrere Stunden zwischenspeichern.

Welche technischen Eigenschaften gibt es?

Cross-Domain: Als einfaches Bild funktioniert es auf jeder Webseite.

Keine Abhängigkeiten: pures SVG, kein JavaScript auf der Gastgeberseite.

CDN-Cache: Aktualisierung etwa alle 5 Minuten per Cache-Header.

SEO-freundlich: Beeinträchtigt Crawling und Indexierung nicht.

HTTPS: Vollständig unterstützt.

Was kann angepasst werden?

Zeiteinstellungen: Arbeitszeiten, Zeitzone, Arbeitstage, Feiertage.

Texte: Anzeigetexte für Arbeit und Pause.

Farben: Hintergrund- und Textfarben beider Zustände.

Form: Flach, Eckig oder Kapsel.