🎧 StudyMood V2

Study spaces that match your mood.
Choose how you feel → get a tailored study environment with music, colors, notes, todos & streaks.

---

🌌 What is StudyMood?

StudyMood is a web app that builds a study environment around your current mood instead of forcing you into one rigid layout.

You pick how you feel right now:

• 🎯 Deep focus
• 🌊 Calm & slow
• ⚡ Need energy
• 🧠 Overwhelmed

…and StudyMood adjusts:

• Background and color palette
• Lo-fi / ambient soundtrack
• UI density and motion
• Notes, todos and streak view

The goal: show up consistently, even when your energy changes day to day.

---

✨ Features

• 🎛 Mood-based workspaces
  Choose a mood and watch the hero card adapt text, description & soundtrack meta instantly.

• 🎧 Ambient player card
  Beautiful mini player with animated equalizer bars and glowing progress bar (visual only for now).

• ✅ Simple todos & streaks
  “Don’t break the chain” layout with tiny tasks and a streak bar.

• 📝 Session notes
  Lightweight bullet notes for “today’s focus” instead of a bloated note system.

• 🌗 Light / Dark theme with iris effect
  Smooth center-circle “iris” animation when toggling themes. Feels sharp and minimal, not gimmicky.

• 🟣 Soft, focused aesthetic
  Gradient orbs, calm motion, and a single hero card that shows off the concept.

---

🛠 Tech Stack

• Frontend

  • Twig templates
  • Bootstrap 5 for layout & components
  • Vanilla JavaScript for interactivity & animations
  • Custom CSS design (public/frontend/css/default.css)

• Dev Setup

  • Docker & Docker Compose
  • Ready to run via docker compose up

You can plug this frontend into any backend (Symfony, Laravel, Node, etc.) – it’s mostly UI and Twig.

---

📂 Project Structure (frontend-related)

Studymood-V2/
├─ public/
│  └─ frontend/
│     ├─ css/
│     │  └─ default.css        # All custom StudyMood styles (themes, hero, moods, animations)
│     └─ js/
│        └─ default.js         # Theme toggle, mood logic, parallax, scroll reveal
└─ templates/
   ├─ base.html.twig           # Global layout (head, background orbs, iris overlay, scripts)
   ├─ home/
   │  └─ index.html.twig       # Homepage: hero, moods, tools, streaks
   └─ partials/
      ├─ _header.html.twig     # Navbar with theme toggle
      └─ _footer.html.twig     # Footer