diff --git a/frontend/textbooks/algebra_8.html b/frontend/textbooks/algebra_8.html index bf3e694..47d3b70 100644 --- a/frontend/textbooks/algebra_8.html +++ b/frontend/textbooks/algebra_8.html @@ -544,7 +544,92 @@ input,select,textarea{font-family:inherit} .col-side.side-open{transform:translateX(0)} } @media(min-width:981px){.col-side-close{display:none}.col-side{transform:none!important}} + +/* ═══════════════════════════════════════════════ + WAVE 4 — GAMIFICATION + ═══════════════════════════════════════════════ */ + +/* XP / Level card */ +.xp-card{background:linear-gradient(135deg,var(--acc-soft),var(--pri-soft));border:1.5px solid var(--acc);border-radius:12px;padding:14px;margin-bottom:14px} +.xp-card-title{font-size:.68rem;font-weight:800;color:var(--acc2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between} +.xp-level{font-size:1.1rem;font-weight:900;color:var(--acc2);font-family:'Unbounded',sans-serif} +.xp-bar{height:9px;background:rgba(3,169,244,.15);border-radius:6px;overflow:hidden;margin:7px 0} +.xp-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--pri));border-radius:6px;transition:width .5s cubic-bezier(.4,0,.2,1)} +.xp-nums{font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between} + +/* Streak card */ +.streak-card{background:linear-gradient(135deg,#fff8e1,#fce7f3);border:1.5px solid var(--warn);border-radius:12px;padding:12px 14px;margin-bottom:14px} +.dark .streak-card{background:linear-gradient(135deg,#2a1f0a,#3a1229)} +.streak-row{display:flex;align-items:center;gap:10px} +.streak-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(245,158,11,.15);border-radius:8px;flex-shrink:0} +.streak-nums{display:flex;gap:14px;margin-top:6px} +.streak-num{text-align:center} +.streak-val{font-size:1.3rem;font-weight:900;color:var(--warn);font-family:'JetBrains Mono',monospace} +.streak-lab{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em} + +/* Level popup (синий) */ +.lvl-popup{position:fixed;top:18px;right:18px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;padding:14px 20px;border-radius:12px;font-weight:700;font-size:.92rem;box-shadow:0 8px 32px rgba(3,169,244,.4);z-index:1001;display:none;align-items:center;gap:10px} +.lvl-popup.show{display:flex;animation:achBounce .5s cubic-bezier(.34,1.56,.64,1) forwards} + +/* Streak popup */ +.streak-popup{position:fixed;top:70px;right:18px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:12px 18px;border-radius:11px;font-weight:700;font-size:.9rem;box-shadow:0 8px 28px rgba(245,158,11,.45);z-index:1002;display:none;align-items:center;gap:8px} +.streak-popup.show{display:flex;animation:achBounce .45s cubic-bezier(.34,1.56,.64,1) forwards} + +/* Daily challenge button */ +.daily-btn{position:relative} +.daily-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;background:var(--warn);border-radius:50%;border:2px solid #fff;display:none} +.daily-dot.show{display:block;animation:dotPulse 1.4s ease-in-out infinite} +@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}50%{box-shadow:0 0 0 5px rgba(245,158,11,0)}} + +/* Daily modal */ +.daily-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:2010;align-items:center;justify-content:center} +.daily-modal.open{display:flex;animation:modalIn .3s ease} +.daily-box{background:var(--card);border-radius:18px;padding:30px 28px;max-width:430px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:boxIn .4s cubic-bezier(.34,1.56,.64,1)} +.daily-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;background:linear-gradient(135deg,var(--warn),#ef4444);color:#fff;border-radius:8px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px} +.daily-q{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:18px;line-height:1.5} +.daily-hint{font-size:.8rem;color:var(--muted);margin-top:-10px;margin-bottom:12px;font-style:italic} +.daily-done{text-align:center;padding:20px 0} +.daily-done-icon{font-size:3rem;margin-bottom:10px} + +/* Achievements gallery modal */ +.ach-gallery-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(5px);z-index:2005;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px} +.ach-gallery-modal.open{display:flex;animation:modalIn .3s ease} +.ach-gallery-box{background:var(--card);border-radius:20px;padding:28px;width:100%;max-width:680px;box-shadow:0 24px 64px rgba(0,0,0,.35);margin:auto;animation:boxIn .4s cubic-bezier(.34,1.56,.64,1)} +.ach-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:18px} +.ach-card{background:var(--bg);border:1.5px solid var(--border);padding:16px 12px;border-radius:12px;text-align:center;opacity:.38;transition:opacity .25s,border-color .25s,transform .2s} +.ach-card:hover{transform:translateY(-2px)} +.ach-card.earned{opacity:1;border-color:var(--sec-acc,var(--warn));background:linear-gradient(135deg,var(--pri-soft),var(--acc-soft))} +.ach-card-icon{width:44px;height:44px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--pri-soft)} +.ach-card.earned .ach-card-icon{background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff} +.ach-card-title{font-weight:800;font-size:.82rem;color:var(--text);line-height:1.25;margin-bottom:4px} +.ach-card-desc{font-size:.72rem;color:var(--muted);line-height:1.35} +.ach-card-date{font-size:.68rem;color:var(--ok);margin-top:5px;font-weight:600} + +/* Circular progress */ +.psel-prog-circle{width:34px;height:34px;position:absolute;top:10px;right:10px} +.psel-prog-bg{fill:none;stroke:rgba(233,30,99,.12);stroke-width:3.5} +.psel-prog-fg{fill:none;stroke:var(--pri);stroke-width:3.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .5s} +.psel-prog-circle text{font-size:8px;font-weight:800;fill:var(--pri2);font-family:'Inter',sans-serif} + +/* Final chapter modal */ +.final-chapter-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:2020;align-items:center;justify-content:center;padding:16px} +.final-chapter-modal.open{display:flex;animation:modalIn .4s ease} +.final-chapter-box{background:var(--card);border-radius:22px;padding:36px 32px;max-width:480px;width:100%;box-shadow:0 28px 80px rgba(233,30,99,.25);text-align:center;animation:boxIn .5s cubic-bezier(.34,1.56,.64,1)} +.fc-title{font-size:1.6rem;font-weight:900;color:var(--pri2);font-family:'Unbounded',sans-serif;margin:14px 0 8px} +.fc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0} +.fc-stat{background:var(--pri-soft);border-radius:10px;padding:12px 8px;text-align:center} +.fc-stat-val{font-size:1.4rem;font-weight:900;color:var(--pri2);font-family:'JetBrains Mono',monospace} +.fc-stat-lab{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px} +.fc-topics{text-align:left;margin:14px 0;background:var(--acc-soft);border-radius:10px;padding:12px 14px} +.fc-topics li{font-size:.85rem;margin-bottom:4px;color:var(--text)} + +/* Mute button */ +.mute-btn{position:relative} + +/* Sound indicator */ +#sound-muted-hint{display:none} + @@ -567,6 +652,19 @@ input,select,textarea{font-family:inherit} Ctrl+K + + + + + + + + + + +
+
+
+ +
+
Глава 1 завершена!
+

Вы освоили все темы Главы 1!

+
+
+
    +
  • ✓ Арифметический квадратный корень
  • +
  • ✓ Иррациональные и действительные числа
  • +
  • ✓ Свойства квадратных корней
  • +
  • ✓ Применение свойств (упрощение, сравнение)
  • +
  • ✓ Числовые промежутки, ∪ и ∩
  • +
  • ✓ Системы и совокупности неравенств
  • +
+
+
+ + +
+
+
+ + +