diff --git a/frontend/flashcards.html b/frontend/flashcards.html index cf6d3ef..f942af7 100644 --- a/frontend/flashcards.html +++ b/frontend/flashcards.html @@ -139,6 +139,9 @@ .card-textarea { width: 100%; border: none; outline: none; resize: none; background: transparent; font-family: 'Manrope', sans-serif; font-size: .88rem; color: var(--text); min-height: 48px; line-height: 1.5; padding: 0; } + .fc-math-preview { display: none; margin-top: 6px; padding: 6px 9px; font-size: .85rem; line-height: 1.5; + color: var(--text); background: rgba(155,93,229,.05); border: 1px solid rgba(155,93,229,.14); + border-radius: 8px; overflow-x: auto; } .card-actions { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--border); } .card-act-btn { padding: 0 14px; height: 100%; flex: 1; border: none; background: none; cursor: pointer; color: var(--text-3); transition: .15s; display: flex; @@ -827,7 +830,9 @@ function renderCardList() { +
${imgRowHtml(c, 'front')}
@@ -838,7 +843,9 @@ function renderCardList() { +
${imgRowHtml(c, 'back')}
@@ -848,9 +855,22 @@ function renderCardList() {
`).join(''); + // Превью формул KaTeX под каждым полем (textarea сырой LaTeX не рендерит) + list.querySelectorAll('.card-textarea').forEach(fcMathPreview); if (!q) bindCardDrag(); } +/* Рендер KaTeX-превью под полем карточки, если в тексте есть формула. */ +function fcMathPreview(ta) { + const side = ta.closest('.card-side'); + const prev = side && side.querySelector('.fc-math-preview'); + if (!prev) return; + const txt = ta.value || ''; + if (!/\$|\\\(|\\\[/.test(txt)) { prev.style.display = 'none'; prev.innerHTML = ''; return; } + prev.innerHTML = mathHtmlFC(txt); + prev.style.display = 'block'; +} + /* ── drag-reorder карточек (только без активного фильтра) ── */ let _dragId = null; function bindCardDrag() {