Skip to content

Commit 2b9a98f

Browse files
committed
feat(site): redesign of the site improving UI/UX
Closes #19
1 parent 124ccce commit 2b9a98f

5 files changed

Lines changed: 173 additions & 57 deletions

File tree

site/about.html

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,31 @@
3737
<nav
3838
class="w-full bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-600 shadow-sm dark:shadow-md dark:ring-1 dark:ring-white/5 mb-8">
3939
<div class="container mx-auto px-4 sm:px-6 lg:px-8 xl:px-12">
40-
<div class="flex items-center justify-center space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8 py-4">
41-
<a href="index.html"
42-
class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">BalatroBench</a>
43-
<a href="community.html"
44-
class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">Community</a>
45-
<a href="about.html" aria-current="page"
46-
class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 bg-zinc-100 text-zinc-700 dark:bg-zinc-700 dark:text-white rounded-lg font-medium text-sm transition-all border-2 border-zinc-300 dark:border-zinc-600">About</a>
40+
<div class="flex flex-col lg:flex-row items-center lg:justify-between py-3 gap-4 lg:gap-0">
41+
<!-- Nav links -->
42+
<div class="flex items-center justify-center space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8">
43+
<a href="index.html"
44+
class="relative inline-flex items-center justify-center h-9 px-3 sm:px-4 text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white font-medium text-base transition-colors after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-zinc-500 dark:after:bg-zinc-400 after:rounded-full after:scale-x-0 hover:after:scale-x-100 after:origin-center after:transition-transform after:duration-200">BalatroBench</a>
45+
<a href="community.html"
46+
class="relative inline-flex items-center justify-center h-9 px-3 sm:px-4 text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white font-medium text-base transition-colors after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-zinc-500 dark:after:bg-zinc-400 after:rounded-full after:scale-x-0 hover:after:scale-x-100 after:origin-center after:transition-transform after:duration-200">Community</a>
47+
<a href="about.html" aria-current="page"
48+
class="relative inline-flex items-center justify-center h-9 px-3 sm:px-4 text-zinc-500 dark:text-zinc-400 font-medium text-base after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-zinc-500 dark:after:bg-zinc-400 after:rounded-full">About</a>
49+
</div>
50+
<!-- Social icons -->
51+
<div class="flex items-center space-x-4">
52+
<a href="https://github.com/coder/balatrobench" target="_blank" rel="noopener"
53+
class="p-2 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-700 transition-colors">
54+
<svg fill="currentColor" class="w-6 h-6"><use href="icons.svg#icon-github"></use></svg>
55+
</a>
56+
<a href="https://www.twitch.tv/S1M0N38" target="_blank" rel="noopener"
57+
class="p-2 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-700 transition-colors">
58+
<svg fill="currentColor" class="w-6 h-6"><use href="icons.svg#icon-twitch"></use></svg>
59+
</a>
60+
<a href="https://discord.gg/SBaRyVDmFg" target="_blank" rel="noopener"
61+
class="p-2 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-700 transition-colors">
62+
<svg fill="currentColor" class="w-6 h-6"><use href="icons.svg#icon-discord"></use></svg>
63+
</a>
64+
</div>
4765
</div>
4866
</div>
4967
</nav>

site/community.html

