WorkTime LogoWorkTime

Генератор встраиваемых бейджей

Встраиваемый бейдж статуса

Базовые настройки

Внешний вид

Исключение праздников

Предпросмотр

Предпросмотр показывает значок на выбранную дату — выберите выходной или праздник, чтобы увидеть состояние отдыха.

Светлый фон
Работает
Тёмный фон
Работает
[![Работает](http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82&unavailableText=%D0%9E%D1%82%D0%B4%D1%8B%D1%85%D0%B0%D0%B5%D1%82&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat)](http://localhost/)
<a href="http://localhost/"><img src="http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82&unavailableText=%D0%9E%D1%82%D0%B4%D1%8B%D1%85%D0%B0%D0%B5%D1%82&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat" alt="Работает" height="20"></a>
Живой предпросмотрРаботает

Работает там, где поддерживается тег img, без настройки CSP frame-src; значок обёрнут ссылкой на страницу страны. SVG кэшируется (~5 мин через CDN; camo GitHub — часами). Нужны поминутные обновления на своём сайте? Используйте iframe-фрагмент ниже.

<iframe src="http://localhost/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82&unavailableText=%D0%9E%D1%82%D0%B4%D1%8B%D1%85%D0%B0%D0%B5%D1%82&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff" width="320" height="60" frameborder="0" style="border: none; background: transparent;"></iframe>

Инструкция

  • Укажите рабочий часовой пояс, часы работы, рабочие дни и тексты статусов.
  • Скопируйте Markdown-фрагмент в README GitHub / npm.
  • Скопируйте HTML-фрагмент значка (изображение-ссылку) на сайт или в подпись почты.
  • Статус обновляется автоматически примерно каждые 5 минут через кэш CDN.

Frequently Asked Questions

Как использовать значок статуса?

1. Базовая настройка: укажите часовой пояс, часы и рабочие дни.

2. Тексты статусов: настройте надписи для работы и отдыха.

3. Скопируйте код: Markdown-фрагмент для README, HTML-изображение для сайтов и подписей.

Какие возможности у значка?

Статус в реальном времени: показывает «Работает» или «Отдыхает» по вашим часам работы.

Легковесность: одна статичная SVG-картинка без JavaScript.

Учёт праздников: в праздники автоматически показывается отдых.

Предпросмотр: имитация часового пояса и даты для проверки праздников и выходных.

Где можно использовать значок?

README GitHub / npm: вставьте Markdown-фрагмент.

Сайты и блоги: вставьте HTML-изображение.

Подписи в почте: используйте HTML-изображение, если разрешены внешние картинки.

Примечание: image-прокси GitHub может кэшировать значок несколько часов.

Какие технические особенности?

Кросс-домен: это обычная картинка — работает на любом сайте.

Ноль зависимостей: чистый SVG, без JavaScript на странице-хосте.

Кэш CDN: обновляется примерно каждые 5 минут.

SEO-дружелюбность: не мешает индексации.

HTTPS: полная поддержка.

Что можно настроить?

Время: часы работы, часовой пояс, рабочие дни, праздники.

Тексты: надписи для работы и отдыха.

Цвета: фон и текст обоих состояний.

Форма: плоский, прямоугольный или капсула.