diff --git a/data/design-system.json b/data/design-system.json index d9dc1ce..6334057 100644 --- a/data/design-system.json +++ b/data/design-system.json @@ -200,6 +200,32 @@ "difficulty": "Medium", "status": "live" }, + { + "id": "e-learning-dashboard", + "name": "E-Learning Platform Dashboard", + "shortDescription": "A student dashboard for an online learning platform, showing course progress, upcoming lessons, and achievements.", + "longDescription": "## E-Learning Platform Dashboard\n\nA modern student-facing dashboard for a Learning Management System (LMS). It provides a centralized view of a student's learning journey.\n\n### Features\n\n- 'My Courses' section with progress bars.\n- Upcoming lessons or deadlines calendar view.\n- Gamification elements like achievement badges and points.\n- A main chart showing learning activity over time.\n- Responsive design for learning on the go.", + "category": "dashboards", + "tags": [ + "dashboard", + "lms", + "e-learning", + "student", + "courses", + "progress" + ], + "techStack": [ + "HTML5", + "CSS3", + "JavaScript" + ], + "frameworks": [ + "Chart.js", + "Alpine.js" + ], + "difficulty": "Medium", + "status": "live" + }, { "id": "design-system-kanban", "name": "Design System Kanban Board", diff --git a/design-system/e-learning-dashboard.html b/design-system/e-learning-dashboard.html new file mode 100644 index 0000000..a0aea1a --- /dev/null +++ b/design-system/e-learning-dashboard.html @@ -0,0 +1,656 @@ + + + + + + E-Learning Platform Dashboard — One File Tools + + + + + + + + + + + + +
+ + + + +
+ + +
+ +
+
+ +
+ + +
+
+ +
+ +
+ +
+
+ + avatar +

John Doe completed the "Advanced CSS" course.

+ + +

Your "React Basics" assignment is due tomorrow.

+ +
+
+
+
+ +
+ Profile + Settings + Log Out +
+
+
+
+ + +
+
+

👋Welcome back, Jane!

+

Keep up the great work. Your progress is amazing!

+ + +
+
+
+
+ +
+
+

Courses in Progress

+

4

+
+
+
+
+
+
+ +
+
+

Completed Courses

+

12

+
+
+
+
+
+
+ +
+
+

Certificates Earned

+

8

+
+
+
+
+
+
+ +
+
+

Learning Streak

+

21 Days

+
+
+
+
+ +
+ + +
+
+

⏰Due Soon

+
+ +
+
+
+ +
+
+ +
+ + +
+

Continue Learning

+
+
+
+ Web Development + 3h 20m left +
+
Advanced CSS & Sass
+
+
+
+
+ 75% Complete + +
+
+
+
+ Data Science + 1h 15m left +
+
Python for Data Analysis
+
+
+
+
+ 90% Complete + +
+
+
+
+ UI/UX Design + 8h 45m left +
+
Figma Prototyping
+
+
+
+
+ 30% Complete + +
+
+
+
+ Marketing + 5h 30m left +
+
SEO Fundamentals
+
+
+
+
+ 50% Complete + +
+
+
+
+ +
+ + +
+ +
+ +
+
+

📈Learning Activity

+
+
+ + This Week +
+
+ + Last Week +
+
+
+
+ +
+
+ + +
+

🏆Achievements

+
+
+
+ ✨ +
+

Perfect Start

+

Complete 1st lesson

+
+
+
+ 🎓 +
+

Course Master

+

Finish a course

+
+
+
+ 💡 +
+

Scholar

+

Pass a quiz

+
+
+
+ 📝 +
+

Project Pro

+

Submit a project

+
+
+
+ 🔥 +
+

Streak Keeper

+

7-day streak

+
+
+
+
+ + +
+
+

🗓️

+
+ + +
+
+
+ +
+
+ + +
+
+
Upcoming Deadlines
+
    +
  • +
    +
    +

    Final Quiz: Advanced CSS

    +

    July 29, 2026

    +
    +
    • +
  • +
    +
    +

    Project Submission: Figma

    +

    August 5, 2026

    +
    +
    • +
  • +
    +
    +

    Peer Review: Python

    +

    August 10, 2026

    +
    +
    • +
+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/design-system/e-learning-dashboard.png b/design-system/e-learning-dashboard.png new file mode 100644 index 0000000..fc3ce97 Binary files /dev/null and b/design-system/e-learning-dashboard.png differ