wellness-wave / script.js
flen-crypto's picture
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'
});
}
});
});
});