Contact person: Zen Relaxation Web App

Phone:Show

Email:Show

Location: Bucharest, Romania

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Budget: maximum €150 - please bid only if you are within budget
Platform: Static Website (No CMS, No Database)
Hosting: cPanel (SSL + LiteSpeed ready)
Timeline: 5–7 days

About the Project
I am building a minimalist, mobile-first Zen relaxation site where users can take a mental break by selecting a time duration and ambient background (forest, ocean, rain). Everything takes place on a single page, with no page reloads and no navigation bar, functioning like a fluid web app.

The entire flow is already defined. I will provide all content, mockups, and logic.

What Is Already Provided
Mini mockup with layout, color and font references

Background images for three themes: forest, rain, ocean

Ambient sounds for each background theme (looped)

Full set of Zen messages (appear every 30 seconds)

Terms & Conditions, GDPR and Cookie Policy (text format)

Final logic flow (PDF)

Hosting with cPanel, SSL and LiteSpeed

Project Requirements
1. Welcome Screen
Centered message: "Let’s unwind together"

Timer duration buttons: 3, 5, 10, 15, 30 minutes

On click, buttons fade and disappear

2. Background Theme Selector
Three options: Forest, Rain, Ocean

Each loads a static background image and corresponding ambient looped sound

3. Timer Display Option
Two buttons: "Show Timer" and "No Timer"

If timer is shown, a minimal countdown appears top center

If hidden, user experiences background and sounds without distraction

4. Relaxation Session
Fullscreen background image remains static

Looping ambient sound plays

Every 30 seconds, a Zen message fades in and out

Countdown only if selected in step 3

5. End of Session
A calm gong sound plays

Final message displayed: “Thank you for taking time for your mental well-being.”

Page shows:

Restart button at the top

Donate button at the bottom (link to Ko-fi or Buy Me a Coffee)

Technical Requirements
One single HTML page (no routing)

Fully responsive and optimized for mobile

Clean CSS transitions (fade-in and fade-out)

Fast loading with compressed .webp images and preloaded audio

Ambient audio loops must be seamless

Cookie and terms modal (scrollable text, with accept button)

Favicon (provided)

Use only HTML/CSS/JS, no heavy frameworks (React/Vue only if lightweight)

Semantic and clean HTML structure

Basic accessibility: good contrast, readable fonts, focusable elements

SEO basics: meta title and description

Folder Structure Example
bash
Copy
Edit
project/
├── [login to view URL]
├── /assets/
│ ├── /images/ → background images (.webp)
│ ├── /sounds/ → ambient loop files (.mp3 or .ogg)
│ ├── [login to view URL]
├── /css/ → [login to view URL]
├── /js/ → [login to view URL]
Optional (Bonus if feasible)
Progress ring animation around countdown timer

Soft fade-in/fade-out on audio start and end

What I Expect From You
Experience with mobile-first and fast-loading websites

Ability to implement smooth UI/UX transitions without bloated code

Clear and maintainable HTML/CSS/JS structure

Testing on mobile and desktop

Delivery as .zip or GitHub repo

To apply, please include:

Portfolio or links to previous similar work

Confirmation that you can follow this brief

Estimated timeline for completion" (client-provided description)