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; }