A modern, responsive dashboard prototype for academic department heads (Chef de Département) in an academic management platform.

1. Dashboard - Overview with performance metrics and charts
2. Gestion des Étudiants - Student management by filière (major/track)
3. Gestion des Enseignants - Professor management by department
4. Emploi du Temps - Timetable management interface
5. Calendrier - Academic calendar with events
6. Annonces - Announcements management
7. Suivi des Étudiants en Difficulté - Tracking struggling students
8. Déconnexion - Logout functionality

• Responsive Design: Works on desktop, tablet, and mobile devices
• Modern UI: Clean, card-based interface with hover effects
• Interactive Charts: Performance and attendance visualization
• Modal Dialogs: For confirmations and form inputs
• Navigation: Collapsible sidebar with clear section organization
• French Interface: Fully localized for French academic institutions

/frontend/
├── index.html          # Main application template
└── script.js          # JavaScript functionality and data

/backend/
└── index.ts           # Hono server for serving static files

• Frontend: HTML5, CSS3 (TailwindCSS), Vanilla JavaScript
• Charts: Chart.js for data visualization
• Icons: Font Awesome 6
• Backend: Hono (TypeScript) for static file serving
• Styling: TailwindCSS via CDN

• Mobile-first design approach
• Collapsible sidebar navigation
• Touch-friendly interface elements
• Responsive tables and cards
• Optimized for various screen sizes

• Sidebar with section icons and labels
• Mobile hamburger menu
• Active state indicators
• Smooth transitions

• Card-based layouts for categories
• Responsive tables with action buttons
• Status badges and indicators
• Interactive charts and graphs

• Confirmation dialogs for delete operations
• Form modals for adding new records
• Backdrop blur effects
• Accessible keyboard navigation

The prototype includes realistic sample data for:

• Students across different filières (Informatique, Mathématiques, Physique)
• Professors across different departments
• Academic performance metrics
• Attendance statistics
• Calendar events and announcements

The interface can be easily customized by:

• Modifying the sample data in script.js
• Adjusting colors and styling via TailwindCSS classes
• Adding new sections or modifying existing ones
• Integrating with real backend APIs

This is a frontend prototype designed to demonstrate UI/UX concepts. For production use:

1. Replace sample data with real API calls
2. Implement proper authentication
3. Add form validation and error handling
4. Connect to a real database
5. Add proper state management

• This is a UI prototype - no real data persistence
• All CRUD operations show placeholder alerts
• Charts display sample data for demonstration
• Designed specifically for French academic institutions
• Optimized for modern browsers with ES6+ support