feat(exam-prep F5): тренажёр случайных задач + /practice/next API (random|unsolved)

2026-05-29 10:57:22 +03:00
parent 0d1474f0f5
commit 4652f9a73d
4 changed files with 429 additions and 6 deletions
@@ -507,6 +507,111 @@
  font-family: 'Unbounded', sans-serif; font-weight: 800; color: #06D6A0;
 }

+/* ═══════════════════════════════════════════════════════════════
+   Practice view (`pr-*`)  — used by exam-prep-practice.html
+   ═══════════════════════════════════════════════════════════════ */
+
+.pr-controls {
+  background: var(--surface);
+  border: 1.5px solid var(--border);
+  border-radius: 14px;
+  padding: 14px 18px;
+  margin-bottom: 16px;
+}
+.pr-controls-row {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
+}
+.pr-strategy {
+  display: flex; gap: 6px; flex-wrap: wrap;
+}
+.pr-strategy-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 7px 14px;
+  border: 1.5px solid var(--border-h);
+  border-radius: 9px;
+  background: transparent; color: var(--text-2);
+  font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 700;
+  cursor: pointer; transition: all .12s;
+}
+.pr-strategy-btn:hover:not(:disabled):not(.disabled) {
+  border-color: var(--violet); color: var(--violet);
+}
+.pr-strategy-btn.active {
+  background: var(--violet); border-color: var(--violet); color: #fff;
+}
+.pr-strategy-btn.disabled, .pr-strategy-btn:disabled {
+  opacity: .42; cursor: not-allowed;
+}
+.pr-strategy-btn svg { width: 14px; height: 14px; }
+
+.pr-count-pick {
+  display: inline-flex; align-items: center; gap: 8px;
+  margin-left: auto;
+}
+.pr-count-pick label {
+  font-size: .78rem; color: var(--text-3); font-weight: 700;
+  text-transform: uppercase; letter-spacing: .04em;
+}
+.pr-count-select {
+  padding: 7px 10px;
+  border: 1.5px solid var(--border-h);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text);
+  font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 600;
+  cursor: pointer;
+}
+.pr-count-select:focus { outline: none; border-color: var(--violet); }
+
+.pr-restart { white-space: nowrap; }
+.pr-restart svg { width: 14px; height: 14px; }
+
+.pr-progress {
+  margin-top: 12px; padding-top: 12px;
+  border-top: 1px dashed var(--border);
+}
+.pr-progress-meta {
+  display: flex; justify-content: space-between;
+  font-size: .78rem; color: var(--text-3);
+  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
+  margin-bottom: 6px;
+}
+.pr-progress-counts {
+  color: var(--violet);
+  text-transform: none; letter-spacing: 0;
+  font-size: .8rem;
+}
+
+.pr-tasks { margin-top: 6px; }
+
+.pr-finish-row {
+  display: flex; justify-content: center;
+  margin: 22px 0 0;
+}
+.pr-finish-btn {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 18px;
+  border: 1.5px solid var(--border-h); border-radius: 10px;
+  background: var(--surface); color: var(--text-2);
+  font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 700;
+  cursor: pointer; transition: all .15s;
+}
+.pr-finish-btn:hover { border-color: var(--violet); color: var(--violet); }
+.pr-finish-btn svg { width: 14px; height: 14px; }
+
+.pr-summary { margin-top: 22px; }
+.pr-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 14px;
+  margin-bottom: 16px;
+}
+.pr-summary-stat {
+  padding: 12px 14px;
+  background: rgba(155,93,229,.05);
+  border-radius: 10px;
+}
+
 /* ── Mobile tweaks ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ep-wrap   { padding: 20px 16px 60px; }