🧘‍♀️ RespiraVida - Aplicación de Meditación Interactiva

Una aplicación web moderna para meditación y técnicas de respiración guiada, con animaciones interactivas y seguimiento de progreso personalizado.

📱 Imagenes de la Aplicacion 📱

![Pantalla principal modo claro🌓]

![Pantalla modo oscuro🌓]

![Panel de musica🎵]

✨ Características

• 🌬️ Múltiples técnicas de respiración (4-5-6, 4-7-8, 5-5-5, 2-1-4)
• 📊 Seguimiento de coherencia respiratoria y progreso
• 📱 Diseño responsive y adaptable a todos los dispositivos
• 🎵 Biblioteca de sonidos ambientales para meditación
• 🌓 Modo oscuro/claro
• 📈 Estadísticas y análisis detallados
• 📅 Calendario de seguimiento de hábitos
• 🏆 Sistema de logros para motivar la práctica
• 🔔 Notificaciones contextuales
• 🔄 Sincronización de datos en la nube

🛠️ Tecnologías utilizadas

• 💻 HTML5, CSS3 y JavaScript
• 🎨 CSS avanzado (glassmorphism, animaciones, gradientes)
• 📱 Diseño responsivo con media queries
• 🎭 Web Animations API
• 💾 LocalStorage para almacenamiento de datos
• 🌈 SVG para gráficos e iconos

✨ Efectos y Animaciones

• 🌊 Fondo con gradiente animado de transición suave
• 💫 Sistema de partículas dinámicas generadas por JavaScript
• 🔄 Animación de respiración con efecto pulsante sincronizado
• 🌀 Efecto cónico rotativo en el círculo central
• 🔍 Efectos glassmorphism con backdrop-filter para una interfaz moderna
• 📊 Visualizaciones animadas para estadísticas e insights
• 🌓 Transición fluida entre modos claro/oscuro
• 👆 Micro-interacciones en hover con transformaciones y escalado
• 🎯 Notificaciones animadas con entrada/salida suave
• 💎 Efectos de profundidad con sombras dinámicas

🚀 Instalación

1. Clona el repositorio:

   git clone https://github.com/Lizzy0981/RespiraVida-MeditacionInteractiva.git
   

2. Abre el archivo index.html en tu navegador o usa un servidor local como Live Server de VSCode.

3. También puedes acceder a la versión desplegada aquí.

💡 Uso

1. Selecciona una técnica de respiración con el botón "Técnicas".
2. Pulsa "Comenzar" o haz click en el círculo central.
3. Sigue las instrucciones de la animación: inhala, mantén y exhala.
4. Revisa tus estadísticas e insights en el panel lateral.
5. Personaliza la experiencia con sonidos ambientales.

🔮 Próximas mejoras

• 🤖 Integración con IA para recomendaciones personalizadas
• 🌐 Comunidad de meditación y desafíos grupales
• 🎮 Gamificación avanzada con niveles y recompensas
• 🔊 Meditaciones guiadas por voz
• 🩺 Integración con dispositivos de salud para monitoreo en tiempo real

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

👩‍💻 Créditos

Desarrollado con 💜 por Elizabeth Diaz Familia

• 🐱 GitHub
• 💼 LinkedIn
• 🐦 Twitter

🙏 Agradecimientos

• 🧠 Expertos en meditación y respiración consciente
• 🎨 Comunidad de diseño web por la inspiración
• 🌟 A todos los usuarios que hacen que este proyecto crezca

Built With

• css
• html
• javascript