ClassPulse – Tuition Centre & School Portal HTML Template (38 Pages, Results, Parent Portal, Admin, Dark Mode)

ClassPulse – a complete front end for a tuition centre or small school

ClassPulse is a modern Tuition Centre & School Portal HTML template: a public website with an online result lookup, a parent / student portal, teacher pages for attendance and marks, and a full admin panel for exams, attendance, timetable and fees. Plain HTML5, one CSS file and one small vanilla JavaScript file – light theme by default with a full dark mode.

Preview (screenshots of every page): https://demo.anowhosting.com/html/classpulse/ – each page in light, dark, laptop and phone view.

A landing page that sells your classes

A layered photo hero with live result, attendance and fee cards, a subject ribbon, programs with prices, teachers, a reviews marquee, an admissions timeline with an enquiry form, an install-app band and a contact section with a drawn map and social links.

Results parents can look up

A public result lookup (exam, roll number, date of birth), a result page with marks, grades, GPA, rank and remark, and a printable A4 report card with a clean print layout.

Light + full dark mode

Every page has a light and a dark theme. The choice is remembered per browser and applied before the page paints, so there is no flash.

Parent / student portal

Children switcher, today status, attendance calendar, results with a score trend, report card view, fees and invoices, a pay page with card gateways and bank transfer, notices, timetable and homework.

Teacher pages

A phone-first attendance register (present / absent / late / excused) with live counts, a marks-entry grid with live totals and letter grades, and a page to post homework or notices.

18 admin pages

Dashboard with KPIs and charts, students and student profile with QR ID card, classes and subjects, timetable builder, attendance reports with a heat map, exams and publishing, grading scales, staff roles and an admissions enquiries inbox.

Fees, payments and settings

Fee plans with billing rules, invoices, payments with bank transfer approval, plus settings screens for general details, colour presets and pickers, social networks, the installable web app and payment methods.

Clean on every screen

Checked from 360 px phones to 1920 px screens in both themes, with a burger drawer, a "More" menu, an off-canvas panel sidebar and tables that turn into cards on phones.

Pages included

• Public website: landing page, results lookup, result view, sign-in, QR check-in kiosk, printable A4 report card, offline page
• Parent / student portal: dashboard, attendance calendar, results, report card, fees and invoices, pay fees, notices, timetable, homework
• Teacher: today, take attendance, marks entry, post homework / notice
• Admin: dashboard, students, student profile, classes and subjects, timetable builder, attendance reports, exams, grading scales, fee plans, invoices, payments, notices, staff and roles, settings, admissions enquiries

What you get

• The template folder: 38 pages, page list, assets (CSS, JS, fonts, logo), placeholder images
• Documentation (documentation/index.html)
• Licences for the fonts

The preview shows free stock photos; the download uses neutral placeholder images with the same names and sizes, and the documentation lists every preview photo with its free photo page.

Need it working? See the ClassPulse script – the full application built on this design.

Support and updates

Support covers questions about the template files and bugs in the item. Custom development is not included.

• Any web hosting or static hosting – no PHP, database or Node needed
• A code editor to change the HTML and CSS
• Latest Chrome, Edge, Firefox or Safari (desktop and mobile)
• HTTPS for the installable web app (service worker) demo

Use the template

1. Unzip the package and open classpulse-html/index.html – it lists every page.
2. Change colours and fonts in assets/css/classpulse.css (section 2 "Tokens").
3. Replace the placeholder images in images/ with your own photos under the same names.
4. Connect the forms to your backend (see the documentation).
5. Upload the contents of classpulse-html/ to your hosting.

Full guide: documentation/index.html.

1.0.0 – November 2026

• Initial release