Using Django as backend, design a modern, responsive College Management System web application interface. The application includes multiple user roles (Admin, Staff, Student), each with a personalized dashboard and feature set. The system should have a clean layout with a sidebar for navigation, a top navbar, and card/grid-based content areas. Include dark/light mode toggle, tooltips, charts, and modern UI elements. Below are the detailed screens: 1. Common Screens (All Roles) Login Page: Email + password, "Forgot password", and "Sign up" links. Registration Page: First name, last name, email, password, confirm password. Forgot Password Page: Enter email and submit to receive reset instructions. Profile Page: View/update personal details, profile photo, change password. Contact Page: Form with name, email, message. Landing Page: Public info about the college, with links to login/register. 2. Admin (HOD) Dashboard Sidebar Navigation: Dashboard, Students, Staff, Courses, Subjects, Sessions, Attendance, Feedback, Leave, Notifications, Fees Management, Settings. Dashboard Cards: Total Students Total Staff Attendance Summary (Chart) Pending Leaves Outstanding Fees (Bar Chart or Doughnut) Fees Management Screens: Set tuition/hostel/other fee categories Assign fees to students by course/level Track paid/unpaid amounts per student Generate reports: Paid vs. Unpaid (filters: program, semester) Export fee reports to Excel/PDF Other Features: Approve/Reject Leave Applications View Attendance by Class/Subject Respond to Student/Staff Feedback 3. Staff (Teacher) Dashboard Sidebar: Dashboard, My Students, Attendance, Results, Feedback, Leave, Timetable. Dashboard Cards: Students under care Attendance taken % Subjects assigned Features: Take/update attendance Add/edit student results Apply for leave Send feedback to HOD 4. Student Dashboard Sidebar: Dashboard, Attendance, Results, Feedback, Leave, Timetable, Profile, My Fees. Dashboard Cards: Attendance % GPA / Academic Standing Subjects Enrolled Fees Balance Fees Screen: View assigned fee items and amounts View paid and outstanding balances Upload proof of payment (e.g., receipt image/PDF) Generate/download printable fee invoice Fee payment status: pending, partial, complete 5. Enhancements Dark/Light Theme Toggle Tooltips on all input fields Password Strength Meter in registration Email validation hints (inline) Notification Bell with count on Navbar Search box on top navbar Chart visualizations (using ApexCharts or Chart.js) 📐 Design Guidelines UI Framework: Tailwind CSS look Use rounded corners, clean spacing, subtle animations Color Theme: Blue/Grey for light mode, Dark Navy/Grey for dark mode Font: Inter, Roboto, or Poppins - Initial Deployment
3d667ec verified metadata
title: cms
emoji: 🐳
colorFrom: blue
colorTo: pink
sdk: static
pinned: false
tags:
- deepsite
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference