E-Learning Dashboard (Design System)

[rhalbhavi]

What does this PR do?

Description

This PR adds a student dashboard for an online learning platform, showing course progress, upcoming lessons, and achievements. It is a modern student-facing dashboard for a Learning Management System (LMS). It provides a centralized view of a student's learning journey.

Key Features

• 'My Courses' section with progress bars.
• Upcoming lessons or deadlines calendar view.
• Gamification elements like achievement badges and points.
• A main chart showing learning activity over time.
• Responsive design for learning on the go.

---

Closes #773

Type of Change

• New tool
• Enhancement to existing tool
• Bug fix
• Documentation update
• Build system / infrastructure

Screenshot

---

Checklist

• I have read the Contributing Guide
• My branch follows the naming convention (add/tool-name, feat/description, or fix/description)
• I have tested my changes locally in at least one modern browser

For new tools:

• The tool is a single self-contained .html file in the tools/ folder
• The filename is kebab-case (e.g. json-formatter.html)
• I added an entry to data/tools.json with all required fields
• I added a screenshot as tools/<tool-name>.png next to the HTML file
• No JS frameworks (React, Vue, Angular, etc.) or heavy UI libraries (Bootstrap JS, jQuery, etc.)
• CDN links for lightweight libraries and fonts are fine — no copy-pasting library source code inline
• I ran node scripts/sort-norm.js data/tools.json to sort and normalize the tools registry
• I ran node scripts/build.js and verified the landing page renders correctly

For enhancements / bug fixes:

• I have not introduced any external dependencies
• The tool still works as a standalone single HTML file