🌿 ZenState: The PWA Mindfulness & Meditation Architecture

Context Develop a sophisticated, nature-inspired meditation application using HTML5, CSS3, and vanilla JavaScript. The application must function as a distraction-free sanctuary, prioritizing a calming aesthetic and seamless performance to facilitate deep focus and relaxation.

Objective Construct a feature-rich meditation timer that supports multi-stage sessions (Preparation, Meditation, Rest). The system must incorporate high-quality audio management for ambient sounds and guided prompts, while offering robust tracking and scheduling capabilities via a Progressive Web App (PWA) framework.

Style Organic, serene, and minimalist. Use a "Soft UI" approach with blurred backgrounds (Glassmorphism), smooth easing functions for transitions, and nature-inspired color palettes. Ensure the breathing guide utilizes synchronized CSS animations to mimic natural respiratory rhythms.

Tone Calm, rhythmic, and unobtrusive. The UI should feel like a quiet space, avoiding harsh alerts or cluttered layouts that could disrupt the user's meditative state.

Audience Meditation practitioners, wellness enthusiasts, and individuals seeking stress reduction through guided breathing and structured mindfulness intervals.

Response Requirements

• Timer Mechanics:
  • Three-stage interval logic: Preparation (warm-up), Meditation (core), and Rest (cool-down).
  • Interval bells with customizable volume and frequency.
• Audio Engine:
  • Ambient sound mixer (Nature sounds, Binaural beats, White noise).
  • Integrated guided voice prompts with play/pause synchronization.
• Visual & UX Features:
  • Animated visual breathing guide (Expand/Contract circles).
  • Dark mode and multiple nature-themed visual presets.
  • Responsiveness for mobile, tablet, and desktop viewports.
• Data & Persistence:
  • Session history and statistical tracking (total minutes, streaks).
  • Scheduling engine with browser-based reminders.
• Technical Standards:
  • PWA manifest and Service Worker implementation for full offline functionality.
  • Accessible controls for screen readers and high-contrast accessibility.