https://github.com/parisa-singh/emotion-based-website
A soft aesthetic, emotion-based dashboard to track habits, journal thoughts, and glow through your moods.
https://github.com/parisa-singh/emotion-based-website
css emotion-based html js self-care tracking-system
Last synced: about 1 month ago
JSON representation
A soft aesthetic, emotion-based dashboard to track habits, journal thoughts, and glow through your moods.
- Host: GitHub
- URL: https://github.com/parisa-singh/emotion-based-website
- Owner: parisa-singh
- License: mit
- Created: 2025-04-03T23:17:11.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-03T23:20:54.000Z (about 2 months ago)
- Last Synced: 2025-04-04T00:24:42.453Z (about 2 months ago)
- Topics: css, emotion-based, html, js, self-care, tracking-system
- Language: CSS
- Homepage: https://parisa-singh.github.io/emotion-based-website/
- Size: 327 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MindGlow: An Emotion-Based Self-Care Dashboard 🌈
Welcome to **MindGlow**, a self-care productivity dashboard that adapts to your emotions. Built with **HTML, CSS, and JavaScript**, this soft aesthetic project helps you organize your thoughts, track your habits, set intentions, and reflect based on how you feel.
---
## 🎯 Features
- **Mood Picker** – Choose how you feel and unlock a color-themed dashboard experience.
- **Dynamic Theme** – All pages reflect your selected mood with custom background, accent, and text colors.
- **Dashboard** – Central hub with glowing mood orb, animated entry, and buttons to all tools.
- **Affirmations** – List up to 20 affirmations to keep your mindset strong.
- **Brain Dump** – A soothing space to write out what's on your mind.
- **Intentions Grid** – Create and organize intentions under personalized categories.
- **Habit Tracker** – Track up to 5 habits weekly with interactive checkboxes.
- **Mood Orb** – A magical glowing orb that floats in the top-left, returning you to the mood picker.
---
## 💖 Tech Stack
- **HTML5** – Semantic structure
- **CSS3** – Custom animations, transitions, responsive layout
- **JavaScript (Vanilla)** – Interactivity, localStorage persistence
---
## 📁 Directory Structure
```
emotion-based-ui/
├── index.html # Mood selection screen
├── dashboard.html # Main page after mood is chosen
├── affirmations.html
├── brain-dump.html
├── intentions.html
├── habit-tracker.html
│
├── scripts/
│ ├── app.js
│ ├── affirmations.js
│ ├── brain-dump.js
│ ├── intentions.js
│ └── habits.js
│
├── style/
│ ├── main.css
│ └── components.css
│
├── sounds/
│ └── click.mp3 # Mood orb chime
```
---
## 🌸 Mood Color Themes
| Mood | Main Color | Accent Color |
|-------------|-------------|---------------|
| Happy | #FFF3B0 | #FFE066 |
| Sad | #C7E9F1 | #A9D6E5 |
| Angry | #F4A6A6 | #E29595 |
| Anxious | #A5B8D0 | #7D93B2 |
| Calm | #C8E6C9 | #A5D6A7 |
| Tired | #D8C4E6 | #C6A9E0 |
| Excitement | #FEC8D8 | #FDA4BA |
| Motivated | #FFD6A5 | #FFBC80 |
---
## 🧠 How It Works
- User selects a mood → stored in `localStorage`
- Theme colors are dynamically applied using CSS variables
- Mood orb updates color + emoji and links back to mood picker
- Each feature page pulls mood theme and adapts accordingly
- All data (affirmations, intentions, habits, dumps) are saved with `localStorage`
---
## 🚀 Getting Started
1. Clone or download this repository
2. Open `index.html` in your browser
3. Choose a mood and explore your dashboard ✨
> No frameworks, no backend — just pure creative frontend joy 💫
---
## ✨ Inspired By
- Cozy productivity tools ☁️
- Therapy and reflection journaling 🧘♀️
- Moodboards, pastel planners, bullet journals 💕
---