Educational Dashboard - DevUI-Dark

A comprehensive, modern educational dashboard built with HTML, CSS, and JavaScript following the DevUI-Dark design system. This dashboard provides students with a unified view of their academic progress, courses, assignments, and performance analytics.

🎨 Design System

This dashboard follows the DevUI-Dark design system specifications:

• Theme: Dark, minimalist design optimized for developer tools and project management
• Colors:
  • Primary background: #111111
  • Surface background: #1A1A1A
  • Primary text: #E0E0E0
  • Secondary text: #A0A0A0
  • Accent colors: Blue (#3B82F6), Purple (#8B5CF6), Green (#22C55E)
• Typography: Inter font family with system fallbacks
• Spacing: 4px base unit system for consistent layouts
• Components: Card-based design with subtle borders and hover effects

✨ Features

📊 Progress Overview

• Overall GPA with semester progress indicators
• Courses Completed showing completion percentage
• Assignments Due with urgency indicators
• Study Hours tracking weekly progress

📚 Active Courses

• Course cards with progress bars
• Instructor and course code information
• Quick action buttons for lessons and grades
• Visual status indicators

📈 Performance Analytics

• Study Time Distribution chart (weekly view)
• Grade Trends line chart
• Time filter options (Week/Month/Semester)
• Responsive chart containers

📝 Current Assignments

• Priority-based assignment list
• Progress tracking for each assignment
• Due date information
• Quick action buttons (Continue/Submit)

🏆 Recent Achievements

• Achievement cards with icons
• Description and timestamp
• Visual recognition system

🚀 Interactive Features

• Hover effects and smooth animations
• Toast notifications for user feedback
• Keyboard shortcuts for navigation
• Real-time data updates
• Responsive design for all screen sizes

🛠️ Technical Implementation

HTML Structure

• Semantic HTML5 elements
• Accessible markup with proper ARIA labels
• Responsive grid layouts
• Component-based architecture

CSS Features

• CSS Custom Properties (variables) for theming
• Flexbox and CSS Grid for layouts
• Smooth transitions and animations
• Mobile-first responsive design
• Dark theme optimization

JavaScript Functionality

• ES6+ class-based architecture
• Event-driven interactions
• Canvas-based chart rendering
• Intersection Observer for animations
• Real-time data simulation
• Toast notification system

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Local web server (optional, for development)

Installation

1. Clone or download the project files
2. Ensure all three files are in the same directory:
   • index.html
   • styles.css
   • script.js
3. Open index.html in your web browser

Development Setup

For development with live reloading:

# Using Python 3
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

Then navigate to http://localhost:8000

⌨️ Keyboard Shortcuts

• Ctrl/Cmd + 1: Jump to Progress Overview
• Ctrl/Cmd + 2: Jump to Active Courses
• Ctrl/Cmd + 3: Jump to Current Assignments
• Ctrl/Cmd + N: Open Notifications

📱 Responsive Design

The dashboard is fully responsive and optimized for:

• Desktop: Full feature set with multi-column layouts
• Tablet: Adaptive grid layouts with touch-friendly interactions
• Mobile: Single-column layout with optimized touch targets

🎯 Browser Support

• Modern Browsers: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
• Features Used: CSS Grid, Flexbox, CSS Variables, ES6 Classes, Canvas API

🔧 Customization

Colors

Modify the CSS custom properties in :root to change the color scheme:

:root {
    --bg-primary: #111111;        /* Main background */
    --bg-surface: #1A1A1A;       /* Card backgrounds */
    --accent-blue: #3B82F6;      /* Primary accent */
    --accent-green: #22C55E;     /* Success accent */
    /* ... more colors */
}

Data

Update the JavaScript data arrays to customize:

• Study time data
• Grade trends
• Course information
• Assignment details

Layout

Modify the CSS Grid and Flexbox properties to adjust:

• Card sizes and spacing
• Column layouts
• Responsive breakpoints

🚧 Future Enhancements

• Data persistence with localStorage
• Export functionality for reports
• Dark/Light theme toggle
• More chart types and analytics
• Integration with learning management systems
• Offline support with service workers
• Accessibility improvements (ARIA labels, screen reader support)

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

📞 Support

For questions or support, please open an issue in the project repository.

---

Built with ❤️ following the DevUI-Dark design system