mathly / docs /mockups /mathly2-screens.html
3v324v23's picture
Add specifications for exercise tests, grades, learning path, lesson quizzes, readiness meter, real tests, rewards, simulation tests, skill mastery, smart board, student home, and test countdown
a7ffb22
Raw History Blame Contribute Delete
33.8 kB
<!doctype html>
<html lang="he" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mathly 2 screens</title>
<style>
/* Static mockup of mathly2 for three roles. Sample data only; no server. Requirement ids refer to docs/tasks/prd-mathly.md. */
:root{--bg:#eef1fb;--card:#ffffff;--ink:#16203a;--mute:#5a6585;--line:#cfd6ea;--accent:#4f6df5;--aurora:#0f9d8a;--gold:#b98000;--bad:#c2410c;--badbg:#fdecdf;--ok:#0f7a4a;--okbg:#dcf5e8;--night:#e6ebfa;--on-accent:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b1024;--card:#151c38;--ink:#e9edfb;--mute:#9aa6cf;--line:#2a3560;--accent:#8ea6ff;--aurora:#46e0c8;--gold:#ffd166;--bad:#ffb08a;--badbg:#3a1f12;--ok:#7ff0b5;--okbg:#0f3324;--night:#10173a;--on-accent:#0b1024}}
:root[data-theme=dark]{--bg:#0b1024;--card:#151c38;--ink:#e9edfb;--mute:#9aa6cf;--line:#2a3560;--accent:#8ea6ff;--aurora:#46e0c8;--gold:#ffd166;--bad:#ffb08a;--badbg:#3a1f12;--ok:#7ff0b5;--okbg:#0f3324;--night:#10173a;--on-accent:#0b1024}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,"Segoe UI",Arial,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.top h1{margin:0;font-size:17px;flex:1 1 auto}
.top small{color:var(--mute);display:block;font-weight:400;font-size:12px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:38px}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.role{display:none}.role.on{display:block}
.sub{margin-bottom:12px}
.ids{color:var(--mute);font-size:12px;margin:0 0 10px}
/* phone frame */
.phone{width:min(390px,100%);margin:0 auto;border:10px solid var(--ink);border-radius:34px;background:var(--bg);overflow:hidden;position:relative;min-height:720px;display:flex;flex-direction:column}
.screen{display:none;flex:1;flex-direction:column}.screen.on{display:flex}
.scroll{flex:1;overflow:auto;padding:14px}
.tabbar{display:flex;border-top:1px solid var(--line);background:var(--card)}
.tabbar span{flex:1;text-align:center;padding:8px 0;font-size:12px;color:var(--mute)}
.tabbar span.cur{color:var(--accent);font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.card h3{margin:0 0 6px;font-size:15px}
.mute{color:var(--mute)}
.btn{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 14px;min-height:44px;cursor:pointer;text-align:center}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.btn.wide{display:block;width:100%}
.pill{border-radius:999px}
.bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--aurora)}
.parts{display:flex;gap:8px;font-size:12px;color:var(--mute);margin-top:6px}
.tag{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.row{display:flex;gap:8px;align-items:center}.grow{flex:1}
/* sign-in */
.signin{flex:1;display:grid;place-content:center;text-align:center;gap:16px;padding:24px;background:linear-gradient(180deg,var(--night),var(--bg))}
.logo{font-size:30px;font-weight:800;letter-spacing:.5px}
.owl{font-size:64px;line-height:1}
.google{background:var(--aurora);color:#05231b;border:0;border-radius:999px;padding:12px 22px;font-weight:700;min-height:44px}
/* path */
.trail{display:flex;flex-direction:column;align-items:center;gap:26px;position:relative}
.trail>*{position:relative}
.trail>*:not(:first-child)::before{content:"";position:absolute;bottom:100%;left:50%;width:6px;height:26px;margin-left:-3px;background:var(--line);border-radius:3px}
.mark{text-align:center;color:var(--mute)}
.orbit{position:relative;width:100%;height:300px}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;text-align:center;background:var(--card);border:2px solid var(--accent);border-radius:16px;padding:7px 5px;z-index:1}
.hub b{display:block;font-size:13px}.hub span{font-size:11px;color:var(--mute)}
.star{position:absolute;left:calc(50% + var(--dx)*112px);top:calc(50% + var(--dy)*112px);transform:translate(-50%,-30px);width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;background:none;border:0;padding:0}
.node{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:3px solid var(--line)}
.node svg{width:24px;height:24px;fill:var(--line)}
.num{position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-size:10px;font-weight:700;display:grid;place-items:center}
.lbl{font-size:11px;text-align:center;line-height:1.2}.lbl em{display:block;font-style:normal;color:var(--mute);font-size:10.5px}
.s-learning .node{border-color:var(--accent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,var(--card)) 50%,var(--card) 50%)}.s-learning .node svg{fill:var(--accent)}
.s-mastered .node{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 22%,var(--card))}.s-mastered .node svg{fill:var(--gold);width:28px;height:28px}
.s-faded .node{opacity:.55}
.s-next .node{width:62px;height:62px;border-color:var(--aurora);box-shadow:0 0 0 5px color-mix(in srgb,var(--aurora) 25%,transparent)}
.perch{position:absolute;top:-24px;inset-inline-start:-22px;font-size:24px}
.boss{background:var(--card);border:2px dashed var(--gold);border-radius:14px;padding:8px 14px;text-align:center}
/* exercise */
.sheethead{display:flex;gap:8px;align-items:flex-start}
.chip{font-size:11px;border-radius:999px;background:var(--night);padding:2px 9px}
.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.q{font-size:20px;text-align:center;direction:ltr;margin:12px 0}
.choice{display:block;width:100%;direction:ltr;border:2px solid var(--line);background:var(--card);border-radius:12px;padding:11px;margin-bottom:8px;font-size:17px;cursor:pointer}
.choice[aria-pressed=true]{border-color:var(--accent)}
.fb{border-radius:12px;padding:10px;margin-top:8px}.fb.bad{background:var(--badbg);border:1px solid var(--bad)}.fb.good{background:var(--okbg);border:1px solid var(--ok)}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line);margin-inline-end:3px}.dots i.f{background:var(--ok)}
/* collection */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center;font-size:12px}
.cell .sym{font-size:20px;display:block}
/* desktop panels */
.desk{display:grid;grid-template-columns:220px 1fr;gap:14px}
.menu{display:flex;flex-direction:column;gap:6px}
.menu button{text-align:start;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px;min-height:44px;cursor:pointer}
.menu button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset -4px 0 0 var(--accent);font-weight:700}
.panel{display:none}.panel.on{display:block}
table{border-collapse:collapse;width:100%;background:var(--card);border-radius:12px;overflow:hidden}
th,td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:start;font-size:13px}
th{background:var(--night)}
.hm td.c{text-align:center;width:34px;font-weight:700}
.c-m{background:color-mix(in srgb,var(--gold) 30%,transparent)}.c-l{background:color-mix(in srgb,var(--accent) 22%,transparent)}.c-n{color:var(--mute)}
.sticky{position:sticky;inset-inline-start:0;background:var(--card)}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
label{display:block;font-weight:600;margin:10px 0 4px}
input[type=text],input[type=number],textarea{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px}
textarea{min-height:90px;direction:ltr}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.checks label{font-weight:400;margin:0;border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;gap:6px;align-items:center}
.switch{display:inline-flex;align-items:center;gap:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.thumb{width:72px;height:56px;border-radius:8px;background:repeating-linear-gradient(45deg,var(--night),var(--night) 6px,var(--line) 6px,var(--line) 7px);flex:none}
@media (max-width:760px){.desk{grid-template-columns:1fr}.menu{flex-direction:row;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>
<header class="top">
<h1>Mathly 2 ยท ืžืกื›ื™ื <small>ืžื•ืงืืค ืกื˜ื˜ื™ ืขื ื ืชื•ื ื™ื ืœื“ื•ื’ืžื” ยท ื“ืจื™ืฉื•ืช ืœืคื™ docs/tasks/prd-mathly.md</small></h1>
<div class="seg" id="roles" role="tablist" aria-label="ืชืคืงื™ื“">
<button data-role="student" aria-pressed="true">ืชืœืžื™ื“</button>
<button data-role="teacher" aria-pressed="false">ืžื•ืจื”</button>
<button data-role="manager" aria-pressed="false">ืžื ื”ืœ ื›ื™ืชื•ืช</button>
</div>
<div class="seg" aria-label="ืขืจื›ืช ืฆื‘ืขื™ื"><button id="theme" aria-pressed="false">ืžืฆื‘ ื›ื”ื”/ื‘ื”ื™ืจ</button></div>
</header>
<main class="wrap">
<!-- ======================= STUDENT ======================= -->
<section class="role on" id="student">
<div class="seg sub" id="stuNav">
<button data-s="signin" aria-pressed="true">ื›ื ื™ืกื”</button>
<button data-s="home" aria-pressed="false">ื‘ื™ืช</button>
<button data-s="path" aria-pressed="false">ืžืกืœื•ืœ</button>
<button data-s="ex" aria-pressed="false">ืชืจื’ื™ืœ</button>
<button data-s="grades" aria-pressed="false">ืฆื™ื•ื ื™ื</button>
<button data-s="coll" aria-pressed="false">ื”ืื•ืกืฃ</button>
</div>
<p class="ids" id="stuIds">ACC-1 ยท ื“ืฃ ื”ื›ื ื™ืกื” ื‘ืกื’ื ื•ืŸ mathly1</p>
<div class="phone">
<div class="screen on" id="s-signin">
<div class="signin">
<div class="logo">โœฆ Mathly</div>
<div class="owl" aria-hidden="true">๐Ÿฆ‰</div>
<p class="mute" style="margin:0">ื™ืฉ ืœื”ื™ื›ื ืก ื›ื“ื™ ืœืคืชื•ื— ืืช ืžืกืœื•ืœ ื”ืžืชืžื˜ื™ืงื”.</p>
<button class="google">ื›ื ื™ืกื” ืขื Google</button>
</div>
</div>
<div class="screen" id="s-home">
<div class="scroll">
<div class="card">
<div class="row"><h3 class="grow">ืžื‘ื—ืŸ ื‘ืžืชืžื˜ื™ืงื” ยท 16.11</h3><span class="tag">ืขื•ื“ 9 ื™ืžื™ื</span></div>
<div class="row" style="margin:6px 0 4px"><b style="font-size:22px">62</b><span class="tag">ื‘ื“ืจืš</span><span class="mute grow" style="font-size:12px">ืžื•ื›ื ื•ืช (ืชืงืจื” 80 ืขื“ ื”ืกื™ืžื•ืœืฆื™ื”)</span></div>
<div class="bar"><i style="width:62%"></i></div>
<div class="parts"><span>ืฉืœื™ื˜ื” 70%</span><span>ืžื‘ื—ื ื™ ืชืจื’ื•ืœ 54</span><span>ืกื™ืžื•ืœืฆื™ื” โ€”</span></div>
<p style="margin:10px 0 6px"><b>ื”ืžืฉื™ืžื” ืฉืœ ื”ื™ื•ื</b></p>
<button class="btn solid wide">ืžื‘ื—ืŸ ืชืจื’ื•ืœ 1 ยท 12 ืฉืืœื•ืช ยท 45 ื“ืงืณ</button>
</div>
<div class="card"><h3>ื”ืžืฉื™ืžื•ืช ืฉืœื™</h3>
<div class="row" style="padding:6px 0;border-bottom:1px solid var(--line)"><span class="grow">ื“ืฃ ืขื‘ื•ื“ื”: ืคื™ืจื•ืง ื˜ืจื™ื ื•ื</span><span class="tag">ืขื“ 10.11</span></div>
<div class="row" style="padding:6px 0"><span class="grow">ื‘ื•ื—ืŸ ื›ืชื•ื‘: ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1</span><span class="tag">โœ“ 85</span></div>
</div>
<div class="card"><h3>ืชืงื•ืขื™ื ืขืœ ืชืจื’ื™ืœ? ืฆืœืžื• ืื•ืชื•</h3>
<p class="mute" style="margin:0 0 8px;font-size:13px">ื”ืžื•ืจื” ืจื•ืื” ืืช ื”ืชืžื•ื ื” ืงื•ื“ื, ื•ืื– ืžื’ื™ืขื™ื ืจืžื–ื™ื ืื—ื“ึพืื—ื“.</p>
<div class="row"><div class="thumb"></div><span class="grow" style="font-size:13px">ืชืจื’ื™ืœ ืžืฆื•ืœื ยท <b>ืžืžืชื™ืŸ ืœืžื•ืจื”</b></span><button class="btn">ื‘ื™ื˜ื•ืœ</button></div>
<button class="btn wide" style="margin-top:8px">๐Ÿ“ท ืฆื™ืœื•ื ืชืจื’ื™ืœ</button>
</div>
<button class="btn wide">ืžืžืฉื™ื›ื™ื ื‘ืžืกืœื•ืœ: ืžืฉื•ื•ืื” ืขื ืคื™ืœื•ื’ โ€น</button>
</div>
<div class="tabbar"><span class="cur">ื‘ื™ืช</span><span>ืžืกืœื•ืœ</span><span>ืฆื™ื•ื ื™ื</span><span>ื”ืื•ืกืฃ</span></div>
</div>
<div class="screen" id="s-path">
<div class="scroll">
<div class="card row" style="font-size:13px"><div class="grow">ื™ืขื“ ื™ื•ืžื™: 3 ืžืชื•ืš 5<div class="bar" style="margin-top:4px"><i style="width:60%"></i></div></div><span>๐Ÿ”ฅ 4 ื™ืžื™ื</span></div>
<div class="trail">
<div class="mark"><span style="font-size:32px">๐Ÿฆ‰</span><br><b style="color:var(--aurora)">ื”ืชื—ืœื”</b></div>
<section class="orbit" aria-label="ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1">
<div class="hub"><b>ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1</b><span>2 ืžืชื•ืš 5 ื ืฉืœื˜ื•</span></div>
<button class="star s-mastered" style="--dx:0;--dy:-1"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">1</span></span><span class="lbl">ืคื™ืœื•ื’ ืžื•ืจื—ื‘<em>โœ“ ื ืฉืœื˜ื”</em></span></button>
<button class="star s-mastered s-faded" style="--dx:.951;--dy:-.309"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">2</span></span><span class="lbl">ืฆืžืฆื•ื<em>โœ“ ื ืฉืœื˜ื” ยท ื“ื•ืขืš</em></span></button>
<button class="star s-learning s-next" style="--dx:.588;--dy:.809"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">3</span><span class="perch" aria-hidden="true">๐Ÿฆ‰</span></span><span class="lbl">ืžืฉื•ื•ืื” ืขื ืคื™ืœื•ื’<em>โ— ื‘ืœืžื™ื“ื” ยท ืžืžืฉื™ื›ื™ื ื›ืืŸ</em></span></button>
<button class="star" style="--dx:-.588;--dy:.809"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">4</span></span><span class="lbl">ืฉื˜ื—<em>โ—‹ ืœื ื”ืชื—ืœืช</em></span></button>
<button class="star" style="--dx:-.951;--dy:-.309"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">5</span></span><span class="lbl">ื ื•ืกื—ืื•ืช<em>โ—‹ ืœื ื”ืชื—ืœืช</em></span></button>
</section>
<div class="boss">๐Ÿ† <b>ื‘ื•ื—ืŸ ื”ืฉื™ืขื•ืจ</b><br><span class="mute" style="font-size:12px">10 ืฉืืœื•ืช ยท 15 ื“ืงืณ ยท ื”ืฆื™ื•ืŸ ื”ื˜ื•ื‘: 85</span></div>
<section class="orbit" style="height:260px" aria-label="ืคื™ืจื•ืง ืœื’ื•ืจืžื™ื">
<div class="hub"><b>ืคื™ืจื•ืง ืœื’ื•ืจืžื™ื</b><span>0 ืžืชื•ืš 3 ื ืฉืœื˜ื•</span></div>
<button class="star" style="--dx:0;--dy:-1"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">1</span></span><span class="lbl">ื’ื•ืจื ืžืฉื•ืชืฃ<em>โ—‹ ืœื ื”ืชื—ืœืช</em></span></button>
<button class="star" style="--dx:.866;--dy:.5"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">2</span></span><span class="lbl">ื”ืคืจืฉ ืจื™ื‘ื•ืขื™ื<em>โ—‹ ืœื ื”ืชื—ืœืช</em></span></button>
<button class="star" style="--dx:-.866;--dy:.5"><span class="node"><svg viewBox="0 0 24 24"><path d="M12 1.5C13.1 9 15 10.9 22.5 12C15 13.1 13.1 15 12 22.5C10.9 15 9 13.1 1.5 12C9 10.9 10.9 9 12 1.5Z"/></svg><span class="num">3</span></span><span class="lbl">ืคื™ืจื•ืง ื˜ืจื™ื ื•ื<em>โ—‹ ืœื ื”ืชื—ืœืช</em></span></button>
</section>
<div class="mark">โœฆ<br><b>ืกื•ืฃ ื”ืžืกืœื•ืœ</b></div>
</div>
</div>
<div class="tabbar"><span>ื‘ื™ืช</span><span class="cur">ืžืกืœื•ืœ</span><span>ืฆื™ื•ื ื™ื</span><span>ื”ืื•ืกืฃ</span></div>
</div>
<div class="screen" id="s-ex">
<div class="scroll">
<div class="sheethead"><div class="grow"><span class="chip">ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1</span><h3 style="margin:4px 0 0">ื—ื•ืง ื”ืคื™ืœื•ื’ ื”ืžื•ืจื—ื‘</h3></div>
<button class="iconbtn" title="ืœื•ื—">โœ๏ธ</button><button class="iconbtn" title="ืขื–ืจื”" id="helpBtn">?</button><button class="iconbtn" title="ืฆื™ืœื•ื ืชืจื’ื™ืœ">๐Ÿ“ท</button><button class="iconbtn" title="ืกื’ื™ืจื”">โœ•</button></div>
<p class="mute" style="font-size:13px">ื›ืœ ืื™ื‘ืจ ื‘ืกื•ื’ืจื™ื™ื ื”ืจืืฉื•ื ื™ื ื›ื•ืคืœ ื›ืœ ืื™ื‘ืจ ื‘ืกื•ื’ืจื™ื™ื ื”ืฉื ื™ื™ื.</p>
<div class="row" style="font-size:12px"><span class="grow">ืฉืืœื” 3 ืžืชื•ืš 10</span><span class="dots"><i class="f"></i><i class="f"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
<div class="q">(x + 3)(x โˆ’ 5) = ?</div>
<div id="choices">
<button class="choice" data-c="b2">xยฒ + 2x โˆ’ 15</button>
<button class="choice" data-c="ok">xยฒ โˆ’ 2x โˆ’ 15</button>
<button class="choice" data-c="b1">xยฒ โˆ’ 15</button>
<button class="choice" data-c="b3">xยฒ โˆ’ 2x + 15</button>
</div>
<div id="help" class="card" hidden><b>ื”ืกื‘ืจ</b><p style="margin:4px 0">ื›ืœ ืื™ื‘ืจ ื‘ืกื•ื’ืจื™ื™ื ื”ืจืืฉื•ื ื™ื ื›ื•ืคืœ ื›ืœ ืื™ื‘ืจ ื‘ืฉื ื™ื™ื.</p><p class="mute" style="margin:0;font-size:12px">ืคืชื—ืชื ืขื–ืจื”: ื”ืชืฉื•ื‘ื” ืœืฉืืœื” ื”ื–ื• ืœื ืชื™ืกืคืจ ืœืฉืœื™ื˜ื”.</p><p style="margin:6px 0 0"><a href="#" onclick="return false">ืขื“ื™ื™ืŸ ืชืงื•ืขื™ื? ืฆืœืžื• ๐Ÿ“ท</a></p></div>
<div id="fb"></div>
<p class="mute" style="font-size:12px">ื ื›ื•ื ื•ืช ื‘ืจืฆืฃ: 2 ืžืชื•ืš 3 ยท ื ื“ืจืฉื™ื ืฉื ื™ ื™ืžื™ื ืฉื•ื ื™ื</p>
<p style="font-size:12px"><span class="mute">ื“ื•ืจืฉืช:</span> <span class="tag">ื›ืคืœ ืื™ื‘ืจื™ื</span> <span class="mute">ืคื•ืชื—ืช:</span> <span class="tag">ืคื™ืจื•ืง ื˜ืจื™ื ื•ื</span></p>
</div>
</div>
<div class="screen" id="s-grades">
<div class="scroll">
<h3>ืฆื™ื•ื ื™ื</h3>
<table><tr><th>ืžื”</th><th>ืฆื™ื•ืŸ</th></tr>
<tr><td>ื‘ื•ื—ืŸ ยท ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1 (ื”ื˜ื•ื‘ ืžื‘ื™ืŸ 2)</td><td>85</td></tr>
<tr><td>ื‘ื•ื—ืŸ ยท ืžืฉื•ื•ืื•ืช</td><td>70</td></tr>
<tr><td>ืžื‘ื—ืŸ ืชืจื’ื•ืœ 1 ยท ืžื‘ื—ืŸ 16.11</td><td>54</td></tr>
<tr><td>ืžืฉื™ืžื” ยท ื‘ื•ื—ืŸ ื›ืชื•ื‘</td><td>85</td></tr>
</table>
</div>
<div class="tabbar"><span>ื‘ื™ืช</span><span>ืžืกืœื•ืœ</span><span class="cur">ืฆื™ื•ื ื™ื</span><span>ื”ืื•ืกืฃ</span></div>
</div>
<div class="screen" id="s-coll">
<div class="scroll">
<h3>ื”ืื•ืกืฃ ืฉืœื™</h3>
<p class="mute" style="margin-top:0">ื›ืœ ืžื™ื•ืžื ื•ืช ืฉื ืฉืœื˜ื” ื”ื™ื ื›ื•ื›ื‘; ืฉื™ืขื•ืจ ืฉื”ื•ืฉืœื ืžืฆื™ื™ืจ ืงื‘ื•ืฆืช ื›ื•ื›ื‘ื™ื. ืฉื‘ื™ื˜ ืฉืœื ื ืชืคืก ืžื•ืฆื’ ื›ึพ?.</p>
<div class="card"><b>โญ 12 ื›ื•ื›ื‘ื™ื ยท 1 ืงื‘ื•ืฆืช ื›ื•ื›ื‘ื™ื</b><div class="grid" style="margin-top:8px"><div class="cell"><span class="sym">โœฆโ‹†โœฆ</span>ื“ืœืชื•ืŸ<br><span class="mute">ื”ื•ืฉืœื</span></div></div></div>
<div class="card"><b>โ˜„๏ธ ืฉื‘ื™ื˜ื™ื 3 ืžืชื•ืš 12</b><div class="grid" style="margin-top:8px"><div class="cell"><span class="sym">ฯ€</span>ืคืื™</div><div class="cell"><span class="sym">ฯ†</span>ื™ื—ืก ื”ื–ื”ื‘</div><div class="cell"><span class="sym">0</span>ืืคืก</div><div class="cell"><span class="sym">?</span>ืขื•ื“ ืœื ื ืชืคืก</div><div class="cell"><span class="sym">?</span>ืขื•ื“ ืœื ื ืชืคืก</div><div class="cell"><span class="sym">?</span>ืขื•ื“ ืœื ื ืชืคืก</div></div></div>
</div>
<div class="tabbar"><span>ื‘ื™ืช</span><span>ืžืกืœื•ืœ</span><span>ืฆื™ื•ื ื™ื</span><span class="cur">ื”ืื•ืกืฃ</span></div>
</div>
</div>
</section>
<!-- ======================= TEACHER ======================= -->
<section class="role" id="teacher">
<div class="desk">
<nav class="menu" id="tMenu">
<button data-p="t-classes" aria-pressed="true">ื”ื›ื™ืชื•ืช ืฉืœื™</button>
<button data-p="t-inbox" aria-pressed="false">ืชื™ื‘ืช ื”ื’ืฉื•ืช <span class="tag">3</span></button>
<button data-p="t-ai" aria-pressed="false">ืชื•ืจ ื”ึพAI <span class="tag">2</span></button>
<button data-p="t-tests" aria-pressed="false">ืžื‘ื—ื ื™ื</button>
<button data-p="t-heat" aria-pressed="false">ืžืคืช ื—ื•ื</button>
</nav>
<div>
<div class="panel on" id="t-classes">
<p class="ids">TCH-1, TCH-9 ยท ื”ืžื•ืจื” ืžื•ืกื™ืคื” ื•ืžืกื™ืจื” ืชืœืžื™ื“ื™ื ื‘ื›ื™ืชื” ืฉืœื” ื‘ืœื‘ื“</p>
<div class="cards">
<div class="card"><div class="row"><h3 class="grow">ื˜ืณ3</h3><span class="tag">25 ืชืœืžื™ื“ื™ื</span></div>
<p class="mute" style="margin:0 0 6px;font-size:13px">ืฉื™ืขื•ืจื™ื: ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1, ืžืฉื•ื•ืื•ืช, ืคื™ืจื•ืง ืœื’ื•ืจืžื™ื ยท AI: ืคื•ืขืœ</p>
<label for="add">ื”ื•ืกืคืช ืชืœืžื™ื“ื™ื (ื›ืชื•ื‘ืช ื‘ื›ืœ ืฉื•ืจื”)</label><textarea id="add">dana@school.org
omer@school.org</textarea>
<button class="btn solid" style="margin-top:8px">ื”ื•ืกืคื”</button>
<table style="margin-top:10px"><tr><th>ืชืœืžื™ื“</th><th></th></tr><tr><td dir="ltr">noa@school.org</td><td><button class="btn">ื”ืกืจื”</button></td></tr><tr><td dir="ltr">yoav@school.org</td><td><button class="btn">ื”ืกืจื”</button></td></tr></table>
</div>
<div class="card"><div class="row"><h3 class="grow">ื˜ืณ4</h3><span class="tag">22 ืชืœืžื™ื“ื™ื</span></div><p class="mute" style="margin:0;font-size:13px">AI: ื›ื‘ื•ื™ (ืžื ื”ืœ ื”ื›ื™ืชื•ืช ืžืคืขื™ืœ)</p></div>
</div>
</div>
<div class="panel" id="t-inbox">
<p class="ids">TCH-4, AI-4, AI-5 ยท ื”ื™ืฉืŸ ืจืืฉื•ืŸ; ื”ืฆื™ื•ืŸ ืฉืœ ื”ืžื•ืจื” ื’ื•ื‘ืจ ืขืœ ื”ืฆืขืช ื”ึพAI</p>
<table><tr><th>ืžื”</th><th>ืชืœืžื™ื“</th><th>ื”ื•ื’ืฉ</th><th>ื”ืฆืขืช AI</th><th></th></tr>
<tr><td>ื“ืฃ ืขื‘ื•ื“ื”: ืคื™ืจื•ืง ื˜ืจื™ื ื•ื</td><td dir="ltr">noa@</td><td>ื‘ืณ 08:10</td><td>70 ยท "ื—ืกืจ ื ื™ืžื•ืง ื‘ืกืขื™ืฃ 2"</td><td><button class="btn solid">ื‘ื“ื™ืงื”</button></td></tr>
<tr><td>ื‘ืงืฉื” ืœื‘ื“ื•ืง ืฉื•ื‘</td><td dir="ltr">yoav@</td><td>ื‘ืณ 12:40</td><td>60</td><td><button class="btn">ืคืชื™ื—ื”</button></td></tr>
<tr><td>ื‘ื•ื—ืŸ ื›ืชื•ื‘: ื˜ื›ื ื™ืงื” 1</td><td dir="ltr">dana@</td><td>ื’ืณ 09:05</td><td>โ€”</td><td><button class="btn">ืคืชื™ื—ื”</button></td></tr>
</table>
<div class="card" style="margin-top:12px"><h3>ื‘ื“ื™ืงื”: noa ยท ื“ืฃ ืขื‘ื•ื“ื”</h3><div class="row"><div class="thumb" style="width:140px;height:100px"></div><div class="grow"><label for="g">ืฆื™ื•ืŸ (0โ€“100)</label><input id="g" type="number" value="80"><label for="n">ื”ืขืจื”</label><input id="n" type="text" value="ื™ืคื”! ืฉื™ืžื• ืœื‘ ืœืกื™ืžืŸ ื‘ืกืขื™ืฃ 3"></div></div><div class="row" style="margin-top:8px"><button class="btn solid">ืฉืžื™ืจืช ืฆื™ื•ืŸ</button><button class="btn">ื”ื—ื–ืจื” ืœืชื™ืงื•ืŸ</button></div></div>
</div>
<div class="panel" id="t-ai">
<p class="ids">AI-1, AI-6, AI-7 ยท ืชืœืžื™ื“ื™ื ืœื ืคื•ื ื™ื ืœึพAI ื‘ืขืฆืžื ยท ืชืงืฆื™ื‘ ื™ื•ืžื™ ืœื›ื™ืชื”</p>
<div class="card row"><span class="grow">ื˜ืณ3 ยท ื ืฉืืจื• ื”ื™ื•ื <b>112 ืžืชื•ืš 150</b> ื‘ื“ื™ืงื•ืช ยท ื”ื‘ืงืฉื•ืช ื”ืื™ืฉื™ื•ืช ืฉืœื™: 2 ืžืชื•ืš 3</span><button class="btn solid">ืฉืœื™ื—ืช ื›ืœ ื”ืžืžืชื™ื ื™ื</button></div>
<div class="card row"><div class="thumb"></div><div class="grow"><b>๐Ÿ“ท ืชืจื’ื™ืœ ืœืขื–ืจื”</b> ยท noa ยท <span class="tag">ืคื™ืจื•ืง ื˜ืจื™ื ื•ื</span><br><span class="mute" style="font-size:12px">ืœืคื ื™ 6 ื“ืงื•ืช</span></div><button class="btn solid">ืฉืœื™ื—ื” ืœึพAI</button><button class="btn">ื“ื—ื™ื™ื” ืขื ื”ืขืจื”</button></div>
<div class="card row"><div class="thumb"></div><div class="grow"><b>๐Ÿ“ ื‘ื“ื™ืงืช ืชืฉื•ื‘ื”</b> ยท yoav ยท ื“ืฃ ืขื‘ื•ื“ื”<br><span class="mute" style="font-size:12px">ืœืคื ื™ 20 ื“ืงื•ืช</span></div><button class="btn solid">ืฉืœื™ื—ื” ืœึพAI</button><button class="btn">ื“ื—ื™ื™ื” ืขื ื”ืขืจื”</button></div>
</div>
<div class="panel" id="t-tests">
<p class="ids">TST-1, TCH-6, RDY-1</p>
<div class="card"><div class="row"><h3 class="grow">ืžื‘ื—ืŸ ื˜ืณ3 ยท 16.11</h3><button class="btn">ืขืจื™ื›ื”</button></div>
<p style="margin:0">ืฉื™ืขื•ืจื™ื: ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1, ืžืฉื•ื•ืื•ืช ยท 12 ืฉืืœื•ืช ยท 45 ื“ืงืณ ยท ืžื—ืฉื‘ื•ืŸ ืžื•ืชืจ</p>
<p style="margin:8px 0 4px"><b>ืกื™ืžื•ืœืฆื™ื”: 22 ืžืชื•ืš 25 ืขืฉื•</b> ยท ื—ืกืจื™ื: ื™ื•ืื‘, ืขืžื™ืช, ืœื™ื”</p>
<table><tr><th>ืชืœืžื™ื“</th><th>ืžื•ื›ื ื•ืช</th><th>ืฉืœื™ื˜ื”</th><th>ืชืจื’ื•ืœ</th><th>ืกื™ืžื•ืœืฆื™ื”</th></tr><tr><td>ื ื•ืขื”</td><td>81 ยท ื›ืžืขื˜ ืฉื</td><td>80%</td><td>70</td><td>90</td></tr><tr><td>ื™ื•ืื‘</td><td>62 ยท ื‘ื“ืจืš</td><td>70%</td><td>54</td><td>โ€”</td></tr></table>
</div>
<button class="btn solid">+ ืžื‘ื—ืŸ ื—ื“ืฉ</button>
</div>
<div class="panel" id="t-heat">
<p class="ids">TCH-7 ยท ืฆื‘ืข ื•ื’ื ืกื™ืžืŸ ื‘ื›ืœ ืชื</p>
<div class="seg sub"><button aria-pressed="true">ืกืคื˜ืณโ€“ื“ืฆืžืณ</button><button aria-pressed="false">ื™ื ื•ืณโ€“ื™ื•ื ื™</button></div>
<div class="tablewrap"><table class="hm">
<tr><th class="sticky">ืชืœืžื™ื“</th><th colspan="3">ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1</th><th colspan="2">ืžืฉื•ื•ืื•ืช</th></tr>
<tr><th class="sticky"></th><th>1</th><th>2</th><th>3</th><th>1</th><th>2</th></tr>
<tr><td class="sticky">ื ื•ืขื”</td><td class="c c-m">โœ“</td><td class="c c-m">โœ“</td><td class="c c-l">โ—</td><td class="c c-m">โœ“</td><td class="c c-n">โ—‹</td></tr>
<tr><td class="sticky">ื™ื•ืื‘</td><td class="c c-l">โ—</td><td class="c c-n">โ—‹</td><td class="c c-n">โ—‹</td><td class="c c-l">โ—</td><td class="c c-n">โ—‹</td></tr>
<tr><td class="sticky">ื“ื ื”</td><td class="c c-m">โœ“</td><td class="c c-l">โ—</td><td class="c c-l">โ—</td><td class="c c-m">โœ“</td><td class="c c-m">โœ“</td></tr>
</table></div>
<p class="mute" style="font-size:12px">โœ“ ื ืฉืœื˜ื” ยท โ— ื‘ืœืžื™ื“ื” ยท โ—‹ ืœื ื”ืชื—ื™ืœื•</p>
</div>
</div>
</div>
</section>
<!-- ======================= MANAGER ======================= -->
<section class="role" id="manager">
<div class="desk">
<nav class="menu" id="mMenu">
<button data-p="m-classes" aria-pressed="true">ื›ื™ืชื•ืช</button>
<button data-p="m-edit" aria-pressed="false">ื›ื™ืชื” ื—ื“ืฉื” / ืขืจื™ื›ื”</button>
<button data-p="m-students" aria-pressed="false">ืชืœืžื™ื“ื™ื</button>
</nav>
<div>
<div class="panel on" id="m-classes">
<p class="ids">CLS-7, MGR-1 ยท ืื™ืŸ ืœืžื ื”ืœ ื”ื›ื™ืชื•ืช ื’ื™ืฉื” ืœื ืชื•ื ื™ ืœืžื™ื“ื”</p>
<div class="row" style="margin-bottom:10px"><button class="btn solid">+ ื›ื™ืชื” ื—ื“ืฉื”</button><span class="mute">2 ื›ื™ืชื•ืช</span></div>
<div class="cards">
<div class="card"><div class="row"><h3 class="grow">ื˜ืณ3</h3><button class="btn">ืขืจื™ื›ื”</button><button class="btn">ืžื—ื™ืงื”</button></div>
<p style="margin:0;font-size:13px">ืฉื™ืขื•ืจื™ื: ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1, ืžืฉื•ื•ืื•ืช, ืคื™ืจื•ืง ืœื’ื•ืจืžื™ื<br>ืžื•ืจื”: <span dir="ltr">rina@school.org</span><br>25 ืชืœืžื™ื“ื™ื ยท AI: <b>ืคื•ืขืœ</b> ยท 150 ื‘ื“ื™ืงื•ืช ื‘ื™ื•ื</p></div>
<div class="card"><div class="row"><h3 class="grow">ื˜ืณ4</h3><button class="btn">ืขืจื™ื›ื”</button><button class="btn">ืžื—ื™ืงื”</button></div>
<p style="margin:0;font-size:13px">ืฉื™ืขื•ืจื™ื: ื›ืœ 24 ื”ืฉื™ืขื•ืจื™ื<br>ืžื•ืจื”: <span dir="ltr">avi@school.org</span><br>22 ืชืœืžื™ื“ื™ื ยท AI: <b>ื›ื‘ื•ื™</b></p></div>
</div>
</div>
<div class="panel" id="m-edit">
<p class="ids">CLS-2 โ€“ CLS-6 ยท ื”ึพAI ื›ื‘ื•ื™ ืขื“ ืฉื‘ื™ืช ื”ืกืคืจ ืžืืฉืจ ื”ืกื›ืžืช ื”ื•ืจื™ื (AI-10)</p>
<div class="card">
<label for="cn">ืฉื ื”ื›ื™ืชื”</label><input id="cn" type="text" value="ื˜ืณ3">
<label>ืฉื™ืขื•ืจื™ื ืฉื”ื›ื™ืชื” ืœื•ืžื“ืช</label>
<div class="checks"><label><input type="checkbox" checked> ื˜ื›ื ื™ืงื” ืืœื’ื‘ืจื™ืช 1</label><label><input type="checkbox" checked> ืžืฉื•ื•ืื•ืช</label><label><input type="checkbox" checked> ืคื™ืจื•ืง ืœื’ื•ืจืžื™ื</label><label><input type="checkbox"> ื“ืœืชื•ืŸ</label><label><input type="checkbox"> ืžืฉื•ืœืฉ ืฉื•ื•ื” ืฉื•ืงื™ื™ื</label><label><input type="checkbox"> ื™ื—ืกื™ ืฆืœืขื•ืช ื•ื–ื•ื•ื™ื•ืช</label></div>
<label for="ct">ืžื•ืจื” ื”ื›ื™ืชื” (ื›ืชื•ื‘ืช ืื—ืช; ืœื ืื—ื“ ื”ืชืœืžื™ื“ื™ื)</label><input id="ct" type="text" dir="ltr" value="rina@school.org">
<label for="cs">ืชืœืžื™ื“ื™ื (ื›ืชื•ื‘ืช ื‘ื›ืœ ืฉื•ืจื”; ืชืœืžื™ื“ ื™ื›ื•ืœ ืœื”ื™ื•ืช ื‘ื›ืžื” ื›ื™ืชื•ืช)</label><textarea id="cs">noa@school.org
yoav@school.org
dana@school.org</textarea>
<div class="row" style="margin-top:12px;flex-wrap:wrap"><label class="switch" style="margin:0"><input type="checkbox"> AI ืœื›ื™ืชื” (ื›ื‘ื•ื™)</label><label for="cb" style="margin:0">ื‘ื“ื™ืงื•ืช AI ื‘ื™ื•ื</label><input id="cb" type="number" value="150" style="width:100px"></div>
<div class="row" style="margin-top:12px"><button class="btn solid">ืฉืžื™ืจื”</button><button class="btn">ื‘ื™ื˜ื•ืœ</button></div>
</div>
</div>
<div class="panel" id="m-students">
<p class="ids">MGR-2</p>
<table><tr><th>ืชืœืžื™ื“</th><th>ื›ื™ืชื•ืช</th></tr><tr><td dir="ltr">noa@school.org</td><td>ื˜ืณ3</td></tr><tr><td dir="ltr">yoav@school.org</td><td>ื˜ืณ3 ยท ื˜ืณ4</td></tr><tr><td dir="ltr">dana@school.org</td><td>ื˜ืณ3</td></tr></table>
</div>
</div>
</div>
</section>
</main>
<script>
const ids={signin:"ACC-1 ยท ื“ืฃ ื”ื›ื ื™ืกื” ื‘ืกื’ื ื•ืŸ mathly1",home:"STU-1, TST-3, RDY-1, STU-5, STU-6 ยท ืžืฉื™ืžื” ืื—ืช ืœื”ื™ื•ื, ืžื•ื›ื ื•ืช, ื”ืžืฉื™ืžื•ืช ืฉืœื™, ืขื–ืจื” ื‘ืฆื™ืœื•ื",
path:"PTH-1 โ€“ PTH-8, MST-6, MST-8 ยท ืฉื™ืขื•ืจื™ื ื›ืžืจื›ื–ื™ื ืขื ื˜ื‘ืขืช ื›ื•ื›ื‘ื™ื, ื”ื™ื ืฉื•ืฃ ืขืœ ื”ืžื™ื•ืžื ื•ืช ื”ื‘ืื”, ื‘ื•ื—ืŸ ืื—ืจื™ ื›ืœ ืฉื™ืขื•ืจ",
ex:"EXR-1 โ€“ EXR-8 ยท ืœื—ืฆื• ืขืœ ืชืฉื•ื‘ื”: ื˜ืขื•ืช ืžืฆื™ื’ื” ืืช ืฉื ื”ื˜ืขื•ืช ื•ื”ื˜ื™ืค, ื‘ืœื™ ืœื—ืฉื•ืฃ ืืช ื”ืชืฉื•ื‘ื” ื”ื ื›ื•ื ื”",
grades:"GRD-1, STU-3 ยท ืฆื™ื•ื ื™ื 0โ€“100",coll:"MST-7, CMT-3 ยท ื›ื•ื›ื‘ื™ื, ืงื‘ื•ืฆื•ืช ื›ื•ื›ื‘ื™ื ื•ืฉื‘ื™ื˜ื™ื"};
const press=(group,btn)=>group.querySelectorAll("button").forEach(b=>b.setAttribute("aria-pressed",String(b===btn)));
document.querySelectorAll("#roles button").forEach(b=>b.onclick=()=>{press(b.parentElement,b);document.querySelectorAll(".role").forEach(r=>r.classList.toggle("on",r.id===b.dataset.role));});
document.querySelectorAll("#stuNav button").forEach(b=>b.onclick=()=>{press(b.parentElement,b);document.querySelectorAll("#student .screen").forEach(s=>s.classList.toggle("on",s.id==="s-"+b.dataset.s));document.getElementById("stuIds").textContent=ids[b.dataset.s];});
for(const menu of ["tMenu","mMenu"]) document.querySelectorAll(`#${menu} button`).forEach(b=>b.onclick=()=>{press(b.parentElement,b);b.closest(".desk").querySelectorAll(".panel").forEach(p=>p.classList.toggle("on",p.id===b.dataset.p));});
document.getElementById("theme").onclick=()=>{const r=document.documentElement,dark=matchMedia("(prefers-color-scheme: dark)").matches,cur=r.dataset.theme||(dark?"dark":"light");r.dataset.theme=cur==="dark"?"light":"dark";};
document.getElementById("helpBtn").onclick=()=>{document.getElementById("help").hidden=false;};
const mistakes={b1:["ื›ืคืœ ื—ืœืงื™ ื‘ืคื™ืœื•ื’ ื”ืžื•ืจื—ื‘","ื›ืœ ืื™ื‘ืจ ื‘ืกื•ื’ืจื™ื™ื ื”ืจืืฉื•ื ื™ื ื›ื•ืคืœ ื›ืœ ืื™ื‘ืจ ื‘ืฉื ื™ื™ื."],b2:["ื˜ืขื•ืช ืกื™ืžืŸ ื‘ืื™ื‘ืจ ื”ืืžืฆืขื™","3 โˆ’ 5 = โˆ’2, ืœื +2."],b3:["ื˜ืขื•ืช ืกื™ืžืŸ ื‘ืื™ื‘ืจ ื”ื—ื•ืคืฉื™","ืคืœื•ืก ื›ืคื•ืœ ืžื™ื ื•ืก ื ื•ืชืŸ ืžื™ื ื•ืก."]};
document.querySelectorAll("#choices .choice").forEach(c=>c.onclick=()=>{
document.querySelectorAll("#choices .choice").forEach(x=>x.setAttribute("aria-pressed",String(x===c)));
const fb=document.getElementById("fb");
if(c.dataset.c==="ok") fb.innerHTML='<div class="fb good"><b>ื ื›ื•ืŸ โœ“ ยท 3 ื‘ืจืฆืฃ</b><br><span style="font-size:13px">ื”ืฉืืœื” ื”ื‘ืื” ื‘ืขื•ื“ 3โ€ฆ </span><button class="btn">ืœืฉืืœื” ื”ื‘ืื”</button></div>';
else{const [n,t]=mistakes[c.dataset.c];fb.innerHTML=`<div class="fb bad"><b>${n}</b><br><span style="font-size:13px">${t}</span><br><button class="btn" style="margin-top:6px">ืฉืืœื” ืื—ืจืช</button></div>`;}
});
</script>
</body>
</html>