feat(exam-prep F7): карта тем + тематический тренажёр (API /topics + /topics/:slug/tasks + UI)

2026-05-29 11:35:28 +03:00
parent 90cda5129c
commit fe7d44aa83
4 changed files with 554 additions and 6 deletions
@@ -901,6 +901,102 @@
 }
 .dh-plan-derived-card b { color: var(--text); }

+/* ═══════════════════════════════════════════════════════════════
+   Topics view (`tp-*`) — used by exam-prep-topics.html (F7)
+   ═══════════════════════════════════════════════════════════════ */
+
+.tp-sections { display: flex; flex-direction: column; gap: 16px; }
+
+.tp-section-head {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 8px;
+}
+.tp-section-head h3 { margin-bottom: 0; }
+.tp-section-meta {
+  font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 700;
+  color: var(--text-2);
+}
+.tp-section-bar { margin-bottom: 14px; }
+
+.tp-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+}
+
+.tp-card {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 14px 16px;
+  border: 1.5px solid var(--border-h);
+  border-radius: 11px;
+  background: var(--surface);
+  text-decoration: none; color: var(--text);
+  transition: all .15s;
+}
+.tp-card:hover {
+  border-color: var(--violet);
+  box-shadow: 0 4px 14px rgba(155,93,229,.10);
+}
+
+.tp-card-head {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
+}
+.tp-card-title {
+  font-family: 'Unbounded', sans-serif; font-size: .88rem; font-weight: 700;
+  line-height: 1.3;
+}
+.tp-card-count {
+  font-family: 'Unbounded', sans-serif; font-size: .72rem; font-weight: 800;
+  color: var(--text-3);
+  padding: 2px 7px; border-radius: 5px;
+  background: rgba(15,23,42,.05);
+  white-space: nowrap;
+}
+
+.tp-card-progress {
+  display: flex; align-items: center; gap: 8px;
+  font-size: .75rem; color: var(--text-3);
+}
+.tp-card-progress .ep-bar { flex: 1; margin-top: 0; }
+
+.tp-card-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: 4px;
+}
+.tp-card-accuracy {
+  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: .82rem;
+  padding: 3px 9px; border-radius: 5px;
+  background: rgba(15,23,42,.05);
+  color: var(--text-2);
+}
+.tp-card-accuracy.tp-good { background: rgba(6,214,160,.16); color: #06D6A0; }
+.tp-card-accuracy.tp-warn { background: rgba(248,150,30,.14); color: #B45309; }
+.tp-card-accuracy.tp-bad  { background: rgba(230,57,70,.14);  color: #E63946; }
+
+.tp-card-cta {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: .75rem; font-weight: 700; color: var(--violet);
+}
+.tp-card-cta svg { width: 12px; height: 12px; }
+
+/* Topic practice header */
+.tp-back-bar { margin-bottom: 12px; }
+.tp-back {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: .85rem; font-weight: 600; color: var(--text-2);
+  text-decoration: none;
+  padding: 6px 10px; border-radius: 7px;
+  transition: background .12s;
+}
+.tp-back:hover { background: rgba(155,93,229,.06); color: var(--violet); }
+.tp-back svg { width: 14px; height: 14px; }
+
+.tp-checkbox {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-size: .85rem; color: var(--text-2); cursor: pointer;
+}
+.tp-checkbox input { accent-color: var(--violet); }
+
 /* ── Mobile tweaks ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ep-wrap   { padding: 20px 16px 60px; }