322 lines
18 KiB
HTML
322 lines
18 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>Community — 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 4</span>
|
||
|
|
<h1>Community & newsfeed</h1>
|
||
|
|
<p>
|
||
|
|
Org and course Q&A plus cohort announcements, backed by the existing <code>/community</code> and
|
||
|
|
<code>/course/:id/newsfeed</code> routes. There is no direct messaging in ClassroomIO, so threaded Q&A is the
|
||
|
|
discussion surface — and offline it degrades to read-only with the compose box explicitly disabled.
|
||
|
|
</p>
|
||
|
|
<div class="proto-links">
|
||
|
|
<a href="notifications.html">Notifications →</a>
|
||
|
|
<a href="tutor-course.html">Tutor moderation →</a>
|
||
|
|
<a href="home.html">← Home</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="stage">
|
||
|
|
<!-- 1. FEED -->
|
||
|
|
<figure class="device">
|
||
|
|
<div class="phone">
|
||
|
|
<div class="phone-inner">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="statusbar" data-status="12:20"></div>
|
||
|
|
|
||
|
|
<div class="navbar">
|
||
|
|
<div class="grow"><div class="title">Community</div></div>
|
||
|
|
<button class="icon-btn" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></button>
|
||
|
|
<button class="icon-btn" aria-label="New post"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tabs" data-select>
|
||
|
|
<button class="on" data-option>For you</button>
|
||
|
|
<button data-option>Q&A</button>
|
||
|
|
<button data-option>Announcements</button>
|
||
|
|
<button data-option>My threads</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen">
|
||
|
|
<div class="card card-pad" style="margin: 12px 0 10px; border-color: color-mix(in oklab, var(--primary) 30%, transparent)">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">DM</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="row between">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Daniel Mensah <span class="badge badge-primary-soft" style="margin-left: 4px">Tutor</span></div>
|
||
|
|
<span class="text-muted" style="font-size: 11px">2h</span>
|
||
|
|
</div>
|
||
|
|
<div class="lmeta" style="margin-top: 1px"><span>Announcement · Q3 Frontline Onboarding</span></div>
|
||
|
|
<div style="font-size: 13.5px; line-height: 1.55; margin-top: 7px">
|
||
|
|
The practical forklift assessment moves to <strong>Bay 4</strong> this Thursday. Bring your completion code
|
||
|
|
from Lesson 12 — we can't sign anyone off without it.
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-top: 10px; gap: 14px">
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 10v12M15 5.9 14 10h5.8a2 2 0 0 1 2 2.3l-1.4 8a2 2 0 0 1-2 1.7H7V10l4-8a2.7 2.7 0 0 1 4 2z"/></svg> 12</span>
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg> 4 replies</span>
|
||
|
|
<span class="badge badge-primary-soft" style="margin-left: auto">Mentions you</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sec-head" style="margin-top: 14px"><h2>Questions you follow</h2></div>
|
||
|
|
<div class="stack">
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">TA</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="row between">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Tomás Alvarez</div>
|
||
|
|
<span class="text-muted" style="font-size: 11px">5h</span>
|
||
|
|
</div>
|
||
|
|
<div class="lmeta" style="margin-top: 1px"><span>Forklift Safety Recertification · Lesson 4</span></div>
|
||
|
|
<div style="font-size: 14px; font-weight: 500; margin-top: 6px; line-height: 1.4">
|
||
|
|
Does a hairline crack at the fork heel always mean tag-out?
|
||
|
|
</div>
|
||
|
|
<div class="lrow" style="margin-top: 10px; background: var(--muted); border: none">
|
||
|
|
<div class="avatar sm">DM</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div style="font-size: 12.5px; line-height: 1.45">
|
||
|
|
Yes — any crack at the heel is a tag-out. Photograph it, log it, and tell your supervisor before the
|
||
|
|
next shift.
|
||
|
|
</div>
|
||
|
|
<div class="lmeta"><span class="badge badge-success-soft">Answered by tutor</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-top: 10px; gap: 14px">
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 10v12M15 5.9 14 10h5.8a2 2 0 0 1 2 2.3l-1.4 8a2 2 0 0 1-2 1.7H7V10l4-8a2.7 2.7 0 0 1 4 2z"/></svg> 8</span>
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg> 3</span>
|
||
|
|
<span class="lmeta" style="margin: 0 0 0 auto"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg> Following</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">PK</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="row between">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Priya Kaur</div>
|
||
|
|
<span class="text-muted" style="font-size: 11px">1d</span>
|
||
|
|
</div>
|
||
|
|
<div class="lmeta" style="margin-top: 1px"><span>GDPR Essentials · General</span></div>
|
||
|
|
<div style="font-size: 14px; font-weight: 500; margin-top: 6px; line-height: 1.4">
|
||
|
|
If a customer asks for their data verbally at the counter, does the 30-day clock start?
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-top: 10px; gap: 14px">
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 10v12M15 5.9 14 10h5.8a2 2 0 0 1 2 2.3l-1.4 8a2 2 0 0 1-2 1.7H7V10l4-8a2.7 2.7 0 0 1 4 2z"/></svg> 5</span>
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg> 2</span>
|
||
|
|
<span class="badge badge-warning-soft" style="margin-left: auto">Unanswered</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sec-head"><h2>Ask your own</h2></div>
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="row">
|
||
|
|
<div class="avatar">AO</div>
|
||
|
|
<div class="grow"><div class="text-muted" style="font-size: 13.5px">Ask a question about a lesson…</div></div>
|
||
|
|
<button class="icon-btn" aria-label="Attach"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m21.4 11.1-9.2 9.2a5 5 0 0 1-7-7l9.2-9.2a3.3 3.3 0 1 1 4.7 4.7l-9.2 9.2a1.7 1.7 0 0 1-2.4-2.4l8.5-8.5"/></svg></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="tabbar" data-tabbar="community" data-badges="community:3"></nav>
|
||
|
|
<div class="home-bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<figcaption><b>For you</b>Mentions, followed threads, and announcements in one stream. Tutor answers are marked so learners can trust them at a glance.</figcaption>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<!-- 2. THREAD -->
|
||
|
|
<figure class="device">
|
||
|
|
<div class="phone">
|
||
|
|
<div class="phone-inner">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="statusbar" data-status="12:24"></div>
|
||
|
|
|
||
|
|
<div class="navbar bordered">
|
||
|
|
<a class="icon-btn plain" href="community.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">Question</div><div class="sub">Forklift Safety · Lesson 4</div></div>
|
||
|
|
<button class="icon-btn" aria-label="More"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen">
|
||
|
|
<div style="padding: 14px 0 10px">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">TA</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Tomás Alvarez</div>
|
||
|
|
<div class="lmeta" style="margin-top: 0"><span>5h ago</span></div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-outline btn-sm">Following</button>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; margin: 12px 0 8px">
|
||
|
|
Does a hairline crack at the fork heel always mean tag-out?
|
||
|
|
</div>
|
||
|
|
<div class="prose" style="font-size: 14px">
|
||
|
|
<p>
|
||
|
|
The lesson says cracks are a fault but doesn't distinguish severity. On our older trucks there are surface
|
||
|
|
marks that have been there for years. Do I tag out every time?
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="gap: 8px">
|
||
|
|
<button class="btn btn-outline btn-sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 10v12M15 5.9 14 10h5.8a2 2 0 0 1 2 2.3l-1.4 8a2 2 0 0 1-2 1.7H7V10l4-8a2.7 2.7 0 0 1 4 2z"/></svg> 8</button>
|
||
|
|
<button class="btn btn-ghost btn-sm">Reply</button>
|
||
|
|
<button class="btn btn-ghost btn-sm" style="margin-left: auto">Share</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<div class="card card-pad" style="margin-bottom: 12px">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">DM</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="row between">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Daniel Mensah <span class="badge badge-success-soft" style="margin-left: 4px">Tutor answer</span></div>
|
||
|
|
<span class="text-muted" style="font-size: 11px">4h</span>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 13.5px; line-height: 1.55; margin-top: 7px">
|
||
|
|
Yes — any crack at the heel is a tag-out, no severity judgement. Surface scoring from wear is different:
|
||
|
|
it's smooth and doesn't catch a fingernail. If you can feel an edge, tag it, photograph it, and log it.
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-top: 10px; gap: 14px">
|
||
|
|
<span class="lmeta" style="margin: 0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 10v12M15 5.9 14 10h5.8a2 2 0 0 1 2 2.3l-1.4 8a2 2 0 0 1-2 1.7H7V10l4-8a2.7 2.7 0 0 1 4 2z"/></svg> 14</span>
|
||
|
|
<span class="lmeta" style="margin: 0">Reply</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stack">
|
||
|
|
<div class="lrow" style="align-items: flex-start">
|
||
|
|
<div class="avatar sm">PK</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="row between">
|
||
|
|
<div class="ltitle" style="font-size: 13px">Priya Kaur</div>
|
||
|
|
<span class="text-muted" style="font-size: 11px">3h</span>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 13px; line-height: 1.5; margin-top: 4px">
|
||
|
|
The fingernail test is a good rule of thumb — that's what our depot uses too.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="lrow" style="align-items: flex-start">
|
||
|
|
<div class="avatar sm">AO</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="row between">
|
||
|
|
<div class="ltitle" style="font-size: 13px">Amara Okafor</div>
|
||
|
|
<span class="text-muted" style="font-size: 11px">2h</span>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 13px; line-height: 1.5; margin-top: 4px">
|
||
|
|
Thanks — I tagged out FLT-07 this morning on exactly this.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row" style="gap: 8px; margin-top: 16px">
|
||
|
|
<input class="input" placeholder="Write a reply…" />
|
||
|
|
<button class="icon-btn" style="width: 40px; height: 40px" aria-label="Send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m22 2-7 20-4-9-9-4z"/></svg></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<figcaption><b>Thread</b>The tutor answer is visually promoted above learner replies — the same author/team distinction the API already enforces.</figcaption>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<!-- 3. OFFLINE READ-ONLY -->
|
||
|
|
<figure class="device">
|
||
|
|
<div class="phone">
|
||
|
|
<div class="phone-inner">
|
||
|
|
<div class="notch"></div>
|
||
|
|
<div class="statusbar" data-status="19:05" data-offline></div>
|
||
|
|
|
||
|
|
<div class="offline-strip">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M2 2 22 22M8.5 16.5a5 5 0 0 1 7 0M5 13a10 10 0 0 1 4-2.4M12 20h.01"/></svg>
|
||
|
|
Offline — showing cached posts
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="navbar">
|
||
|
|
<div class="grow"><div class="title">Community</div></div>
|
||
|
|
<button class="icon-btn" disabled style="opacity: 0.45" aria-label="New post"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen">
|
||
|
|
<div class="banner banner-muted" style="margin: 12px 0 14px">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M2 2 22 22M8.5 16.5a5 5 0 0 1 7 0M5 13a10 10 0 0 1 4-2.4M12 20h.01"/></svg>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="bt">Posting is off while you're offline</div>
|
||
|
|
<div class="bd">You can read the last 50 posts. Replies need a connection so they don't post out of order.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stack" style="opacity: 0.85">
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">DM</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Daniel Mensah</div>
|
||
|
|
<div class="lmeta" style="margin-top: 1px"><span>Cached 2h ago</span></div>
|
||
|
|
<div style="font-size: 13.5px; line-height: 1.55; margin-top: 7px">
|
||
|
|
The practical forklift assessment moves to Bay 4 this Thursday.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card-pad">
|
||
|
|
<div class="row row-top">
|
||
|
|
<div class="avatar">TA</div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle" style="font-size: 13.5px">Tomás Alvarez</div>
|
||
|
|
<div class="lmeta" style="margin-top: 1px"><span>Cached 5h ago</span></div>
|
||
|
|
<div style="font-size: 13.5px; line-height: 1.55; margin-top: 7px">
|
||
|
|
Does a hairline crack at the fork heel always mean tag-out?
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="lrow locked" style="margin-top: 14px">
|
||
|
|
<div class="media"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
|
||
|
|
<div class="grow">
|
||
|
|
<div class="ltitle">Reply box disabled</div>
|
||
|
|
<div class="lsub">Reconnect to post — nothing you type would be saved</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="tabbar" data-tabbar="community"></nav>
|
||
|
|
<div class="home-bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<figcaption><b>Offline read-only</b>The compose affordance is disabled and explained rather than accepting text that would be lost — no fake optimistic posting.</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>
|