Lines changed: 76 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<link rel="preconnect" href="https://balatrobench.b-cdn.net" crossorigin>
2121
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
2222
<link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin>
23-
<link rel="preconnect" href="https://player.twitch.tv" crossorigin>
2423
<script src="https://cdn.tailwindcss.com"></script>
2524
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2625
<script src="config.js"></script>
@@ -36,45 +35,44 @@
3635
<nav
3736
class="w-full bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-600 shadow-sm dark:shadow-md dark:ring-1 dark:ring-white/5 mb-8">
3837
<div class="container mx-auto px-4 sm:px-6 lg:px-8 xl:px-12">
39-
<div class="flex items-center justify-center space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8 py-4">
40-
<a href="index.html"
41-
class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">BalatroBench</a>
42-
<a href="community.html" aria-current="page"
43-
class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 bg-zinc-100 text-zinc-600 dark:bg-zinc-700 dark:text-white rounded-lg font-medium text-sm transition-all border-2 border-zinc-300 dark:border-zinc-600">Community</a>
44-
<a href="about.html"
45-
class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">About</a>
38+
<div class="flex flex-col lg:flex-row items-center lg:justify-between py-3 gap-4 lg:gap-0">
39+
<!-- Nav links -->
40+
<div class="flex items-center justify-center space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8">
41+
<a href="index.html"
42+
class="relative inline-flex items-center justify-center h-9 px-3 sm:px-4 text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white font-medium text-base transition-colors after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-zinc-500 dark:after:bg-zinc-400 after:rounded-full after:scale-x-0 hover:after:scale-x-100 after:origin-center after:transition-transform after:duration-200">BalatroBench</a>
43+
<a href="community.html" aria-current="page"
44+
class="relative inline-flex items-center justify-center h-9 px-3 sm:px-4 text-zinc-500 dark:text-zinc-400 font-medium text-base after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-zinc-500 dark:after:bg-zinc-400 after:rounded-full">Community</a>
45+
<a href="about.html"
46+
class="relative inline-flex items-center justify-center h-9 px-3 sm:px-4 text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white font-medium text-base transition-colors after:absolute after:bottom-0 after:left-2 after:right-2 after:h-0.5 after:bg-zinc-500 dark:after:bg-zinc-400 after:rounded-full after:scale-x-0 hover:after:scale-x-100 after:origin-center after:transition-transform after:duration-200">About</a>
47+
</div>
48+
<!-- Social icons -->
49+
<div class="flex items-center space-x-4">
50+
<a href="https://github.com/coder/balatrobench" target="_blank" rel="noopener"
51+
class="p-2 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-700 transition-colors">
52+
<svg fill="currentColor" class="w-6 h-6"><use href="icons.svg#icon-github"></use></svg>
53+
</a>
54+
<a href="https://www.twitch.tv/S1M0N38" target="_blank" rel="noopener"
55+
class="p-2 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-700 transition-colors">
56+
<svg fill="currentColor" class="w-6 h-6"><use href="icons.svg#icon-twitch"></use></svg>
57+
</a>
58+
<a href="https://discord.gg/SBaRyVDmFg" target="_blank" rel="noopener"
59+
class="p-2 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-700 transition-colors">
60+
<svg fill="currentColor" class="w-6 h-6"><use href="icons.svg#icon-discord"></use></svg>
61+
</a>
62+
</div>
4663
</div>
4764
</div>
4865
</nav>
4966

50-
<!-- Action Buttons -->
51-
<div class="container mx-auto px-4 mt-12">
52-
<div class="flex flex-row justify-center items-center gap-4">
53-
<a href="https://discord.gg/SBaRyVDmFg" target="_blank" rel="noopener"
54-
class="px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-600 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white dark:hover:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
55-
<svg fill="currentColor" class="w-5 h-5">
56-
<use href="icons.svg#icon-discord"></use>
57-
</svg>
58-
</a>
59-
<a href="https://coder.github.io/balatrollm/strategies/" target="_blank" rel="noopener"
60-
class="px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-600 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white dark:hover:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
61-
<span>Contribute Your Strategy</span>
62-
<svg fill="currentColor" class="w-4 h-4">
63-
<use href="icons.svg#icon-arrow-top-right"></use>
64-
</svg>
65-
</a>
66-
</div>
67-
</div>
68-
69-
<!-- Live Stream Section -->
67+
<!-- Intro Section -->
7068
<div class="container mx-auto px-4 mt-8">
71-
<div class="max-w-4xl mx-auto">
72-
<div class="relative w-full overflow-hidden rounded-lg shadow-lg dark:shadow-2xl dark:ring-1 dark:ring-white/5"
73-
style="padding-bottom: 56.25%">
74-
<iframe src="https://player.twitch.tv/?channel=S1M0N38&parent=balatrobench.com&parent=localhost"
75-
title="S1M0N38 Twitch Stream" class="absolute top-0 left-0 w-full h-full" allow="fullscreen" allowfullscreen>
76-
</iframe>
77-
</div>
69+
<div class="max-w-2xl mx-auto text-center">
70+
<p class="text-zinc-600 dark:text-zinc-400">
71+
Write your own strategy and compete on the community leaderboard.<br>
72+
Join <a href="https://discord.gg/SBaRyVDmFg" target="_blank" rel="noopener"
73+
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Discord</a>
74+
to share ideas about this (or your related) project.
75+
</p>
7876
</div>
7977
</div>
8078

