Maxim Dolgolyov
5381679c68
Зафиксирована накопленная незакоммиченная работа рабочего дерева, КРОМЕ файлов учебника «Химия 7» (migration 046, chemistry_7_*.html, chem7_svg.js, тест — оставлены незакоммиченными по запросу). Включает: модуль биохимии (ядро BIO, 3D VSEPR, химдвижок, баланс, challenges, пути из БД), System Health Level 1 (вердикт/мониторинг), а также frontend- страницы и lab/textbooks-правки параллельной сессии. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2065 lines
93 KiB
HTML
2065 lines
93 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>LearnSpace — Re-Design Dossier № 01</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ────────────────────────────────────────────────────────────────
|
||
LEARNSPACE — RE-DESIGN DOSSIER
|
||
Aesthetic: Academic Risograph.
|
||
Paper-stock cream, two inks (deep indigo + warm vermilion),
|
||
distinctive editorial typography, asymmetric grid,
|
||
visible grain, ruled margins, hand-numbered sections.
|
||
──────────────────────────────────────────────────────────────── */
|
||
|
||
:root{
|
||
--paper: #f1ebe0; /* warm cream stock */
|
||
--paper-2: #ece4d3; /* darker fold */
|
||
--paper-3: #e3d8bf; /* margin tint */
|
||
--ink: #14213d; /* primary ink, deep indigo */
|
||
--ink-soft: #2b3a5a;
|
||
--ink-mute: #5b6479;
|
||
--rule: #14213d;
|
||
--vermilion: #d94e1f; /* second ink */
|
||
--vermilion-2: #b53d12;
|
||
--moss: #495c2b; /* tertiary, used sparingly */
|
||
--gold: #b8893a;
|
||
--shadow-ink: 0 1px 0 #14213d, 0 2px 0 rgba(20,33,61,.15);
|
||
--serif: 'Fraunces', 'Newsreader', Georgia, serif;
|
||
--body: 'Newsreader', Georgia, serif;
|
||
--mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
|
||
}
|
||
|
||
*{ box-sizing:border-box; margin:0; padding:0 }
|
||
html,body{ background:var(--paper); color:var(--ink); }
|
||
body{
|
||
font-family:var(--body);
|
||
font-size:16px;
|
||
line-height:1.5;
|
||
font-feature-settings: "ss01","ss02","liga","onum";
|
||
-webkit-font-smoothing:antialiased;
|
||
text-rendering:optimizeLegibility;
|
||
overflow-x:hidden;
|
||
}
|
||
|
||
/* ── grain & registration texture across whole page ── */
|
||
body::before{
|
||
content:""; position:fixed; inset:0; pointer-events:none; z-index:2000;
|
||
opacity:.45; mix-blend-mode:multiply;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.24 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||
}
|
||
body::after{
|
||
content:""; position:fixed; inset:0; pointer-events:none; z-index:1999;
|
||
background:
|
||
radial-gradient(ellipse at 8% 12%, rgba(217,78,31,.07), transparent 45%),
|
||
radial-gradient(ellipse at 92% 88%, rgba(20,33,61,.10), transparent 55%);
|
||
}
|
||
|
||
/* ── document edges ── */
|
||
.doc{
|
||
max-width:1280px;
|
||
margin:0 auto;
|
||
padding:48px 56px 120px;
|
||
position:relative;
|
||
}
|
||
.doc::before, .doc::after{
|
||
content:""; position:absolute; top:0; bottom:0; width:1px;
|
||
background:repeating-linear-gradient(to bottom, var(--ink) 0 6px, transparent 6px 12px);
|
||
opacity:.45;
|
||
}
|
||
.doc::before{ left:32px } .doc::after{ right:32px }
|
||
|
||
/* ── masthead ── */
|
||
.masthead{
|
||
display:grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items:end;
|
||
gap:24px;
|
||
padding-bottom:14px;
|
||
border-bottom:3px double var(--ink);
|
||
}
|
||
.mast-left, .mast-right{
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
|
||
color:var(--ink-soft);
|
||
line-height:1.6;
|
||
}
|
||
.mast-right{ text-align:right }
|
||
.mast-center{
|
||
font-family:var(--serif);
|
||
font-weight:300;
|
||
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
|
||
font-size: clamp(56px, 9vw, 132px);
|
||
line-height:.86;
|
||
text-align:center;
|
||
letter-spacing:-.025em;
|
||
color:var(--ink);
|
||
position:relative;
|
||
}
|
||
.mast-center em{
|
||
font-style:italic;
|
||
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
|
||
color:var(--vermilion);
|
||
}
|
||
.mast-sub{
|
||
display:flex; justify-content:space-between; align-items:baseline;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em;
|
||
color:var(--ink);
|
||
padding:10px 0 0;
|
||
}
|
||
.mast-sub b{ font-weight:700 }
|
||
.mast-sub .dot{ color:var(--vermilion) }
|
||
|
||
/* ── deck / standfirst ── */
|
||
.deck{
|
||
margin: 36px 0 64px;
|
||
display:grid;
|
||
grid-template-columns: 4fr 5fr;
|
||
gap: 56px;
|
||
align-items:start;
|
||
}
|
||
.deck-l{
|
||
font-family:var(--serif);
|
||
font-style:italic;
|
||
font-variation-settings:"opsz" 32, "SOFT" 60;
|
||
font-size: clamp(22px, 2.2vw, 30px);
|
||
line-height:1.28;
|
||
color:var(--ink-soft);
|
||
}
|
||
.deck-l b{
|
||
font-style:normal; font-weight:600;
|
||
color:var(--ink);
|
||
background: linear-gradient(transparent 62%, rgba(217,78,31,.35) 62% 92%, transparent 92%);
|
||
padding: 0 .1em;
|
||
}
|
||
.deck-r{
|
||
font-family:var(--mono); font-size:12px; line-height:1.7;
|
||
color:var(--ink-soft);
|
||
border-left:1px solid var(--ink);
|
||
padding-left:20px;
|
||
columns: 2; column-gap: 28px; column-rule: 1px dotted var(--ink);
|
||
}
|
||
.deck-r h6{
|
||
font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
|
||
color:var(--vermilion); margin-bottom:6px; break-after:avoid;
|
||
}
|
||
.deck-r p{ margin-bottom:14px; break-inside:avoid }
|
||
|
||
/* ── section anatomy ── */
|
||
.section{
|
||
margin: 96px 0;
|
||
padding-top: 28px;
|
||
border-top: 1px solid var(--ink);
|
||
position:relative;
|
||
}
|
||
.section::before{
|
||
/* hand-numbered chapter mark */
|
||
content: attr(data-num);
|
||
position:absolute;
|
||
top:-30px; left:-12px;
|
||
font-family:var(--serif);
|
||
font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
|
||
font-weight:300; font-style:italic;
|
||
font-size:84px; line-height:1;
|
||
color:var(--vermilion);
|
||
background:var(--paper);
|
||
padding: 0 18px;
|
||
}
|
||
.section-head{
|
||
display:grid;
|
||
grid-template-columns: minmax(0,1fr) 240px;
|
||
gap:48px;
|
||
align-items:end;
|
||
margin-bottom: 36px;
|
||
}
|
||
.s-kicker{
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.22em;
|
||
color:var(--vermilion);
|
||
display:flex; align-items:center; gap:10px;
|
||
margin-bottom:10px;
|
||
}
|
||
.s-kicker::after{ content:""; flex:1; height:1px; background:var(--ink); opacity:.4 }
|
||
.s-title{
|
||
font-family:var(--serif);
|
||
font-weight:400;
|
||
font-variation-settings:"opsz" 110,"SOFT" 30;
|
||
font-size: clamp(40px, 5.2vw, 72px);
|
||
line-height:.95;
|
||
letter-spacing:-.02em;
|
||
}
|
||
.s-title em{
|
||
font-style:italic;
|
||
font-variation-settings:"opsz" 110,"SOFT" 100,"WONK" 1;
|
||
color:var(--vermilion);
|
||
}
|
||
.s-meta{
|
||
font-family:var(--mono); font-size:11px; line-height:1.7;
|
||
color:var(--ink-soft); text-transform:uppercase; letter-spacing:.1em;
|
||
border:1px solid var(--ink); padding:14px 16px;
|
||
background:var(--paper-2);
|
||
}
|
||
.s-meta b{ color:var(--vermilion); font-weight:700 }
|
||
.s-meta div + div{ margin-top:4px }
|
||
|
||
/* ── two-column body: mock frame + marginalia ── */
|
||
.bay{
|
||
display:grid;
|
||
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
|
||
gap: 40px;
|
||
align-items:start;
|
||
}
|
||
.bay.flip{ grid-template-columns: minmax(0,3fr) minmax(0,7fr); }
|
||
.notes{
|
||
font-family:var(--mono); font-size:12px; line-height:1.7;
|
||
color:var(--ink-soft);
|
||
padding-top: 8px;
|
||
position:sticky; top:24px;
|
||
}
|
||
.notes h4{
|
||
font-family:var(--serif);
|
||
font-style:italic;
|
||
font-variation-settings:"opsz" 24,"SOFT" 60;
|
||
font-weight:500; font-size:20px;
|
||
color:var(--ink); margin-bottom:8px;
|
||
}
|
||
.notes p{ margin-bottom:14px }
|
||
.notes ul{ list-style:none; padding:0; margin: 8px 0 18px }
|
||
.notes li{
|
||
padding:4px 0 4px 18px; position:relative; border-bottom:1px dotted rgba(20,33,61,.25);
|
||
}
|
||
.notes li::before{
|
||
content:"›"; position:absolute; left:2px; top:4px;
|
||
color:var(--vermilion); font-weight:700;
|
||
}
|
||
.notes .tag{
|
||
display:inline-block; font-family:var(--mono); font-size:10px;
|
||
padding:2px 8px; margin:0 4px 4px 0;
|
||
background:var(--ink); color:var(--paper); letter-spacing:.1em;
|
||
}
|
||
.notes .tag.v{ background:var(--vermilion) }
|
||
.notes .tag.o{ background:transparent; color:var(--ink); border:1px solid var(--ink) }
|
||
|
||
/* ── the mock frame itself ── */
|
||
.mock{
|
||
position:relative;
|
||
background:var(--paper);
|
||
border:2px solid var(--ink);
|
||
box-shadow:
|
||
8px 8px 0 var(--vermilion),
|
||
8px 8px 0 1px var(--ink);
|
||
overflow:hidden;
|
||
}
|
||
.mock::before{
|
||
/* registration crosshair top-left */
|
||
content:""; position:absolute; top:6px; left:6px; width:14px; height:14px;
|
||
background:
|
||
linear-gradient(var(--vermilion), var(--vermilion)) center/100% 1px no-repeat,
|
||
linear-gradient(var(--vermilion), var(--vermilion)) center/1px 100% no-repeat;
|
||
z-index:3;
|
||
}
|
||
.mock::after{
|
||
content:""; position:absolute; top:6px; right:6px;
|
||
width:8px; height:8px; border-radius:50%;
|
||
background:var(--vermilion); z-index:3;
|
||
}
|
||
.mock-caption{
|
||
display:flex; justify-content:space-between; align-items:center;
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em;
|
||
color:var(--ink-soft);
|
||
padding: 10px 14px;
|
||
border-top:1px solid var(--ink);
|
||
background:var(--paper-2);
|
||
}
|
||
.mock-caption b{ color:var(--vermilion); font-weight:700 }
|
||
.mock-canvas{ padding:0; }
|
||
|
||
/* ============================================================
|
||
GENERIC MOCK PRIMITIVES (used inside .mock-canvas)
|
||
============================================================ */
|
||
.frame{
|
||
position:relative;
|
||
background:var(--paper);
|
||
font-family:var(--body);
|
||
color:var(--ink);
|
||
min-height:440px;
|
||
}
|
||
.frame.dark{
|
||
background:var(--ink);
|
||
color:var(--paper);
|
||
}
|
||
.frame.dark .topbar, .frame.dark .sidebar{ background:#0f1a30; color:var(--paper) }
|
||
.frame .topbar{
|
||
display:flex; align-items:center; gap:20px;
|
||
padding: 14px 22px;
|
||
border-bottom:1px solid var(--ink);
|
||
background:var(--paper-2);
|
||
}
|
||
.frame .brand{
|
||
font-family:var(--serif);
|
||
font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 1;
|
||
font-weight:500; font-size:24px; letter-spacing:-.02em;
|
||
}
|
||
.frame .brand em{ color:var(--vermilion); font-style:italic; font-variation-settings:"opsz" 48,"SOFT" 100,"WONK" 1; }
|
||
.frame .nav{
|
||
display:flex; gap:22px; margin-left:auto;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
|
||
}
|
||
.frame .nav span{ position:relative; cursor:default }
|
||
.frame .nav span.cur{ color:var(--vermilion) }
|
||
.frame .nav span.cur::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:-6px; height:2px; background:var(--vermilion) }
|
||
.frame .avatar{
|
||
width:28px; height:28px; border-radius:50%;
|
||
background:var(--ink); color:var(--paper);
|
||
display:grid; place-items:center;
|
||
font-family:var(--serif); font-size:14px;
|
||
font-variation-settings:"opsz" 24,"SOFT" 50;
|
||
}
|
||
|
||
.frame .body{ display:grid; min-height: 440px; }
|
||
.frame .sidebar{
|
||
background:var(--paper-3);
|
||
border-right:1px solid var(--ink);
|
||
padding:18px 14px;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
|
||
color:var(--ink-soft);
|
||
}
|
||
.sb-group{ margin-bottom:14px }
|
||
.sb-group h6{ color:var(--vermilion); font-weight:700; font-size:10px; margin-bottom:6px }
|
||
.sb-link{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:0; cursor:default; line-height:1.4 }
|
||
.sb-link.cur{ background:var(--ink); color:var(--paper) }
|
||
.sb-link .ic{ width:10px; height:10px; border:1px solid currentColor; display:inline-block }
|
||
|
||
.pad{ padding: 26px 30px; }
|
||
.eyebrow{
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.22em;
|
||
color:var(--vermilion); display:flex; gap:10px; align-items:center;
|
||
}
|
||
.eyebrow::before{ content:""; width:14px; height:1px; background:var(--vermilion) }
|
||
.h-title{
|
||
font-family:var(--serif);
|
||
font-weight:400;
|
||
font-variation-settings:"opsz" 96,"SOFT" 30;
|
||
font-size: clamp(34px, 4vw, 52px);
|
||
line-height:.96;
|
||
letter-spacing:-.02em;
|
||
margin: 8px 0 4px;
|
||
}
|
||
.h-title em{ font-style:italic; color:var(--vermilion); font-variation-settings:"opsz" 96,"SOFT" 100,"WONK" 1; }
|
||
.lede{
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 24,"SOFT" 60;
|
||
font-size:18px; line-height:1.4; color:var(--ink-soft);
|
||
max-width:62ch;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
/* buttons */
|
||
.btn{
|
||
display:inline-flex; align-items:center; gap:8px;
|
||
padding: 10px 18px;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em;
|
||
border:1.5px solid var(--ink); background:var(--paper);
|
||
color:var(--ink); cursor:default;
|
||
box-shadow: 3px 3px 0 var(--ink);
|
||
transition: transform .15s, box-shadow .15s;
|
||
}
|
||
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink) }
|
||
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink) }
|
||
.btn.fill{ background:var(--ink); color:var(--paper) }
|
||
.btn.v{ background:var(--vermilion); color:var(--paper); border-color:var(--vermilion); box-shadow:3px 3px 0 var(--ink) }
|
||
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 }
|
||
|
||
/* generic rule strip */
|
||
.rule-strip{
|
||
display:flex; gap:16px; align-items:center;
|
||
padding: 10px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em;
|
||
color:var(--ink-soft);
|
||
}
|
||
.rule-strip b{ color:var(--vermilion); font-weight:700 }
|
||
|
||
/* "cards" but as editorial blocks */
|
||
.cardgrid{ display:grid; gap:18px; }
|
||
.cardgrid.x2{ grid-template-columns:repeat(2,1fr) }
|
||
.cardgrid.x3{ grid-template-columns:repeat(3,1fr) }
|
||
.cardgrid.x4{ grid-template-columns:repeat(4,1fr) }
|
||
.card{
|
||
border:1px solid var(--ink);
|
||
background:var(--paper);
|
||
padding: 16px;
|
||
position:relative;
|
||
}
|
||
.card.alt{ background:var(--paper-2) }
|
||
.card.ink{ background:var(--ink); color:var(--paper) }
|
||
.card .num{
|
||
font-family:var(--serif); font-variation-settings:"opsz" 96,"SOFT" 80,"WONK" 1;
|
||
font-weight:400; font-size:54px; line-height:.9; letter-spacing:-.04em;
|
||
}
|
||
.card .num em{ font-style:italic; color:var(--vermilion) }
|
||
.card .lbl{
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em;
|
||
color:var(--ink-soft); margin-bottom:6px;
|
||
}
|
||
.card .ttl{
|
||
font-family:var(--serif); font-weight:500;
|
||
font-variation-settings:"opsz" 32,"SOFT" 30;
|
||
font-size:22px; line-height:1.15; margin:4px 0 6px;
|
||
}
|
||
.card .ttl em{ font-style:italic; color:var(--vermilion) }
|
||
.card.ink .lbl{ color:rgba(241,235,224,.65) }
|
||
.card.ink .ttl em{ color:#ff8c5e }
|
||
|
||
/* progress as ruled bar */
|
||
.bar{ height:8px; background:var(--paper-3); border:1px solid var(--ink); position:relative; overflow:hidden }
|
||
.bar > i{ display:block; height:100%; background:repeating-linear-gradient(45deg, var(--vermilion) 0 4px, var(--vermilion-2) 4px 8px); }
|
||
|
||
/* ascii-ish data viz */
|
||
.chart-bars{ display:grid; grid-template-columns:repeat(12,1fr); gap:6px; height:120px; align-items:end; padding:8px 0 }
|
||
.chart-bars i{ display:block; background:var(--ink); border-top:3px solid var(--vermilion) }
|
||
.chart-bars i.alt{ background:var(--vermilion); border-top-color:var(--ink) }
|
||
|
||
/* swatch row */
|
||
.sw-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 }
|
||
.sw{ width:42px; height:42px; border:1px solid var(--ink); position:relative }
|
||
.sw::after{
|
||
content:attr(data-hex);
|
||
position:absolute; left:0; right:0; top:100%;
|
||
font-family:var(--mono); font-size:9px; text-align:center; padding-top:3px;
|
||
color:var(--ink-soft); letter-spacing:.06em;
|
||
}
|
||
|
||
/* ============================================================
|
||
01 — LOGIN MOCK
|
||
============================================================ */
|
||
.login-mock{
|
||
display:grid; grid-template-columns: 1fr 1.1fr; min-height:520px;
|
||
}
|
||
.lm-left{
|
||
background:var(--ink); color:var(--paper);
|
||
padding: 36px 36px;
|
||
position:relative; overflow:hidden;
|
||
}
|
||
.lm-left::before{
|
||
/* huge typographic flourish */
|
||
content:"L"; position:absolute; right:-40px; bottom:-80px;
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;
|
||
font-weight:300; font-size:520px; line-height:1;
|
||
color:#1d2c4f;
|
||
}
|
||
.lm-left .brand{ color:var(--paper); position:relative; z-index:1; margin-bottom:32px }
|
||
.lm-left .brand em{ color:#ff8c5e }
|
||
.lm-left h2{
|
||
font-family:var(--serif); font-weight:300;
|
||
font-variation-settings:"opsz" 110,"SOFT" 20;
|
||
font-size:52px; line-height:.95; letter-spacing:-.025em;
|
||
position:relative; z-index:1;
|
||
}
|
||
.lm-left h2 em{ color:#ff8c5e; font-style:italic;
|
||
font-variation-settings:"opsz" 110,"SOFT" 100,"WONK" 1; }
|
||
.lm-quote{
|
||
position:relative; z-index:1;
|
||
margin-top:auto; padding-top:120px;
|
||
font-family:var(--serif); font-style:italic; font-size:17px;
|
||
font-variation-settings:"opsz" 18,"SOFT" 80;
|
||
border-top:1px solid rgba(241,235,224,.3);
|
||
padding-top:14px; margin-top:24px;
|
||
color:rgba(241,235,224,.85);
|
||
}
|
||
.lm-quote cite{
|
||
display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase;
|
||
letter-spacing:.18em; color:rgba(241,235,224,.55); margin-top:6px; font-style:normal;
|
||
}
|
||
.lm-right{ padding: 44px 48px; display:flex; flex-direction:column; justify-content:center }
|
||
.lm-right .num-mark{
|
||
font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--vermilion);
|
||
text-transform:uppercase; margin-bottom:12px;
|
||
}
|
||
.lm-right h3{
|
||
font-family:var(--serif); font-weight:400;
|
||
font-variation-settings:"opsz" 72,"SOFT" 20;
|
||
font-size:40px; line-height:1; letter-spacing:-.015em; margin-bottom:6px;
|
||
}
|
||
.lm-right h3 em{ font-style:italic; color:var(--vermilion);
|
||
font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 1; }
|
||
.lm-right p{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); margin-bottom:24px;
|
||
font-variation-settings:"opsz" 20,"SOFT" 60; font-size:16px }
|
||
.field{
|
||
display:flex; flex-direction:column; gap:6px; margin-bottom:16px;
|
||
}
|
||
.field label{
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em;
|
||
color:var(--ink-soft);
|
||
}
|
||
.field .inp{
|
||
border:none; border-bottom:1.5px solid var(--ink);
|
||
background:transparent; padding: 6px 0;
|
||
font-family:var(--serif); font-size:22px; color:var(--ink);
|
||
font-variation-settings:"opsz" 24,"SOFT" 10;
|
||
height:38px;
|
||
}
|
||
.lm-row{
|
||
display:flex; justify-content:space-between; align-items:center;
|
||
margin-top: 6px;
|
||
font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft);
|
||
}
|
||
.lm-row a{ color:var(--vermilion); text-decoration:underline }
|
||
|
||
/* ============================================================
|
||
02 — DASHBOARD MOCK
|
||
============================================================ */
|
||
.dash-mock .body{
|
||
grid-template-columns: 180px 1fr;
|
||
}
|
||
.dash-hero{
|
||
display:grid; grid-template-columns: 2fr 1fr; gap:24px;
|
||
border-bottom:1px solid var(--ink);
|
||
padding: 20px 0 24px;
|
||
margin-bottom:18px;
|
||
}
|
||
.dash-hero .greet em{ color:var(--vermilion); font-style:italic;
|
||
font-variation-settings:"opsz" 96,"SOFT" 100,"WONK" 1; }
|
||
.streak{
|
||
border:1px solid var(--ink); padding:12px 14px; background:var(--paper-2);
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
|
||
display:flex; flex-direction:column; justify-content:space-between;
|
||
}
|
||
.streak .big{
|
||
font-family:var(--serif); font-variation-settings:"opsz" 110,"SOFT" 80,"WONK" 1;
|
||
font-size:64px; line-height:1; letter-spacing:-.04em; font-weight:400;
|
||
}
|
||
.streak .big em{ color:var(--vermilion); font-style:italic }
|
||
.dash-cols{
|
||
display:grid; grid-template-columns: 2fr 1fr; gap:24px; align-items:start;
|
||
}
|
||
.lesson-stack{ display:flex; flex-direction:column; }
|
||
.lesson-row{
|
||
display:grid; grid-template-columns: 64px 1fr auto; gap:16px;
|
||
padding: 16px 4px;
|
||
border-bottom:1px solid var(--ink);
|
||
align-items:baseline;
|
||
}
|
||
.lesson-row:first-child{ border-top:1px solid var(--ink) }
|
||
.lesson-row .when{
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
|
||
color:var(--vermilion);
|
||
}
|
||
.lesson-row h5{
|
||
font-family:var(--serif); font-weight:500;
|
||
font-variation-settings:"opsz" 32,"SOFT" 30; font-size:22px; line-height:1.15;
|
||
}
|
||
.lesson-row .meta{
|
||
font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:4px;
|
||
text-transform:uppercase; letter-spacing:.1em;
|
||
}
|
||
.lesson-row .go{
|
||
font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
|
||
color:var(--ink); border-bottom:1px solid var(--vermilion); padding-bottom:2px;
|
||
}
|
||
|
||
/* ============================================================
|
||
03 — CLASSROOM / WHITEBOARD MOCK
|
||
============================================================ */
|
||
.board-mock{ background:#1a3b1a; color:#f1ebe0; min-height:520px; position:relative; overflow:hidden }
|
||
.board-mock::before{
|
||
/* chalk grain */
|
||
content:""; position:absolute; inset:0;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='c'><feTurbulence baseFrequency='0.65' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
|
||
opacity:.6;
|
||
}
|
||
.board-mock::after{
|
||
/* wooden frame inner */
|
||
content:""; position:absolute; inset:0;
|
||
border:14px solid #4a2e16;
|
||
box-shadow: inset 0 0 0 2px #6b4423, inset 0 0 0 3px #2c1810, 0 0 0 3px #2c1810;
|
||
pointer-events:none;
|
||
}
|
||
.board-toolbar{
|
||
position:absolute; top:28px; left:50%; transform:translateX(-50%);
|
||
display:flex; gap:0; z-index:2;
|
||
background:rgba(20,33,61,.85);
|
||
border:1px solid #f1ebe0; padding:4px;
|
||
}
|
||
.board-toolbar i{
|
||
width:34px; height:34px; display:grid; place-items:center;
|
||
font-family:var(--mono); font-size:13px; color:#f1ebe0;
|
||
border-right:1px solid rgba(241,235,224,.2); font-style:normal;
|
||
}
|
||
.board-toolbar i:last-child{ border-right:none }
|
||
.board-toolbar i.cur{ background:var(--vermilion); color:var(--paper) }
|
||
.board-content{
|
||
position:absolute; inset:36px; z-index:1;
|
||
display:grid; grid-template-columns: 1fr 200px; gap:0;
|
||
font-family:'Caveat', var(--serif);
|
||
}
|
||
.board-area{ padding:24px 30px; position:relative; }
|
||
.board-title{
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 96,"SOFT" 100,"WONK" 1;
|
||
font-weight:300; font-size:46px; line-height:1;
|
||
color:#f1ebe0; letter-spacing:-.01em;
|
||
text-shadow: 0 0 6px rgba(241,235,224,.15);
|
||
}
|
||
.board-title::after{
|
||
content:""; display:block; width:120px; height:2px; background:#ff8c5e; margin-top:6px;
|
||
box-shadow:0 0 8px rgba(255,140,94,.5);
|
||
}
|
||
.board-eq{
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;
|
||
font-weight:300; font-size:74px; color:#f1ebe0;
|
||
margin: 40px 0 8px; letter-spacing:-.01em;
|
||
text-shadow: 0 0 8px rgba(241,235,224,.2);
|
||
}
|
||
.board-eq em{ color:#ff8c5e; font-style:italic }
|
||
.board-note{
|
||
font-family:'Newsreader',serif; font-style:italic;
|
||
font-size:18px; color:rgba(241,235,224,.85);
|
||
max-width:60ch; margin-top:6px;
|
||
font-variation-settings:"opsz" 18,"SOFT" 80;
|
||
}
|
||
.board-sticky{
|
||
position:absolute; right:24%; bottom:24%;
|
||
width:120px; height:120px; padding:12px;
|
||
background:#f5d76e; color:#2b3a5a;
|
||
font-family:var(--serif); font-style:italic; font-size:14px;
|
||
transform:rotate(-4deg);
|
||
box-shadow: 4px 6px 12px rgba(0,0,0,.4);
|
||
font-variation-settings:"opsz" 14,"SOFT" 60;
|
||
}
|
||
.board-thumbs{
|
||
border-left:1px solid rgba(241,235,224,.25);
|
||
padding: 10px 8px; display:flex; flex-direction:column; gap:8px;
|
||
background:rgba(20,33,61,.35);
|
||
}
|
||
.board-thumbs .th{
|
||
height:60px; border:1px solid rgba(241,235,224,.35);
|
||
background: rgba(241,235,224,.05);
|
||
font-family:var(--mono); font-size:10px; text-align:center; padding-top:4px;
|
||
color:rgba(241,235,224,.7);
|
||
position:relative;
|
||
}
|
||
.board-thumbs .th.cur{ outline:2px solid var(--vermilion); outline-offset:-1px }
|
||
|
||
/* ============================================================
|
||
04 — LIBRARY / TEXTBOOKS MOCK (editorial spread)
|
||
============================================================ */
|
||
.lib-mock{ padding: 0; min-height:580px; }
|
||
.lib-head{
|
||
display:grid; grid-template-columns: 1fr auto;
|
||
padding: 20px 28px; border-bottom:1px solid var(--ink);
|
||
align-items:end;
|
||
}
|
||
.lib-grid{
|
||
display:grid; grid-template-columns: repeat(12,1fr); gap:0;
|
||
border-bottom:1px solid var(--ink);
|
||
}
|
||
.book{
|
||
grid-column: span 3;
|
||
padding: 22px 22px 26px;
|
||
border-right:1px solid var(--ink);
|
||
border-bottom:1px solid var(--ink);
|
||
background:var(--paper); position:relative;
|
||
display:flex; flex-direction:column; gap:8px;
|
||
}
|
||
.book:nth-child(4n){ border-right:none }
|
||
.book:nth-child(n+9){ border-bottom:none }
|
||
.book.span2{ grid-column: span 6 }
|
||
.book.ink{ background:var(--ink); color:var(--paper) }
|
||
.book.v{ background:var(--vermilion); color:var(--paper) }
|
||
.book .cat{
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em;
|
||
color:var(--vermilion);
|
||
}
|
||
.book.ink .cat, .book.v .cat{ color:#ffd8c2 }
|
||
.book h4{
|
||
font-family:var(--serif); font-weight:400;
|
||
font-variation-settings:"opsz" 56,"SOFT" 30;
|
||
font-size: 26px; line-height:1.05; letter-spacing:-.01em;
|
||
}
|
||
.book.span2 h4{ font-size:38px }
|
||
.book h4 em{ font-style:italic; color:var(--vermilion);
|
||
font-variation-settings:"opsz" 56,"SOFT" 100,"WONK" 1; }
|
||
.book.ink h4 em, .book.v h4 em{ color:#ffd8c2 }
|
||
.book .au{
|
||
font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
|
||
color:var(--ink-soft); margin-top:auto; padding-top:14px;
|
||
border-top:1px dotted var(--ink); display:flex; justify-content:space-between;
|
||
}
|
||
.book.ink .au, .book.v .au{ color:rgba(241,235,224,.7); border-top-color:rgba(241,235,224,.3) }
|
||
.book .deco{
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;
|
||
font-size:90px; line-height:.8; font-weight:300; opacity:.85;
|
||
margin: 6px 0 -4px;
|
||
}
|
||
|
||
/* ============================================================
|
||
05 — LAB / SIMULATIONS MOCK
|
||
============================================================ */
|
||
.lab-mock{ padding: 0; min-height:540px }
|
||
.lab-head{
|
||
padding: 20px 28px; border-bottom:1px solid var(--ink);
|
||
display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:end;
|
||
}
|
||
.lab-filters{
|
||
display:flex; gap:10px;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
|
||
}
|
||
.lab-filters i{
|
||
border:1px solid var(--ink); padding:5px 10px; font-style:normal;
|
||
}
|
||
.lab-filters i.cur{ background:var(--ink); color:var(--paper) }
|
||
.lab-grid{
|
||
display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
|
||
}
|
||
.sim{
|
||
border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
|
||
padding: 18px 20px 22px;
|
||
display:flex; flex-direction:column; gap:8px;
|
||
background:var(--paper);
|
||
min-height: 200px;
|
||
}
|
||
.sim:nth-child(3n){ border-right:none }
|
||
.sim .tag-mini{
|
||
display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.16em;
|
||
text-transform:uppercase; padding:2px 6px; border:1px solid var(--ink); color:var(--ink);
|
||
align-self:flex-start;
|
||
}
|
||
.sim h5{
|
||
font-family:var(--serif); font-weight:500;
|
||
font-variation-settings:"opsz" 32,"SOFT" 30;
|
||
font-size: 22px; line-height:1.1; letter-spacing:-.005em;
|
||
}
|
||
.sim h5 em{ color:var(--vermilion); font-style:italic;
|
||
font-variation-settings:"opsz" 32,"SOFT" 100,"WONK" 1; }
|
||
.sim .desc{
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 14,"SOFT" 60;
|
||
font-size:14px; line-height:1.35; color:var(--ink-soft);
|
||
}
|
||
.sim .schema{
|
||
margin-top:auto; padding-top:8px;
|
||
display:flex; align-items:center; gap:6px;
|
||
font-family:var(--mono); font-size:10px; color:var(--ink-soft); letter-spacing:.1em;
|
||
}
|
||
.sim .schema .dot{ width:8px; height:8px; border-radius:50%; background:var(--vermilion); display:inline-block }
|
||
.sim svg{ display:block; margin: 4px 0 }
|
||
|
||
/* ============================================================
|
||
06 — EXAM PREP MOCK
|
||
============================================================ */
|
||
.exam-mock{ padding:0; min-height: 540px }
|
||
.exam-head{
|
||
padding: 22px 28px; border-bottom:1px solid var(--ink);
|
||
display:grid; grid-template-columns: 1fr auto; align-items:end; gap:24px;
|
||
}
|
||
.exam-cols{
|
||
display:grid; grid-template-columns: 1.3fr 1fr; min-height: 440px;
|
||
}
|
||
.exam-left{
|
||
padding: 26px 28px; border-right:1px solid var(--ink);
|
||
background:var(--paper);
|
||
}
|
||
.exam-q{
|
||
font-family:var(--serif); font-weight:400;
|
||
font-variation-settings:"opsz" 56,"SOFT" 30;
|
||
font-size: 30px; line-height: 1.15; letter-spacing:-.005em;
|
||
margin-bottom: 22px;
|
||
}
|
||
.exam-q em{ font-style:italic; color:var(--vermilion);
|
||
font-variation-settings:"opsz" 56,"SOFT" 100,"WONK" 1; }
|
||
.exam-q sup{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); vertical-align:super; margin-left:6px; font-weight:400 }
|
||
.opt{
|
||
display:grid; grid-template-columns: 28px 1fr; gap:14px;
|
||
padding: 12px 0;
|
||
border-bottom:1px solid var(--ink);
|
||
align-items:baseline; font-family:var(--serif); font-size:18px;
|
||
}
|
||
.opt .let{
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
|
||
color:var(--vermilion); border:1px solid var(--vermilion); text-align:center; height:24px; line-height:22px;
|
||
}
|
||
.opt.cur{ background:var(--paper-2) }
|
||
.opt.cur .let{ background:var(--vermilion); color:var(--paper) }
|
||
.exam-right{
|
||
padding: 26px 28px; background:var(--paper-2);
|
||
display:flex; flex-direction:column; gap: 20px;
|
||
}
|
||
.exam-timer{
|
||
font-family:var(--serif); font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;
|
||
font-weight:300; font-size: 72px; line-height: .9; letter-spacing:-.04em;
|
||
}
|
||
.exam-timer em{ font-style:italic; color:var(--vermilion) }
|
||
.exam-grid{
|
||
display:grid; grid-template-columns: repeat(10, 1fr); gap:4px;
|
||
}
|
||
.exam-grid i{
|
||
aspect-ratio:1; border:1px solid var(--ink);
|
||
font-family:var(--mono); font-size:10px; text-align:center; line-height:1.8;
|
||
color:var(--ink); font-style:normal;
|
||
}
|
||
.exam-grid i.done{ background:var(--ink); color:var(--paper) }
|
||
.exam-grid i.cur{ background:var(--vermilion); color:var(--paper); border-color:var(--vermilion) }
|
||
.exam-grid i.flag{ background:var(--paper); border-color:var(--vermilion); color:var(--vermilion) }
|
||
|
||
/* ============================================================
|
||
07 — TEACHER (GRADEBOOK) MOCK
|
||
============================================================ */
|
||
.gb-mock{ padding:0 }
|
||
.gb-head{
|
||
padding: 18px 24px; border-bottom:1px solid var(--ink);
|
||
display:grid; grid-template-columns: 1fr auto; align-items:end; gap:16px;
|
||
}
|
||
.gb-tabs{ display:flex; gap:0;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
|
||
}
|
||
.gb-tabs i{
|
||
padding:6px 14px; border:1px solid var(--ink); border-right:none; font-style:normal;
|
||
}
|
||
.gb-tabs i:last-child{ border-right:1px solid var(--ink) }
|
||
.gb-tabs i.cur{ background:var(--vermilion); color:var(--paper); border-color:var(--vermilion) }
|
||
.gb-table{
|
||
width:100%; border-collapse:collapse;
|
||
font-family:var(--mono); font-size:11px;
|
||
}
|
||
.gb-table th, .gb-table td{
|
||
padding: 9px 10px;
|
||
border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
|
||
text-align:center; height: 34px;
|
||
}
|
||
.gb-table th{
|
||
background:var(--paper-2); color:var(--ink); text-transform:uppercase; letter-spacing:.1em;
|
||
font-size:10px; font-weight:700;
|
||
}
|
||
.gb-table td.name{
|
||
text-align:left; font-family:var(--serif); font-size:16px;
|
||
font-variation-settings:"opsz" 18,"SOFT" 30;
|
||
padding-left:18px;
|
||
background:var(--paper);
|
||
}
|
||
.gb-table tr:last-child td{ border-bottom:none }
|
||
.gb-table td:last-child, .gb-table th:last-child{ border-right:none }
|
||
.g{ font-family:var(--serif); font-size:18px; font-variation-settings:"opsz" 24,"SOFT" 60 }
|
||
.g.hi{ color:var(--moss); font-weight:600 }
|
||
.g.lo{ color:var(--vermilion); font-weight:600 }
|
||
.g.mid{ color:var(--ink) }
|
||
.g.none{ color:var(--ink-soft); font-family:var(--mono); font-size:14px }
|
||
|
||
/* ============================================================
|
||
08 — ADMIN MOCK
|
||
============================================================ */
|
||
.admin-mock{ padding:0; min-height: 540px }
|
||
.admin-head{
|
||
padding: 22px 28px; border-bottom:1px solid var(--ink);
|
||
}
|
||
.admin-cols{
|
||
display:grid; grid-template-columns: 160px 1fr;
|
||
min-height: 440px;
|
||
}
|
||
.admin-side{
|
||
background:var(--ink); color:var(--paper);
|
||
padding: 18px 14px;
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
|
||
}
|
||
.admin-side h6{ color:#ff8c5e; font-size:10px; font-weight:700; margin: 10px 0 6px }
|
||
.admin-side a{
|
||
display:block; color:rgba(241,235,224,.85); padding:5px 0;
|
||
border-bottom:1px dotted rgba(241,235,224,.18);
|
||
}
|
||
.admin-side a.cur{ color:#ff8c5e }
|
||
.admin-main{ padding: 22px 28px }
|
||
.kpi-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom: 22px }
|
||
.admin-log{
|
||
border-top:1px solid var(--ink); padding-top:14px;
|
||
font-family:var(--mono); font-size:11px; line-height:1.8; color:var(--ink-soft);
|
||
}
|
||
.admin-log p span{ color:var(--vermilion); margin-right:8px }
|
||
.admin-log p b{ color:var(--ink); font-weight:700 }
|
||
|
||
/* ============================================================
|
||
09 — PROFILE / PET MOCK
|
||
============================================================ */
|
||
.profile-mock{ padding: 0; min-height: 540px }
|
||
.pf-cols{
|
||
display:grid; grid-template-columns: 1fr 1.4fr; min-height: 540px;
|
||
}
|
||
.pf-left{
|
||
background:var(--ink); color:var(--paper);
|
||
padding: 36px 32px;
|
||
position:relative; overflow:hidden;
|
||
}
|
||
.pf-left::before{
|
||
content:""; position:absolute; right:-60px; top:-60px;
|
||
width:280px; height:280px; border-radius:50%;
|
||
background: radial-gradient(circle at 30% 30%, #ff8c5e, var(--vermilion));
|
||
}
|
||
.pf-name{
|
||
font-family:var(--serif); font-weight:300;
|
||
font-variation-settings:"opsz" 110,"SOFT" 30;
|
||
font-size:50px; line-height:1; letter-spacing:-.02em;
|
||
margin: 32px 0 4px; position:relative;
|
||
}
|
||
.pf-name em{ color:#ff8c5e; font-style:italic;
|
||
font-variation-settings:"opsz" 110,"SOFT" 100,"WONK" 1; }
|
||
.pf-class{
|
||
font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em;
|
||
color:rgba(241,235,224,.7);
|
||
}
|
||
.pf-stats{
|
||
display:grid; grid-template-columns: repeat(3,1fr); gap:0;
|
||
margin-top:40px; border-top:1px solid rgba(241,235,224,.25);
|
||
}
|
||
.pf-stats div{
|
||
padding:14px 0 4px; border-right:1px solid rgba(241,235,224,.25);
|
||
}
|
||
.pf-stats div:last-child{ border-right:none }
|
||
.pf-stats .lbl{
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em;
|
||
color:rgba(241,235,224,.55);
|
||
}
|
||
.pf-stats .v{
|
||
font-family:var(--serif); font-variation-settings:"opsz" 96,"SOFT" 80,"WONK" 1;
|
||
font-weight:400; font-size:42px; line-height:1; letter-spacing:-.03em;
|
||
}
|
||
.pf-stats .v em{ color:#ff8c5e; font-style:italic }
|
||
|
||
.pf-right{ padding: 30px 32px; background:var(--paper) }
|
||
.pet{
|
||
border:1px solid var(--ink); background:var(--paper-2);
|
||
padding: 20px 20px; margin-bottom:18px;
|
||
display:grid; grid-template-columns: 110px 1fr; gap:18px;
|
||
align-items:center;
|
||
}
|
||
.pet svg{ display:block }
|
||
.pet h5{
|
||
font-family:var(--serif); font-weight:500;
|
||
font-variation-settings:"opsz" 32,"SOFT" 30; font-size: 24px; line-height:1.1;
|
||
}
|
||
.pet h5 em{ color:var(--vermilion); font-style:italic;
|
||
font-variation-settings:"opsz" 32,"SOFT" 100,"WONK" 1; }
|
||
.pet .stat{
|
||
display:grid; grid-template-columns: 60px 1fr 32px; gap:10px;
|
||
align-items:center;
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em;
|
||
margin-top:4px;
|
||
}
|
||
.ach-grid{
|
||
display:grid; grid-template-columns: repeat(5,1fr); gap:10px;
|
||
}
|
||
.ach{
|
||
aspect-ratio:1; border:1px solid var(--ink); display:grid; place-items:center;
|
||
font-family:var(--serif); font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1;
|
||
font-style:italic; font-size:24px; color:var(--ink-soft);
|
||
background:var(--paper-2);
|
||
}
|
||
.ach.got{ background:var(--vermilion); color:var(--paper); font-style:italic }
|
||
|
||
/* ============================================================
|
||
10 — DESIGN TOKENS MOCK
|
||
============================================================ */
|
||
.tokens-grid{
|
||
display:grid; grid-template-columns: 1fr 1fr 1fr; gap:0;
|
||
border:1px solid var(--ink); min-height: 380px;
|
||
}
|
||
.tk{
|
||
padding: 20px 22px; border-right:1px solid var(--ink);
|
||
background:var(--paper);
|
||
}
|
||
.tk:last-child{ border-right:none }
|
||
.tk h6{
|
||
font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.2em;
|
||
color:var(--vermilion); margin-bottom:14px;
|
||
}
|
||
.tk .specimen{
|
||
font-family:var(--serif); font-weight:300;
|
||
font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;
|
||
font-size: 96px; line-height:.85; letter-spacing:-.04em;
|
||
}
|
||
.tk .specimen em{ font-style:italic; color:var(--vermilion);
|
||
font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1; }
|
||
.tk .stack{
|
||
font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--ink-soft);
|
||
letter-spacing:.04em;
|
||
}
|
||
.tk .stack b{ color:var(--ink); font-weight:700 }
|
||
|
||
/* ── colophon ── */
|
||
.colophon{
|
||
margin-top: 100px;
|
||
padding-top: 30px;
|
||
border-top: 3px double var(--ink);
|
||
display:grid; grid-template-columns: 2fr 1fr; gap:40px;
|
||
font-family:var(--mono); font-size:11px; color:var(--ink-soft);
|
||
text-transform:uppercase; letter-spacing:.12em; line-height:1.8;
|
||
}
|
||
.colophon h3{
|
||
font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 56,"SOFT" 80,"WONK" 1;
|
||
font-weight:300; font-size:38px;
|
||
color:var(--ink); letter-spacing:-.01em;
|
||
text-transform:none;
|
||
margin-bottom: 8px;
|
||
}
|
||
.colophon h3 em{ color:var(--vermilion) }
|
||
.colophon p{ font-family:var(--serif); font-style:italic;
|
||
font-variation-settings:"opsz" 18,"SOFT" 60;
|
||
font-size:15px; color:var(--ink-soft); text-transform:none; letter-spacing:0;
|
||
margin-bottom:12px; line-height:1.5;
|
||
}
|
||
|
||
/* ── small screens: just stack ── */
|
||
@media (max-width: 900px){
|
||
.doc{ padding: 24px 18px 80px }
|
||
.doc::before, .doc::after{ display:none }
|
||
.mast-center{ font-size: 56px }
|
||
.deck, .bay, .bay.flip, .section-head, .colophon{ grid-template-columns:1fr }
|
||
.login-mock, .pf-cols, .exam-cols, .admin-cols, .dash-mock .body{ grid-template-columns:1fr }
|
||
.lib-grid, .lab-grid{ grid-template-columns: repeat(2,1fr) }
|
||
.book{ grid-column: span 1 }
|
||
.frame .body{ grid-template-columns:1fr }
|
||
.sidebar{ display:none }
|
||
.kpi-row{ grid-template-columns: repeat(2,1fr) }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="doc">
|
||
|
||
<!-- ═══════════════════════ MASTHEAD ═══════════════════════ -->
|
||
<header class="masthead">
|
||
<div class="mast-left">
|
||
Dossier № 01<br>
|
||
Volume MMXXVI<br>
|
||
Issue · Spring
|
||
</div>
|
||
<h1 class="mast-center">Learn<em>·</em>Space</h1>
|
||
<div class="mast-right">
|
||
Re — Design<br>
|
||
Re — Visioned<br>
|
||
Re — Issued
|
||
</div>
|
||
</header>
|
||
|
||
<div class="mast-sub">
|
||
<span>Academic Risograph · Edition One</span>
|
||
<span><b>10 Systems</b> <span class="dot">●</span> <b>1 Vision</b> <span class="dot">●</span> <b>Зерно & Чернила</b></span>
|
||
<span>For Maxim D. · 2026.05.29</span>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════ STANDFIRST ═══════════════════════ -->
|
||
<section class="deck">
|
||
<div class="deck-l">
|
||
Сегодня LearnSpace выглядит как любая ed-tech платформа: <b>фиолетовый градиент, Inter,
|
||
округлые карточки</b>. Этот документ предлагает противоположное —
|
||
<b>интеллектуальную графическую систему</b> с характером печатной книги,
|
||
редакторской сетки и двух чернильных тонов, которая отличает учебный
|
||
продукт от продукта-курьера.
|
||
</div>
|
||
<div class="deck-r">
|
||
<h6>Принципы</h6>
|
||
<p><b>Бумага, не экран.</b> Цвет #f1ebe0 — тёплая бумажная основа. Никакого чисто-белого.</p>
|
||
<p><b>Два чернила.</b> Глубокий индиго #14213d и вермильон #d94e1f. Третий цвет — только для семантики.</p>
|
||
<h6>Типографика</h6>
|
||
<p><b>Fraunces</b> — дисплейный сериф с осью оптического размера и SOFT/WONK для эмоции.</p>
|
||
<p><b>Newsreader</b> — тело текста, оптимизированное для длинного чтения.</p>
|
||
<p><b>JetBrains Mono</b> — метаданные, технические надписи, рубрики.</p>
|
||
<h6>Сетка</h6>
|
||
<p>Асимметричная редакторская. <b>Линейки</b> вместо обводок. <b>Зерно</b> поверх всего как след печати.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 00 — TOKENS ════════════════════ -->
|
||
<section class="section" data-num="00">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 00 — фундамент</div>
|
||
<h2 class="s-title">Палитра, литеры <em>&</em> сетка</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Tokens: <b>26</b></div>
|
||
<div>Fonts: <b>3 семейства</b></div>
|
||
<div>Grid: <b>12 col / 8px</b></div>
|
||
<div>Effects: <b>grain, riso, rule</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay">
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="tokens-grid">
|
||
<div class="tk">
|
||
<h6>① TYPOGRAPHIC SCALE</h6>
|
||
<div class="specimen">A<em>a</em></div>
|
||
<div class="stack">
|
||
<b>Fraunces</b> — display, opsz 110, SOFT 30<br>
|
||
<b>Fraunces italic</b> — accent, SOFT 100, WONK 1<br>
|
||
<b>Newsreader</b> — body 16/24, italic 18/27<br>
|
||
<b>JetBrains Mono</b> — meta 11/16, eyebrows
|
||
</div>
|
||
</div>
|
||
<div class="tk">
|
||
<h6>② INK</h6>
|
||
<div class="sw-row" style="margin-top:12px">
|
||
<span class="sw" data-hex="#f1ebe0" style="background:#f1ebe0"></span>
|
||
<span class="sw" data-hex="#14213d" style="background:#14213d"></span>
|
||
<span class="sw" data-hex="#d94e1f" style="background:#d94e1f"></span>
|
||
</div>
|
||
<div class="sw-row" style="margin-top:34px">
|
||
<span class="sw" data-hex="#ece4d3" style="background:#ece4d3"></span>
|
||
<span class="sw" data-hex="#2b3a5a" style="background:#2b3a5a"></span>
|
||
<span class="sw" data-hex="#b53d12" style="background:#b53d12"></span>
|
||
<span class="sw" data-hex="#495c2b" style="background:#495c2b"></span>
|
||
<span class="sw" data-hex="#b8893a" style="background:#b8893a"></span>
|
||
</div>
|
||
<p class="stack" style="margin-top:42px">
|
||
Бумага → ink → вермильон.<br>
|
||
Семантика — мох (успех), охра (предупр.).
|
||
</p>
|
||
</div>
|
||
<div class="tk">
|
||
<h6>③ EFFECTS & TEXTURES</h6>
|
||
<div style="position:relative;height:90px;border:1px solid var(--ink);background:var(--paper-2);overflow:hidden;margin-bottom:10px">
|
||
<div style="position:absolute;inset:0;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='1.2' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/></svg>");"></div>
|
||
<span style="position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase">GRAIN</span>
|
||
</div>
|
||
<div style="height:14px;border:1px solid var(--ink);background:repeating-linear-gradient(45deg,var(--vermilion) 0 4px, var(--vermilion-2) 4px 8px);margin-bottom:8px"></div>
|
||
<div style="height:14px;border:1px solid var(--ink);background:repeating-linear-gradient(0deg,transparent 0 5px, var(--ink) 5px 6px);"></div>
|
||
<p class="stack" style="margin-top:14px">
|
||
<b>Grain</b> — fixed overlay, multiply.<br>
|
||
<b>Hatch</b> — fill для прогресс-баров.<br>
|
||
<b>Rule</b> — горизонтальные разделители вместо box-shadow.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 00 — design tokens, three columns</span>
|
||
<span><b>SPEC</b> · LS-DS / v.02</span>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">
|
||
<h4>Что меняется в ls.css</h4>
|
||
<ul>
|
||
<li>--bg: <b>#f1ebe0</b> вместо #eef2ff</li>
|
||
<li>Шрифты: Fraunces + Newsreader + JetBrains Mono вместо Manrope/Unbounded</li>
|
||
<li>Скругления: <b>0—2px</b>, не 12—16px</li>
|
||
<li>Тени: жёсткие <b>3px 3px 0</b> вместо мягких box-shadow</li>
|
||
<li>Градиенты исчезают — заменяются <b>штриховкой</b></li>
|
||
</ul>
|
||
<div>
|
||
<span class="tag">tokens</span>
|
||
<span class="tag v">paper</span>
|
||
<span class="tag o">grain</span>
|
||
<span class="tag o">rule</span>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 01 — LOGIN ════════════════════ -->
|
||
<section class="section" data-num="01">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 01 — точка входа</div>
|
||
<h2 class="s-title">Login. Первое <em>впечатление</em></h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/login.html</b></div>
|
||
<div>Roles: <b>all</b></div>
|
||
<div>Length: <b>один экран</b></div>
|
||
<div>Tone: <b>уверенный</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay">
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame login-mock">
|
||
<div class="lm-left">
|
||
<div class="brand">Learn<em>·</em>Space</div>
|
||
<h2>Учить — это <em>ремесло.</em><br>Войдите в мастерскую.</h2>
|
||
<div class="lm-quote">
|
||
«Школа должна напоминать не офис, а тихую читальню, где
|
||
каждый занят своим переплётом смысла.»
|
||
<cite>— Колофон, 2026</cite>
|
||
</div>
|
||
</div>
|
||
<div class="lm-right">
|
||
<div class="num-mark">№ 01 · auth</div>
|
||
<h3>Здравствуй <em>снова</em></h3>
|
||
<p>Введите вашу почту или логин. Пароль помнит вас.</p>
|
||
<div class="field">
|
||
<label>Почта или логин</label>
|
||
<div class="inp">maxim<span style="color:var(--vermilion)">@</span>school.by</div>
|
||
</div>
|
||
<div class="field">
|
||
<label>Пароль</label>
|
||
<div class="inp">• • • • • • • •</div>
|
||
</div>
|
||
<div class="btn-row" style="margin-top:14px">
|
||
<span class="btn v">Войти →</span>
|
||
<span class="btn">Гостем</span>
|
||
</div>
|
||
<div class="lm-row">
|
||
<span>Нет аккаунта? <a>Создать</a></span>
|
||
<span><a>Забыли пароль?</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 01 — login screen, split column</span>
|
||
<span><b>MOCK</b> · auth/login</span>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Половина экрана отдана <b>манифесту</b>. Гигантская курсивная «L» как декоративная литера на тёмной стороне.</p>
|
||
<ul>
|
||
<li>Поля — <b>линия снизу</b>, не box. Шрифт ввода — сериф 22px.</li>
|
||
<li>Один primary в <b>вермильоне</b>, secondary — outline.</li>
|
||
<li>Цитата-эпиграф в подвале левой колонки.</li>
|
||
</ul>
|
||
<span class="tag">login.html</span>
|
||
<span class="tag o">auth</span>
|
||
<span class="tag v">primary screen</span>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 02 — DASHBOARD ════════════════════ -->
|
||
<section class="section" data-num="02">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 02 — каждодневный экран</div>
|
||
<h2 class="s-title">Dashboard <em>как</em> утренняя газета</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/dashboard.html</b></div>
|
||
<div>Roles: <b>student / teacher</b></div>
|
||
<div>Density: <b>высокая</b></div>
|
||
<div>Hierarchy: <b>сегодня → неделя</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay">
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame dash-mock">
|
||
<div class="topbar">
|
||
<div class="brand">L<em>·</em>S</div>
|
||
<div class="nav">
|
||
<span class="cur">Dashboard</span>
|
||
<span>Уроки</span>
|
||
<span>Доска</span>
|
||
<span>Библиотека</span>
|
||
<span>Лаборатория</span>
|
||
</div>
|
||
<div class="avatar">М</div>
|
||
</div>
|
||
<div class="body">
|
||
<aside class="sidebar">
|
||
<div class="sb-group">
|
||
<h6>Учусь</h6>
|
||
<div class="sb-link cur"><span class="ic"></span> Главная</div>
|
||
<div class="sb-link"><span class="ic"></span> Расписание</div>
|
||
<div class="sb-link"><span class="ic"></span> Домашнее</div>
|
||
</div>
|
||
<div class="sb-group">
|
||
<h6>Знание</h6>
|
||
<div class="sb-link"><span class="ic"></span> Книги</div>
|
||
<div class="sb-link"><span class="ic"></span> Лаборатория</div>
|
||
<div class="sb-link"><span class="ic"></span> Карты</div>
|
||
</div>
|
||
<div class="sb-group">
|
||
<h6>Профиль</h6>
|
||
<div class="sb-link"><span class="ic"></span> Я</div>
|
||
<div class="sb-link"><span class="ic"></span> Питомец</div>
|
||
</div>
|
||
</aside>
|
||
<div class="pad">
|
||
|
||
<div class="dash-hero">
|
||
<div class="greet">
|
||
<div class="eyebrow">Пятница · 29 мая · 06:42</div>
|
||
<h1 class="h-title">Доброе утро,<br><em>Максим.</em></h1>
|
||
<div class="lede">Три урока, одна контрольная и тёплый чай. День сложится.</div>
|
||
</div>
|
||
<div class="streak">
|
||
<div>
|
||
<div style="color:var(--vermilion)">Стрик</div>
|
||
<div style="margin-top:6px">дней подряд</div>
|
||
</div>
|
||
<div class="big"><em>17</em></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rule-strip">
|
||
<span><b>Сегодня</b> · 4 занятия</span>
|
||
<span style="margin-left:auto">→ всё расписание</span>
|
||
</div>
|
||
|
||
<div class="lesson-stack">
|
||
<div class="lesson-row">
|
||
<div class="when">08:30</div>
|
||
<div>
|
||
<h5>Алгебра. <em>Корни третьей степени</em></h5>
|
||
<div class="meta">9-Б · И. К. Петрова · 45 мин</div>
|
||
</div>
|
||
<div class="go">войти →</div>
|
||
</div>
|
||
<div class="lesson-row">
|
||
<div class="when">10:15</div>
|
||
<div>
|
||
<h5>Физика. <em>Закон сохранения импульса</em></h5>
|
||
<div class="meta">9-Б · М. Я. Шилов · лаборатория</div>
|
||
</div>
|
||
<div class="go">войти →</div>
|
||
</div>
|
||
<div class="lesson-row">
|
||
<div class="when">12:00</div>
|
||
<div>
|
||
<h5>Английский. <em>Reported speech, drill</em></h5>
|
||
<div class="meta">9-Б · A. Sokolova · self-paced</div>
|
||
</div>
|
||
<div class="go">войти →</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 02 — dashboard, student view</span>
|
||
<span><b>MOCK</b> · dashboard.html</span>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Иерархия чтения: <b>имя → день → расписание</b>. Никаких «Welcome back, John!» баннеров.</p>
|
||
<ul>
|
||
<li>Стрик отдельным <b>геральдическим блоком</b> справа.</li>
|
||
<li>Уроки — <b>табличная типографика</b>: время / название / преподаватель / ссылка.</li>
|
||
<li>Сайдбар: моноширинные капители, не «Material-icons».</li>
|
||
<li>Hero-фраза с <b>курсивным выделением</b> имени.</li>
|
||
</ul>
|
||
<span class="tag">dashboard.html</span>
|
||
<span class="tag o">student</span>
|
||
<span class="tag o">teacher</span>
|
||
<span class="tag v">основной экран</span>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 03 — CLASSROOM / BOARD ════════════════════ -->
|
||
<section class="section" data-num="03">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 03 — урок в реальном времени</div>
|
||
<h2 class="s-title">Доска. Зелень <em>и</em> мел</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/classroom.html</b></div>
|
||
<div>Tools: <b>22 инструмента</b></div>
|
||
<div>Theme: <b>сохраняется</b></div>
|
||
<div>Поверх: <b>стеклянный UI</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay flip">
|
||
<aside class="notes">
|
||
<h4>Сохраняем — улучшаем</h4>
|
||
<p>Школьная доска уже — <b>отличный аэстетический выбор</b>. Не трогаем зелёный фон и деревянную раму. Меняем только <b>служебный UI</b>: тулбар, миниатюры, всплывающие панели.</p>
|
||
<ul>
|
||
<li>Тулбар: <b>тёмный индиго-стакан</b> с моно-литерами, вермильон для активного инструмента.</li>
|
||
<li>Стикеры — <b>тёплая охра</b> вместо неонового жёлтого.</li>
|
||
<li>Заголовок страницы — <b>Fraunces italic</b> с подчёркивающим штрихом-«мелом».</li>
|
||
<li>Миниатюры справа — без обводок, тонкие линии.</li>
|
||
</ul>
|
||
<span class="tag">classroom.html</span>
|
||
<span class="tag o">whiteboard.js</span>
|
||
<span class="tag v">SSE-sync</span>
|
||
</aside>
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame">
|
||
<div class="board-mock">
|
||
<div class="board-toolbar">
|
||
<i>✎</i><i class="cur">∿</i><i>○</i><i>□</i><i>△</i><i>—</i><i>T</i><i>∑</i><i>⌖</i><i>⟲</i>
|
||
</div>
|
||
<div class="board-content">
|
||
<div class="board-area">
|
||
<div class="board-title">Закон Ньютона <em>·</em> второй</div>
|
||
<div class="board-eq">F = m<em>·</em>a</div>
|
||
<div class="board-note">
|
||
Сила, действующая на тело, равна произведению его массы на ускорение,
|
||
которое она ему сообщает.
|
||
</div>
|
||
<div class="board-sticky">
|
||
Спросить:<br>что такое <b>m</b>?<br>— инертная или гравитационная?
|
||
</div>
|
||
</div>
|
||
<div class="board-thumbs">
|
||
<div class="th cur">01</div>
|
||
<div class="th">02</div>
|
||
<div class="th">03</div>
|
||
<div class="th" style="opacity:.5">+</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 03 — classroom whiteboard, live</span>
|
||
<span><b>MOCK</b> · classroom.html</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 04 — LIBRARY / TEXTBOOKS ════════════════════ -->
|
||
<section class="section" data-num="04">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 04 — фонд знания</div>
|
||
<h2 class="s-title">Библиотека. <em>Книжная</em> сетка</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/library.html · /textbooks.html</b></div>
|
||
<div>Layout: <b>12-col modular</b></div>
|
||
<div>Item: <b>обложка-плита</b></div>
|
||
<div>Tone: <b>каталог</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay">
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame lib-mock">
|
||
<div class="lib-head">
|
||
<div>
|
||
<div class="eyebrow">Фонд № 02 · учебники</div>
|
||
<h1 class="h-title">Каталог <em>учебников</em></h1>
|
||
</div>
|
||
<div class="lab-filters">
|
||
<i class="cur">Все</i><i>Математика</i><i>Физика</i><i>Химия</i><i>Биология</i>
|
||
</div>
|
||
</div>
|
||
<div class="lib-grid">
|
||
<div class="book span2 ink">
|
||
<div class="cat">Алгебра · 9 класс</div>
|
||
<div class="deco">∫</div>
|
||
<h4>Алгебра в <em>задачах и примерах</em></h4>
|
||
<div class="au"><span>Е. П. Кузнецова</span><span>2024 · 304 стр.</span></div>
|
||
</div>
|
||
<div class="book">
|
||
<div class="cat">Физика · 10</div>
|
||
<h4>Механика, <em>энергия, поле</em></h4>
|
||
<div class="au"><span>Жилко В. В.</span><span>2023</span></div>
|
||
</div>
|
||
<div class="book v">
|
||
<div class="cat">★ Подборка</div>
|
||
<h4>ЦЭ <em>2025</em> · математика</h4>
|
||
<div class="au"><span>Сборник</span><span>40 вариантов</span></div>
|
||
</div>
|
||
<div class="book">
|
||
<div class="cat">Геометрия · 10</div>
|
||
<h4>Стереометрия. <em>Введение</em></h4>
|
||
<div class="au"><span>Шлыков В. В.</span><span>2024</span></div>
|
||
</div>
|
||
<div class="book">
|
||
<div class="cat">Химия · 11</div>
|
||
<h4>Органические <em>соединения</em></h4>
|
||
<div class="au"><span>Колевич Т. А.</span><span>2024</span></div>
|
||
</div>
|
||
<div class="book ink">
|
||
<div class="cat">Биология · 11</div>
|
||
<div class="deco">∞</div>
|
||
<h4>Генетика и <em>эволюция</em></h4>
|
||
<div class="au"><span>Лисов Н. Д.</span><span>2024</span></div>
|
||
</div>
|
||
<div class="book">
|
||
<div class="cat">Геометрия · 11</div>
|
||
<h4>Векторы <em>в пространстве</em></h4>
|
||
<div class="au"><span>Латотин Л. А.</span><span>2023</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 04 — library, modular spread</span>
|
||
<span><b>MOCK</b> · library / textbooks</span>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Каждый учебник — <b>каменная плита</b>. Двенадцатиколоночная сетка позволяет редактору «вытаскивать» избранные тайтлы в span-6 блоки.</p>
|
||
<ul>
|
||
<li>Три «вкуса» плит: бумага, чернила, вермильон. Чередуются вручную в редакторском ритме.</li>
|
||
<li>Большие декоративные литеры (<b>∫ ∞</b>) как обложечные элементы.</li>
|
||
<li>Метаданные в футере карточки — моноширинно, по разделителю.</li>
|
||
</ul>
|
||
<span class="tag">library.html</span>
|
||
<span class="tag o">textbooks.html</span>
|
||
<span class="tag v">каталог</span>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 05 — LAB / SIMS ════════════════════ -->
|
||
<section class="section" data-num="05">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 05 — эксперимент</div>
|
||
<h2 class="s-title">Лаборатория. <em>Карточки-опыты</em></h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/lab.html</b></div>
|
||
<div>Items: <b>симуляции + игры</b></div>
|
||
<div>Schematic: <b>каждая карточка</b></div>
|
||
<div>Filter: <b>предмет / тип</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay flip">
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>В каждой карточке — <b>миниатюрная схема</b> опыта вместо превью-картинки. Schemа рисуется SVG, читается и при ч/б печати.</p>
|
||
<ul>
|
||
<li>Курсив <b>Fraunces italic</b> в названии — выделяет «суть» эксперимента.</li>
|
||
<li>Подзаголовок — короткий гипотетический вопрос («что будет, если…»).</li>
|
||
<li>Один <b>точка-индикатор</b> вместо тегов «сложности» с цветами.</li>
|
||
</ul>
|
||
<span class="tag">lab.html</span>
|
||
<span class="tag o">biochem-*</span>
|
||
<span class="tag o">red-book-*</span>
|
||
<span class="tag v">simulations</span>
|
||
</aside>
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame lab-mock">
|
||
<div class="lab-head">
|
||
<div>
|
||
<div class="eyebrow">Опыт № 12 · кафедра</div>
|
||
<h1 class="h-title">Лабор<em>атория</em></h1>
|
||
</div>
|
||
<div class="lab-filters">
|
||
<i class="cur">Все</i><i>Физика</i><i>Химия</i><i>Биология</i><i>Игры</i>
|
||
</div>
|
||
</div>
|
||
<div class="lab-grid">
|
||
<div class="sim">
|
||
<span class="tag-mini">Физика · оптика</span>
|
||
<h5>Интер<em>ференция</em> волн</h5>
|
||
<div class="desc">Что произойдёт, если две щели окажутся ближе длины волны?</div>
|
||
<svg width="100%" height="50" viewBox="0 0 200 50"><g fill="none" stroke="#14213d" stroke-width="1">
|
||
<path d="M0,25 L60,25"/><path d="M140,25 L200,25"/>
|
||
<path d="M60,15 L60,35 M68,15 L68,35"/>
|
||
<path d="M72,5 Q106,25 72,45 M82,5 Q116,25 82,45 M92,5 Q126,25 92,45" stroke="#d94e1f"/>
|
||
</g></svg>
|
||
<div class="schema"><span class="dot"></span> готов · 4 мин</div>
|
||
</div>
|
||
<div class="sim">
|
||
<span class="tag-mini">Химия · растворы</span>
|
||
<h5>Титрование <em>кислоты</em></h5>
|
||
<div class="desc">Найти точку эквивалентности по индикатору. Считать каждую каплю.</div>
|
||
<svg width="100%" height="50" viewBox="0 0 200 50"><g fill="none" stroke="#14213d" stroke-width="1.2">
|
||
<rect x="90" y="2" width="20" height="22"/>
|
||
<path d="M100,24 L100,30 M97,30 L103,30"/>
|
||
<path d="M82,30 L118,30 L114,48 L86,48 Z" fill="#d94e1f" fill-opacity=".22" />
|
||
</g></svg>
|
||
<div class="schema"><span class="dot"></span> готов · 7 мин</div>
|
||
</div>
|
||
<div class="sim">
|
||
<span class="tag-mini">Биохимия</span>
|
||
<h5>Цикл <em>Кребса</em></h5>
|
||
<div class="desc">Восемь стадий, восемь фермент. Поставить молекулы по кругу.</div>
|
||
<svg width="100%" height="50" viewBox="0 0 200 50"><g fill="none" stroke="#14213d" stroke-width="1">
|
||
<circle cx="100" cy="25" r="20"/>
|
||
<circle cx="100" cy="5" r="3" fill="#d94e1f" stroke="none"/>
|
||
<circle cx="120" cy="25" r="3" fill="#14213d"/>
|
||
<circle cx="100" cy="45" r="3" fill="#14213d"/>
|
||
<circle cx="80" cy="25" r="3" fill="#14213d"/>
|
||
</g></svg>
|
||
<div class="schema"><span class="dot"></span> 8 шагов · ~12 мин</div>
|
||
</div>
|
||
<div class="sim">
|
||
<span class="tag-mini">Игра</span>
|
||
<h5>Кросс<em>ворд</em> · термины</h5>
|
||
<div class="desc">20 ключевых слов из главы «Электролиз». На время.</div>
|
||
<svg width="100%" height="50" viewBox="0 0 200 50"><g fill="none" stroke="#14213d" stroke-width="1">
|
||
<g><rect x="40" y="5" width="10" height="10"/><rect x="50" y="5" width="10" height="10"/><rect x="60" y="5" width="10" height="10" fill="#d94e1f" fill-opacity=".4"/><rect x="70" y="5" width="10" height="10"/></g>
|
||
<g><rect x="60" y="15" width="10" height="10"/><rect x="60" y="25" width="10" height="10"/><rect x="60" y="35" width="10" height="10"/></g>
|
||
<g><rect x="100" y="20" width="10" height="10"/><rect x="110" y="20" width="10" height="10"/><rect x="120" y="20" width="10" height="10"/></g>
|
||
</g></svg>
|
||
<div class="schema"><span class="dot"></span> игра · до 10 мин</div>
|
||
</div>
|
||
<div class="sim">
|
||
<span class="tag-mini">Физика · механика</span>
|
||
<h5>Маятник <em>Фуко</em></h5>
|
||
<div class="desc">Вращение Земли через 24-часовое движение точки.</div>
|
||
<svg width="100%" height="50" viewBox="0 0 200 50"><g fill="none" stroke="#14213d" stroke-width="1">
|
||
<path d="M100,2 L70,42 M100,2 L130,42" stroke-dasharray="2 2"/>
|
||
<path d="M100,2 L100,40"/>
|
||
<circle cx="100" cy="42" r="5" fill="#d94e1f"/>
|
||
</g></svg>
|
||
<div class="schema"><span class="dot"></span> наблюдение · 3 мин</div>
|
||
</div>
|
||
<div class="sim">
|
||
<span class="tag-mini">Биология · экосистемы</span>
|
||
<h5>Красная <em>книга</em> · биомы</h5>
|
||
<div class="desc">Найти причину сокращения вида и собрать факторы среды.</div>
|
||
<svg width="100%" height="50" viewBox="0 0 200 50"><g fill="none" stroke="#14213d" stroke-width="1">
|
||
<path d="M20,40 L60,20 L100,35 L140,15 L180,40"/>
|
||
<path d="M20,40 L180,40"/>
|
||
<circle cx="100" cy="35" r="4" fill="#d94e1f"/>
|
||
<circle cx="60" cy="20" r="3"/>
|
||
<circle cx="140" cy="15" r="3"/>
|
||
</g></svg>
|
||
<div class="schema"><span class="dot"></span> 6 видов · ~15 мин</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 05 — laboratory, simulation index</span>
|
||
<span><b>MOCK</b> · lab.html</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 06 — EXAM PREP ════════════════════ -->
|
||
<section class="section" data-num="06">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 06 — серьёзный режим</div>
|
||
<h2 class="s-title">Экзамен. <em>Чёрный</em> кабинет</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/exam-prep* · /test-run</b></div>
|
||
<div>Mode: <b>сфокусированный</b></div>
|
||
<div>Сетка: <b>40 вопросов</b></div>
|
||
<div>Timer: <b>крупно</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay">
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame exam-mock">
|
||
<div class="exam-head">
|
||
<div>
|
||
<div class="eyebrow">ЦЭ · 2025 · Математика · Вариант 03</div>
|
||
<h2 class="h-title" style="font-size:36px">Сеанс <em>в тишине</em></h2>
|
||
</div>
|
||
<div class="btn-row" style="margin:0">
|
||
<span class="btn">Пауза</span>
|
||
<span class="btn v">Сдать раньше</span>
|
||
</div>
|
||
</div>
|
||
<div class="exam-cols">
|
||
<div class="exam-left">
|
||
<div class="eyebrow" style="margin-bottom:12px">Вопрос 13 из 40 · 2 балла</div>
|
||
<div class="exam-q">
|
||
Найдите наибольшее значение функции
|
||
<em>f(x) = x³ − 12x + 5</em>
|
||
на отрезке <em>[−3; 3]</em>.<sup>02</sup>
|
||
</div>
|
||
<div class="opt"><div class="let">A</div><div>21</div></div>
|
||
<div class="opt cur"><div class="let">B</div><div>23</div></div>
|
||
<div class="opt"><div class="let">C</div><div>17</div></div>
|
||
<div class="opt"><div class="let">D</div><div>−11</div></div>
|
||
<div class="btn-row" style="margin-top:18px">
|
||
<span class="btn">← Назад</span>
|
||
<span class="btn fill">Вперёд →</span>
|
||
<span class="btn" style="margin-left:auto">⚑ Пометить</span>
|
||
</div>
|
||
</div>
|
||
<div class="exam-right">
|
||
<div>
|
||
<div class="eyebrow">Осталось времени</div>
|
||
<div class="exam-timer">01<em>:</em>47<em>:</em>22</div>
|
||
</div>
|
||
<div>
|
||
<div class="eyebrow" style="margin-bottom:8px">Карта · 40 вопросов</div>
|
||
<div class="exam-grid">
|
||
<i class="done">1</i><i class="done">2</i><i class="done">3</i><i class="done">4</i><i class="done">5</i>
|
||
<i class="done">6</i><i class="done">7</i><i class="done">8</i><i class="done">9</i><i class="done">10</i>
|
||
<i class="done">11</i><i class="flag">12</i><i class="cur">13</i><i>14</i><i>15</i>
|
||
<i>16</i><i>17</i><i>18</i><i>19</i><i>20</i>
|
||
<i>21</i><i>22</i><i>23</i><i>24</i><i>25</i>
|
||
<i>26</i><i>27</i><i>28</i><i>29</i><i>30</i>
|
||
<i>31</i><i>32</i><i>33</i><i>34</i><i>35</i>
|
||
<i>36</i><i>37</i><i>38</i><i>39</i><i>40</i>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em;border-top:1px dotted var(--ink);padding-top:10px">
|
||
⛬ полный экран · клавиша F11
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 06 — exam mode, focused</span>
|
||
<span><b>MOCK</b> · test-run.html</span>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Экзамен — не дашборд. Никакого сайдбара. <b>Один вопрос — одна страница</b>, всё остальное — карта справа.</p>
|
||
<ul>
|
||
<li>Таймер набран <b>гигантским Fraunces</b> — главный визуальный якорь.</li>
|
||
<li>Карта вопросов — <b>матрица 10×4</b>, не круглые «pills».</li>
|
||
<li>Активный — вермильон, пометка — рамка-флажок, готов — чернила залиты.</li>
|
||
<li>Опции набраны <b>сериф 18px</b> — как в печатном пособии.</li>
|
||
</ul>
|
||
<span class="tag">test-run.html</span>
|
||
<span class="tag o">exam-prep.html</span>
|
||
<span class="tag v">focused mode</span>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 07 — TEACHER / GRADEBOOK ════════════════════ -->
|
||
<section class="section" data-num="07">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 07 — учительский стол</div>
|
||
<h2 class="s-title">Журнал. <em>Линованная</em> ведомость</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/gradebook · /my-students</b></div>
|
||
<div>Density: <b>максимальная</b></div>
|
||
<div>Стиль: <b>бухгалтерский</b></div>
|
||
<div>Color: <b>3 семантических</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay flip">
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Журнал — <b>самый плотный экран продукта</b>. Это не место для воздуха. Стиль — старая бухгалтерская книга в линейку.</p>
|
||
<ul>
|
||
<li>Имена — <b>Newsreader 16px</b>, цифры — мини-капители <b>Fraunces 18</b>.</li>
|
||
<li>Семантика по цвету: <b>хорошо — мох</b>, <b>плохо — вермильон</b>, нет — точка.</li>
|
||
<li>Вкладки сверху — <b>квадратные</b>, без скруглений.</li>
|
||
<li>Все границы — <b>1px чернила</b>, никаких shadow-карточек.</li>
|
||
</ul>
|
||
<span class="tag">gradebook.html</span>
|
||
<span class="tag o">analytics.html</span>
|
||
<span class="tag o">homework.html</span>
|
||
<span class="tag v">teacher</span>
|
||
</aside>
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame gb-mock">
|
||
<div class="gb-head">
|
||
<div>
|
||
<div class="eyebrow">Журнал · 9-Б · Алгебра · IV четверть</div>
|
||
<h2 class="h-title" style="font-size:34px">Ведомость <em>оценок</em></h2>
|
||
</div>
|
||
<div class="gb-tabs">
|
||
<i>Список</i><i class="cur">Оценки</i><i>Пропуски</i><i>Отчёт</i>
|
||
</div>
|
||
</div>
|
||
<table class="gb-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;padding-left:18px;width:32%">Ученик</th>
|
||
<th>05.04</th><th>08.04</th><th>12.04</th><th>15.04</th><th>19.04</th>
|
||
<th>22.04</th><th>26.04</th><th>03.05</th><th>10.05</th>
|
||
<th style="background:var(--vermilion);color:var(--paper)">Ср.</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="name">Антонов Кирилл</td>
|
||
<td><span class="g hi">9</span></td><td><span class="g mid">7</span></td><td><span class="g hi">10</span></td><td><span class="g hi">9</span></td><td><span class="g mid">8</span></td>
|
||
<td><span class="g hi">9</span></td><td><span class="g none">·</span></td><td><span class="g hi">10</span></td><td><span class="g hi">9</span></td>
|
||
<td><span class="g hi">9.0</span></td></tr>
|
||
<tr><td class="name">Бондарь Анна</td>
|
||
<td><span class="g mid">8</span></td><td><span class="g mid">8</span></td><td><span class="g mid">7</span></td><td><span class="g lo">5</span></td><td><span class="g mid">7</span></td>
|
||
<td><span class="g mid">8</span></td><td><span class="g mid">7</span></td><td><span class="g mid">8</span></td><td><span class="g hi">9</span></td>
|
||
<td><span class="g mid">7.4</span></td></tr>
|
||
<tr><td class="name">Васильев Олег</td>
|
||
<td><span class="g lo">4</span></td><td><span class="g none">н</span></td><td><span class="g lo">5</span></td><td><span class="g lo">6</span></td><td><span class="g mid">7</span></td>
|
||
<td><span class="g lo">5</span></td><td><span class="g mid">7</span></td><td><span class="g lo">6</span></td><td><span class="g lo">5</span></td>
|
||
<td><span class="g lo">5.6</span></td></tr>
|
||
<tr><td class="name">Григорьева Дарья</td>
|
||
<td><span class="g hi">10</span></td><td><span class="g hi">9</span></td><td><span class="g hi">10</span></td><td><span class="g hi">10</span></td><td><span class="g hi">9</span></td>
|
||
<td><span class="g hi">10</span></td><td><span class="g hi">10</span></td><td><span class="g hi">9</span></td><td><span class="g hi">10</span></td>
|
||
<td><span class="g hi">9.7</span></td></tr>
|
||
<tr><td class="name">Денисенко Илья</td>
|
||
<td><span class="g mid">7</span></td><td><span class="g mid">8</span></td><td><span class="g mid">7</span></td><td><span class="g mid">8</span></td><td><span class="g hi">9</span></td>
|
||
<td><span class="g mid">8</span></td><td><span class="g mid">7</span></td><td><span class="g mid">8</span></td><td><span class="g mid">8</span></td>
|
||
<td><span class="g mid">7.8</span></td></tr>
|
||
<tr><td class="name">Журавлёв Артём</td>
|
||
<td><span class="g none">·</span></td><td><span class="g lo">5</span></td><td><span class="g mid">7</span></td><td><span class="g mid">7</span></td><td><span class="g mid">6</span></td>
|
||
<td><span class="g mid">7</span></td><td><span class="g mid">8</span></td><td><span class="g mid">7</span></td><td><span class="g mid">8</span></td>
|
||
<td><span class="g mid">6.9</span></td></tr>
|
||
<tr><td class="name">Зайцева Полина</td>
|
||
<td><span class="g hi">9</span></td><td><span class="g mid">8</span></td><td><span class="g mid">8</span></td><td><span class="g hi">9</span></td><td><span class="g hi">9</span></td>
|
||
<td><span class="g hi">10</span></td><td><span class="g hi">9</span></td><td><span class="g hi">9</span></td><td><span class="g hi">10</span></td>
|
||
<td><span class="g hi">9.0</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 07 — gradebook, dense ledger</span>
|
||
<span><b>MOCK</b> · gradebook.html</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 08 — ADMIN ════════════════════ -->
|
||
<section class="section" data-num="08">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 08 — машинная комната</div>
|
||
<h2 class="s-title">Админ. <em>Журнал</em> аппарата</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/admin · /admin-textbooks</b></div>
|
||
<div>Tone: <b>служебный</b></div>
|
||
<div>Sidebar: <b>тёмный, моно</b></div>
|
||
<div>KPI: <b>четыре карточки</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay">
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame admin-mock">
|
||
<div class="admin-head">
|
||
<div class="eyebrow">Узел № 1 · служба</div>
|
||
<h2 class="h-title" style="font-size:36px">Аппарат <em>LearnSpace</em></h2>
|
||
</div>
|
||
<div class="admin-cols">
|
||
<aside class="admin-side">
|
||
<h6>System</h6>
|
||
<a class="cur">→ Overview</a>
|
||
<a>· Users</a>
|
||
<a>· Classes</a>
|
||
<a>· Roles</a>
|
||
<h6>Content</h6>
|
||
<a>· Textbooks</a>
|
||
<a>· Sims</a>
|
||
<a>· Lessons</a>
|
||
<h6>Maintenance</h6>
|
||
<a>· Logs</a>
|
||
<a>· Backups</a>
|
||
<a>· SQL console</a>
|
||
</aside>
|
||
<div class="admin-main">
|
||
<div class="kpi-row">
|
||
<div class="card">
|
||
<div class="lbl">Пользователей</div>
|
||
<div class="num">1<em>·</em>284</div>
|
||
<div style="font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:6px">+ 12 за неделю</div>
|
||
</div>
|
||
<div class="card alt">
|
||
<div class="lbl">Уроков сегодня</div>
|
||
<div class="num"><em>47</em></div>
|
||
<div style="font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:6px">из 312 за месяц</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="lbl">Активных классов</div>
|
||
<div class="num">38</div>
|
||
<div style="font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:6px">6 классов офлайн</div>
|
||
</div>
|
||
<div class="card ink">
|
||
<div class="lbl">Аптайм</div>
|
||
<div class="num">99<em>.</em>97<span style="font-size:24px">%</span></div>
|
||
<div style="font-family:var(--mono);font-size:10px;opacity:.6;margin-top:6px">30 дн.</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:16px">
|
||
<div class="eyebrow" style="margin-bottom:8px">Активность · 12 недель</div>
|
||
<div class="chart-bars">
|
||
<i style="height:40%"></i><i style="height:55%"></i><i style="height:48%"></i>
|
||
<i style="height:65%"></i><i class="alt" style="height:72%"></i><i style="height:60%"></i>
|
||
<i style="height:75%"></i><i style="height:82%"></i><i class="alt" style="height:90%"></i>
|
||
<i style="height:78%"></i><i style="height:84%"></i><i class="alt" style="height:96%"></i>
|
||
</div>
|
||
</div>
|
||
<div class="admin-log">
|
||
<div class="eyebrow" style="margin-bottom:6px;color:var(--ink)">Журнал событий</div>
|
||
<p><span>06:42</span> <b>auth</b> teacher@ksenia.by → login ok</p>
|
||
<p><span>06:38</span> <b>backup</b> ls-2026-05-29-0638.tar.gz · 412 MB · ok</p>
|
||
<p><span>06:31</span> <b>seed</b> gen_phys10_ch.js · 24 вопроса добавлено</p>
|
||
<p><span>06:29</span> <b>sse</b> classroom/14 · 6 connections</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 08 — admin overview</span>
|
||
<span><b>MOCK</b> · admin.html</span>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Админка — <b>служебный, не парадный</b> экран. Сайдбар тёмный (это часто открыто фоном). Никаких «illustrations».</p>
|
||
<ul>
|
||
<li>KPI-карточки <b>чередуют</b> бумагу/индиго/вермильон-акцент.</li>
|
||
<li>Простой <b>ASCII-style</b> бар-чарт без gridlines.</li>
|
||
<li>Журнал событий — <b>моноширинно</b>, время и модуль выделены вермильоном.</li>
|
||
</ul>
|
||
<span class="tag">admin.html</span>
|
||
<span class="tag o">admin-textbooks.html</span>
|
||
<span class="tag v">служебный</span>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════ 09 — PROFILE / PET ════════════════════ -->
|
||
<section class="section" data-num="09">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="s-kicker">Раздел 09 — игровая часть</div>
|
||
<h2 class="s-title">Профиль <em>&</em> Питомец</h2>
|
||
</div>
|
||
<div class="s-meta">
|
||
<div>Path: <b>/profile · /pet</b></div>
|
||
<div>Tone: <b>тёплый</b></div>
|
||
<div>Геймификация: <b>тонкая</b></div>
|
||
<div>Питомец: <b>SVG-рисунок</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bay flip">
|
||
<aside class="notes">
|
||
<h4>Решения</h4>
|
||
<p>Профиль может быть тёплым, но не скатывается в <b>детский сад «Duolingo-style»</b>. Геральдика > стикеры.</p>
|
||
<ul>
|
||
<li>Левый блок — <b>тёмный портрет</b> с большой курсивной литерой-инициалом.</li>
|
||
<li>Достижения — <b>пятиугольная сетка</b> из курсивных литер, а не значки.</li>
|
||
<li>Питомец — <b>ручной SVG-рисунок</b> в стиле гравюры, не 3D-моделька.</li>
|
||
<li>Стрики и уровни — без ярких неоновых полосок.</li>
|
||
</ul>
|
||
<span class="tag">profile.html</span>
|
||
<span class="tag o">pet.html</span>
|
||
<span class="tag v">gamification</span>
|
||
</aside>
|
||
<div class="mock">
|
||
<div class="mock-canvas">
|
||
<div class="frame profile-mock">
|
||
<div class="pf-cols">
|
||
<div class="pf-left">
|
||
<div class="eyebrow" style="color:#ff8c5e">Профиль № 1284</div>
|
||
<!-- big italic initial -->
|
||
<svg width="120" height="120" viewBox="0 0 120 120" style="margin-top:18px">
|
||
<circle cx="60" cy="60" r="58" fill="none" stroke="#f1ebe0" stroke-width="1.5" stroke-dasharray="3 3"/>
|
||
<text x="60" y="92" text-anchor="middle"
|
||
font-family="Fraunces" font-style="italic" font-size="110"
|
||
font-weight="300" fill="#ff8c5e">М</text>
|
||
</svg>
|
||
<div class="pf-name">Максим <em>Долголёв</em></div>
|
||
<div class="pf-class">9-Б · Учитель физики · Минск</div>
|
||
<div class="pf-stats">
|
||
<div><div class="v"><em>17</em></div><div class="lbl" style="padding:6px 0 12px">стрик</div></div>
|
||
<div><div class="v">8<em>.</em>4</div><div class="lbl" style="padding:6px 0 12px">ср балл</div></div>
|
||
<div><div class="v">142</div><div class="lbl" style="padding:6px 0 12px">уроков</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pf-right">
|
||
<div class="eyebrow">Питомец · уровень 12</div>
|
||
<div class="pet" style="margin-top:8px">
|
||
<!-- engraving-style cat -->
|
||
<svg width="110" height="110" viewBox="0 0 100 100" fill="none" stroke="#14213d" stroke-width="1.2">
|
||
<path d="M30,40 Q20,20 32,28 L40,38 Q50,32 60,38 L68,28 Q80,20 70,40 Q82,60 70,76 Q50,88 30,76 Q18,60 30,40 Z"/>
|
||
<circle cx="42" cy="52" r="2.5" fill="#14213d"/>
|
||
<circle cx="58" cy="52" r="2.5" fill="#14213d"/>
|
||
<path d="M48,62 Q50,66 52,62"/>
|
||
<path d="M45,60 L50,62 L55,60" stroke="#d94e1f"/>
|
||
<path d="M20,70 Q5,72 14,82" stroke-dasharray="2 2"/>
|
||
<path d="M80,70 Q95,72 86,82" stroke-dasharray="2 2"/>
|
||
</svg>
|
||
<div>
|
||
<h5>Феликс, <em>учёный кот</em></h5>
|
||
<div class="stat">
|
||
<span>Сытость</span>
|
||
<span class="bar"><i style="width:72%"></i></span>
|
||
<span style="font-family:var(--mono);font-size:11px">72</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span>Знание</span>
|
||
<span class="bar"><i style="width:88%"></i></span>
|
||
<span style="font-family:var(--mono);font-size:11px">88</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span>Настр.</span>
|
||
<span class="bar"><i style="width:55%"></i></span>
|
||
<span style="font-family:var(--mono);font-size:11px">55</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="eyebrow" style="margin-top:18px">Достижения · 8 из 20</div>
|
||
<div class="ach-grid" style="margin-top:8px">
|
||
<div class="ach got">A</div>
|
||
<div class="ach got">B</div>
|
||
<div class="ach got">C</div>
|
||
<div class="ach got">D</div>
|
||
<div class="ach">·</div>
|
||
<div class="ach got">E</div>
|
||
<div class="ach got">F</div>
|
||
<div class="ach got">G</div>
|
||
<div class="ach got">H</div>
|
||
<div class="ach">·</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-caption">
|
||
<span>fig. 09 — profile & pet</span>
|
||
<span><b>MOCK</b> · profile / pet</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════ COLOPHON ═══════════════════════ -->
|
||
<footer class="colophon">
|
||
<div>
|
||
<h3>Колоф<em>он</em></h3>
|
||
<p>
|
||
Все макеты в этом дoссье — статические HTML/CSS-мокапы, без JavaScript-логики.
|
||
Они предлагают <b>аэстетическое направление</b>, а не готовый
|
||
интерфейс. Следующий шаг — выбрать раздел и перенести
|
||
токены и типографику в <b>css/ls.css</b>, оставив существующую
|
||
разметку и логику страниц нетронутой.
|
||
</p>
|
||
<p>
|
||
Шрифты загружаются с Google Fonts. Зерно реализовано через SVG-filter
|
||
в data URL. Никаких изображений извне.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
Set in <b>Fraunces</b><br>
|
||
& <b>Newsreader</b><br>
|
||
& <b>JetBrains Mono</b><br><br>
|
||
Inked in <b>#14213d</b><br>
|
||
& <b>#d94e1f</b><br>
|
||
On <b>#f1ebe0</b><br><br>
|
||
Pressed <b>2026.05.29</b><br>
|
||
Edition <b>01 / 100</b>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|