admin/metatron-odoo-erpforschools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handbook

Browse Source
This commit is contained in:
metatroncubeswdev 2026-09-12 01:48:45 -04:00
parent cf656377ef
commit 5bb721cbe5
1 changed files with 641 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

641
school_erp_handbook.html Normal file
View File

@ -0,0 +1,641 @@
<title>Metatroncube School ERP</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,440;9..144,560;9..144,680&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
<style>
:root{
--paper:#F5F6F1;
--paper-raised:#FFFFFF;
--ink:#1C2420;
--ink-soft:#5B6A61;
--line:#DCE3DA;
--line-strong:#C4CFC3;
--pine:#1F5C4C;
--pine-ink:#123B30;
--pine-soft:#E3EFE7;
--gold:#A9761F;
--gold-soft:#F3E6C9;
--red:#A23B34;
--red-soft:#F3E1DE;
--shadow: 0 1px 2px rgba(28,36,32,0.06), 0 6px 20px -8px rgba(28,36,32,0.12);
--serif:'Fraunces', 'Iowan Old Style', Georgia, serif;
--sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#10160F;
--paper-raised:#171F17;
--ink:#E7EDE7;
--ink-soft:#9BAB9E;
--line:#2A362B;
--line-strong:#3B4A3B;
--pine:#54B192;
--pine-ink:#8FD3B8;
--pine-soft:#1B2E24;
--gold:#D9A94C;
--gold-soft:#332711;
--red:#DD8B82;
--red-soft:#37201E;
--shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -10px rgba(0,0,0,0.55);
}
}
:root[data-theme="dark"]{
--paper:#10160F;
--paper-raised:#171F17;
--ink:#E7EDE7;
--ink-soft:#9BAB9E;
--line:#2A362B;
--line-strong:#3B4A3B;
--pine:#54B192;
--pine-ink:#8FD3B8;
--pine-soft:#1B2E24;
--gold:#D9A94C;
--gold-soft:#332711;
--red:#DD8B82;
--red-soft:#37201E;
--shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -10px rgba(0,0,0,0.55);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){
html{ scroll-behavior:smooth; }
}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.55;
}
h1,h2,h3,h4{
font-family:var(--serif);
color:var(--ink);
margin:0 0 .5em;
text-wrap:balance;
font-weight:640;
}
p{ margin:0 0 1em; color:var(--ink); }
a{ color:var(--pine-ink); text-decoration-color: var(--line-strong); }
a:focus-visible, button:focus-visible, .navlink:focus-visible{
outline:2px solid var(--pine); outline-offset:2px; border-radius:4px;
}
strong{ font-weight:600; }
.fig{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.shell{
display:grid;
grid-template-columns: 250px minmax(0,1fr);
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 860px){
.shell{ grid-template-columns: 1fr; }
}
/* ---- Sidebar nav ---- */
.toc{
border-right:1px solid var(--line);
padding: 28px 18px 40px;
}
@media (max-width: 860px){
.toc{
position:sticky; top:0; z-index:20;
background:var(--paper);
border-right:none; border-bottom:1px solid var(--line);
padding: 10px 16px;
overflow-x:auto;
white-space:nowrap;
}
}
.toc-inner{ position:sticky; top:28px; }
@media (max-width:860px){ .toc-inner{ position:static; display:flex; gap:4px; } }
.brand{
font-family:var(--serif); font-weight:680; font-size:1.05rem;
color:var(--pine-ink); margin-bottom:2px; letter-spacing:.01em;
}
.brand-sub{
font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
color:var(--ink-soft); margin-bottom:22px;
}
@media (max-width:860px){ .brand,.brand-sub{ display:none; } }
nav ul{ list-style:none; margin:0; padding:0; }
nav li{ margin:0; }
@media (max-width:860px){ nav ul{ display:flex; gap:2px; } }
.navlink{
display:block; padding:7px 10px; margin:1px 0;
border-radius:7px; font-size:.9rem; color:var(--ink-soft);
text-decoration:none; border-left:2px solid transparent;
}
@media (max-width:860px){
.navlink{ border-left:none; border-bottom:2px solid transparent; padding:8px 10px; }
}
.navlink:hover{ color:var(--ink); background:var(--pine-soft); }
.navlink.active{ color:var(--pine-ink); background:var(--pine-soft); font-weight:600; border-left-color:var(--pine); }
@media (max-width:860px){ .navlink.active{ border-left-color:transparent; border-bottom-color:var(--pine); } }
.navlink.sub{ font-size:.82rem; padding-left:22px; color:var(--ink-soft); }
@media (max-width:860px){ .navlink.sub{ padding-left:10px; } }
/* ---- Main content ---- */
main{ padding: 0 0 80px; min-width:0; }
.hero{
padding: 46px 40px 34px;
border-bottom:1px solid var(--line);
}
@media (max-width:640px){ .hero{ padding:32px 20px 26px; } }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
color:var(--gold); background:var(--gold-soft); padding:4px 10px; border-radius:20px;
margin-bottom:16px;
}
.hero h1{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); max-width:16ch; }
.hero .lede{ font-size:1.08rem; color:var(--ink-soft); max-width:56ch; margin-bottom:0;}
section{
padding: 40px 40px;
border-bottom:1px solid var(--line);
max-width: 100%;
}
@media (max-width:640px){ section{ padding: 30px 20px; } }
section > .prose{ max-width:66ch; }
.kicker{
font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:8px;
}
section h2{ font-size:1.5rem; margin-bottom:14px; }
section > p.section-intro{ color:var(--ink-soft); max-width:62ch; }
/* ---- Cast / credentials ledger ---- */
.ledger-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--paper-raised); box-shadow:var(--shadow); }
table.ledger{ width:100%; border-collapse:collapse; min-width:640px; }
table.ledger th{
text-align:left; font-family:var(--mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-soft); padding:12px 16px; border-bottom:1px solid var(--line-strong); background:var(--pine-soft);
}
table.ledger td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.ledger tr:last-child td{ border-bottom:none; }
table.ledger td.role{ color:var(--ink-soft); font-size:.86rem; white-space:nowrap; }
table.ledger td.name{ font-weight:600; white-space:nowrap; }
table.ledger td.login{ font-family:var(--mono); font-size:.86rem; white-space:nowrap; }
table.ledger td.pass{ font-family:var(--mono); font-size:.86rem; color:var(--gold); white-space:nowrap; }
.ledger-note{
margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--pine);
border-radius:0 10px 10px 0; background:var(--pine-soft); font-size:.92rem; max-width:66ch;
}
.ledger-note.warn{ border-left-color:var(--gold); background:var(--gold-soft); }
.ledger-note p{ margin:0; }
.ledger-note p + p{ margin-top:8px; }
/* ---- Nine areas grid ---- */
.areas-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:14px; margin-top:24px;
}
.area-card{
background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
padding:18px 18px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;
}
.area-num{
font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em;
}
.area-card h3{ font-size:1.04rem; margin-bottom:2px; }
.area-card p{ font-size:.9rem; color:var(--ink-soft); margin-bottom:0; }
/* ---- Walkthrough intro ---- */
.scene-list-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.scene-chip{
font-family:var(--mono); font-size:.78rem; padding:5px 11px; border-radius:20px;
background:var(--paper-raised); border:1px solid var(--line); color:var(--ink-soft);
}
/* ---- Scene cards ---- */
.scene{
padding: 34px 40px; border-bottom:1px solid var(--line);
display:grid; grid-template-columns: 64px minmax(0,1fr); gap:22px;
}
@media (max-width:640px){ .scene{ padding:26px 20px; grid-template-columns:44px minmax(0,1fr); gap:14px; } }
.scene-num{
font-family:var(--serif); font-weight:680; font-size:1.8rem; color:var(--pine);
background:var(--pine-soft); border:1px solid var(--line-strong); border-radius:12px;
width:64px; height:64px; display:flex; align-items:center; justify-content:center;
}
@media (max-width:640px){ .scene-num{ width:44px; height:44px; font-size:1.25rem; border-radius:9px; } }
.scene h3{ font-size:1.22rem; margin-bottom:4px; }
.scene .story{
font-style:italic; color:var(--ink-soft); font-size:1rem; margin-bottom:16px;
}
.scene ol{ margin:0 0 16px; padding-left:0; list-style:none; counter-reset:step; max-width:62ch; }
.scene ol li{
counter-increment:step; position:relative; padding:5px 0 5px 30px; font-size:.96rem;
}
.scene ol li::before{
content: counter(step); position:absolute; left:0; top:5px;
font-family:var(--mono); font-size:.72rem; color:var(--pine); background:var(--pine-soft);
width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1px solid var(--line-strong);
}
.proves{
max-width:62ch; padding:13px 16px; border-radius:0 10px 10px 0;
background:var(--gold-soft); border-left:3px solid var(--gold); font-size:.92rem;
}
.proves b{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:5px; }
.scene.live-refusal .proves{ background:var(--red-soft); border-left-color:var(--red); }
.scene.live-refusal .proves b{ color:var(--red); }
/* ---- Closing beat ---- */
.closing-wrap{ display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.stamp{
flex:0 0 auto; width:126px; height:126px; border-radius:50%;
border:3px double var(--pine); color:var(--pine); display:flex; align-items:center; justify-content:center;
text-align:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
transform:rotate(-9deg); padding:14px; line-height:1.35; flex-shrink:0;
}
.schools-compare{
display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; max-width:640px;
}
@media (max-width:560px){ .schools-compare{ grid-template-columns:1fr; } }
.school-card{
background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
box-shadow:var(--shadow);
}
.school-card .swatches{ display:flex; gap:6px; margin:10px 0 12px; }
.swatch{ width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.12); }
.school-card h4{ font-size:1rem; margin-bottom:2px; font-family:var(--serif); }
.school-card .city{ font-size:.82rem; color:var(--ink-soft); margin-bottom:0; }
.school-card dl{ margin:12px 0 0; font-size:.86rem; }
.school-card dt{ color:var(--ink-soft); float:left; width:6.2em; clear:left; }
.school-card dd{ margin:0 0 4px; margin-left:6.2em; }
/* ---- Scope / roadmap list ---- */
.scope-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:18px; }
.scope-item{
background:var(--paper-raised); border:1px solid var(--line); border-radius:10px;
padding:11px 14px; font-size:.9rem; display:flex; align-items:baseline; gap:8px;
}
.scope-item .tag{
font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
color:var(--gold); flex-shrink:0;
}
.script-line{
margin-top:20px; padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--pine);
border-radius:0 10px 10px 0; background:var(--pine-soft); font-size:.94rem; max-width:64ch;
}
.script-line b{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pine); display:block; margin-bottom:6px; }
footer{ padding:30px 40px 60px; color:var(--ink-soft); font-size:.82rem; }
@media (max-width:640px){ footer{ padding:24px 20px 50px; } }
</style>
<div class="shell">
<nav class="toc" aria-label="Handbook contents">
<div class="toc-inner">
<div class="brand">Metatroncube School ERP</div>
<div class="brand-sub">Demo Handbook</div>
<ul id="navlist">
<li><a class="navlink" data-target="overview" href="#overview">Overview</a></li>
<li><a class="navlink" data-target="cast" href="#cast">Demo cast &amp; logins</a></li>
<li><a class="navlink" data-target="areas" href="#areas">The nine areas</a></li>
<li><a class="navlink" data-target="walkthrough" href="#walkthrough">The walkthrough</a></li>
<li><a class="navlink sub" data-target="scene-1" href="#scene-1">1. Principal's morning</a></li>
<li><a class="navlink sub" data-target="scene-2" href="#scene-2">2. New admission</a></li>
<li><a class="navlink sub" data-target="scene-3" href="#scene-3">3. Fees &amp; payment</a></li>
<li><a class="navlink sub" data-target="scene-4" href="#scene-4">4. Taking attendance</a></li>
<li><a class="navlink sub" data-target="scene-5" href="#scene-5">5. Parent sees it</a></li>
<li><a class="navlink sub" data-target="scene-6" href="#scene-6">6. Marks &amp; report card</a></li>
<li><a class="navlink sub" data-target="scene-7" href="#scene-7">7. Timetable</a></li>
<li><a class="navlink sub" data-target="scene-8" href="#scene-8">8. Online learning</a></li>
<li><a class="navlink" data-target="closing" href="#closing">Closing beat: branding</a></li>
<li><a class="navlink" data-target="scope" href="#scope">If they ask about&hellip;</a></li>
<li><a class="navlink" data-target="privacy" href="#privacy">How family privacy works</a></li>
</ul>
</div>
</nav>
<main>
<header class="hero">
<span class="eyebrow">Demo Handbook</span>
<h1>Metatroncube School ERP</h1>
<p class="lede">One system a principal, a front-office clerk, a teacher, an accountant, a parent and a student can each log into and see their own job on screen — nothing borrowed from another product, nothing a school has to be trained around for a week.</p>
</header>
<section id="overview">
<div class="kicker">What this document is</div>
<div class="prose">
<h2>A field guide for running the live demo</h2>
<p>This handbook explains what the product does, how the screens fit together, and gives the exact walkthrough for showing it to a school — in the order it lands best. It deliberately stays away from how any of it is built; that part is ours to keep.</p>
<p>The demo runs on a fictional school, <strong>St. Aloysius Public School</strong>, Coimbatore — 840 students, Grades 1&ndash;12, CBSE board. A second persona, <strong>Waterloo Heights Academy</strong>, Ontario (620 students, Grades 1&ndash;8), exists for Canadian prospects and doubles as the closing beat: the same system, rebranded, in minutes.</p>
</div>
</section>
<section id="cast">
<div class="kicker">Before you open the call</div>
<h2>The demo cast &amp; their logins</h2>
<p class="section-intro">Six people, six logins. Every login below is a real, working account in the demo database — log in as whichever person's story you're telling.</p>
<div class="ledger-wrap">
<table class="ledger">
<thead>
<tr><th>Role</th><th>Name</th><th>Login</th><th>Password</th><th>Sees</th></tr>
</thead>
<tbody>
<tr>
<td class="role">Principal / Admin</td>
<td class="name">Rekha Nair</td>
<td class="login">principal@demo.school</td>
<td class="pass">demo1234</td>
<td>Everything &mdash; every dashboard, every module</td>
</tr>
<tr>
<td class="role">Front Office</td>
<td class="name">Sunitha R</td>
<td class="login">office@demo.school</td>
<td class="pass">demo1234</td>
<td>Admissions, student records, the fee counter</td>
</tr>
<tr>
<td class="role">Teacher</td>
<td class="name">Arun Prakash</td>
<td class="login">teacher@demo.school</td>
<td class="pass">demo1234</td>
<td>His own classes only &mdash; attendance, marks</td>
</tr>
<tr>
<td class="role">Accountant</td>
<td class="name">David Fernandes</td>
<td class="login">accounts@demo.school</td>
<td class="pass">demo1234</td>
<td>Fees, invoices, payments</td>
</tr>
<tr>
<td class="role">Parent</td>
<td class="name">Meera Krishnan</td>
<td class="login">parent@demo.school</td>
<td class="pass">demo1234</td>
<td>Her two children only</td>
</tr>
<tr>
<td class="role">Student</td>
<td class="name">Aditya Krishnan &middot; Grade 8-A</td>
<td class="login">student@demo.school</td>
<td class="pass">demo1234</td>
<td>His own record only</td>
</tr>
</tbody>
</table>
</div>
<div class="ledger-note">
<p><strong>Meera has two children</strong> &mdash; Aditya (Grade 8-A) and Ananya (Grade 5-B). Ananya has no login of her own; she's reached through the child switcher inside Meera's parent login. That switcher is deliberate &mdash; it's the single most convincing feature in the whole portal, so give it real screen time rather than rushing past it.</p>
</div>
<div class="ledger-note warn">
<p>The same password everywhere is a demo convenience only. A real school rollout issues its own credentials through a proper invite-and-reset flow &mdash; never say "demo1234" is how a live school would actually work if asked.</p>
</div>
</section>
<section id="areas">
<div class="kicker">How the product is organized</div>
<h2>Nine areas, one shared record of the school</h2>
<p class="section-intro">Every area below reads from and writes to the same underlying student, so nothing ever needs re-entry between them &mdash; an admission becomes a student, a student's enrollment decides their fees, their class, their timetable and what their parents can see.</p>
<div class="areas-grid">
<div class="area-card"><span class="area-num">01</span><h3>Student &amp; Academic Records</h3><p>The academic calendar, programs and grades on offer, sections within each grade, rooms, every student's profile, and every guardian linked to them. A student's enrollment for the year is the one thread everything else follows.</p></div>
<div class="area-card"><span class="area-num">02</span><h3>Admissions</h3><p>A public application form outside any login, a visual pipeline from Applied through to Accepted, and a one-click Enroll that turns an applicant into a full student record with every field and document carried over.</p></div>
<div class="area-card"><span class="area-num">03</span><h3>Fees &amp; Payments</h3><p>A fee structure set once per grade &mdash; tuition, lab, library, transport, priced separately &mdash; billed by term, concessions shown as a visible discount line, and online payment with an instant receipt.</p></div>
<div class="area-card"><span class="area-num">04</span><h3>Attendance</h3><p>A class roster that opens with everyone marked Present by default; a teacher only touches the exceptions. Built for a phone, one-handed, in a corridor between periods.</p></div>
<div class="area-card"><span class="area-num">05</span><h3>Timetable</h3><p>One shared weekly schedule seen from three angles &mdash; a student's own week, a teacher's own week, or any class's full week for admin staff. No teacher or room can ever be double-booked.</p></div>
<div class="area-card"><span class="area-num">06</span><h3>Examinations &amp; Report Cards</h3><p>Grading scales &mdash; CBSE, ICSE, IB, Cambridge, Ontario, plain percentage &mdash; are settings a school configures, not new development. Marks go in on one grid; grades and a print-ready report card follow automatically.</p></div>
<div class="area-card"><span class="area-num">07</span><h3>Parent &amp; Student Portal</h3><p>A secure outside login for guardians and students. Every screen shows only records for the people actually linked to that login &mdash; enforced by the system itself, on every single request.</p></div>
<div class="area-card"><span class="area-num">08</span><h3>Online Learning</h3><p>Each class can carry its own lessons &mdash; a video, a handout, a quiz. Enrolled students see their courses automatically, the moment they're enrolled, with nothing to configure per student.</p></div>
<div class="area-card"><span class="area-num">09</span><h3>School Branding</h3><p>A school's logo, colours and name apply everywhere &mdash; staff screens, the parent portal, every printed report. Because branding is a setting rather than something built in, running (or showing) a second school is minutes, not a rebuild.</p></div>
</div>
</section>
<section id="walkthrough">
<div class="kicker">The live demo, scene by scene</div>
<h2>Eight scenes, in the order to run them</h2>
<p class="section-intro">Each scene below is a real, complete piece of a school day. The story line is written to be read aloud, almost verbatim, as you click. Run them in this order &mdash; each one hands the next its setup.</p>
<div class="scene-list-preview">
<span class="scene-chip">1&middot; Morning dashboard</span>
<span class="scene-chip">2&middot; Admission</span>
<span class="scene-chip">3&middot; Fees &amp; payment</span>
<span class="scene-chip">4&middot; Attendance</span>
<span class="scene-chip">5&middot; Parent view</span>
<span class="scene-chip">6&middot; Marks &amp; report card</span>
<span class="scene-chip">7&middot; Timetable</span>
<span class="scene-chip">8&middot; Online learning</span>
</div>
</section>
<article class="scene" id="scene-1">
<div class="scene-num">01</div>
<div>
<h3>The principal's morning</h3>
<p class="story">"This is the first screen Rekha sees at 8am."</p>
<ol>
<li>Log in as Principal (<span class="fig">principal@demo.school</span>).</li>
<li>The dashboard is already on screen, above the fold: today's school-wide attendance percentage, this term's fee collection (collected vs. outstanding), admissions in progress by stage, and student strength by grade.</li>
<li>Click through the attendance figure to see exactly which grades have dropped below 85%.</li>
</ol>
<div class="proves"><b>What this proves</b>Every figure on screen is computed live from real records &mdash; nothing here is typed in separately, and nothing reads zero because a feature isn't actually wired up.</div>
</div>
</article>
<article class="scene" id="scene-2">
<div class="scene-num">02</div>
<div>
<h3>A new admission</h3>
<p class="story">"A parent applied online on Sunday night. Here's Monday morning."</p>
<ol>
<li>Open the public application form in a fresh tab &mdash; no login needed. Fill in the student's name, date of birth, grade applied for, a parent's name, phone and email, and attach a birth certificate.</li>
<li>Submit &mdash; the parent sees an application number on screen immediately.</li>
<li>Log in as Front Office (<span class="fig">office@demo.school</span>): the new applicant is already sitting in the pipeline at <strong>Applied</strong>.</li>
<li>Move it forward &mdash; Document Verification &rarr; Interview &rarr; Offered &rarr; Accepted.</li>
<li>Click <strong>Enroll</strong>: the applicant becomes a full student record with an admission number, placed into a grade for the current year.</li>
</ol>
<div class="proves"><b>What this proves</b>Everything entered on that public form Sunday night &mdash; including the attached document &mdash; is already sitting on the enrolled student's record Monday morning. Nobody retypes a single field.</div>
</div>
</article>
<article class="scene" id="scene-3">
<div class="scene-num">03</div>
<div>
<h3>Fees and a parent payment</h3>
<p class="story">"The fee structure is set once. Everything after that is automatic."</p>
<ol>
<li>As Accountant (<span class="fig">accounts@demo.school</span>), show Grade 8's fee structure &mdash; tuition, lab, library and transport priced as separate lines, billed across the term.</li>
<li>Open Aditya's invoice for this term, generated straight from that structure.</li>
<li>Apply a 15% sibling concession to his sister Ananya's invoice and show it recalculate live &mdash; as a visible discount line, never a quietly lower total.</li>
<li>Switch to Meera's parent login. Open Fees, pay the term online through the test payment screen.</li>
<li>Payment succeeds &mdash; a receipt is ready to download immediately, and the accountant's outstanding figure drops with no page refresh.</li>
</ol>
<div class="proves"><b>What this proves</b>This posts a real accounting entry, not a status flag &mdash; the exact same one the school's books use, updating everyone's screen at once.</div>
</div>
</article>
<article class="scene" id="scene-4">
<div class="scene-num">04</div>
<div>
<h3>A teacher takes attendance</h3>
<p class="story">"This is the thing teachers do every single day, so it has to be fast."</p>
<ol>
<li>Log in as Teacher (<span class="fig">teacher@demo.school</span>). He sees only his own classes.</li>
<li>Open Grade 8-A, today's second period. The roster loads with every student already marked Present.</li>
<li>Mark two students absent, one on leave. Submit.</li>
</ol>
<div class="proves"><b>What this proves</b>Under three taps for the whole class. Submitting the same roster twice never creates a duplicate. And Arun cannot open Grade 5-B by guessing a different link &mdash; that boundary is enforced by the system, not by a button someone remembered to hide.</div>
</div>
</article>
<article class="scene live-refusal" id="scene-5">
<div class="scene-num">05</div>
<div>
<h3>The parent sees it immediately</h3>
<p class="story">"No phone call, no note in a diary."</p>
<ol>
<li>Switch straight to Meera's parent login, ideally in the same browser session &mdash; the contrast lands harder when it's immediate. The child switcher shows both Aditya and Ananya.</li>
<li>Aditya's attendance already shows today's absence &mdash; seconds after Scene 4, not the next day.</li>
<li>The month view shows the whole term's attendance pattern as a percentage.</li>
<li>Switch to Ananya: her own, separate record.</li>
<li><strong>Live, on the call:</strong> try to open a different family's child by editing the page address directly &mdash; show that it's refused.</li>
</ol>
<div class="proves"><b>That refusal is the feature, not an apology</b>It's a better answer to "how do you keep one family's records away from another" than any slide could be &mdash; show it happening, don't describe it.</div>
</div>
</article>
<article class="scene" id="scene-6">
<div class="scene-num">06</div>
<div>
<h3>Marks and a report card</h3>
<p class="story">"Term-end, and the report cards write themselves."</p>
<ol>
<li>As Teacher, open Grade 8-A &rarr; Mathematics &rarr; this term's exam. Enter marks for the whole class on one grid &mdash; tab key only, no mouse.</li>
<li>Save &mdash; grades compute themselves straight from the CBSE grading scale.</li>
<li>As Principal, generate Aditya's report card.</li>
<li>The PDF opens: school logo, every subject, marks, grades, an attendance summary, the class teacher's remark, a signature block.</li>
</ol>
<div class="proves"><b>What this proves</b>The grading scale is a setting, not code &mdash; swap CBSE for IB or Cambridge and the grades on this same report change with no development. The PDF prints clean on A4, nothing clipped.</div>
</div>
</article>
<article class="scene" id="scene-7">
<div class="scene-num">07</div>
<div>
<h3>Timetable</h3>
<p class="story">"Everyone sees the same timetable, from their own angle."</p>
<ol>
<li>As Student (Aditya), view this week &mdash; day, period, subject, teacher, room.</li>
<li>As Teacher (Arun), view his own week &mdash; where he's teaching, and when.</li>
<li>As Principal, view Grade 8-A's whole week.</li>
</ol>
<div class="proves"><b>What this proves</b>One shared schedule, three honest viewpoints, readable on a phone screen.</div>
</div>
</article>
<article class="scene" id="scene-8">
<div class="scene-num">08</div>
<div>
<h3>Online learning</h3>
<p class="story">"And the classroom extends past the classroom."</p>
<ol>
<li>As Student, open Courses &mdash; "Mathematics: Algebra Basics" is already waiting there because he's enrolled in that class; nobody invited him by hand.</li>
<li>Open it: a short video, a PDF handout, a five-question quiz.</li>
<li>Take the quiz, submit, see the score immediately.</li>
<li>As Teacher, see who in the class has finished it.</li>
</ol>
<div class="proves"><b>What this proves</b>The video plays inline, the score saves the moment it's submitted, and every enrolled student already has access &mdash; zero setup per student.</div>
</div>
</article>
<section id="closing">
<div class="kicker">Not a scene &mdash; the last thing you show</div>
<h2>The closing beat: rebrand to a second school</h2>
<div class="closing-wrap">
<div class="stamp">Same system<br>Different school</div>
<div class="prose" style="flex:1; min-width:240px;">
<p>Swap the logo, name and colour scheme over to the second demo school &mdash; <strong>Waterloo Heights Academy</strong>, Ontario &mdash; and reload. Same system, a different school, done in minutes, live on the call.</p>
<p>This is the detail that justifies running one system across several schools rather than one installation per school: branding is a setting a school owns, not a rebuild a developer has to do for them.</p>
</div>
</div>
<div class="schools-compare">
<div class="school-card">
<h4>St. Aloysius Public School</h4>
<p class="city">Coimbatore, India</p>
<div class="swatches"><span class="swatch" style="background:#1B3A5C"></span><span class="swatch" style="background:#D4A017"></span></div>
<dl>
<dt>Board</dt><dd>CBSE</dd>
<dt>Grades</dt><dd>1&ndash;12</dd>
<dt>Students</dt><dd>840</dd>
<dt>Currency</dt><dd>&#8377; INR</dd>
</dl>
</div>
<div class="school-card">
<h4>Waterloo Heights Academy</h4>
<p class="city">Waterloo, Ontario</p>
<div class="swatches"><span class="swatch" style="background:#1E5C3A"></span><span class="swatch" style="background:#C0C0C0"></span></div>
<dl>
<dt>Board</dt><dd>Ontario</dd>
<dt>Grades</dt><dd>1&ndash;8</dd>
<dt>Students</dt><dd>620</dd>
<dt>Currency</dt><dd>$ CAD</dd>
</dl>
</div>
</div>
</section>
<section id="scope">
<div class="kicker">Answering honestly, without stalling the demo</div>
<h2>If they ask about&hellip;</h2>
<p class="section-intro">These are real, deliberate cuts for this demo &mdash; not gaps discovered live. Say so plainly and move on; it reads as confidence, not evasion.</p>
<div class="scope-grid">
<div class="scope-item"><span class="tag">Roadmap</span>Payroll</div>
<div class="scope-item"><span class="tag">Roadmap</span>Library management</div>
<div class="scope-item"><span class="tag">Roadmap</span>Transport management</div>
<div class="scope-item"><span class="tag">Roadmap</span>Hostel management</div>
<div class="scope-item"><span class="tag">Roadmap</span>Inventory &amp; assets</div>
<div class="scope-item"><span class="tag">Roadmap</span>Automatic timetable generation</div>
<div class="scope-item"><span class="tag">Roadmap</span>WhatsApp integration</div>
<div class="scope-item"><span class="tag">Roadmap</span>Biometric / RFID attendance devices</div>
<div class="scope-item"><span class="tag">Roadmap</span>Multiple branches under one login</div>
<div class="scope-item"><span class="tag">Roadmap</span>Statutory financial report packs</div>
</div>
<div class="script-line"><b>Say this</b>"That's on our roadmap &mdash; it isn't part of what we're showing today. Happy to talk timeline and pricing for it separately."</div>
</section>
<section id="privacy">
<div class="kicker">The question every school asks</div>
<h2>How family data privacy actually works</h2>
<div class="prose">
<p>A parent or student only ever sees records for people directly and individually linked to them on file &mdash; never because they simply hold a "parent" or "student" login in general. That link is checked again, freshly, on every single screen they open, for every child's fees, attendance, marks and timetable, with no exceptions carved out anywhere.</p>
<p>That's exactly why Scene 5's refused-access moment can be shown live rather than staged for the slide deck: the restriction isn't a setting someone has to remember to switch on, it's simply how every request is answered.</p>
</div>
</section>
<footer>
Metatroncube School ERP &middot; Demo Handbook &middot; internal use for running and explaining the live demo &middot; not for external distribution.
</footer>
</main>
</div>
<script>
(function(){
var links = Array.prototype.slice.call(document.querySelectorAll('.navlink'));
var sections = links.map(function(l){ return document.getElementById(l.dataset.target); }).filter(Boolean);
if (!('IntersectionObserver' in window) || !sections.length) return;
var current = null;
function setActive(id){
if (id === current) return;
current = id;
links.forEach(function(l){ l.classList.toggle('active', l.dataset.target === id); });
}
var observer = new IntersectionObserver(function(entries){
var visible = entries.filter(function(e){ return e.isIntersecting; });
if (visible.length){
visible.sort(function(a,b){ return a.boundingClientRect.top - b.boundingClientRect.top; });
setActive(visible[0].target.id);
}
}, { rootMargin: '-15% 0px -70% 0px', threshold: 0 });
sections.forEach(function(s){ observer.observe(s); });
})();
</script>