d44bc80098
React + Vite + TypeScript, PWA, offline-first. Six tabs: 수업 오늘 단어 문장
문법 한글, plus the full-screen SRS review overlay, the reading drill, the
conjugation trainer and the 두벌식 keyboard.
The visual language is carried over deliberately: two hand-tuned palettes,
three type stacks, about a dozen component classes, zero border-radius and
no icons anywhere — Korean glyphs do the work icons would.
THE GATE is the reason this app exists. buildGate() already took a
vocabQuery hook; filling it with a band query is what turns 371 hand-typed
words into something that scales. Three refinements sit inside that hook,
all of them narrowing:
1. words a not-yet-finished unit is the first to introduce are excluded,
so a frequency ceiling cannot smuggle 3.4's material into 2.1;
2. Phase 1 is filtered by the phonological ladder;
3. the list is capped at 800 by frequency, because renderGate() inlines
it into the prompt — strictly more restrictive than the band, so it
cannot leak.
prompt/tutor-system.md ships unchanged with {{GATE}} filled by renderGate().
Confidence is clamped per turn. The artifact wrote the model's ::progress
number straight into the sole gate on advancement, so one hallucinated 95
skipped a unit.
stub-tutor.ts stands in for the model on the artifact's exact contract —
onText receives cumulative text, an aborted turn keeps what it streamed —
so the real endpoint drops in without touching the UI. It rotates all four
task types and climbs progress gradually, which makes every render path
reachable with no server.
Two artifact bugs are not ported: task state lived in the full-page
re-render, so anything arriving mid-answer wiped typed text and placed
chips; and the day number was computed once at module load, so a session
left open overnight scheduled against yesterday.
Verified in a browser: all six tabs work, and after a hard reload with the
network cut every tab still works — including dictionary search out of OPFS.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
158 lines
2.5 KiB
CSS
158 lines
2.5 KiB
CSS
/* Shell chrome: header, tab bar, footer, boot screen. */
|
|
|
|
.boot {
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
.boot-mark {
|
|
font-size: 46px;
|
|
color: var(--jade);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.boot-detail {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.boot-fail {
|
|
color: var(--jeok);
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ── header ──────────────────────────────────────────────────────── */
|
|
|
|
.top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
background: var(--paper);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 11px 0 9px;
|
|
}
|
|
|
|
.mark {
|
|
margin-right: auto;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mark .name {
|
|
font-size: 23px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mark .sub {
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
.chips {
|
|
display: flex;
|
|
gap: 7px;
|
|
align-items: center;
|
|
}
|
|
|
|
.chip {
|
|
font-size: 12px;
|
|
padding: 3px 9px;
|
|
border: 1px solid var(--line2);
|
|
background: var(--sunk);
|
|
color: var(--ink2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chip.offline {
|
|
border-color: var(--jade);
|
|
background: var(--jade-soft);
|
|
color: var(--jade-ink);
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tabs button {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 7px;
|
|
padding: 9px 13px;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--ink2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tabs button .ko {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tabs button .en {
|
|
font-size: 11px;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
.tabs button[aria-selected="true"] {
|
|
border-bottom-color: var(--jade);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tabs button[aria-selected="true"] .en {
|
|
color: var(--jade);
|
|
}
|
|
|
|
main {
|
|
padding: 26px 0 80px;
|
|
}
|
|
|
|
/* ── footer ──────────────────────────────────────────────────────── */
|
|
|
|
.foot {
|
|
border-top: 1px solid var(--line);
|
|
padding: 18px 0 40px;
|
|
font-size: 11px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
.foot .attrib {
|
|
margin-top: 3px;
|
|
color: var(--line2);
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.mark .sub {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.tabs button .en {
|
|
display: none;
|
|
}
|
|
main {
|
|
padding: 18px 0 64px;
|
|
}
|
|
}
|