bikulov/math
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More pretty

Browse Source
This commit is contained in:
Dmitry Bikulov
2025-09-11 23:12:39 +03:00
parent d1bb3559bb
commit ef0f55afaf
5 changed files with 108 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1 +1,2 @@
*.pyc *.pyc
static/.DS_Store

59
static/app.js
View File

@@ -8,6 +8,10 @@
const statusEl = document.getElementById('status'); const statusEl = document.getElementById('status');
const resultEl = document.getElementById('result'); const resultEl = document.getElementById('result');
const fxLayer = document.getElementById('fxLayer'); 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 sessionId = null;
let totalQuestions = 20; let totalQuestions = 20;
@@ -41,9 +45,10 @@
if (!q) return; if (!q) return;
problemEl.textContent = `${q.a} × ${q.b}`; problemEl.textContent = `${q.a} × ${q.b}`;
optionsEl.innerHTML = ''; 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'); const btn = document.createElement('button');
btn.className = 'option-btn'; btn.className = `option-btn ${colors[idx % colors.length]}`;
btn.textContent = String(value); btn.textContent = String(value);
btn.addEventListener('click', () => answer(value, btn)); btn.addEventListener('click', () => answer(value, btn));
optionsEl.appendChild(btn); optionsEl.appendChild(btn);
@@ -51,6 +56,15 @@
progressEl.textContent = `${q.index}/${totalQuestions}`; 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() { function stopTimer() {
if (countdown) { if (countdown) {
clearInterval(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) { async function answer(value, clickedBtn) {
if (!sessionId || inFlight) return; if (!sessionId || inFlight) return;
inFlight = true; inFlight = true;
@@ -147,7 +198,8 @@
// feedback // feedback
if (data.correct) { if (data.correct) {
clickedBtn.classList.add('correct'); clickedBtn.classList.add('correct');
celebrateFromElement(clickedBtn); celebrateFullscreen();
setStatus(praise[Math.floor(Math.random() * praise.length)]);
} else { } else {
clickedBtn.classList.add('wrong'); clickedBtn.classList.add('wrong');
} }
@@ -174,4 +226,5 @@
} }
startBtn.addEventListener('click', start); startBtn.addEventListener('click', start);
// no decor positioning
})(); })();

BIN
static/img/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 468 KiB

11
static/index.html
View File

@@ -8,20 +8,23 @@
</head> </head>
<body> <body>
<div class="app"> <div class="app">
<h1>Тренажёр таблицы умножения</h1> <h1 class="title">
Тренажёр таблицы умножения
</h1>
<p class="subtitle">Весёлая тренировка для 2 класса</p>
<div class="top-bar"> <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> <div class="progress">Вопрос: <span id="progress">0/20</span></div>
<button id="startBtn" class="start">Старт</button> <button id="startBtn" class="start">Старт</button>
</div> </div>
<div id="status" class="status"></div>
<div id="game" class="game hidden"> <div id="game" class="game hidden">
<div id="problem" class="problem">— × —</div> <div id="problem" class="problem">— × —</div>
<div id="options" class="options"></div> <div id="options" class="options"></div>
</div> </div>
<div id="status" class="status"></div>
<div id="result" class="result hidden"></div> <div id="result" class="result hidden"></div>
</div> </div>

53
static/style.css
View File

@@ -8,6 +8,12 @@
--brand: #2563eb; --brand: #2563eb;
--border: #e2e8f0; --border: #e2e8f0;
--shadow: 0 10px 20px rgba(2, 6, 23, 0.06), 0 2px 6px rgba(2, 6, 23, 0.05); --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; } * { box-sizing: border-box; }
@@ -15,35 +21,54 @@ html, body { height: 100%; }
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, 'Comic Sans MS', 'Comic Neue', sans-serif;
background: radial-gradient(1200px 600px at 10% 0%, #ffffff 0%, #f8fafc 70%); 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); color: var(--text);
} }
.app { max-width: 900px; margin: 0 auto; padding: 24px; } .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; } .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); } .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:hover { background: #f1f5f9; }
.start:disabled { opacity: 0.6; cursor: not-allowed; } .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); } .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; } .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; } .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; .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); } 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); background: #f8fafc; } .option-btn:hover { transform: translateY(-1px); }
.option-btn:active { transform: translateY(0); } .option-btn:active { transform: translateY(0); }
.option-btn:disabled { opacity: 0.8; cursor: default; transform: none; } .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.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; } .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 { 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; } .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); } .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)); } 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) { @media (max-width: 640px) {
.problem { font-size: 52px; } .problem { font-size: 52px; }
.option-btn { font-size: 22px; padding: 18px; } .option-btn { font-size: 22px; padding: 18px; }