More pretty

2025-09-11 23:12:39 +03:00
parent d1bb3559bb
commit ef0f55afaf
5 changed files with 108 additions and 16 deletions
--- a/static/app.js
+++ b/static/app.js
@@ -8,6 +8,10 @@
  const statusEl = document.getElementById('status');
  const resultEl = document.getElementById('result');
  const fxLayer = document.getElementById('fxLayer');
+  const btnColorClasses = ['c-yellow','c-orange','c-pink','c-purple','c-blue','c-teal'];
+  const praise = ['Отлично! ⭐','Молодец! 🎉','Супер! 🌟','Здорово! 🥳','Так держать! 👍'];
+
+  // decorative assets removed

  let sessionId = null;
  let totalQuestions = 20;
@@ -41,9 +45,10 @@
    if (!q) return;
    problemEl.textContent = `${q.a} × ${q.b}`;
    optionsEl.innerHTML = '';
-    q.options.forEach(value => {
+    const colors = shuffle(btnColorClasses).slice(0, q.options.length);
+    q.options.forEach((value, idx) => {
      const btn = document.createElement('button');
-      btn.className = 'option-btn';
+      btn.className = `option-btn ${colors[idx % colors.length]}`;
      btn.textContent = String(value);
      btn.addEventListener('click', () => answer(value, btn));
      optionsEl.appendChild(btn);
@@ -51,6 +56,15 @@
    progressEl.textContent = `${q.index}/${totalQuestions}`;
  }

+  function shuffle(arr) {
+    const a = arr.slice();
+    for (let i = a.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a;
+  }
+
  function stopTimer() {
    if (countdown) {
      clearInterval(countdown);
@@ -129,6 +143,43 @@
    }
  }

+  function celebrateFullscreen() {
+    if (!fxLayer) return;
+    // quick flash overlay
+    const flash = document.createElement('div');
+    flash.className = 'flash';
+    fxLayer.appendChild(flash);
+    setTimeout(() => flash.remove(), 550);
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const count = Math.min(220, Math.floor((vw * vh) / 7000)); // scale with viewport
+    for (let i = 0; i < count; i++) {
+      const p = document.createElement('span');
+      p.className = 'confetti';
+      // random start across the screen
+      const sx = Math.random() * vw;
+      const sy = Math.random() * vh * 0.6 + vh * 0.1; // avoid extreme edges
+      p.style.left = `${sx}px`;
+      p.style.top = `${sy}px`;
+      // random trajectory
+      const angle = Math.random() * Math.PI * 2;
+      const distance = 180 + Math.random() * 520;
+      const tx = Math.cos(angle) * distance;
+      const ty = Math.sin(angle) * distance + 80; // slight gravity bias
+      const rot = (Math.random() * 1080 - 540).toFixed(0) + 'deg';
+      p.style.setProperty('--tx', `${tx.toFixed(0)}px`);
+      p.style.setProperty('--ty', `${ty.toFixed(0)}px`);
+      p.style.setProperty('--rot', rot);
+      const hue = Math.floor(Math.random() * 360);
+      p.style.backgroundColor = `hsl(${hue} 90% 55%)`;
+      const dur = 1000 + Math.random() * 900;
+      p.style.animation = `confetti ${dur}ms ease-out forwards`;
+      fxLayer.appendChild(p);
+      setTimeout(() => p.remove(), dur + 200);
+    }
+  }
+
  async function answer(value, clickedBtn) {
    if (!sessionId || inFlight) return;
    inFlight = true;
@@ -147,7 +198,8 @@
      // feedback
      if (data.correct) {
        clickedBtn.classList.add('correct');
-        celebrateFromElement(clickedBtn);
+        celebrateFullscreen();
+        setStatus(praise[Math.floor(Math.random() * praise.length)]);
      } else {
        clickedBtn.classList.add('wrong');
      }
@@ -174,4 +226,5 @@
  }

  startBtn.addEventListener('click', start);
+  // no decor positioning
 })();
--- a/static/img/background.jpg
+++ b/static/img/background.jpg
--- a/static/index.html
+++ b/static/index.html
@@ -8,20 +8,23 @@
  </head>
  <body>
    <div class="app">
-      <h1>Тренажёр таблицы умножения</h1>
+      <h1 class="title">
+        Тренажёр таблицы умножения
+      </h1>
+      <p class="subtitle">Весёлая тренировка для 2 класса</p>
      <div class="top-bar">
-        <div class="timer">Время: <span id="time">60</span> с</div>
+        <div class="timer">⏱ Время: <span id="time">60</span> с</div>
        <div class="progress">Вопрос: <span id="progress">0/20</span></div>
        <button id="startBtn" class="start">Старт</button>
      </div>

-      <div id="status" class="status"></div>
-
      <div id="game" class="game hidden">
        <div id="problem" class="problem">— × —</div>
        <div id="options" class="options"></div>
      </div>

+      <div id="status" class="status"></div>
+
      <div id="result" class="result hidden"></div>
    </div>

--- a/static/style.css
+++ b/static/style.css
@@ -8,6 +8,12 @@
  --brand: #2563eb;
  --border: #e2e8f0;
  --shadow: 0 10px 20px rgba(2, 6, 23, 0.06), 0 2px 6px rgba(2, 6, 23, 0.05);
+  --yellow: #f59e0b;
+  --orange: #f97316;
+  --pink: #ec4899;
+  --purple: #8b5cf6;
+  --blue: #3b82f6;
+  --teal: #14b8a6;
 }

 * { box-sizing: border-box; }
@@ -15,35 +21,54 @@ html, body { height: 100%; }
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
-  background: radial-gradient(1200px 600px at 10% 0%, #ffffff 0%, #f8fafc 70%);
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, 'Comic Sans MS', 'Comic Neue', sans-serif;
+  background-image: url('/static/img/bg-math.svg'), linear-gradient(0deg, rgba(255,255,255,0.70), rgba(255,255,255,0.70)), url('/static/img/background.jpg');
+  background-repeat: repeat, no-repeat, no-repeat;
+  background-size: 160px 160px, 100% 100%, cover;
+  background-position: 0 0, center center, center center;
  color: var(--text);
 }

 .app { max-width: 900px; margin: 0 auto; padding: 24px; }

-h1 { margin: 8px 0 20px; font-size: 28px; font-weight: 800; color: #0f172a; }
+.title { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; font-size: 28px; font-weight: 900; color: #0f172a; }
+.mascot { width: 48px; height: 48px; }
+.subtitle { margin: 0 0 18px; color: #64748b; }

 .top-bar { display: flex; gap: 12px; align-items: center; }
 .timer, .progress { background: var(--panel); padding: 10px 14px; border-radius: 10px; color: var(--muted); border: 1px solid var(--border); box-shadow: var(--shadow); }
-.start { margin-left: auto; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: #0f172a; cursor: pointer; box-shadow: var(--shadow); }
+.start { margin-left: auto; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: #0f172a; cursor: pointer; box-shadow: var(--shadow); font-size: large;}
 .start:hover { background: #f1f5f9; }
 .start:disabled { opacity: 0.6; cursor: not-allowed; }

-.status { min-height: 22px; margin: 10px 0 8px; color: var(--muted); }
+.status { min-height: 22px; margin: 10px 0 8px; color: var(--muted); text-align: center; font-size: xx-large}

-.game { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
-.problem { text-align: center; font-size: 72px; font-weight: 900; letter-spacing: 1px; margin: 10px 0 24px; color: #0f172a; }
+.game { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); margin-top: 1em;}
+.problem { text-align: center; font-size: 72px; font-weight: 900; letter-spacing: 1px; margin: 10px 0 24px; color: #0f172a; background: linear-gradient(120deg, #fef3c7, #e0f2fe); border-radius: 14px; padding: 16px; border: 1px solid var(--border); }
 .options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

 .option-btn { font-size: 28px; font-weight: 800; padding: 22px; border-radius: 14px; border: 1px solid var(--border); background: #ffffff;
-  color: #0f172a; cursor: pointer; transition: transform 80ms ease, background 0.2s ease, box-shadow 0.2s ease; box-shadow: var(--shadow); }
-.option-btn:hover { transform: translateY(-1px); background: #f8fafc; }
+  color: #0f172a; cursor: pointer; transition: transform 80ms ease, background 0.2s ease, box-shadow 0.2s ease; box-shadow: var(--shadow); position: relative; overflow: hidden; }
+.option-btn:hover { transform: translateY(-1px); }
 .option-btn:active { transform: translateY(0); }
 .option-btn:disabled { opacity: 0.8; cursor: default; transform: none; }
 .option-btn.correct { outline: 2px solid var(--accent); box-shadow: 0 0 0 6px rgba(22,163,74,0.12), var(--shadow); animation: pop 280ms ease-out; }
 .option-btn.wrong { outline: 2px solid var(--danger); box-shadow: 0 0 0 6px rgba(220,38,38,0.12), var(--shadow); animation: shake 300ms ease-in-out; }

+/* Fun color variants */
+.option-btn.c-yellow { background: linear-gradient(180deg, #fff7ed, #fffbeb); border-color: #fde68a; }
+.option-btn.c-orange { background: linear-gradient(180deg, #fff1ec, #fff7ed); border-color: #fdba74; }
+.option-btn.c-pink { background: linear-gradient(180deg, #fff0f6, #fdf2f8); border-color: #f9a8d4; }
+.option-btn.c-purple { background: linear-gradient(180deg, #f5f3ff, #f3e8ff); border-color: #c4b5fd; }
+.option-btn.c-blue { background: linear-gradient(180deg, #eff6ff, #e0f2fe); border-color: #93c5fd; }
+.option-btn.c-teal { background: linear-gradient(180deg, #ecfeff, #e6fffb); border-color: #99f6e4; }
+.option-btn.c-yellow:hover { background: linear-gradient(180deg, #fff3d6, #fff3da); }
+.option-btn.c-orange:hover { background: linear-gradient(180deg, #ffe8e1, #ffefe6); }
+.option-btn.c-pink:hover { background: linear-gradient(180deg, #ffe7f0, #ffe9f3); }
+.option-btn.c-purple:hover { background: linear-gradient(180deg, #efeaff, #eee4ff); }
+.option-btn.c-blue:hover { background: linear-gradient(180deg, #e7f0ff, #d9ecfb); }
+.option-btn.c-teal:hover { background: linear-gradient(180deg, #e6fcff, #e0fef7); }
+
 .result { margin-top: 18px; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
 .result .score { font-size: 20px; margin-bottom: 8px; }
 .again { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: #0f172a; cursor: pointer; box-shadow: var(--shadow); }
@@ -74,6 +99,16 @@ h1 { margin: 8px 0 20px; font-size: 28px; font-weight: 800; color: #0f172a; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
 }

+/* Full-screen flash for correct answer */
+.flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.65), rgba(255,255,255,0.0) 60%); animation: flashFade 520ms ease-out forwards; }
+@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }
+
+/* Decorative images */
+/* decorative assets removed */
+
+@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
+
@media (max-width: 640px) {
  .problem { font-size: 52px; }
  .option-btn { font-size: 22px; padding: 18px; }