<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Management Dashboard</title>
<style>
/* =========================================================
RESET
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family:
Inter,
"Segoe UI",
Roboto,
Arial,
sans-serif;
min-height: 100vh;
color: #eef2ff;
background:
radial-gradient(
circle at 10% 10%,
rgba(99, 102, 241, 0.28),
transparent 28%
),
radial-gradient(
circle at 90% 20%,
rgba(14, 165, 233, 0.22),
transparent 25%
),
radial-gradient(
circle at 50% 100%,
rgba(168, 85, 247, 0.18),
transparent 30%
),
#07111f;
overflow-x: hidden;
}
button,
input {
font: inherit;
}
button {
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
/* =========================================================
BACKGROUND DECORATIONS
========================================================= */
.background-orb {
position: fixed;
width: 280px;
height: 280px;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: -1;
}
.orb-1 {
top: 10%;
left: -120px;
background: rgba(99, 102, 241, 0.3);
}
.orb-2 {
right: -100px;
bottom: 10%;
background: rgba(6, 182, 212, 0.25);
}
/* =========================================================
APP LAYOUT
========================================================= */
.app {
min-height: 100vh;
display: flex;
}
/* =========================================================
SIDEBAR
========================================================= */
.sidebar {
width: 260px;
min-height: 100vh;
position: fixed;
left: 0;
top: 0;
bottom: 0;
padding: 22px 16px;
background: rgba(10, 21, 38, 0.68);
border-right:
1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
z-index: 1000;
transition: transform 0.3s ease;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 10px 26px;
}
.brand-logo {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 14px;
background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);
box-shadow:
0 12px 30px rgba(99, 102, 241, 0.3);
font-size: 22px;
}
.brand h2 {
font-size: 17px;
font-weight: 700;
}
.brand p {
margin-top: 2px;
color: #94a3b8;
font-size: 11px;
}
.menu-label {
padding: 14px 12px 8px;
color: #64748b;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 5px;
}
.nav-item {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 13px;
border: 1px solid transparent;
border-radius: 12px;
color: #94a3b8;
font-size: 13px;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.nav-item:hover {
color: #ffffff;
background:
rgba(255, 255, 255, 0.06);
transform: translateX(2px);
}
.nav-item.active {
color: #ffffff;
background:
linear-gradient(
90deg,
rgba(99, 102, 241, 0.28),
rgba(99, 102, 241, 0.08)
);
border-color:
rgba(129, 140, 248, 0.18);
box-shadow:
inset 3px 0 0 #818cf8;
}
.nav-icon {
width: 20px;
text-align: center;
font-size: 16px;
}
.nav-badge {
margin-left: auto;
padding: 3px 7px;
border-radius: 20px;
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
font-size: 10px;
}
.sidebar-bottom {
position: absolute;
left: 16px;
right: 16px;
bottom: 20px;
}
.school-card {
padding: 14px;
border:
1px solid rgba(255, 255, 255, 0.09);
border-radius: 15px;
background:
rgba(255, 255, 255, 0.045);
}
.school-card-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
}
.online-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow:
0 0 10px #22c55e;
}
.school-card p {
margin-top: 7px;
color: #64748b;
font-size: 10px;
line-height: 1.5;
}
/* =========================================================
MAIN
========================================================= */
.main {
width: calc(100% - 260px);
margin-left: 260px;
padding: 24px 30px 40px;
}
/* =========================================================
TOPBAR
========================================================= */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26px;
}
.page-title h1 {
font-size: clamp(22px, 3vw, 29px);
letter-spacing: -0.7px;
}
.page-title p {
margin-top: 6px;
color: #94a3b8;
font-size: 12px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.search-box {
width: 220px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border:
1px solid rgba(255, 255, 255, 0.09);
border-radius: 11px;
background:
rgba(255, 255, 255, 0.045);
}
.search-box span {
color: #64748b;
}
.search-box input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: #ffffff;
font-size: 12px;
}
.search-box input::placeholder {
color: #64748b;
}
.icon-button {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border:
1px solid rgba(255, 255, 255, 0.09);
border-radius: 11px;
background:
rgba(255, 255, 255, 0.045);
color: #cbd5e1;
position: relative;
transition: 0.2s ease;
}
.icon-button:hover {
background:
rgba(255, 255, 255, 0.09);
color: white;
}
.notification-dot {
position: absolute;
width: 7px;
height: 7px;
top: 8px;
right: 8px;
border-radius: 50%;
background: #f43f5e;
border: 2px solid #0b1728;
}
.profile {
display: flex;
align-items: center;
gap: 9px;
padding-left: 5px;
}
.avatar {
width: 39px;
height: 39px;
display: grid;
place-items: center;
border-radius: 12px;
background:
linear-gradient(
135deg,
#0ea5e9,
#6366f1
);
font-weight: 700;
font-size: 12px;
}
.profile-info strong {
display: block;
font-size: 11px;
}
.profile-info span {
color: #64748b;
font-size: 9px;
}
/* =========================================================
GLASS
========================================================= */
.glass {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025)
);
border:
1px solid rgba(255, 255, 255, 0.09);
box-shadow:
0 18px 50px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* =========================================================
STAT CARDS
========================================================= */
.stats-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 16px;
margin-bottom: 18px;
}
.stat-card {
position: relative;
padding: 19px;
border-radius: 17px;
overflow: hidden;
transition:
transform 0.25s ease,
border-color 0.25s ease;
}
.stat-card:hover {
transform: translateY(-4px);
border-color:
rgba(255, 255, 255, 0.16);
}
.stat-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stat-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
font-size: 18px;
}
.blue {
background: rgba(59, 130, 246, 0.13);
color: #60a5fa;
}
.purple {
background: rgba(139, 92, 246, 0.13);
color: #a78bfa;
}
.green {
background: rgba(34, 197, 94, 0.13);
color: #4ade80;
}
.orange {
background: rgba(249, 115, 22, 0.13);
color: #fb923c;
}
.stat-label {
margin-top: 16px;
color: #94a3b8;
font-size: 11px;
}
.stat-value {
margin-top: 4px;
font-size: 27px;
font-weight: 700;
}
.stat-change {
margin-top: 9px;
font-size: 10px;
}
.positive {
color: #4ade80;
}
.neutral {
color: #94a3b8;
}
/* =========================================================
CONTENT GRID
========================================================= */
.content-grid {
display: grid;
grid-template-columns:
minmax(0, 1.6fr)
minmax(280px, 1fr);
gap: 18px;
margin-bottom: 18px;
}
.panel {
border-radius: 17px;
padding: 20px;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.panel-header h3 {
font-size: 14px;
}
.panel-header p {
margin-top: 4px;
color: #64748b;
font-size: 10px;
}
.view-all {
color: #818cf8;
font-size: 10px;
border: 0;
background: transparent;
}
/* =========================================================
CHART
========================================================= */
.chart-wrapper {
height: 245px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.chart {
height: 200px;
display: flex;
align-items: flex-end;
gap: 12px;
padding:
10px 4px 0;
}
.bar-group {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
.bar {
width: 100%;
max-width: 38px;
border-radius:
7px 7px 3px 3px;
background:
linear-gradient(
180deg,
#818cf8,
#4f46e5
);
box-shadow:
0 8px 20px rgba(79, 70, 229, 0.2);
transition:
height 0.5s ease,
opacity 0.2s ease;
}
.bar:hover {
opacity: 0.75;
}
.bar-label {
color: #64748b;
font-size: 9px;
}
.chart-legend {
display: flex;
justify-content: space-between;
margin-top: 4px;
color: #64748b;
font-size: 9px;
}
.legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.legend-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #818cf8;
}
/* =========================================================
ATTENDANCE CIRCLE
========================================================= */
.attendance-content {
display: flex;
align-items: center;
justify-content: center;
min-height: 245px;
}
.attendance-ring {
width: 170px;
height: 170px;
display: grid;
place-items: center;
border-radius: 50%;
background:
conic-gradient(
#22c55e 0deg 309deg,
rgba(255, 255, 255, 0.08) 309deg 360deg
);
position: relative;
}
.attendance-ring::before {
content: "";
position: absolute;
width: 130px;
height: 130px;
border-radius: 50%;
background: #0c1829;
border:
1px solid rgba(255, 255, 255, 0.05);
}
.attendance-number {
position: relative;
text-align: center;
}
.attendance-number strong {
display: block;
font-size: 29px;
}
.attendance-number span {
color: #64748b;
font-size: 10px;
}
/* =========================================================
TABLE
========================================================= */
.table-panel {
border-radius: 17px;
padding: 20px;
margin-bottom: 18px;
}
.table-wrapper {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
th {
padding:
10px 12px;
text-align: left;
color: #64748b;
font-size: 9px;
font-weight: 600;
border-bottom:
1px solid rgba(255, 255, 255, 0.06);
}
td {
padding:
12px;
color: #cbd5e1;
font-size: 11px;
border-bottom:
1px solid rgba(255, 255, 255, 0.045);
}
tr:last-child td {
border-bottom: 0;
}
.student {
display: flex;
align-items: center;
gap: 9px;
}
.student-avatar {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background:
linear-gradient(
135deg,
rgba(99, 102, 241, 0.6),
rgba(14, 165, 233, 0.5)
);
font-size: 9px;
font-weight: 700;
}
.student-name {
color: #f1f5f9;
font-weight: 600;
font-size: 11px;
}
.student-email {
margin-top: 2px;
color: #64748b;
font-size: 8px;
}
.status {
display: inline-flex;
padding: 4px 8px;
border-radius: 20px;
font-size: 8px;
font-weight: 600;
}
.status.active {
background: rgba(34, 197, 94, 0.1);
color: #4ade80;
}
.status.pending {
background: rgba(245, 158, 11, 0.1);
color: #fbbf24;
}
/* =========================================================
BOTTOM GRID
========================================================= */
.bottom-grid {
display: grid;
grid-template-columns:
1.3fr
1fr
1fr;
gap: 18px;
}
.quick-actions {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 10px;
}
.quick-action {
padding: 13px;
display: flex;
align-items: center;
gap: 9px;
color: #cbd5e1;
background:
rgba(255, 255, 255, 0.035);
border:
1px solid rgba(255, 255, 255, 0.06);
border-radius: 11px;
font-size: 10px;
transition: 0.2s ease;
}
.quick-action:hover {
background:
rgba(255, 255, 255, 0.08);
color: white;
transform: translateY(-2px);
}
.quick-icon {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 8px;
background:
rgba(99, 102, 241, 0.13);
color: #a5b4fc;
}
/* =========================================================
EVENTS
========================================================= */
.event {
display: flex;
gap: 11px;
padding: 9px 0;
border-bottom:
1px solid rgba(255, 255, 255, 0.05);
}
.event:last-child {
border-bottom: 0;
}
.event-date {
width: 38px;
text-align: center;
padding: 5px;
border-radius: 8px;
background:
rgba(99, 102, 241, 0.1);
}
.event-date strong {
display: block;
color: #a5b4fc;
font-size: 13px;
}
.event-date span {
color: #64748b;
font-size: 7px;
text-transform: uppercase;
}
.event-info strong {
display: block;
font-size: 10px;
}
.event-info span {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 8px;
}
/* =========================================================
MOBILE HEADER
========================================================= */
.mobile-menu-btn {
display: none;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background:
rgba(255, 255, 255, 0.05);
color: white;
font-size: 19px;
}
.overlay {
display: none;
position: fixed;
inset: 0;
background:
rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: 900;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.stats-grid {
grid-template-columns:
repeat(2, 1fr);
}
.content-grid {
grid-template-columns: 1fr;
}
.bottom-grid {
grid-template-columns:
1fr 1fr;
}
.bottom-grid .panel:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 800px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
.overlay.open {
display: block;
}
.main {
width: 100%;
margin-left: 0;
padding:
18px 16px 35px;
}
.mobile-menu-btn {
display: grid;
place-items: center;
}
.topbar {
gap: 15px;
}
.topbar-right {
gap: 7px;
}
.search-box {
display: none;
}
.profile-info {
display: none;
}
}
@media (max-width: 600px) {
.stats-grid {
grid-template-columns: 1fr;
}
.bottom-grid {
grid-template-columns: 1fr;
}
.bottom-grid .panel:first-child {
grid-column: auto;
}
.page-title h1 {
font-size: 23px;
}
.page-title p {
font-size: 10px;
}
.topbar-right {
margin-left: auto;
}
.chart {
gap: 6px;
}
.bar {
max-width: 28px;
}
.panel,
.table-panel {
padding: 15px;
}
}
</style>
</head>
<body>
<!-- Background -->
<div class="background-orb orb-1"></div>
<div class="background-orb orb-2"></div>
<div class="app">
<!-- =======================================================
SIDEBAR
======================================================== -->
<aside class="sidebar" id="sidebar">
<div class="brand">
<div class="brand-logo">
🎓
</div>
<div>
<h2>EduGlass</h2>
<p>School Management</p>
</div>
</div>
<div class="menu-label">
Main Menu
</div>
<nav class="sidebar-nav">
<a href="#" class="nav-item active">
<span class="nav-icon">▦</span>
<span>Dashboard</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">👨🎓</span>
<span>Students</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">👨🏫</span>
<span>Teachers</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">🏫</span>
<span>Classes</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">✓</span>
<span>Attendance</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">📝</span>
<span>Examinations</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">💰</span>
<span>Fees & Payments</span>
<span class="nav-badge">12</span>
</a>
</nav>
<div class="menu-label">
Management
</div>
<nav class="sidebar-nav">
<a href="#" class="nav-item">
<span class="nav-icon">📅</span>
<span>Timetable</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">📚</span>
<span>Library</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">📢</span>
<span>Announcements</span>
</a>
<a href="#" class="nav-item">
<span class="nav-icon">⚙</span>
<span>Settings</span>
</a>
</nav>
<div class="sidebar-bottom">
<div class="school-card">
<div class="school-card-title">
<span class="online-dot"></span>
System Online
</div>
<p>
All school services are running normally.
</p>
</div>
</div>
</aside>
<!-- Mobile Overlay -->
<div class="overlay" id="overlay"></div>
<!-- =======================================================
MAIN CONTENT
======================================================== -->
<main class="main">
<!-- TOPBAR -->
<header class="topbar">
<div class="page-title">
<h1>Good Morning, Admin 👋</h1>
<p>
Here's what's happening at your school today.
</p>
</div>
<div class="topbar-right">
<button
class="mobile-menu-btn"
id="mobileMenuBtn"
aria-label="Open menu"
>
☰
</button>
<div class="search-box">
<span>⌕</span>
<input
type="search"
placeholder="Search anything..."
aria-label="Search"
>
</div>
<button
class="icon-button"
aria-label="Notifications"
>
🔔
<span class="notification-dot"></span>
</button>
<div class="profile">
<div class="avatar">
AK
</div>
<div class="profile-info">
<strong>Admin Kumar</strong>
<span>Administrator</span>
</div>
</div>
</div>
</header>
<!-- =====================================================
STATISTICS
====================================================== -->
<section class="stats-grid">
<!-- Students -->
<div class="stat-card glass">
<div class="stat-top">
<div class="stat-icon blue">
👨🎓
</div>
<span class="positive">+8.2%</span>
</div>
<div class="stat-label">
Total Students
</div>
<div class="stat-value">
2,846
</div>
<div class="stat-change positive">
↑ 214 new this year
</div>
</div>
<!-- Teachers -->
<div class="stat-card glass">
<div class="stat-top">
<div class="stat-icon purple">
👨🏫
</div>
<span class="positive">+3.1%</span>
</div>
<div class="stat-label">
Total Teachers
</div>
<div class="stat-value">
148
</div>
<div class="stat-change positive">
↑ 5 new teachers
</div>
</div>
<!-- Attendance -->
<div class="stat-card glass">
<div class="stat-top">
<div class="stat-icon green">
✓
</div>
<span class="positive">+2.4%</span>
</div>
<div class="stat-label">
Today's Attendance
</div>
<div class="stat-value">
94.6%
</div>
<div class="stat-change positive">
↑ Compared to yesterday
</div>
</div>
<!-- Fees -->
<div class="stat-card glass">
<div class="stat-top">
<div class="stat-icon orange">
💰
</div>
<span class="positive">+12.8%</span>
</div>
<div class="stat-label">
Fee Collection
</div>
<div class="stat-value">
$48.2K
</div>
<div class="stat-change positive">
↑ 82% of monthly target
</div>
</div>
</section>
<!-- =====================================================
CHARTS
====================================================== -->
<section class="content-grid">
<!-- Attendance Chart -->
<div class="panel glass">
<div class="panel-header">
<div>
<h3>Attendance Overview</h3>
<p>Average attendance by month</p>
</div>
<button class="view-all">
This Year ▾
</button>
</div>
<div class="chart-wrapper">
<div class="chart">
<div class="bar-group">
<div
class="bar"
style="height: 65%"
></div>
<span class="bar-label">Jan</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 72%"
></div>
<span class="bar-label">Feb</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 69%"
></div>
<span class="bar-label">Mar</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 82%"
></div>
<span class="bar-label">Apr</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 77%"
></div>
<span class="bar-label">May</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 88%"
></div>
<span class="bar-label">Jun</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 84%"
></div>
<span class="bar-label">Jul</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 94%"
></div>
<span class="bar-label">Aug</span>
</div>
<div class="bar-group">
<div
class="bar"
style="height: 91%"
></div>
<span class="bar-label">Sep</span>
</div>
</div>
<div class="chart-legend">
<span class="legend-item">
<span class="legend-dot"></span>
Student Attendance
</span>
<span>
Average: 86.4%
</span>
</div>
</div>
</div>
<!-- Attendance Percentage -->
<div class="panel glass">
<div class="panel-header">
<div>
<h3>Today's Attendance</h3>
<p>All classes combined</p>
</div>
<button class="view-all">
Details →
</button>
</div>
<div class="attendance-content">
<div class="attendance-ring">
<div class="attendance-number">
<strong>94.6%</strong>
<span>
Present
</span>
</div>
</div>
</div>
</div>
</section>
<!-- =====================================================
RECENT STUDENTS
====================================================== -->
<section class="table-panel glass">
<div class="panel-header">
<div>
<h3>Recent Students</h3>
<p>Recently enrolled students</p>
</div>
<button class="view-all">
View All →
</button>
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>STUDENT</th>
<th>ID</th>
<th>CLASS</th>
<th>JOINED</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="student">
<div class="student-avatar">
AR
</div>
<div>
<div class="student-name">
Aarav Rai
</div>
<div class="student-email">
aarav@example.com
</div>
</div>
</div>
</td>
<td>STU-2841</td>
<td>Grade 10 - A</td>
<td>Sep 28, 2026</td>
<td>
<span class="status active">
Active
</span>
</td>
</tr>
<tr>
<td>
<div class="student">
<div class="student-avatar">
SM
</div>
<div>
<div class="student-name">
Sita Maharjan
</div>
<div class="student-email">
sita@example.com
</div>
</div>
</div>
</td>
<td>STU-2840</td>
<td>Grade 9 - B</td>
<td>Sep 27, 2026</td>
<td>
<span class="status active">
Active
</span>
</td>
</tr>
<tr>
<td>
<div class="student">
<div class="student-avatar">
RS
</div>
<div>
<div class="student-name">
Rohan Shrestha
</div>
<div class="student-email">
rohan@example.com
</div>
</div>
</div>
</td>
<td>STU-2839</td>
<td>Grade 8 - A</td>
<td>Sep 26, 2026</td>
<td>
<span class="status pending">
Pending
</span>
</td>
</tr>
<tr>
<td>
<div class="student">
<div class="student-avatar">
NP
</div>
<div>
<div class="student-name">
Nisha Pandey
</div>
<div class="student-email">
nisha@example.com
</div>
</div>
</div>
</td>
<td>STU-2838</td>
<td>Grade 7 - C</td>
<td>Sep 25, 2026</td>
<td>
<span class="status active">
Active
</span>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- =====================================================
BOTTOM PANELS
====================================================== -->
<section class="bottom-grid">
<!-- Quick Actions -->
<div class="panel glass">
<div class="panel-header">
<div>
<h3>Quick Actions</h3>
<p>Frequently used actions</p>
</div>
</div>
<div class="quick-actions">
<button class="quick-action">
<span class="quick-icon">
+
</span>
Add Student
</button>
<button class="quick-action">
<span class="quick-icon">
👨🏫
</span>
Add Teacher
</button>
<button class="quick-action">
<span class="quick-icon">
✓
</span>
Mark Attendance
</button>
<button class="quick-action">
<span class="quick-icon">
📝
</span>
Create Exam
</button>
</div>
</div>
<!-- Upcoming Events -->
<div class="panel glass">
<div class="panel-header">
<div>
<h3>Upcoming Events</h3>
<p>Next school activities</p>
</div>
<button class="view-all">
View All
</button>
</div>
<div class="event">
<div class="event-date">
<strong>03</strong>
<span>Oct</span>
</div>
<div class="event-info">
<strong>Annual Sports Day</strong>
<span>08:00 AM · School Ground</span>
</div>
</div>
<div class="event">
<div class="event-date">
<strong>08</strong>
<span>Oct</span>
</div>
<div class="event-info">
<strong>Parent Teacher Meeting</strong>
<span>10:00 AM · Main Hall</span>
</div>
</div>
<div class="event">
<div class="event-date">
<strong>15</strong>
<span>Oct</span>
</div>
<div class="event-info">
<strong>Science Exhibition</strong>
<span>09:30 AM · Science Block</span>
</div>
</div>
</div>
<!-- Announcements -->
<div class="panel glass">
<div class="panel-header">
<div>
<h3>Announcements</h3>
<p>Latest school notices</p>
</div>
<button class="view-all">
All
</button>
</div>
<div class="event">
<div class="event-date">
📢
</div>
<div class="event-info">
<strong>Mid-Term Exam Schedule</strong>
<span>Published 2 hours ago</span>
</div>
</div>
<div class="event">
<div class="event-date">
📢
</div>
<div class="event-info">
<strong>Holiday Notice</strong>
<span>Published yesterday</span>
</div>
</div>
<div class="event">
<div class="event-date">
📢
</div>
<div class="event-info">
<strong>Library Week</strong>
<span>Published Sep 25</span>
</div>
</div>
</div>
</section>
</main>
</div>
<!-- =========================================================
JAVASCRIPT
========================================================== -->
<script>
const sidebar =
document.getElementById("sidebar");
const mobileMenuBtn =
document.getElementById("mobileMenuBtn");
const overlay =
document.getElementById("overlay");
function openSidebar() {
sidebar.classList.add("open");
overlay.classList.add("open");
mobileMenuBtn.textContent = "✕";
}
function closeSidebar() {
sidebar.classList.remove("open");
overlay.classList.remove("open");
mobileMenuBtn.textContent = "☰";
}
mobileMenuBtn.addEventListener(
"click",
() => {
if (sidebar.classList.contains("open")) {
closeSidebar();
} else {
openSidebar();
}
}
);
overlay.addEventListener(
"click",
closeSidebar
);
/* Close mobile sidebar when a link is clicked */
document
.querySelectorAll(".nav-item")
.forEach(item => {
item.addEventListener(
"click",
() => {
document
.querySelectorAll(".nav-item")
.forEach(nav => {
nav.classList.remove("active");
});
item.classList.add("active");
if (window.innerWidth <= 800) {
closeSidebar();
}
}
);
});
/* Keyboard Escape */
document.addEventListener(
"keydown",
event => {
if (
event.key === "Escape" &&
sidebar.classList.contains("open")
) {
closeSidebar();
}
}
);
/* Demo search */
const searchInput =
document.querySelector(".search-box input");
searchInput.addEventListener(
"input",
event => {
const value =
event.target.value.toLowerCase();
document
.querySelectorAll("tbody tr")
.forEach(row => {
row.style.display =
row.textContent
.toLowerCase()
.includes(value)
? ""
: "none";
});
}
);
/* Quick action feedback */
document
.querySelectorAll(".quick-action")
.forEach(button => {
button.addEventListener(
"click",
() => {
const original =
button.innerHTML;
button.innerHTML =
"✓ Done";
setTimeout(() => {
button.innerHTML = original;
}, 1000);
}
);
});
</script>
</body>
</html>
Comments
Post a Comment