Mini Widgets Collection

Una colección de mini widgets interactivos diseñados para ser incrustados como iframe en aplicaciones como Notion, Monday.com, Confluence y cualquier plataforma que soporte embeds.

🚀 Astro ⚛️ React 🎨 Tailwind CSS

Fácil de Incrustar

Simplemente copia la URL y agrégala como iframe en cualquier plataforma que soporte embeds.

Rápido y Liviano

Construido con Astro para máxima performance. Carga instantánea y experiencia fluida.

Interactivo

Widgets completamente funcionales con estado persistente y interacciones en tiempo real.

Widgets Disponibles

📋 Gestor de Tareas

Un administrador de tareas completo con estados personalizables (Activo, Pendiente, Cambios, Entregado). Perfecto para equipos que necesitan trackear el progreso de proyectos directamente en sus herramientas de trabajo.

Características:

  • • Agregar, editar y eliminar tareas
  • • Estados personalizables con colores
  • • Contador automático por estado
  • • Interfaz responsive y moderna
  • • Edición inline de nombres de tareas

Cómo usar en iframe:

<iframe src="https://tu-dominio.com/tareas" width="100%" height="600" frameborder="0"></iframe>

🗓️ Calendario con Notas

Un calendario interactivo donde puedes agregar y editar notas para cada día. Perfecto para organizar eventos, recordatorios y planificación directamente en tus herramientas de trabajo.

Características:

  • • Agregar y editar notas por día
  • • Indicadores visuales de días con notas
  • • Badges de colores (naranja para notas nuevas, azul para antiguas)
  • • Navegación entre meses
  • • Sincronización con base de datos
  • • Interfaz responsive y moderna

Cómo usar en iframe:

<iframe src="https://tu-dominio.com/calendario" width="100%" height="700" frameborder="0"></iframe>

🚧 Más widgets próximamente...

Estamos trabajando en más widgets útiles como calculadoras, timers y más.

Guía de Integración

📖 En Notion

  1. 1. Escribe /embed en tu página
  2. 2. Pega la URL del widget
  3. 3. Ajusta el tamaño según necesites

📊 En Monday.com

  1. 1. Agrega un widget de "Embed"
  2. 2. Introduce la URL del widget
  3. 3. Configura dimensiones

🌐 HTML General

  1. 1. Usa la etiqueta <iframe>
  2. 2. Especifica src, width y height
  3. 3. Opcionalmente frameborder="0"
Footer content.