ClassRoom is an academic operations dashboard for organizing lessons, course resources, student groups, semester progress, and instructor messages in one workspace.
| Module | Purpose |
|---|---|
| Overview | Summarizes enrollment, active courses, assignments, and completion data |
| Lessons | Presents the weekly schedule with time, batch, delivery mode, and room details |
| Materials | Organizes learning resources by subject and supports personal bookmarks |
| Groups | Tracks student communities and their course and assignment activity |
| Progress | Reports lesson completion and the next examination milestone |
| Inbox | Provides message review, reply actions, and inbox management |
- Search lessons, materials, and groups from the global search field
- Press
/to move directly to search - Select dates from the schedule strip
- Save and remove material bookmarks
- Expand group summaries or create a group from the dashboard
- Review, reply to, and remove inbox messages
- Switch appearance preferences; the selected mode is stored in the browser
- Open the navigation drawer on compact screens
The project has no framework or build dependency. The interface uses semantic HTML, CSS custom properties and Grid, and browser-native JavaScript APIs. Interaction state is handled locally, with localStorage used only for the appearance preference.
Classroom-Website/
├── index.html # Dashboard structure and content
├── style.css # Design system, layouts, and appearance modes
├── class.js # Dashboard behavior and state management
├── AP.jpeg # Administrator profile image
└── README.md # Project documentation
Clone the repository and open index.html in a current browser. A local static server can also be used:
npx serve .The repository can be published directly through GitHub Pages because all application assets are static and the entry point is index.html.