---

⚡ FocusFlow – Productivity Dashboard

✨ A premium animated productivity system designed to boost focus, planning and performance.

---

🧠 “Designed like a SaaS • Built like a product • Powered by JavaScript”

---

---

🌟 Why FocusFlow?

Most productivity apps are boring.
FocusFlow feels alive.

✔ Animated dashboard
✔ Glassmorphism design
✔ Zero distractions
✔ Local-first storage
✔ Smooth performance

---

🧩 What Does This Project Do?

FocusFlow is an all-in-one productivity dashboard that helps users:

• organize daily tasks
• plan time hour-by-hour
• stay focused during study or work
• improve consistency using visual motivation
• manage productivity without switching multiple apps

Everything works directly inside the browser —
no login, no backend, no database required.

---

⚙️ How FocusFlow Works

🕒 Live Date & Time

• Displays real-time clock with seconds
• Shows current date and day
• Auto updates every second

---

🎨 Theme Switcher

• One-click theme change
• Multiple color themes
• Smooth animated transitions
• Implemented using CSS variables

---

✅ To-Do List Manager

• Add daily tasks
• Mark tasks as important
• Delete completed tasks
• Data stored securely in LocalStorage
• Tasks remain after refresh or browser close

---

📅 Daily Planner

• Hour-wise planning system
• Ideal for:
  • study schedule
  • work routine
  • time blocking
• Automatically saves input in LocalStorage

---

💡 Motivation System

• Fetches random quotes from API
• Displays quote + author
• Backup static quote if API fails
• Helps maintain positive mindset

---

⏱ Pomodoro Study Timer

• 25-minute work session
• 5-minute break session
• Automatic session switching
• Start / Pause / Reset controls
• Visual glow animation while running

---

🎬 Animated User Interface

• Floating dashboard cards
• Glassmorphism blur effects
• Hover glow interactions
• Smooth page open / close animations
• Animated branding & buttons
• Theme morphing transitions

---

💾 Local Storage System

• Stores:
  • tasks
  • daily planner data
• No server required
• Fast & privacy-friendly

---

📱 Responsive Design

• Works perfectly on:
  • Desktop
  • Laptop
  • Tablet
  • Mobile
• Fully adaptive layout

✨ Core Features

Feature	Description
⏰ Live Clock	Real-time date & time
🎨 Theme Switcher	Animated multi themes
✅ To-Do List	Persistent storage
📅 Daily Planner	Hour-wise scheduling
💡 Motivation	API based quotes
⏱ Pomodoro	Work & break timer
✨ Animations	Smooth UI effects
📱 Responsive	All devices

---

🧠 Tech Stack

Tech	Usage
HTML5	Structure
CSS3	Animations & UI
JavaScript	Core logic
LocalStorage	Data persistence
Quotable API	Motivation quotes
Vercel	Deployment

---

📂 Project Structure

focusflow-dashboard
│
├── assets
│   ├── images
│   ├── fonts
│
├── index.html
├── style.css
├── script.js
├── animated-banner.svg
├── preview.png
└── README.md

---

🔌 API Used

[https://api.quotable.io/random](https://api.quotable.io/random)

---

🛠 Installation

git clone https://github.com/vikaskumar098/focusflow-dashboard.git

cd focusflow-dashboard

open index.html

✅ No npm ✅ No build tools ✅ Pure frontend

---

📸 Preview

---

👨‍💻 Author

Vikas Kumar

🚀 Frontend Developer | MERN Stack Learner 🎓 B.Tech IT Student

---

⭐ Support This Project

⭐ Star the repository 🍴 Fork it 📤 Share with friends

---

🏁 License

Licensed under MIT License

---