Stress Relief Muzic and help

and more info and help
main relaxing muzic page

Project Story: Auratunes - Stress-Free Moments

🔥 What Inspired Me:

During exam season, I noticed how stress was affecting not just me but many of my friends and family. Sleepless nights, endless scrolling, and anxiety were common. That’s when I realized music and visuals can genuinely help people relax. This inspired me to create Auratunes—a simple web app providing a calming space with relaxing music, soothing visuals, and essential stress-relief resources.

⸻

🧠 What I Learned: • HTML/CSS for structuring and styling web pages • Embedding videos and audio players for an immersive experience • Handling JavaScript events for interactive features like the Play/Pause button and live time display • How to link external resources and provide mental health hotlines for real support • Improved understanding of UI design and how colors, fonts, and background choices impact user emotions

⸻

🛠 How I Built My Project: • HTML & CSS: Created the main layout with a soft, relaxing color scheme to reduce visual stress • Video Background: Added a looped nature-themed background video to create a soothing ambiance • Audio Player: Integrated a relaxation music file with a Play/Pause button using JavaScript • Live Digital Clock: Used JavaScript’s setInterval() to display real-time, adding a calming digital clock • Resource Page: Created a linked detailed help page (More-detail.html) with: • Helpful articles from CDC and VA • Hotline numbers for immediate support • Footer Navigation: Added a link for users needing professional mental health resources

⸻

😓 Challenges I Faced: • Audio Autoplay Restrictions: Browsers block autoplay audio; had to implement manual play/pause • Video Overlap Issue: Initially, the background video covered my content; fixed using z-index and position • File Linking: Linking between pages and handling local file paths was tricky, especially when testing on different systems • Responsive Design: Ensuring the website looked good on mobile and desktop required tweaking layouts and sizes • Time Zone Handling: Wanted to display the local time correctly, so used toLocaleTimeString()

⸻

🌟 Final Thoughts:

This project made me realize how tech can genuinely help mental health. I loved combining design, music, and important resources into one project. I hope Auratunes becomes a little digital escape for anyone needing a break!