Hot!: Boredom V2 - The Best Educational Games For School Students!
grid.innerHTML = filteredGames.map((game, index) => ` <div class="game-card card p-6 animate-in delay-$(index % 6) + 1" onclick="openGame('$game.id')"> <div class="flex items-start justify-between mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, $game.color22, $game.color44)"> <div style="color: $game.color">$game.icon</div> </div> <span class="tag $game.tagClass">$game.tag</span> </div> <h3 class="text-xl font-bold mb-2">$game.title</h3> <p class="text-[var(--muted)] text-sm mb-4">$game.description</p> <div class="flex items-center justify-between text-sm"> <span class="text-[var(--muted)]">$game.difficulty</span> <span class="text-[var(--muted)]">$game.players playing</span> </div> </div> `).join('');
// Filter buttons function setupFilterButtons() document.querySelectorAll('.filter-btn').forEach(btn => btn.addEventListener('click', () => document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active', 'bg-[var(--accent)]', 'text-[var(--bg)]'); b.classList.add('bg-[var(--bg-secondary)]', 'text-[var(--muted)]'); ); btn.classList.add('active', 'bg-[var(--accent)]', 'text-[var(--bg)]'); btn.classList.remove('bg-[var(--bg-secondary)]', 'text-[var(--muted)]'); renderGames(btn.dataset.filter); ); ); boredom v2 - the best educational games for school students!
That flips boredom into curiosity. And curiosity, unlike entertainment, never runs out of battery. grid.innerHTML = filteredGames.map((game
.progress-ring transform: rotate(-90deg); div class="flex items-start justify-between mb-4">
</style> </head> <body> <div class="bg-pattern"></div> <div class="grid-overlay"></div>
<!-- Header --> <header class="relative z-10 px-6 py-4"> <nav class="max-w-7xl mx-auto flex items-center justify-between"> <div class="flex items-center gap-3 animate-in"> <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--tertiary)] flex items-center justify-center"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-[var(--bg)]"> <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon> <line x1="12" y1="22" x2="12" y2="15.5"></line> <polyline points="22 8.5 12 15.5 2 8.5"></polyline> </svg> </div> <span class="font-bold text-xl tracking-tight" style="font-family: 'Space Grotesk'">boredom<span class="text-[var(--muted)]">.v2</span></span> </div> <div class="flex items-center gap-4 animate-in delay-1"> <div class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--bg-secondary)] border border-[var(--border)]"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> <span class="font-semibold text-sm" id="totalPoints">0</span> </div> <button class="btn-secondary text-sm" onclick="showStats()">My Progress</button> </div> </nav> </header>