Remix

Make your own version of FitQuest Fitness RPG

Edit the prompt below and generate a customized version in seconds.

Original by saisabareesh167

Describe your app

---

Build a complete, single-project gamified fitness website called **"FitQuest"** using **plain HTML, CSS, and vanilla JavaScript only** (no frameworks, no build tools — must run by just opening index.html or a simple live-server). Organize it as multiple linked pages or a single-page app with JS-driven view switching (your choice, pick whichever is easier to keep clean). Use localStorage to persist all user data (XP, coins, streak, achievements, avatar, theme) between visits.

## 1. Overall theme & style
- Futuristic gaming aesthetic: dark background, neon cyan/purple/green glowing accents, rounded cards, soft glow shadows, game-like fonts (e.g. "Press Start 2P" or "Orbitron" from Google Fonts for headings).
- Fully responsive (mobile + desktop).
- Include a theme switcher (at least 2–3 color themes, e.g. Neon Cyan, Sunset Orange, Forest Green) that updates CSS variables and saves the choice in localStorage.

## 2. Pages / Views
1. **Landing / Login Page** – FitQuest logo, tagline ("Every workout builds your world"), a simple username input (no real auth needed) to create/load a local profile, Start button.
2. **Home / Dashboard** – shows avatar, level, XP bar, coin count, current streak (with flame icon), today's quest suggestion, mood check-in prompt, quick links to Adventure Map, Quests, Achievements, AI FitBuddy chat, Shop, Profile.
3. **Adventure World Map** – a visual path/map with 5 zones in order: Beginner Village → Energy Forest → Strength Mountain → Challenge Valley → Fitness Castle. Each zone unlocks after completing enough quests in the previous one. Clicking an unlocked zone opens its quest list.
4. **Quest / Level Page** – shows a single exercise-based quest (exercise name, description, target reps/duration, an illustrative icon/animation). A "Start Quest" button starts a simple on-screen rep counter or countdown timer (manual "+1 rep" button and/or a JS `setInterval` timer — do NOT attempt real camera/pose-detection AI, just build the UI/UX and simulate it with a placeholder note like "AI Camera Rep Counter — coming soon"). On completion: award XP + coins, open a Mystery Box animation (reveal random reward: XP/coins/avatar item/streak shield), update combo counter if quests are completed back-to-back.
5. **Boss Battle Page** – appears every few levels; shows a "boss" character with an HP bar that decreases as the user completes a short set of 3 exercises; celebratory defeat animation when HP hits 0.
6. **Achievements Page** – grid of trophy cards (e.g. "First Quest," "7-Day Warrior," "Adventure Explorer"), locked (greyed out) vs unlocked (glowing) states.
7. **Shop / Avatar Customization Page** – spend coins on avatar outfits, accessories, and backgrounds; simple avatar built from layered SVG/PNG placeholders or CSS shapes that update live as items are equipped.
8. **AI FitBuddy Chat Page** – a chat UI (message bubbles, input box, send button) for fitness/diet questions. Wire it to call an AI API endpoint via `fetch` (structure the code so an API key / endpoint can be dropped in — use a placeholder function `getAIResponse(userMessage)` that currently returns a canned helpful response, so it works offline for the demo but is easy to connect to a real API later).
9. **Mood/Energy Check-in Modal** – triggered once per day on dashboard load: "How are you feeling today?" with Low / Okay / Energetic buttons; selection filters which quest difficulty is suggested next.
10. **Profile Page** – Snapchat-style circular avatar, username, level, join date, total workouts completed, badges earned.

## 3. Core gamification systems (implement in JS, store in localStorage)
- **XP & Levels**: XP bar fills per quest; leveling up triggers a full-screen "LEVEL UP!" animation and changes avatar background/outfit tier.
- **Fitness Coins**: earned per quest, spendable in Shop.
- **Streak system**: daily-login streak counter that increments once per calendar day the user logs in; if a day is missed, streak resets/reduces (Snapchat-style); a "Streak Shield" item (earned via Mystery Box) can protect one missed day — implement the logic to consume a shield automatically instead of resetting the streak.
- **Combo system**: consecutive quests completed within the same session increase a combo multiplier that boosts XP earned; combo resets if the user leaves mid-quest.
- **Mystery Box**: a reusable modal/animation component that reveals a randomized reward (XP, coins, avatar item, or streak shield) with a satisfying "shake → burst open" CSS animation.
- **Reminders**: if the user hasn't completed a quest today, show a friendly on-page reminder banner/notification (in-app only, no need for real push notifications) plus small "Great job!" toast/confetti micro-animations after every completed task, however small.

## 4. Code organization
- `index.html`, `styles.css`, `app.js` at minimum; feel free to split JS into modules (`quests.js`, `storage.js`, `ui.js`, etc.) if it stays clean.
- Comment the code clearly — this is for a hackathon demo built by first-year CS students, so keep the code readable, well-structured, and not over-engineered.
- Include sample/mock data for quests, exercises, achievements, and shop items so the site works fully out of the box with no backend.

## 5. Explicit "not required" notes for the AI generating this
- Do NOT implement real camera-based AI pose detection — simulate the rep counter UI only, with a clear comment marking where a real ML model (e.g. MediaPipe Pose) could be plugged in later.
- Do NOT implement real user authentication or a backend database — localStorage only.
- Calorie estimates shown anywhere should be labeled clearly as rough/informational estimates, not medical data.

Generate the full working code now, file by file.

Free to use. No credit card required.