Institute Management Dashboard Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EduTech Institute - Management System</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body class="bg-gray-50 min-h-screen font-inter"> <!-- Sidebar --> <div class="fixed left-0 top-0 h-full w-72 institute-gradient text-white z-50 slide-in-right"> <div class="p-8"> <!-- Logo --> <div class="flex items-center space-x-4 mb-12"> <div class="w-12 h-12 blue-gradient rounded-xl flex items-center justify-center"> <span class="text-white font-bold text-xl">?</span> </div> <div> <h1 class="text-2xl font-playfair font-bold">EduTech Institute</h1> <p class="text-sm text-gray-200">Academic Excellence</p> </div> </div> <!-- Navigation --> <nav class="space-y-3"> <a href="#" class="nav-item active flex items-center space-x-4 p-4 rounded-xl glass-morphism hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('dashboard')"> <span class="text-xl">?</span> <span class="font-medium">Dashboard</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('students')"> <span class="text-xl">?â?</span> <span class="font-medium">Students</span> <span class="ml-auto bg-blue-500 text-xs px-2 py-1 rounded-full notification-dot">1,247</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('faculty')"> <span class="text-xl">?â?</span> <span class="font-medium">Faculty</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('courses')"> <span class="text-xl">?</span> <span class="font-medium">Courses</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('academics')"> <span class="text-xl">?</span> <span class="font-medium">Academics</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('admissions')"> <span class="text-xl">?</span> <span class="font-medium">Admissions</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('finance')"> <span class="text-xl">?</span> <span class="font-medium">Finance</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('library')"> <span class="text-xl">?</span> <span class="font-medium">Library</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('reports')"> <span class="text-xl">?</span> <span class="font-medium">Reports</span> </a> <a href="#" class="nav-item flex items-center space-x-4 p-4 rounded-xl hover:bg-white hover:bg-opacity-20 transition-all duration-300" onclick="showSection('settings')"> <span class="text-xl">âī¸</span> <span class="font-medium">Settings</span> </a> </nav> <!-- User Profile --> <div class="absolute bottom-8 left-8 right-8"> <div class="glass-morphism p-4 rounded-xl"> <div class="flex items-center space-x-3"> <div class="w-10 h-10 blue-gradient rounded-full flex items-center justify-center"> <span class="text-white font-semibold">?â?</span> </div> <div> <p class="font-semibold">Dr. Sarah Johnson</p> <p class="text-xs text-gray-200">Academic Director</p> </div> </div> </div> </div> </div> </div> <!-- Main Content --> <div class="ml-72 min-h-screen"> <!-- Header --> <header class="bg-white shadow-lg border-b border-gray-200 p-8 fade-in-up"> <div class="flex items-center justify-between"> <div> <h2 class="text-3xl font-playfair font-bold text-gray-800" id="page-title">Institute Dashboard</h2> <p class="text-gray-600 mt-2">Academic Year 2024-25 âĸ Spring Semester</p> </div> <div class="flex items-center space-x-6"> <div class="relative"> <input type="text" placeholder="Search students, courses, faculty..." class="pl-12 pr-6 py-3 w-80 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 bg-gray-50"> <span class="absolute left-4 top-3.5 text-gray-400 text-xl">?</span> </div> <button class="relative p-3 text-gray-600 hover:text-blue-600 transition-colors duration-300 bg-gray-100 rounded-xl hover:bg-gray-200" onclick="toggleNotifications()"> <span class="text-xl">?</span> <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full notification-dot"></span> </button> <div class="w-12 h-12 blue-gradient rounded-xl flex items-center justify-center text-white font-semibold cursor-pointer hover:shadow-lg transition-all duration-300 float-animation"> ?â? </div> </div> </div> </header> <!-- Dashboard Section --> <div id="dashboard-section" class="p-8"> <!-- Key Metrics --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> <div class="metric-card p-8 rounded-2xl scale-in"> <div class="flex items-center justify-between mb-4"> <div class="w-16 h-16 blue-gradient rounded-2xl flex items-center justify-center"> <span class="text-white text-2xl">?â?</span> </div> <div class="text-right"> <p class="text-3xl font-bold text-gray-800" id="students-counter">0</p> <p class="text-sm text-green-600 font-medium">â +12.5%</p> </div> </div> <h3 class="text-gray-600 font-medium">Total Students</h3> <p class="text-xs text-gray-500 mt-1">Active enrollment</p> </div> <div class="metric-card p-8 rounded-2xl scale-in" style="animation-delay: 0.1s"> <div class="flex items-center justify-between mb-4"> <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center"> <span class="text-green-600 text-2xl">?â?</span> </div> <div class="text-right"> <p class="text-3xl font-bold text-gray-800" id="faculty-counter">0</p> <p class="text-sm text-blue-600 font-medium">â +8.2%</p> </div> </div> <h3 class="text-gray-600 font-medium">Faculty Members</h3> <p class="text-xs text-gray-500 mt-1">Teaching staff</p> </div> <div class="metric-card p-8 rounded-2xl scale-in" style="animation-delay: 0.2s"> <div class="flex items-center justify-between mb-4"> <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center"> <span class="text-purple-600 text-2xl">?</span> </div> <div class="text-right"> <p class="text-3xl font-bold text-gray-800" id="courses-counter">0</p> <p class="text-sm text-purple-600 font-medium">â +15.7%</p> </div> </div> <h3 class="text-gray-600 font-medium">Active Courses</h3> <p class="text-xs text-gray-500 mt-1">This semester</p> </div> <div class="metric-card p-8 rounded-2xl scale-in" style="animation-delay: 0.3s"> <div class="flex items-center justify-between mb-4"> <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center"> <span class="text-orange-600 text-2xl">?</span> </div> <div class="text-right"> <p class="text-3xl font-bold text-gray-800">92.4%</p> <p class="text-sm text-green-600 font-medium">â +2.1%</p> </div> </div> <h3 class="text-gray-600 font-medium">Pass Rate</h3> <p class="text-xs text-gray-500 mt-1">Last semester</p> </div> </div> <!-- Recent Students --> <div class="mb-12"> <div class="flex items-center justify-between mb-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800">Recent Enrollments</h3> <button class="institute-button text-white px-6 py-3 rounded-xl font-semibold">View All Students</button> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="academic-card rounded-2xl overflow-hidden fade-in-up"> <div class="p-6"> <div class="flex items-center space-x-4 mb-4"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> <span class="text-blue-600 text-2xl">?â?</span> </div> <div class="flex-1"> <h4 class="font-semibold text-gray-800">Alex Johnson</h4> <p class="text-sm text-gray-600">Student ID: STU2024001</p> <div class="flex items-center space-x-2 mt-1"> <span class="department-badge">Computer Science</span> <span class="academic-year-badge">2024-25</span> </div> </div> </div> <div class="space-y-2 mb-4"> <div class="flex justify-between text-sm"> <span>Current GPA:</span> <span class="font-semibold text-green-600">3.85</span> </div> <div class="flex justify-between text-sm"> <span>Credits Completed:</span> <span class="font-semibold">45/120</span> </div> <div class="flex justify-between text-sm"> <span>Attendance:</span> <span class="font-semibold text-green-600">94.2%</span> </div> </div> <div class="flex items-center justify-between pt-4 border-t border-gray-200"> <div class="text-sm text-gray-600"> <p>? alex.johnson@edu.com</p> <p>? +1 (555) 123-4567</p> </div> <button class="text-xs text-blue-600 hover:underline font-medium">View Profile</button> </div> </div> </div> <div class="academic-card rounded-2xl overflow-hidden fade-in-up" style="animation-delay: 0.1s"> <div class="p-6"> <div class="flex items-center space-x-4 mb-4"> <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center"> <span class="text-purple-600 text-2xl">?â?</span> </div> <div class="flex-1"> <h4 class="font-semibold text-gray-800">Emma Davis</h4> <p class="text-sm text-gray-600">Student ID: STU2024002</p> <div class="flex items-center space-x-2 mt-1"> <span class="department-badge">Business Admin</span> <span class="academic-year-badge">2024-25</span> </div> </div> </div> <div class="space-y-2 mb-4"> <div class="flex justify-between text-sm"> <span>Current GPA:</span> <span class="font-semibold text-green-600">3.92</span> </div> <div class="flex justify-between text-sm"> <span>Credits Completed:</span> <span class="font-semibold">38/120</span> </div> <div class="flex justify-between text-sm"> <span>Attendance:</span> <span class="font-semibold text-green-600">96.8%</span> </div> </div> <div class="flex items-center justify-between pt-4 border-t border-gray-200"> <div class="text-sm text-gray-600"> <p>? emma.davis@edu.com</p> <p>? +1 (555) 234-5678</p> </div> <button class="text-xs text-blue-600 hover:underline font-medium">View Profile</button> </div> </div> </div> <div class="academic-card rounded-2xl overflow-hidden fade-in-up" style="animation-delay: 0.2s"> <div class="p-6"> <div class="flex items-center space-x-4 mb-4"> <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center"> <span class="text-green-600 text-2xl">?â?</span> </div> <div class="flex-1"> <h4 class="font-semibold text-gray-800">Michael Chen</h4> <p class="text-sm text-gray-600">Student ID: STU2024003</p> <div class="flex items-center space-x-2 mt-1"> <span class="department-badge">Engineering</span> <span class="academic-year-badge">2024-25</span> </div> </div> </div> <div class="space-y-2 mb-4"> <div class="flex justify-between text-sm"> <span>Current GPA:</span> <span class="font-semibold text-green-600">3.76</span> </div> <div class="flex justify-between text-sm"> <span>Credits Completed:</span> <span class="font-semibold">52/120</span> </div> <div class="flex justify-between text-sm"> <span>Attendance:</span> <span class="font-semibold text-yellow-600">89.5%</span> </div> </div> <div class="flex items-center justify-between pt-4 border-t border-gray-200"> <div class="text-sm text-gray-600"> <p>? michael.chen@edu.com</p> <p>? +1 (555) 345-6789</p> </div> <button class="text-xs text-blue-600 hover:underline font-medium">View Profile</button> </div> </div> </div> </div> </div> <!-- Academic Calendar & Quick Actions --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="lg:col-span-2 bg-white p-8 rounded-2xl shadow-lg fade-in-up"> <h3 class="text-xl font-playfair font-semibold text-gray-800 mb-6">Academic Calendar</h3> <div class="space-y-4"> <div class="flex items-center space-x-4 p-4 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors duration-300"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> <span class="text-blue-600 font-bold text-sm">15</span> </div> <div class="flex-1"> <p class="font-semibold text-gray-800">Mid-term Examinations</p> <p class="text-sm text-gray-600">March 15-22, 2024 âĸ All Departments</p> </div> <span class="text-xs text-blue-600 bg-blue-100 px-3 py-1 rounded-full">Upcoming</span> </div> <div class="flex items-center space-x-4 p-4 bg-green-50 rounded-xl hover:bg-green-100 transition-colors duration-300"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> <span class="text-green-600 font-bold text-sm">28</span> </div> <div class="flex-1"> <p class="font-semibold text-gray-800">Spring Break</p> <p class="text-sm text-gray-600">March 28 - April 5, 2024 âĸ Campus Closed</p> </div> <span class="text-xs text-green-600 bg-green-100 px-3 py-1 rounded-full">Holiday</span> </div> <div class="flex items-center space-x-4 p-4 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors duration-300"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> <span class="text-purple-600 font-bold text-sm">10</span> </div> <div class="flex-1"> <p class="font-semibold text-gray-800">Course Registration</p> <p class="text-sm text-gray-600">April 10-20, 2024 âĸ Fall Semester 2024</p> </div> <span class="text-xs text-purple-600 bg-purple-100 px-3 py-1 rounded-full">Registration</span> </div> <div class="flex items-center space-x-4 p-4 bg-orange-50 rounded-xl hover:bg-orange-100 transition-colors duration-300"> <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center"> <span class="text-orange-600 font-bold text-sm">25</span> </div> <div class="flex-1"> <p class="font-semibold text-gray-800">Final Examinations</p> <p class="text-sm text-gray-600">April 25 - May 5, 2024 âĸ All Departments</p> </div> <span class="text-xs text-orange-600 bg-orange-100 px-3 py-1 rounded-full">Exams</span> </div> </div> </div> <div class="bg-white p-8 rounded-2xl shadow-lg fade-in-up" style="animation-delay: 0.2s"> <h3 class="text-xl font-playfair font-semibold text-gray-800 mb-6">Quick Actions</h3> <div class="space-y-4"> <button class="w-full institute-button text-white py-4 rounded-xl font-semibold flex items-center justify-center space-x-2" onclick="showAddStudentModal()"> <span>?â?</span> <span>Add Student</span> </button> <button class="w-full bg-green-600 text-white py-4 rounded-xl font-semibold hover:bg-green-700 transition-colors duration-300 flex items-center justify-center space-x-2" onclick="showAddCourseModal()"> <span>?</span> <span>Create Course</span> </button> <button class="w-full bg-purple-600 text-white py-4 rounded-xl font-semibold hover:bg-purple-700 transition-colors duration-300 flex items-center justify-center space-x-2" onclick="viewAcademicCalendar()"> <span>?</span> <span>Academic Calendar</span> </button> <button class="w-full bg-orange-600 text-white py-4 rounded-xl font-semibold hover:bg-orange-700 transition-colors duration-300 flex items-center justify-center space-x-2" onclick="generateAcademicReport()"> <span>?</span> <span>Generate Report</span> </button> </div> </div> </div> </div> <!-- Students Section --> <div id="students-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <div class="flex items-center justify-between mb-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800">Student Management</h3> <div class="flex space-x-4"> <select class="border border-gray-300 rounded-xl px-4 py-2"> <option>All Students</option> <option>Computer Science</option> <option>Business Admin</option> <option>Engineering</option> <option>Liberal Arts</option> </select> <button class="institute-button text-white px-6 py-2 rounded-xl font-semibold">Export Data</button> </div> </div> <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-blue-400 mb-2">Total Students</h4> <p class="text-3xl font-bold">1,247</p> <p class="text-sm text-gray-300 mt-1">â +12% this year</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-green-400 mb-2">Active</h4> <p class="text-3xl font-bold">1,198</p> <p class="text-sm text-gray-300 mt-1">Currently enrolled</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-yellow-400 mb-2">On Leave</h4> <p class="text-3xl font-bold">32</p> <p class="text-sm text-gray-300 mt-1">Temporary absence</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-purple-400 mb-2">Graduates</h4> <p class="text-3xl font-bold">17</p> <p class="text-sm text-gray-300 mt-1">This semester</p> </div> </div> </div> </div> <!-- Faculty Section --> <div id="faculty-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Faculty Management</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-blue-400 mb-2">Total Faculty</h4> <p class="text-3xl font-bold">89</p> <p class="text-sm text-gray-300 mt-1">Teaching staff</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-green-400 mb-2">Full-time</h4> <p class="text-3xl font-bold">67</p> <p class="text-sm text-gray-300 mt-1">Permanent positions</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-purple-400 mb-2">Part-time</h4> <p class="text-3xl font-bold">22</p> <p class="text-sm text-gray-300 mt-1">Adjunct faculty</p> </div> </div> </div> </div> <!-- Courses Section --> <div id="courses-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Course Management</h3> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-blue-400 mb-2">Total Courses</h4> <p class="text-3xl font-bold">156</p> <p class="text-sm text-gray-300 mt-1">All programs</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-green-400 mb-2">Active</h4> <p class="text-3xl font-bold">142</p> <p class="text-sm text-gray-300 mt-1">This semester</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-yellow-400 mb-2">New Courses</h4> <p class="text-3xl font-bold">8</p> <p class="text-sm text-gray-300 mt-1">Added this year</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-purple-400 mb-2">Departments</h4> <p class="text-3xl font-bold">12</p> <p class="text-sm text-gray-300 mt-1">Academic divisions</p> </div> </div> </div> </div> <!-- Academics Section --> <div id="academics-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Academic Performance</h3> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="semester-card p-6 rounded-xl"> <h4 class="font-semibold mb-6">Grade Distribution</h4> <div class="space-y-4"> <div class="flex items-center justify-between"> <span>A Grade (90-100%)</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="grade-a h-3 rounded-full" style="width: 28%"></div> </div> <span class="text-sm font-semibold">28%</span> </div> </div> <div class="flex items-center justify-between"> <span>B Grade (80-89%)</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="grade-b h-3 rounded-full" style="width: 35%"></div> </div> <span class="text-sm font-semibold">35%</span> </div> </div> <div class="flex items-center justify-between"> <span>C Grade (70-79%)</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="grade-c h-3 rounded-full" style="width: 25%"></div> </div> <span class="text-sm font-semibold">25%</span> </div> </div> <div class="flex items-center justify-between"> <span>D Grade (60-69%)</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="grade-d h-3 rounded-full" style="width: 12%"></div> </div> <span class="text-sm font-semibold">12%</span> </div> </div> </div> </div> <div class="semester-card p-6 rounded-xl"> <h4 class="font-semibold mb-6">Semester Progress</h4> <div class="space-y-4"> <div class="flex justify-between items-center"> <span>Average GPA</span> <span class="font-bold text-blue-600">3.42</span> </div> <div class="flex justify-between items-center"> <span>Course Completion Rate</span> <span class="font-bold text-green-600">94.2%</span> </div> <div class="flex justify-between items-center"> <span>Student Retention</span> <span class="font-bold text-purple-600">96.8%</span> </div> <div class="flex justify-between items-center"> <span>Average Attendance</span> <span class="font-bold text-orange-600">91.5%</span> </div> </div> </div> </div> </div> </div> <!-- Admissions Section --> <div id="admissions-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Admissions Management</h3> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-blue-400 mb-2">Applications</h4> <p class="text-3xl font-bold">2,847</p> <p class="text-sm text-gray-300 mt-1">This academic year</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-green-400 mb-2">Accepted</h4> <p class="text-3xl font-bold">1,456</p> <p class="text-sm text-gray-300 mt-1">51.2% acceptance rate</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-yellow-400 mb-2">Pending</h4> <p class="text-3xl font-bold">234</p> <p class="text-sm text-gray-300 mt-1">Under review</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-purple-400 mb-2">Enrolled</h4> <p class="text-3xl font-bold">1,247</p> <p class="text-sm text-gray-300 mt-1">85.6% yield rate</p> </div> </div> </div> </div> <!-- Finance Section --> <div id="finance-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Financial Management</h3> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-blue-400 mb-2">Total Revenue</h4> <p class="text-3xl font-bold">$2.4M</p> <p class="text-sm text-gray-300 mt-1">This fiscal year</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-green-400 mb-2">Tuition Collected</h4> <p class="text-3xl font-bold">$1.8M</p> <p class="text-sm text-gray-300 mt-1">75% of revenue</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-yellow-400 mb-2">Outstanding</h4> <p class="text-3xl font-bold">$156K</p> <p class="text-sm text-gray-300 mt-1">Pending payments</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-purple-400 mb-2">Scholarships</h4> <p class="text-3xl font-bold">$342K</p> <p class="text-sm text-gray-300 mt-1">Financial aid given</p> </div> </div> </div> </div> <!-- Library Section --> <div id="library-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Library Management</h3> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-blue-400 mb-2">Total Books</h4> <p class="text-3xl font-bold">45,672</p> <p class="text-sm text-gray-300 mt-1">Physical & digital</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-green-400 mb-2">Active Loans</h4> <p class="text-3xl font-bold">2,847</p> <p class="text-sm text-gray-300 mt-1">Currently borrowed</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-yellow-400 mb-2">Overdue</h4> <p class="text-3xl font-bold">156</p> <p class="text-sm text-gray-300 mt-1">Need to be returned</p> </div> <div class="student-card p-6 rounded-xl text-white"> <h4 class="font-semibold text-purple-400 mb-2">Digital Access</h4> <p class="text-3xl font-bold">12,847</p> <p class="text-sm text-gray-300 mt-1">Online resources</p> </div> </div> </div> </div> <!-- Reports Section --> <div id="reports-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Academic Reports</h3> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="semester-card p-6 rounded-xl"> <h4 class="font-semibold mb-4">Performance Metrics</h4> <div class="space-y-4"> <div class="flex items-center justify-between"> <span>Student Satisfaction</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="progress-bar h-3 rounded-full" style="width: 87%"></div> </div> <span class="text-sm font-semibold text-green-600">87%</span> </div> </div> <div class="flex items-center justify-between"> <span>Faculty Performance</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="progress-bar h-3 rounded-full" style="width: 92%"></div> </div> <span class="text-sm font-semibold text-green-600">92%</span> </div> </div> <div class="flex items-center justify-between"> <span>Course Completion</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="progress-bar h-3 rounded-full" style="width: 94%"></div> </div> <span class="text-sm font-semibold text-green-600">94%</span> </div> </div> <div class="flex items-center justify-between"> <span>Graduate Employment</span> <div class="flex items-center space-x-2"> <div class="w-32 bg-gray-200 rounded-full h-3"> <div class="progress-bar h-3 rounded-full" style="width: 89%"></div> </div> <span class="text-sm font-semibold text-green-600">89%</span> </div> </div> </div> </div> <div class="semester-card p-6 rounded-xl"> <h4 class="font-semibold mb-4">Key Statistics</h4> <div class="space-y-4"> <div class="flex justify-between items-center"> <span>Student-Faculty Ratio</span> <span class="font-bold text-blue-600">14:1</span> </div> <div class="flex justify-between items-center"> <span>Average Class Size</span> <span class="font-bold text-green-600">22</span> </div> <div class="flex justify-between items-center"> <span>Graduation Rate</span> <span class="font-bold text-purple-600">78.5%</span> </div> <div class="flex justify-between items-center"> <span>Alumni Satisfaction</span> <span class="font-bold text-orange-600">4.6/5</span> </div> </div> </div> </div> </div> </div> <!-- Settings Section --> <div id="settings-section" class="p-8 hidden"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-playfair font-bold text-gray-800 mb-8">Institute Settings</h3> <div class="space-y-8"> <div class="border-b border-gray-200 pb-6"> <h4 class="font-semibold mb-4">Institute Information</h4> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <input type="text" placeholder="Institute Name" class="institute-input text-white px-4 py-3 rounded-xl"> <input type="email" placeholder="Contact Email" class="institute-input text-white px-4 py-3 rounded-xl"> <input type="tel" placeholder="Phone Number" class="institute-input text-white px-4 py-3 rounded-xl"> <input type="text" placeholder="Accreditation ID" class="institute-input text-white px-4 py-3 rounded-xl"> </div> </div> <div class="border-b border-gray-200 pb-6"> <h4 class="font-semibold mb-4">Academic Settings</h4> <div class="space-y-3"> <label class="flex items-center text-white"> <input type="checkbox" class="mr-3" checked> <span>Enable online course registration</span> </label> <label class="flex items-center text-white"> <input type="checkbox" class="mr-3" checked> <span>Send grade notifications</span> </label> <label class="flex items-center text-white"> <input type="checkbox" class="mr-3"> <span>Allow course waitlists</span> </label> </div> </div> </div> </div> </div> </div> <!-- Notification Panel --> <div id="notification-panel" class="fixed right-0 top-0 h-full w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-500 z-50"> <div class="institute-gradient p-6 text-white"> <div class="flex items-center justify-between"> <h3 class="text-xl font-playfair font-semibold">Notifications</h3> <button onclick="toggleNotifications()" class="text-white hover:text-blue-300 text-xl">â</button> </div> </div> <div class="p-6 space-y-4 max-h-full overflow-y-auto"> <div class="bg-green-50 p-4 rounded-xl border-l-4 border-green-500"> <p class="font-semibold text-green-800">New Student Enrolled! ?</p> <p class="text-sm text-green-600">Sarah Wilson - Computer Science Program</p> <p class="text-xs text-gray-500 mt-2">5 minutes ago</p> </div> <div class="bg-blue-50 p-4 rounded-xl border-l-4 border-blue-500"> <p class="font-semibold text-blue-800">Course Registration Open ?</p> <p class="text-sm text-blue-600">Fall 2024 semester registration is now available</p> <p class="text-xs text-gray-500 mt-2">1 hour ago</p> </div> <div class="bg-orange-50 p-4 rounded-xl border-l-4 border-orange-500"> <p class="font-semibold text-orange-800">Grade Submission Reminder ?</p> <p class="text-sm text-orange-600">Mid-term grades due by March 20th</p> <p class="text-xs text-gray-500 mt-2">2 hours ago</p> </div> <div class="bg-purple-50 p-4 rounded-xl border-l-4 border-purple-500"> <p class="font-semibold text-purple-800">Faculty Meeting Scheduled ?</p> <p class="text-sm text-purple-600">Department heads meeting - March 18th, 2:00 PM</p> <p class="text-xs text-gray-500 mt-2">3 hours ago</p> </div> </div> </div> <!-- Modal Overlay --> <div id="modal-overlay" class="fixed inset-0 bg-black bg-opacity-60 hidden z-50 flex items-center justify-center backdrop-blur-sm"> <div class="bg-white rounded-2xl p-8 max-w-lg w-full mx-4 scale-in shadow-2xl"> <div id="modal-content"> <!-- Modal content will be inserted here --> </div> </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96b681b034479664',t:'MTc1NDU2NjkwNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap'); .font-playfair { font-family: 'Playfair Display', serif; } .font-inter { font-family: 'Inter', sans-serif; } * { font-family: 'Inter', sans-serif; } .institute-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 25%, #06b6d4 50%, #10b981 75%, #059669 100%); } .blue-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); } .glass-morphism { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); } .academic-card { background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(59, 130, 246, 0.1); } .academic-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); border-color: rgba(59, 130, 246, 0.3); } .student-card { background: linear-gradient(145deg, #1e293b 0%, #334155 100%); border: 1px solid rgba(148, 163, 184, 0.2); transition: all 0.3s ease; } .student-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); border-color: rgba(59, 130, 246, 0.5); } .fade-in-up { animation: fadeInUp 0.8s ease-out forwards; } .slide-in-right { animation: slideInRight 1s ease-out forwards; } .scale-in { animation: scaleIn 0.6s ease-out forwards; } .float-animation { animation: float 6s ease-in-out infinite; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } .institute-button { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); transition: all 0.3s ease; position: relative; overflow: hidden; } .institute-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4); } .institute-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .institute-button:hover::before { left: 100%; } .metric-card { background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%); border-left: 4px solid #3b82f6; transition: all 0.3s ease; } .metric-card:hover { transform: translateX(8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .nav-item { transition: all 0.3s ease; position: relative; } .nav-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: #3b82f6; transform: scaleY(0); transition: transform 0.3s ease; } .nav-item.active::before, .nav-item:hover::before { transform: scaleY(1); } .academic-image { background: linear-gradient(45deg, #1e3a8a 0%, #3b82f6 100%); position: relative; overflow: hidden; } .academic-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%); z-index: 1; } .status-badge { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.3); } .chart-container { background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); border-radius: 20px; padding: 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } .notification-dot { animation: pulse 2s infinite; background: radial-gradient(circle, #ef4444 0%, #dc2626 100%); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } .institute-input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transition: all 0.3s ease; } .institute-input:focus { border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); } .grade-a { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .grade-b { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); } .grade-c { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .grade-d { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .course-active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .course-pending { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .course-completed { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); } .attendance-excellent { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .attendance-good { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); } .attendance-average { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .attendance-poor { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .semester-card { background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%); border: 2px solid transparent; background-clip: padding-box; transition: all 0.3s ease; } .semester-card:hover { border-color: #3b82f6; transform: translateY(-4px); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); } .faculty-rating { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .progress-bar { background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%); border-radius: 10px; transition: width 1s ease-in-out; } .academic-year-badge { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .department-badge { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
JavaScript
// Initialize dashboard with academic animations document.addEventListener('DOMContentLoaded', function() { // Animate counters with academic timing setTimeout(() => { animateCounter('students-counter', 1247, '', 3000); animateCounter('faculty-counter', 89, '', 2500); animateCounter('courses-counter', 156, '', 2800); }, 800); // Initialize academic charts initializeAcademicCharts(); // Add staggered animations to navigation const navItems = document.querySelectorAll('.nav-item'); navItems.forEach((item, index) => { item.style.animationDelay = `${index * 0.1}s`; item.classList.add('fade-in-up'); }); }); // Academic counter animation function animateCounter(elementId, target, prefix = '', duration = 2500) { const element = document.getElementById(elementId); const start = 0; const increment = target / (duration / 16); let current = start; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } element.textContent = prefix + Math.floor(current).toLocaleString(); }, 16); } // Initialize academic charts function initializeAcademicCharts() { // Enrollment Chart const enrollmentCtx = document.getElementById('enrollmentChart').getContext('2d'); new Chart(enrollmentCtx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Enrollments', data: [1180, 1205, 1225, 1240, 1247, 1250], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4, fill: true, borderWidth: 3, pointBackgroundColor: '#3b82f6', pointBorderColor: '#ffffff', pointBorderWidth: 2, pointRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, min: 1100, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false } } } } }); // Department Chart const departmentCtx = document.getElementById('departmentChart').getContext('2d'); new Chart(departmentCtx, { type: 'doughnut', data: { labels: ['Computer Science', 'Business', 'Engineering', 'Liberal Arts', 'Sciences'], datasets: [{ data: [35, 25, 20, 12, 8], backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'], borderWidth: 0, hoverOffset: 10 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true } } } } }); } // Navigation with academic transitions function showSection(sectionName) { const sections = ['dashboard', 'students', 'faculty', 'courses', 'academics', 'admissions', 'finance', 'library', 'reports', 'settings']; // Hide all sections with fade out sections.forEach(section => { const element = document.getElementById(section + '-section'); element.style.opacity = '0'; setTimeout(() => { element.classList.add('hidden'); }, 150); }); // Show selected section with fade in setTimeout(() => { const targetSection = document.getElementById(sectionName + '-section'); targetSection.classList.remove('hidden'); setTimeout(() => { targetSection.style.opacity = '1'; }, 50); }, 200); // Update page title with academic titles const academicTitles = { dashboard: 'Institute Dashboard', students: 'Student Management', faculty: 'Faculty Management', courses: 'Course Management', academics: 'Academic Performance', admissions: 'Admissions Office', finance: 'Financial Management', library: 'Library System', reports: 'Academic Reports', settings: 'Institute Settings' }; document.getElementById('page-title').textContent = academicTitles[sectionName]; // Update active navigation document.querySelectorAll('.nav-item').forEach(item => { item.classList.remove('active'); }); event.target.closest('.nav-item').classList.add('active'); } // Academic notification panel function toggleNotifications() { const panel = document.getElementById('notification-panel'); panel.classList.toggle('translate-x-full'); } // Academic modal system function showModal(content) { document.getElementById('modal-content').innerHTML = content; document.getElementById('modal-overlay').classList.remove('hidden'); } function hideModal() { document.getElementById('modal-overlay').classList.add('hidden'); } // Academic modal functions function showAddStudentModal() { const content = ` <h3 class="text-2xl font-playfair font-bold mb-6 text-gray-800">Add New Student ?â?</h3> <div class="space-y-4"> <div class="grid grid-cols-2 gap-4"> <input type="text" placeholder="First Name" class="border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <input type="text" placeholder="Last Name" class="border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <input type="email" placeholder="Email Address" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <div class="grid grid-cols-2 gap-4"> <select class="border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option>Select Department</option> <option>Computer Science</option> <option>Business Administration</option> <option>Engineering</option> <option>Liberal Arts</option> </select> <input type="text" placeholder="Student ID" class="border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <textarea placeholder="Address" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="3"></textarea> <div class="flex space-x-4 mt-6"> <button onclick="hideModal()" class="flex-1 bg-gray-200 text-gray-700 py-3 px-6 rounded-xl hover:bg-gray-300 transition-colors duration-300 font-semibold">Cancel</button> <button onclick="addStudent()" class="flex-1 institute-button text-white py-3 px-6 rounded-xl font-semibold">Add Student</button> </div> </div> `; showModal(content); } function showAddCourseModal() { const content = ` <h3 class="text-2xl font-playfair font-bold mb-6 text-gray-800">Create New Course ?</h3> <div class="space-y-4"> <input type="text" placeholder="Course Title" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <div class="grid grid-cols-2 gap-4"> <input type="text" placeholder="Course Code" class="border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <input type="number" placeholder="Credits" class="border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <select class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option>Select Department</option> <option>Computer Science</option> <option>Business Administration</option> <option>Engineering</option> <option>Liberal Arts</option> </select> <textarea placeholder="Course Description" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="3"></textarea> <div class="flex space-x-4 mt-6"> <button onclick="hideModal()" class="flex-1 bg-gray-200 text-gray-700 py-3 px-6 rounded-xl hover:bg-gray-300 transition-colors duration-300 font-semibold">Cancel</button> <button onclick="addCourse()" class="flex-1 bg-green-600 text-white py-3 px-6 rounded-xl hover:bg-green-700 transition-colors duration-300 font-semibold">Create Course</button> </div> </div> `; showModal(content); } // Action functions with academic feedback function addStudent() { hideModal(); showAcademicMessage('New student successfully enrolled! ?â?', 'success'); } function addCourse() { hideModal(); showAcademicMessage('Course created and added to catalog! ?', 'success'); } function viewAcademicCalendar() { showAcademicMessage('Opening academic calendar view! ?', 'info'); } function generateAcademicReport() { showAcademicMessage('Generating comprehensive academic report! ?', 'info'); } // Academic success message system function showAcademicMessage(message, type = 'success') { const colors = { success: 'bg-green-500', info: 'bg-blue-500', warning: 'bg-yellow-500', error: 'bg-red-500' }; const messageDiv = document.createElement('div'); messageDiv.className = `fixed top-8 right-8 ${colors[type]} text-white px-8 py-4 rounded-2xl shadow-2xl z-50 scale-in backdrop-blur-sm`; messageDiv.style.background = `linear-gradient(135deg, ${colors[type].replace('bg-', '')} 0%, ${colors[type].replace('bg-', '').replace('500', '600')} 100%)`; messageDiv.innerHTML = ` <div class="flex items-center space-x-3"> <span class="text-lg">${type === 'success' ? 'â ' : type === 'info' ? 'âšī¸' : type === 'warning' ? 'â ī¸' : 'â'}</span> <span class="font-semibold">${message}</span> </div> `; document.body.appendChild(messageDiv); setTimeout(() => { messageDiv.style.transform = 'translateX(400px)'; messageDiv.style.opacity = '0'; setTimeout(() => messageDiv.remove(), 300); }, 4000); } // Close modal on overlay click document.getElementById('modal-overlay').addEventListener('click', function(e) { if (e.target === this) { hideModal(); } }); // Real-time academic updates setInterval(() => { const badge = document.querySelector('.notification-dot'); if (badge && Math.random() > 0.9) { const currentCount = parseInt(badge.textContent); badge.textContent = currentCount + 1; badge.style.animation = 'none'; setTimeout(() => { badge.style.animation = 'pulse 2s infinite'; }, 10); } }, 15000); // Add academic hover effects to cards document.addEventListener('mouseover', function(e) { if (e.target.closest('.academic-card')) { e.target.closest('.academic-card').style.transform = 'translateY(-8px) scale(1.02)'; } }); document.addEventListener('mouseout', function(e) { if (e.target.closest('.academic-card')) { e.target.closest('.academic-card').style.transform = 'translateY(0) scale(1)'; } });
Output Preview
Desktop
Mobile
Fullscreen