📚 Study Hub — Daily Study Dashboard

A modern, responsive study dashboard built to help students organize their day, manage study tasks, track focus sessions, and stay productive.

✨ Overview

Study Hub is an all-in-one study dashboard designed around daily productivity.

It combines a study schedule, task management, Pomodoro timer, focus mode, grade calculator, calculator, prayer times, notifications, and daily motivation into one clean interface.

The project features a modern glassmorphism UI with smooth animations, dark/light themes, and a responsive layout for desktop and mobile devices.

🚀 Features

📊 Dashboard

The main dashboard gives you a quick overview of your study day, including:

• Today's date
• Completed and total tasks
• Number of scheduled lessons
• Total focus hours
• Completed focus sessions
• Next upcoming lesson
• Task completion progress
• Focus score

---

📅 Smart Schedule

Create and manage your daily study schedule.

Each lesson can include:

• Lesson or subject name

• Time

• Type:

  • 📖 Study
  • 🎓 Lesson
  • 📝 Exam
  • 🔄 Review

• Reminder before the lesson

You can also:

• Add lessons
• Edit lessons
• Delete lessons
• Automatically sort lessons by time

---

✅ Daily Tasks

Manage your daily to-do list directly from the dashboard.

Features include:

• Add new tasks
• Mark tasks as completed
• Delete tasks
• Automatic completion tracking
• Task progress percentage

Completed tasks are visually marked to make progress easier to follow.

---

⏱️ Interactive Pomodoro Timer

A built-in Pomodoro timer helps you organize focused study sessions.

Focus Session

25 minutes

Break Session

5 minutes

The timer includes:

• Start / pause
• Reset
• Skip session
• Circular progress indicator
• Session counter
• Focus time tracking
• Selected study subject
• Automatic transition between focus and break sessions

---

🧠 Deep Work Mode

A distraction-free Deep Work Mode provides a focused environment for studying.

It includes:

• Large Pomodoro timer
• Current tasks
• Start / pause controls
• Reset control
• Dedicated full-screen interface

---

🧮 Calculator

A built-in modern calculator for quick calculations while studying.

Supports:

• Addition
• Subtraction
• Multiplication
• Division
• Parentheses
• Decimal numbers
• Clear
• Result calculation

---

📈 Grade Predictor

Calculate your percentage and grade based on:

• Your score
• Total possible score

Simply enter your results and calculate your percentage instantly.

---

🕌 Prayer Times

The dashboard includes a prayer-times section with city selection.

Available cities:

• Cairo
• Giza
• Alexandria

The interface also includes an option to enable notifications.

---

💡 Daily Inspiration

A daily motivation section provides study-focused motivational quotes.

You can:

• Generate another quote
• Copy the quote
• Share the quote

🔔 Notifications

The dashboard includes notification support for study reminders and scheduled activities.

---

🎨 UI & Design

Study Hub uses a modern glassmorphism-inspired design.

Design Features

• Glass-style cards
• Blurred backgrounds
• Gradient accents
• Smooth transitions
• Hover animations
• Floating elements
• Responsive layouts
• Dark and light themes
• Mobile navigation

The main visual palette is built around:

• Navy
• Violet
• Cyan
• Emerald

The project also uses animated background effects and interactive UI elements to create a modern dashboard experience.

🛠️ Tech Stack

• HTML5
• CSS3
• JavaScript
• Tailwind CSS
• Lucide Icons
• Local Storage API
• Vercel

---

📂 Project Structure

Study-Hub/
│
├── index.html
├── script.js
├── style.css
└── README.md

🌐 Live Website

</> Developer

Developed by Amrix & Mohamed

---

© 2026 Study Dashboard