WorkTime LogoWorkTime

Generador de Insignias Integrables

Insignia de Estado Integrable

Configuración Básica

Apariencia

Exclusión de Festivos

Vista Previa en Vivo

La vista previa simula la insignia en la fecha elegida: cambia a un fin de semana o festivo para ver el estado de descanso.

Fondo Claro
Trabajando
Fondo Oscuro
Trabajando
[![Trabajando](http://localhost/api/badge.svg?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=Trabajando&unavailableText=Descansando&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=Trabajando&unavailableText=Descansando&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff&style=flat" alt="Trabajando" height="20"></a>
Vista previa en vivoTrabajando

Funciona donde se acepte la etiqueta img, sin configuración CSP frame-src; la insignia va envuelta en un enlace a su página de país. El SVG se cachea (~5 min vía CDN; el camo de GitHub puede tardar horas). ¿Necesitas actualización por minuto en tu web? Usa el fragmento iframe de abajo.

<iframe src="http://localhost/badge?timezone=UTC&workStart=09%3A00&workEnd=18%3A00&workDays=1%2C2%2C3%2C4%2C5&text=Trabajando&unavailableText=Descansando&workingBgColor=%2310b981&workingTextColor=%23ffffff&unavailableBgColor=%23ef4444&unavailableTextColor=%23ffffff" width="320" height="60" frameborder="0" style="border: none; background: transparent;"></iframe>

Instrucciones

  • Configura tu zona horaria laboral, horario, días laborables y textos de estado.
  • Copia el fragmento Markdown en tu README de GitHub / npm.
  • Copia el fragmento HTML de la insignia (imagen enlazada) en sitios web o firmas de correo.
  • El estado se actualiza automáticamente cada ~5 minutos vía caché CDN.

Frequently Asked Questions

¿Cómo uso la insignia de estado?

1. Configuración básica: define zona horaria, horario y días laborables.

2. Textos de estado: personaliza el texto de trabajo y descanso.

3. Copia el código: usa el fragmento Markdown para READMEs, o el de imagen HTML para webs y firmas.

¿Qué características tiene la insignia?

Estado en tiempo real: muestra "Trabajando" o "Descansando" según tu horario.

Ligera: una única imagen SVG estática, sin JavaScript.

Reconocimiento de festivos: muestra el estado de descanso en festivos.

Vista previa: simula zona horaria y fecha para verificar festivos y fines de semana.

¿Dónde se puede usar la insignia?

README de GitHub / npm: pega el fragmento Markdown.

Webs y blogs: pega el fragmento de imagen HTML.

Firmas de correo: usa la imagen HTML donde se permitan imágenes remotas.

Nota: el proxy de imágenes de GitHub puede cachear la insignia varias horas.

¿Qué características técnicas tiene?

Multidominio: al ser una imagen, funciona en cualquier web.

Cero dependencias: SVG puro, sin JavaScript en la página anfitriona.

Caché CDN: se actualiza cada ~5 minutos vía cabeceras de caché.

SEO amigable: no afecta al rastreo ni a la indexación.

HTTPS: totalmente compatible.

¿Qué se puede personalizar?

Horario: horas laborales, zona horaria, días laborables, festivos.

Textos: texto de los estados de trabajo y descanso.

Colores: fondo y texto de ambos estados.

Forma: plana, cuadrada o cápsula.