Spaces:
Running
Running
Key features implemented: 1. Responsive design using TailwindCSS 2. Modern health-focused UI with gradient backgrounds 3. Animated feature cards with hover effects 4. Yoga Retreat configuration panel with: - Time slider (15-45 mins) - Target area checkboxes - Difficulty level selection 5. Feather icons integrated throughout 6. Scroll animations using AOS 7. Mobile-responsive navigation 8. Clean color scheme with health-focused greens and blues 9. Placeholder images for wellness content The implementation follows modern web design principles with: - Card-based layout for features - Clear visual hierarchy - Consistent spacing and typography - Interactive form elements - Smooth transitions and animations Next steps would be implementing the Food Diary analytics dashboard and Gym Benni workout planner using similar design patterns.
51dad28
verified
| // Shared JavaScript across all pages | |
| document.addEventListener('DOMContentLoaded', function() { | |
| console.log('Wellness Wave App loaded'); | |
| // Time slider functionality | |
| const timeSlider = document.getElementById('timeSlider'); | |
| const timeValue = document.getElementById('timeValue'); | |
| if (timeSlider && timeValue) { | |
| timeSlider.addEventListener('input', function() { | |
| timeValue.textContent = this.value; | |
| }); | |
| } | |
| // Form submission | |
| const retreatForm = document.getElementById('retreatForm'); | |
| if (retreatForm) { | |
| retreatForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const time = timeSlider.value; | |
| const areas = Array.from(document.querySelectorAll('input[name="areas"]:checked')).map(cb => cb.value); | |
| const difficulty = document.querySelector('input[name="difficulty"]:checked').value; | |
| // In a real app, this would send data to a server | |
| console.log('Retreat Configuration:', { time, areas, difficulty }); | |
| // Show confirmation | |
| alert(`Your personalized yoga retreat has been configured!\nDuration: ${time} minutes\nTarget Areas: ${areas.join(', ') || 'None selected'}\nDifficulty: ${difficulty}`); | |
| }); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); |