207 lines
13 KiB
HTML
207 lines
13 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>Compliance — ClassroomIO Mobile</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..800&display=swap" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet" href="app-theme.css" />
|
||
|
|
<script>
|
||
|
|
if (localStorage.cioTheme === 'dark' || (!localStorage.cioTheme && matchMedia('(prefers-color-scheme: dark)').matches))
|
||
|
|
document.documentElement.classList.add('dark');
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header class="proto-head">
|
||
|
|
<a class="back" href="index.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="14" height="14"><path d="m15 18-6-6 6-6"/></svg> All screens</a>
|
||
|
|
<span class="eyebrow">Learner · Tab 3</span>
|
||
|
|
<h1>Compliance — the differentiator</h1>
|
||
|
|
<p>
|
||
|
|
ClassroomIO's core value is knowing where you stand, so it gets a tab rather than a settings sub-page. Deadlines,
|
||
|
|
grace periods, renewals, and waivers all already exist server-side (<code>/course/:courseId/compliance</code>);
|
||
|
|
mobile needs one learner-scoped aggregate, <code>GET /account/compliance</code>, to render them together.
|
||
|
|
</p>
|
||
|
|
<div class="proto-links">
|
||
|
|
<a href="certificates.html">Certificate wallet →</a>
|
||
|
|
<a href="course.html">Open a required course →</a>
|
||
|
|
<a href="home.html">← Home</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="stage">
|
||
|
|
<!-- 1. AT RISK -->
|
||
|
|
<figure class="device">
|
||
|
|
<div class="phone">
|
||
|
|
<div class="phone-inner">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="statusbar" data-status="9:41"></div>
|
||
|
|
|
||
|
|
<div class="navbar">
|
||
|
|
<div class="grow"><div class="title">Compliance</div><div class="sub">Northwind Logistics · updated just now</div></div>
|
||
|
|
<a class="icon-btn" href="certificates.html" aria-label="Certificates"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="8" r="6"/><path d="M15.5 13.5 17 22l-5-3-5 3 1.5-8.5"/></svg></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen">
|
||
|
|
<div class="card card-pad" style="margin: 8px 0 14px">
|
||
|
|
<div class="row">
|
||
|
|
<div class="media lg is-danger">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 9v4M12 17h.01"/><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle">Action required</div>
|
||
|
|
<div class="lmeta">
|
||
|
|
<span class="badge badge-danger-soft">1 overdue</span>
|
||
|
|
<span class="badge badge-warning-soft">1 expiring</span>
|
||
|
|
<span class="badge badge-outline">4 compliant</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sec-head" style="margin-top: 0"><h2>Overdue</h2></div>
|
||
|
|
<a class="card card-pad" href="course.html" style="display: block">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="media is-danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 9v4M12 17h.01"/><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0"/></svg></div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle">Forklift Safety Recertification 2026</div>
|
||
|
|
<div class="lmeta"><span class="badge badge-danger-soft">Overdue 3 days</span><span class="badge badge-warning-soft">Grace ends 24 Aug</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="divider" style="margin: 12px 0"></div>
|
||
|
|
<div class="kv"><span class="k">Deadline</span><span class="v">17 Aug 2026</span></div>
|
||
|
|
<div class="kv"><span class="k">Progress</span><span class="v tnum">4 of 12 lessons</span></div>
|
||
|
|
<div class="kv"><span class="k">If missed</span><span class="v">Authorization suspended</span></div>
|
||
|
|
<button class="btn btn-primary btn-block" style="margin-top: 12px">Resume now · 28 min left</button>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="sec-head"><h2>Expiring soon</h2></div>
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="media is-warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle">Hazardous Materials Handling</div>
|
||
|
|
<div class="lmeta"><span class="badge badge-warning-soft">Expires in 21 days</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="divider" style="margin: 12px 0"></div>
|
||
|
|
<div class="row" style="margin-bottom: 6px">
|
||
|
|
<div class="progress"><span style="width: 82%"></span></div>
|
||
|
|
<span class="text-muted tnum" style="font-size: 11.5px">21d</span>
|
||
|
|
</div>
|
||
|
|
<div class="kv"><span class="k">Certified</span><span class="v">8 Sep 2025</span></div>
|
||
|
|
<div class="kv"><span class="k">Renewal opens</span><span class="v">8 Sep 2026</span></div>
|
||
|
|
<a class="btn btn-outline btn-block" href="certificates.html" style="margin-top: 12px">View current certificate</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sec-head"><h2>Compliant</h2><span class="count">4</span></div>
|
||
|
|
<div class="stack stack-sm">
|
||
|
|
<a class="lrow flat" href="certificates.html">
|
||
|
|
<div class="media is-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
|
||
|
|
<div class="grow"><div class="ltitle">Data Protection & GDPR</div><div class="lmeta"><span>Completed 16 Aug 2026</span><span class="sep">·</span><span>Renews annually</span></div></div>
|
||
|
|
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m9 18 6-6-6-6"/></svg></span>
|
||
|
|
</a>
|
||
|
|
<a class="lrow flat" href="certificates.html">
|
||
|
|
<div class="media is-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
|
||
|
|
<div class="grow"><div class="ltitle">Manual Handling</div><div class="lmeta"><span>Completed 2 Jun 2026</span></div></div>
|
||
|
|
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m9 18 6-6-6-6"/></svg></span>
|
||
|
|
</a>
|
||
|
|
<a class="lrow flat" href="certificates.html">
|
||
|
|
<div class="media is-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
|
||
|
|
<div class="grow"><div class="ltitle">Site Induction</div><div class="lmeta"><span>Completed 4 Mar 2026</span></div></div>
|
||
|
|
<span class="chev"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m9 18 6-6-6-6"/></svg></span>
|
||
|
|
</a>
|
||
|
|
<div class="lrow flat">
|
||
|
|
<div class="media"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 15l2 2 4-4"/></svg></div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle">Working at Height</div>
|
||
|
|
<div class="lmeta"><span class="badge badge-muted">Waived</span><span>Not required for your role</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="tabbar" data-tabbar="compliance" data-badges="compliance:dot"></nav>
|
||
|
|
<div class="home-bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<figcaption><b>At risk</b>Overdue first, with the consequence spelled out ("Authorization suspended") and grace-period dates visible. Waivers are shown, not hidden.</figcaption>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<!-- 2. ALL CLEAR -->
|
||
|
|
<figure class="device">
|
||
|
|
<div class="phone">
|
||
|
|
<div class="phone-inner">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="statusbar" data-status="9:41"></div>
|
||
|
|
|
||
|
|
<div class="navbar">
|
||
|
|
<div class="grow"><div class="title">Compliance</div><div class="sub">Northwind Logistics · updated just now</div></div>
|
||
|
|
<a class="icon-btn" href="certificates.html" aria-label="Certificates"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="8" r="6"/><path d="M15.5 13.5 17 22l-5-3-5 3 1.5-8.5"/></svg></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen">
|
||
|
|
<div class="card card-pad" style="margin: 8px 0 14px">
|
||
|
|
<div class="row">
|
||
|
|
<div class="media lg is-done">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle">Fully compliant</div>
|
||
|
|
<div class="lmeta"><span class="badge badge-success-soft">All 6 requirements up to date</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sec-head" style="margin-top: 0"><h2>Renewal timeline</h2></div>
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="lrow flat">
|
||
|
|
<div class="media is-warning">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="grow"><div class="ltitle">Hazardous Materials Handling</div><div class="lmeta"><span>Renews 15 Feb 2027</span></div></div>
|
||
|
|
<span class="badge badge-warning-soft tnum">183d</span>
|
||
|
|
</div>
|
||
|
|
<div class="lrow flat">
|
||
|
|
<div class="media"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div>
|
||
|
|
<div class="grow"><div class="ltitle">Forklift Safety Recertification</div><div class="lmeta"><span>Renews 17 Aug 2027</span></div></div>
|
||
|
|
<span class="badge badge-outline tnum">366d</span>
|
||
|
|
</div>
|
||
|
|
<div class="lrow flat">
|
||
|
|
<div class="media"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div>
|
||
|
|
<div class="grow"><div class="ltitle">Data Protection & GDPR</div><div class="lmeta"><span>Renews 16 Aug 2027</span></div></div>
|
||
|
|
<span class="badge badge-outline tnum">365d</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sec-head"><h2>Your record</h2></div>
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="kv"><span class="k">Requirements met</span><span class="v tnum">6 of 6</span></div>
|
||
|
|
<div class="kv"><span class="k">On-time completion rate</span><span class="v tnum">83%</span></div>
|
||
|
|
<div class="kv"><span class="k">Certificates held</span><span class="v tnum">6</span></div>
|
||
|
|
<div class="kv"><span class="k">Last audit export</span><span class="v">1 Aug 2026</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a class="btn btn-outline btn-block" href="certificates.html" style="margin-top: 14px">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="8" r="6"/><path d="M15.5 13.5 17 22l-5-3-5 3 1.5-8.5"/></svg>
|
||
|
|
Open certificate wallet
|
||
|
|
</a>
|
||
|
|
<div class="hint" style="text-align: center">
|
||
|
|
Your organization can verify any certificate from its ID without you sending a file.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="tabbar" data-tabbar="compliance"></nav>
|
||
|
|
<div class="home-bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<figcaption><b>All clear</b>The same screen when nothing is wrong: status, what renews next, and the record an auditor would ask for.</figcaption>
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||
|
|
</button>
|
||
|
|
<script src="proto.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|