Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
239 lines (238 loc) · 20 KB
/
Copy pathindex.html
File metadata and controls
239 lines (238 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free School Management Dashboard Template (HTML) | Classio</title>
<meta name="description" content="Free school management dashboard template in one editable file. Attendance by class, fee collection, timetable, exams, notice board and top students.">
<meta name="keywords" content="school management dashboard template, school admin panel HTML free, education dashboard template, student management system template, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/">
<meta name="theme-color" content="#1D4ED8">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free School Management Dashboard Template (HTML)">
<meta property="og:description" content="Free school management dashboard template in one editable file. Attendance by class, fee collection, timetable, exams, notice board and top students.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/screenshot.png"><meta property="og:image:alt" content="Free School Management Dashboard Template (HTML)">
<meta property="og:image:width" content="1440">
<meta property="og:image:height" content="900">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free School Management Dashboard Template (HTML)">
<meta name="twitter:description" content="Free school management dashboard template in one editable file. Attendance by class, fee collection, timetable, exams, notice board and top students.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/screenshot.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%231D4ED8'/><path d='M10 26l22-10 22 10-22 10z' fill='%23FACC15'/><path d='M20 31v9c0 3 5 6 12 6s12-3 12-6v-9' fill='none' stroke='%23fff' stroke-width='4'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://images.unsplash.com">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap" rel="stylesheet">
<!-- Structured data for this template page. When you use the template, replace it with LocalBusiness or Organization schema for your own business (see README). -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/",
"name": "Free School Management Dashboard Template (HTML)",
"description": "Free school management dashboard template in one editable file. Attendance by class, fee collection, timetable, exams, notice board and top students.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/screenshot.png"
},
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"breadcrumb": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/#template",
"name": "Free School Management Dashboard Template (HTML)",
"description": "Free school management dashboard template in one editable file. Attendance by class, fee collection, timetable, exams, notice board and top students.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "school management dashboard template, school admin panel HTML free, education dashboard template, student management system template",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Admin Dashboard Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/"
},
{
"@type": "ListItem",
"position": 3,
"name": "School Management Dashboard Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/admin-dashboard/school-management/"
}
]
}
]
}
</script>
<style>
:root{--blue:#1D4ED8;--blue-d:#1E3A8A;--blue-l:#EAF1FF;--yel:#FACC15;--yel-l:#FEF9DB;--grn:#15803D;--grn-l:#E7F6EC;--red:#DC2626;--text:#1F2937;--muted:#6B7280;--line:#E5E9F0;--bg:#F6F8FC;--card:#fff;
--font:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}img{display:block;max-width:100%}h1,h2,h3{margin:0;color:var(--blue-d)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--yel);padding:10px;z-index:99}
:focus-visible{outline:3px solid var(--yel);outline-offset:2px;border-radius:6px}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--blue);color:#DCE6FF;padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:21px;text-decoration:none;padding:0 8px 22px}
.brand i{width:32px;height:32px;border-radius:10px;background:var(--yel)}
.side ul{list-style:none;padding:0;margin:0}
.side a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:700}
.side a:hover{background:rgba(255,255,255,.12);color:#fff}.side a.on{background:#fff;color:var(--blue)}
.term{margin-top:auto;background:rgba(255,255,255,.12);border-radius:14px;padding:14px;font-size:14px}.term b{display:block;color:#fff}
.term .t{height:8px;background:rgba(255,255,255,.2);border-radius:5px;margin-top:8px;overflow:hidden}.term .t i{display:block;height:100%;width:64%;background:var(--yel)}
.main{min-width:0;padding:24px 28px 40px}
.top{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.top h1{font-size:27px}.top p{margin:2px 0 0;color:var(--muted)}
.top .r{margin-left:auto;display:flex;gap:10px;align-items:center}
.search{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--muted);width:250px}
.search input{border:0;font:inherit;width:100%}.search input:focus{outline:none}
.btn{display:inline-flex;gap:6px;align-items:center;padding:10px 16px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--font);color:var(--blue-d)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.kpi small{color:var(--muted);font-weight:700}.kpi .v{font-size:30px;font-weight:700;color:var(--blue-d);margin:4px 0}
.kpi .d{font-size:14px;color:var(--grn);font-weight:700}
.kpi.y{background:var(--yel-l);border-color:#F4E3A1}
.row{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.card h2{font-size:18px}
.days{display:flex;gap:4px}
.days button{border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:14px;padding:5px 10px;border-radius:8px;cursor:pointer;color:var(--muted)}
.days button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
#att{width:100%;height:240px}
.fees .big{font-size:34px;font-weight:700;color:var(--blue-d)}.fees .big small{font-size:16px;color:var(--muted)}
.fees .t{height:16px;background:var(--bg);border-radius:9px;overflow:hidden;margin:12px 0 6px;display:flex}
.fees .t i{display:block;height:100%}
.fees .lg{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.fees ul{list-style:none;padding:0;margin:16px 0 0}.fees li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.fees li b.late{color:var(--red)}
.tt{list-style:none;padding:0;margin:0}
.tt li{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tt time{font-weight:700;color:var(--blue)}.tt b{display:block}.tt small{color:var(--muted)}
.tt li.now{background:var(--yel-l);border-radius:10px;padding:10px;border:0}
.exam{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.exam .d{width:52px;text-align:center;background:var(--blue-l);border-radius:12px;padding:6px 0;flex:none}
.exam .d b{display:block;font-size:20px;color:var(--blue-d);line-height:1.1}.exam .d small{font-size:12px;color:var(--blue);font-weight:700}
.exam small{color:var(--muted);display:block}
.notice{padding:12px;border-radius:12px;background:var(--bg);margin-bottom:10px;font-size:15px}
.notice b{display:block;color:var(--blue-d)}.notice small{color:var(--muted)}
.notice.imp{background:#FEECEC}.notice.imp b{color:var(--red)}
.stars{margin-top:16px}.stu{display:flex;align-items:center;gap:10px;padding:7px 0}
.stu img{width:36px;height:36px;border-radius:50%;object-fit:cover}.stu div{flex:1}.stu small{display:block;color:var(--muted)}
.stu strong{color:var(--grn)}
.foot{color:var(--muted);font-size:14px;margin-top:24px;text-align:center}.foot a{color:var(--blue)}
@media (max-width:1150px){.kpis{grid-template-columns:1fr 1fr}.row,.row3{grid-template-columns:1fr}}
@media (max-width:860px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;width:250px;z-index:30;transform:translateX(-100%);transition:transform .25s}.side.open{transform:none}.menu-btn{display:block}.search{display:none}.main{padding:18px 14px}}
@media (max-width:520px){.kpis{grid-template-columns:1fr}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Template notice bar: delete this block before you publish your own site -->
<div id="template-bar" style="background:#111;color:#fff;font:500 14px/1.4 system-ui,sans-serif;text-align:center;padding:9px 16px">Free HTML template. <a href="index.html" download="school-management.html" style="color:#FFD166;font-weight:700">Download this template (free)</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/" style="color:#fff">See all free templates</a></div>
<div class="app">
<aside class="side" id="menu" aria-label="Sidebar">
<a href="#" class="brand"><i aria-hidden="true"></i>Classio</a>
<ul><li><a href="#" class="on">Dashboard</a></li><li><a href="#">Students</a></li><li><a href="#">Teachers</a></li><li><a href="#">Classes</a></li><li><a href="#">Attendance</a></li><li><a href="#">Exams & results</a></li><li><a href="#">Fees</a></li><li><a href="#">Timetable</a></li><li><a href="#">Messages</a></li></ul>
<div class="term"><b>Autumn term</b>Week 8 of 13<div class="t" aria-hidden="true"><i></i></div></div>
</aside>
<main class="main" id="main">
<div class="top">
<button class="menu-btn burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu">☰</button>
<div><h1>Maple Grove School</h1><p>Tuesday, 14 October 2026</p></div>
<div class="r"><label class="search"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="skip">Search students</span><input placeholder="Search students or staff"></label><button class="btn pri" type="button">+ Send notice</button></div>
</div>
<section class="kpis" aria-label="School numbers">
<div class="card kpi"><small>Students</small><div class="v">1,246</div><span class="d">+38 this year</span></div>
<div class="card kpi"><small>Teachers</small><div class="v">84</div><span class="d" style="color:var(--muted)">2 on leave today</span></div>
<div class="card kpi y"><small>Attendance today</small><div class="v">94.2%</div><span class="d">+1.1% vs last week</span></div>
<div class="card kpi"><small>Fees collected</small><div class="v">$1.18M</div><span class="d">86% of this term</span></div>
</section>
<div class="row">
<section class="card" aria-labelledby="a-t"><div class="card-h"><h2 id="a-t">Attendance by grade</h2><div class="days" role="group" aria-label="Day of week" id="days"><button type="button" aria-pressed="false" data-d="0">Mon</button><button type="button" aria-pressed="true" data-d="1">Tue</button><button type="button" aria-pressed="false" data-d="2">Wed</button><button type="button" aria-pressed="false" data-d="3">Thu</button><button type="button" aria-pressed="false" data-d="4">Fri</button></div></div><svg id="att" role="img" aria-label="Bar chart of attendance percentage by grade"></svg></section>
<section class="card fees" aria-labelledby="f-t"><div class="card-h"><h2 id="f-t">Fee collection, autumn term</h2></div>
<div class="big">$1,184,000 <small>of $1,376,000</small></div>
<div class="t" aria-hidden="true"><i style="width:86%;background:var(--blue)"></i><i style="width:6%;background:var(--yel)"></i></div>
<div class="lg"><span>Paid 86%</span><span>Part paid 6%</span><span>Unpaid 8%</span></div>
<ul><li><span>Grade 10 to 12</span><b>92% paid</b></li><li><span>Grade 6 to 9</span><b>88% paid</b></li><li><span>Grade 1 to 5</span><b>81% paid</b></li><li><span>Overdue families</span><b class="late">46</b></li></ul></section>
</div>
<div class="row3">
<section class="card" aria-labelledby="t-t"><div class="card-h"><h2 id="t-t">Today's timetable, Grade 9A</h2></div>
<ol class="tt"><li><time>08:30</time><span><b>Mathematics</b><small>Mr. Okafor · Room 12</small></span></li><li class="now"><time>09:30</time><span><b>English literature</b><small>Ms. Clarke · Room 4 · Now</small></span></li><li><time>10:45</time><span><b>Biology</b><small>Dr. Rahman · Lab 2</small></span></li><li><time>12:30</time><span><b>History</b><small>Mr. Silva · Room 9</small></span></li><li><time>14:00</time><span><b>Physical education</b><small>Coach Brooks · Sports hall</small></span></li></ol></section>
<section class="card" aria-labelledby="e-t"><div class="card-h"><h2 id="e-t">Upcoming exams</h2></div>
<div class="exam"><div class="d"><b>20</b><small>OCT</small></div><div><b>Grade 12 Physics</b><small>Mid-term exam · 2 hours</small></div></div>
<div class="exam"><div class="d"><b>22</b><small>OCT</small></div><div><b>Grade 10 Mathematics</b><small>Unit test · 1 hour</small></div></div>
<div class="exam"><div class="d"><b>27</b><small>OCT</small></div><div><b>Grade 8 Science</b><small>Practical assessment</small></div></div>
<div class="stars"><h2 style="margin-bottom:6px">Top students this term</h2>
<div class="stu"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&q=60&auto=format&fit=crop" alt="" width="36" height="36"><div><b>Amara Diallo</b><small>Grade 11B</small></div><strong>97.4%</strong></div>
<div class="stu"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=80&q=60&auto=format&fit=crop" alt="" width="36" height="36"><div><b>Kenji Sato</b><small>Grade 12A</small></div><strong>96.8%</strong></div></div></section>
<section class="card" aria-labelledby="n-t"><div class="card-h"><h2 id="n-t">Notice board</h2><a href="#" style="font-weight:700;color:var(--blue);text-decoration:none">All notices</a></div>
<div class="notice imp"><b>School closes at 1pm on Friday</b>Staff training afternoon. Buses leave at 1:15pm.<br><small>Posted by the principal · Today</small></div>
<div class="notice"><b>Parent evening, Grade 10</b>Thursday 23 October, 5pm to 8pm, main hall.<br><small>Posted by Year 10 office · Yesterday</small></div>
<div class="notice"><b>Science fair entries open</b>Projects due by 7 November. Prizes for the top three.<br><small>Posted by Dr. Rahman · 2 days ago</small></div></section>
</div>
<p class="foot">Classio school management dashboard, a <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">free HTML template</a>. Sample data only. Photos: <a href="https://unsplash.com" rel="noopener">Unsplash</a>. © <span id="yr">2026</span></p>
</main>
</div>
<script>
const Gr=["G1","G2","G3","G4","G5","G6","G7","G8","G9","G10","G11","G12"],A=[[93,95,92,96,94,91,90,93,92,95,94,96],[95,96,94,97,95,93,92,94,94,96,95,97],[92,94,91,95,93,90,89,92,91,94,93,95],[94,95,93,96,94,92,91,93,93,95,94,96],[90,92,89,93,91,88,86,89,88,91,90,92]];
function att(d){const s=document.getElementById('att'),W=s.clientWidth||700,H=240,pl=36,pb=24,mn=80,bw=(W-pl)/Gr.length;let g='';
[80,85,90,95,100].forEach(v=>{const y=H-pb-(v-mn)/20*(H-pb-10);g+=`<line x1="${pl}" x2="${W}" y1="${y}" y2="${y}" stroke="#E5E9F0"/><text x="${pl-6}" y="${y+4}" text-anchor="end" font-size="11" fill="#6B7280">${v}%</text>`});
A[d].forEach((v,i)=>{const h=(v-mn)/20*(H-pb-10),x=pl+i*bw+bw*.18,low=v<91;g+=`<rect x="${x}" y="${H-pb-h}" width="${bw*.64}" height="${h}" rx="5" fill="${low?'#FACC15':'#1D4ED8'}"><title>${Gr[i]}: ${v}%</title></rect><text x="${x+bw*.32}" y="${H-7}" text-anchor="middle" font-size="11" fill="#6B7280">${Gr[i]}</text>`});
s.setAttribute('viewBox',`0 0 ${W} ${H}`);s.innerHTML=g}
document.querySelectorAll('#days button').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('#days button').forEach(x=>x.setAttribute('aria-pressed',x===b));att(+b.dataset.d)}));
att(1);window.addEventListener('resize',()=>att(+document.querySelector('#days [aria-pressed=true]').dataset.d));
</script>
<script>
(()=>{const b=document.querySelector('.burger'),m=document.getElementById('menu'),y=document.getElementById('yr');
if(b&&m){b.addEventListener('click',()=>{const o=m.classList.toggle('open');b.setAttribute('aria-expanded',o)});
m.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{m.classList.remove('open');b.setAttribute('aria-expanded',false)}))}
if(y)y.textContent=new Date().getFullYear()})();
</script>
</body>
</html>