docs(prd): learner-first mobile app PRD and interactive prototypes (#916)
* docs(prd): add learner-first mobile app PRD and interactive prototypes Draft the ClassroomIO iOS/Android companion as a learner-first product (attention home, compliance wallet, offline content, push on top of prd/notification-system) with clickable HTML prototypes as the UX source of truth. Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com> * style(prd): quiet mobile app prototype colours to match @cio/ui Replace filled red/orange/green surfaces with the dashboard Badge and Alert recipes: 10% tint chips, card-background alerts, and default rows. Keep destructive fills only for actual destroy actions. Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
This commit is contained in:
Rotimi Best
co-authored by
Rotimi Best
Cursor Agent
Rotimi Best
Cursor Agent
parent
368a7fe5ae
commit
967e81d33f
@@ -0,0 +1,199 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Certificates — 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 · Proof</span>
|
||||
<h1>Certificate wallet</h1>
|
||||
<p>
|
||||
Proof of training in the learner's pocket — the thing a supervisor, an auditor, or a client site actually asks for.
|
||||
Reads the existing <code>packages/certificates</code> records, stays viewable offline once downloaded, and shares as
|
||||
a PDF with a verification link and QR.
|
||||
</p>
|
||||
<div class="proto-links">
|
||||
<a href="compliance.html">← Compliance</a>
|
||||
<a href="course.html">Earn another →</a>
|
||||
<a href="profile.html">Profile →</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<!-- 1. WALLET -->
|
||||
<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">
|
||||
<a class="icon-btn plain" href="compliance.html" aria-label="Back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m15 18-6-6 6-6"/></svg></a>
|
||||
<div class="grow"><div class="title">Certificates</div><div class="sub">6 issued · 1 expiring soon</div></div>
|
||||
</div>
|
||||
|
||||
<div class="screen">
|
||||
<div class="chips" data-select style="margin: 10px 0 14px">
|
||||
<button class="chip on" data-option>All</button>
|
||||
<button class="chip" data-option>Valid</button>
|
||||
<button class="chip" data-option>Expiring</button>
|
||||
<button class="chip" data-option>Expired</button>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
<div class="card" style="overflow: hidden">
|
||||
<div class="card-pad">
|
||||
<div class="row row-top">
|
||||
<div class="media lg is-warning"><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></div>
|
||||
<div class="grow">
|
||||
<div class="ltitle" style="font-size: 15px">Hazardous Materials Handling</div>
|
||||
<div class="lsub">Issued 8 Sep 2025 · Northwind Logistics</div>
|
||||
<div class="lmeta"><span class="badge badge-warning-soft">Expires in 21 days</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pad row" style="gap: 8px; padding-top: 0">
|
||||
<button class="btn btn-outline btn-sm" style="flex: 1">View</button>
|
||||
<button class="btn btn-outline btn-sm" style="flex: 1">Share</button>
|
||||
<button class="btn btn-primary btn-sm" style="flex: 1.2">Renew</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="lrow" href="certificates.html">
|
||||
<div class="media lg is-done"><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></div>
|
||||
<div class="grow">
|
||||
<div class="ltitle">Data Protection & GDPR Essentials</div>
|
||||
<div class="lmeta"><span>Issued 16 Aug 2026</span><span class="sep">·</span><span class="tnum">CIO-GDPR-4F91</span></div>
|
||||
<div class="lmeta"><span class="badge badge-success-soft">Valid until 16 Aug 2027</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" href="certificates.html">
|
||||
<div class="media lg is-done"><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></div>
|
||||
<div class="grow">
|
||||
<div class="ltitle">Manual Handling & Ergonomics</div>
|
||||
<div class="lmeta"><span>Issued 2 Jun 2026</span><span class="sep">·</span><span class="tnum">CIO-MHE-8C22</span></div>
|
||||
<div class="lmeta"><span class="badge badge-success-soft">No expiry</span><span class="badge badge-outline">Saved offline</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" href="certificates.html">
|
||||
<div class="media lg is-done"><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></div>
|
||||
<div class="grow">
|
||||
<div class="ltitle">Site Induction — Meridian Depot</div>
|
||||
<div class="lmeta"><span>Issued 4 Mar 2026</span><span class="sep">·</span><span class="tnum">CIO-SI-1A70</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" style="opacity: 0.65">
|
||||
<div class="media lg"><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></div>
|
||||
<div class="grow">
|
||||
<div class="ltitle">Forklift Safety Recertification 2025</div>
|
||||
<div class="lmeta"><span class="badge badge-danger-soft">Expired 17 Aug 2026</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="tabbar" data-tabbar="compliance"></nav>
|
||||
<div class="home-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption><b>Wallet</b>Sorted by what needs attention. Expiring certificates get a Renew action that jumps straight into the refresher course.</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- 2. DETAIL -->
|
||||
<figure class="device">
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="notch"></div>
|
||||
<div class="statusbar" data-status="9:43"></div>
|
||||
|
||||
<div class="navbar">
|
||||
<a class="icon-btn plain" href="certificates.html" aria-label="Back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m15 18-6-6 6-6"/></svg></a>
|
||||
<div class="grow"><div class="title-sm">Certificate</div></div>
|
||||
<button class="icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4M12 2v13"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="screen">
|
||||
<!-- rendered certificate -->
|
||||
<div
|
||||
class="card"
|
||||
style="margin: 12px 0 14px; padding: 22px 18px; text-align: center; border-width: 2px; border-color: color-mix(in oklab, var(--primary) 30%, transparent)"
|
||||
>
|
||||
<div class="avatar brand" style="margin: 0 auto 12px; width: 38px; height: 38px">NL</div>
|
||||
<div class="eyebrow">Northwind Logistics Academy</div>
|
||||
<div style="font-size: 12.5px; color: var(--muted-foreground); margin: 12px 0 4px">This certifies that</div>
|
||||
<div style="font-size: 19px; font-weight: 600; letter-spacing: -0.02em">Amara Okafor</div>
|
||||
<div style="font-size: 12.5px; color: var(--muted-foreground); margin: 10px 0 4px">has successfully completed</div>
|
||||
<div style="font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35">
|
||||
Data Protection & GDPR Essentials
|
||||
</div>
|
||||
<div class="lsub" style="margin-top: 8px">16 August 2026 · Final score 92%</div>
|
||||
|
||||
<div class="divider" style="margin: 16px 0 14px"></div>
|
||||
|
||||
<div class="row" style="justify-content: center; gap: 14px">
|
||||
<div style="width: 62px; height: 62px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--muted)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="30" height="30" stroke-width="1.7">
|
||||
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||
<path d="M14 14h3v3h-3zM18 18h3v3h-3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="text-align: left">
|
||||
<div class="eyebrow">Verify</div>
|
||||
<div class="tnum" style="font-size: 12px; font-weight: 600; margin-top: 3px">CIO-GDPR-4F91-2026</div>
|
||||
<div class="lsub" style="margin-top: 2px">verify.classroomio.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="gap: 8px; margin-bottom: 14px">
|
||||
<button class="btn btn-primary btn-lg" style="flex: 1">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4M12 2v13"/></svg>
|
||||
Share PDF
|
||||
</button>
|
||||
<button class="btn btn-outline btn-lg" style="flex: 1">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 15V3M7 10l5 5 5-5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card card-pad">
|
||||
<div class="kv"><span class="k">Issued to</span><span class="v">Amara Okafor</span></div>
|
||||
<div class="kv"><span class="k">Issued by</span><span class="v">Northwind Logistics</span></div>
|
||||
<div class="kv"><span class="k">Issue date</span><span class="v">16 Aug 2026</span></div>
|
||||
<div class="kv"><span class="k">Valid until</span><span class="v">16 Aug 2027</span></div>
|
||||
<div class="kv"><span class="k">Certificate ID</span><span class="v tnum" style="font-size: 12.5px">CIO-GDPR-4F91-2026</span></div>
|
||||
<div class="kv"><span class="k">Available offline</span><span class="v"><span class="badge badge-success-soft">Yes</span></span></div>
|
||||
</div>
|
||||
|
||||
<div class="hint" style="text-align: center; margin-top: 12px">
|
||||
Anyone with the ID can confirm this certificate is genuine without you sending a file.
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption><b>Detail & verification</b>The rendered certificate, share sheet, and a verification ID/QR — so a site supervisor can check it on the spot.</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>
|
||||
Reference in New Issue
Block a user