🍅 Temporizador Pomodoro

Una aplicación web moderna y elegante para gestionar tu tiempo usando la técnica Pomodoro. Diseñada con una interfaz intuitiva, modo oscuro/claro y estadísticas detalladas.

✨ Características

🎯 Funcionalidades Principales

• Temporizador Pomodoro: Ciclos de trabajo de 25 minutos con descansos de 5 y 15 minutos
• Interfaz Visual Intuitiva: Anillo de progreso circular animado que muestra el tiempo restante
• Modo Oscuro/Claro: Cambio de tema animado con interruptor día/noche estilo toggle
• Estadísticas Completas: Seguimiento de pomodoros completados, tiempo total y racha actual
• Configuración Personalizable: Ajusta los tiempos de trabajo y descanso según tus necesidades

🚀 Características Avanzadas

• Notificaciones del Sistema: Alertas nativas del navegador al completar cada sesión
• Sonidos de Notificación: Audio personalizado para indicar el fin de cada periodo
• Persistencia de Datos: Guarda tu progreso y configuraciones en el navegador
• Inicio Automático: Opción para iniciar automáticamente los descansos
• Atajos de Teclado: Control rápido con teclas (Espacio: play/pause, Escape: reiniciar)
• Diseño Responsivo: Optimizado para desktop, tablet y móvil

🖥️ Capturas de Pantalla

Modo Oscuro

🌙 Interfaz elegante con colores suaves para sesiones nocturnas.

Modo Claro

☀️ Diseño limpio y brillante para trabajo diurno.

🛠️ Tecnologías Utilizadas

• HTML5: Estructura semántica y accesible
• CSS3:
  • Variables CSS para temas dinámicos
  • Grid y Flexbox para layouts responsivos
  • Animaciones y transiciones fluidas
  • Gradientes y efectos visuales modernos
• JavaScript ES6+:
  • Programación orientada a objetos
  • Web Audio API para sonidos
  • Notification API para alertas del sistema
  • localStorage para persistencia de datos

📁 Estructura del Proyecto

metodo_pomodoro/
├── index.html          # Estructura principal de la aplicación
├── styles.css          # Estilos y temas (oscuro/claro)
├── script.js           # Lógica del temporizador y funcionalidades
├── README.md           # Documentación del proyecto
└── LICENSE            # Licencia del proyecto

🚀 Instalación y Uso

Método 1: Enlace Navegador de tu preferencia

• Disfruta del proyecto desde el siguiente enlace

https://felipe-moreno-marciales.github.io/Metodo_Pomodoro/

Método 2: Servidor Local

# Clona el repositorio
git clone https://github.com/Felipe-Moreno-Marciales/metodo_pomodoro.git

# Navega al directorio
cd metodo_pomodoro

# Inicia un servidor local (opcional)
python -m http.server 8000
# o
npx serve .

# Abre en el navegador
http://localhost:8000

📖 Cómo Usar la Aplicación

🎮 Controles Básicos

1. Iniciar/Pausar: Haz clic en el botón "Iniciar" o presiona la barra espaciadora
2. Reiniciar: Usa el botón "Reiniciar" o presiona Escape para volver al tiempo inicial
3. Reiniciar Estadísticas: Botón rojo para limpiar todas las estadísticas guardadas

⚙️ Configuración

• Tiempos Personalizados: Ajusta la duración de trabajo y descansos con los deslizadores
• Inicio Automático: Activa para que los descansos inicien automáticamente
• Notificaciones: Habilita las alertas del sistema (requiere permisos del navegador)

📊 Estadísticas

• Pomodoros Completados: Contador de sesiones de trabajo finalizadas
• Tiempo Total: Acumulativo de todo el tiempo trabajado
• Racha Actual: Días consecutivos usando la aplicación

🎨 Personalización de Temas

La aplicación incluye un sistema de temas dinámico:

• Modo Claro: Colores brillantes y contrastes suaves
• Modo Oscuro: Paleta oscura para reducir la fatiga visual
• Transiciones Animadas: Cambio suave entre temas
• Persistencia: El tema seleccionado se guarda automáticamente

🎵 Audio y Notificaciones

Sonidos

• Tono suave al completar una sesión de trabajo
• Sonido diferente para descansos
• Control de volumen automático

Notificaciones del Sistema

• Alertas nativas del navegador
• Mensajes personalizados según el tipo de sesión
• Solicitud de permisos automática

⌨️ Atajos de Teclado

Tecla	Acción
Espacio	Iniciar/Pausar temporizador
Escape	Reiniciar temporizador

🧠 Técnica Pomodoro

Esta aplicación implementa la técnica Pomodoro tradicional:

1. 25 minutos de trabajo concentrado
2. 5 minutos de descanso corto
3. Después de 4 pomodoros: 15 minutos de descanso largo
4. Repetir el ciclo

Beneficios

• ✅ Mejora la concentración y productividad
• ✅ Reduce la fatiga mental
• ✅ Ayuda a gestionar mejor el tiempo
• ✅ Previene el agotamiento

🔧 Personalización Avanzada

Modificar Tiempos por Defecto

Edita las variables en script.js:

// Tiempos en minutos
this.tiempoPomodoro = 25;
this.tiempoDescansoCorto = 5;
this.tiempoDescansoLargo = 15;

Cambiar Colores del Tema

Modifica las variables CSS en styles.css:

:root {
    --color-primario: #4a90e2;
    --color-secundario: #7b68ee;
    /* ... más variables */
}

🌐 Compatibilidad

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+
• ✅ Dispositivos móviles (iOS/Android)

📱 Características Móviles

• Diseño completamente responsivo
• Optimizado para pantallas táctiles
• Controles de tamaño adecuado para dedos
• Layout vertical en dispositivos pequeños

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si tienes ideas para mejorar la aplicación:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'Añadir nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.

🙏 Reconocimientos

• Técnica Pomodoro creada por Francesco Cirillo
• Iconos proporcionados por Font Awesome
• Fuentes de Google Fonts
• Inspiración en diseños de UI modernos

---

⭐ ¡Si te gusta este proyecto, dale una estrella en GitHub!