From a9cd5804aec27f3fc502073ad261ea2003e6c6ef Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Mon, 29 Jun 2026 20:05:12 +0300 Subject: [PATCH] =?UTF-8?q?style(trainer):=20=D0=BF=D0=BE=D0=BB=D0=B8?= =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20UX=20=E2=80=94=20=D0=BA=D0=BD?= =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D0=B8-=D0=B2=D0=B0=D1=80=D0=B8=D0=B0=D0=BD?= =?UTF-8?q?=D1=82=D1=8B,=20=D0=B8=D0=BD=D0=BB=D0=B0=D0=B9=D0=BD-KaTeX=20?= =?UTF-8?q?=D0=B2=20=D1=80=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B8,=20=D0=BC?= =?UTF-8?q?=D0=BE=D0=B1.=20=D0=B2=D1=91=D1=80=D1=81=D1=82=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Визуальная доводка страницы /trainer (логика/ID не тронуты): - Варианты выбора (choice/verify): глубина (clay-тень, градиент), единая высота 60px, крупный шрифт, hover-подъём, press-сжатие, pop при верном/shake при неверном. - Инлайн-формулы в пояснениях решения: соразмерны тексту (katex 1.02em) и подсвечены индиго (accent-ink); формула-строка katex 1.05em — гармония с прозой. - Мобильная вёрстка (≤620): варианты в один столбец, кнопка «Дальше» на всю ширину, чертёж компактнее, формула-строка решения без отступа. Превью визуала (реальный CSS+KaTeX+задачи) — scratchpad/trainer_preview.html. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/trainer.html | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/frontend/trainer.html b/frontend/trainer.html index 4315c10..971f14b 100644 --- a/frontend/trainer.html +++ b/frontend/trainer.html @@ -238,13 +238,21 @@ .tr-fm-btn.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 16px -6px rgba(99,102,241,.5); } /* ── варианты выбора (kind choice / verify) ── */ - .tr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin: 0 auto 4px; } - .tr-choice-btn { font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; padding: 14px 16px; border-radius: 15px; border: 2px solid rgba(99,102,241,.22); background: #fbfbff; color: var(--ink); transition: .14s var(--ease); } - .tr-choice-btn:hover:not(:disabled) { border-color: var(--g1); background: #fff; transform: translateY(-1px); } - .tr-choice-btn:disabled { cursor: default; } - .tr-choice-btn.right { border-color: transparent; color: #fff; background: linear-gradient(135deg, #059669, #10b981); } - .tr-choice-btn.wrongpick { border-color: transparent; color: #fff; background: linear-gradient(135deg, #dc2626, #ef4444); } - #tr-choice-next { display: block; margin: 0 auto 4px; } + .tr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; max-width: 470px; margin: 4px auto 2px; } + .tr-choice-btn { + font: inherit; font-size: 1.22rem; font-weight: 800; cursor: pointer; min-height: 60px; + display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; + padding: 12px 16px; border-radius: 16px; border: 2px solid rgba(99,102,241,.2); + background: linear-gradient(180deg, #fff, #f6f7ff); color: var(--ink); + box-shadow: var(--sh-1); transition: .15s var(--ease); + } + .tr-choice-btn:hover:not(:disabled) { border-color: var(--g1); transform: translateY(-2px); box-shadow: var(--sh-2); } + .tr-choice-btn:active:not(:disabled) { transform: translateY(0) scale(.98); } + .tr-choice-btn:disabled { cursor: default; box-shadow: none; opacity: .96; } + .tr-choice-btn.right { border-color: transparent; color: #fff; background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 14px 28px -10px rgba(16,185,129,.6); animation: trPop .45s var(--ease); } + .tr-choice-btn.wrongpick { border-color: transparent; color: #fff; background: linear-gradient(135deg, #dc2626, #ef4444); animation: trShake .4s var(--ease); } + .tr-choice-btn .katex { color: inherit; } + #tr-choice-next { display: block; margin: 14px auto 2px; min-width: 168px; justify-content: center; } /* строка ответа */ .tr-inrow { display: flex; gap: 10px; align-items: stretch; max-width: 460px; margin: 0 auto; } @@ -306,8 +314,11 @@ .tr-solution h4 { margin: 0 0 14px; font-family: 'Manrope', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); font-weight: 800; } .tr-step { color: #334155; padding: 13px 0; } .tr-step + .tr-step { border-top: 1px dashed rgba(99,102,241,.2); } - .tr-step-note { display: block; color: var(--ink-soft); font-family: 'Manrope', sans-serif; font-size: .92rem; line-height: 1.6; margin-bottom: 7px; } + .tr-step-note { display: block; color: var(--ink-soft); font-family: 'Manrope', sans-serif; font-size: .92rem; line-height: 1.65; margin-bottom: 7px; } + /* инлайн-формулы в пояснении: соразмерны тексту, чуть подсвечены, не «прыгают» по базовой линии */ + .tr-step-note .katex { font-size: 1.02em; color: var(--accent-ink); } .tr-step-math { display: block; font-family: 'Cambria Math', serif; font-size: 1.2rem; color: var(--ink); margin-left: 31px; } + .tr-step-math .katex { font-size: 1.05em; } .tr-step-n { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 800; margin-right: 9px; vertical-align: 1px; } /* ── итог сессии ── */ @@ -372,6 +383,11 @@ .tr-progress-card .tr-stat-tiles { grid-template-columns: 1fr 1fr; } .tr-inrow { flex-wrap: wrap; } .tr-inrow .tr-btn { width: 100%; justify-content: center; } + .tr-choices { grid-template-columns: 1fr; gap: 9px; } + .tr-choice-btn { min-height: 52px; font-size: 1.12rem; } + #tr-choice-next { width: 100%; } + .tr-figure { max-width: 280px; } + .tr-step-math { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; }