@@ -255,6 +253,49 @@
255253
</div>
256254
</div>
257255

256+
<!-- Community Leaderboard Rules -->
257+
<div class="container mx-auto px-4 mt-12">
258+
<div class="max-w-4xl mx-auto">
259+
<div class="bg-white dark:bg-zinc-800 rounded-lg shadow-lg dark:shadow-2xl dark:ring-1 dark:ring-white/5 p-8">
260+
<h2 class="text-2xl font-bold text-zinc-800 dark:text-zinc-100 mb-4">Rules</h2>
261+
<p class="text-zinc-600 dark:text-zinc-300 mb-6 leading-relaxed">
262+
All community strategies are evaluated under identical conditions to ensure fair comparison.
263+
</p>
264+
<ul class="text-zinc-600 dark:text-zinc-300 space-y-4 ml-3">
265+
<li><strong>Model:</strong> All strategies run on
266+
<code class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 rounded text-sm font-mono">openai/gpt-oss-20b</code>.
267+
This ensures the leaderboard measures strategy quality, not model capability.</li>
268+
<li><strong>Deck:</strong> RED deck is used for all runs. The RED deck grants +1 discard every round,
269+
giving strategies more flexibility to explore different card combinations.</li>
270+
<li><strong>Stake:</strong> WHITE stake (base difficulty) is used. No additional penalties or
271+
modifiers are applied, providing a consistent baseline for all strategies.</li>
272+
<li><strong>Seeds:</strong> Each strategy plays 15 games using 5 fixed seeds (3 runs per seed):
273+
<code class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 rounded text-sm font-mono">AAAAAAA</code>,
274+
<code class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 rounded text-sm font-mono">BBBBBBB</code>,
275+
<code class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 rounded text-sm font-mono">CCCCCCC</code>,
276+
<code class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 rounded text-sm font-mono">DDDDDDD</code>,
277+
<code class="px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 rounded text-sm font-mono">EEEEEEE</code>.
278+
Fixed seeds ensure reproducible results.</li>
279+
<li><strong>Ranking:</strong> Strategies are ranked by average final round reached (higher is better).
280+
A perfect game reaches round 32 (beating all 8 antes).</li>
281+
<li><strong>Updates:</strong> You can update your strategy at any time.
282+
The leaderboard always shows results from your latest submission.</li>
283+
</ul>
284+
</div>
285+
</div>
286+
</div>
287+
288+
<!-- Submit CTA -->
289+
<div class="container mx-auto px-4 mt-8">
290+
<div class="flex justify-center">
291+
<a href="https://coder.github.io/balatrollm/strategies/" target="_blank" rel="noopener"
292+
class="inline-flex items-center space-x-2 px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-600 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors">
293+
<span>Submit Your Strategy</span>
294+
<svg fill="currentColor" class="w-4 h-4"><use href="icons.svg#icon-arrow-top-right"></use></svg>
295+
</a>
296+
</div>
297+
</div>
298+
258299
<footer class="mt-12 py-6">
259300
<div class="container mx-auto px-4">
260301
<div class="flex items-center justify-center space-x-2 text-zinc-400 dark:text-zinc-500">

site/icons.svg

Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)