Skip to content

Redesign start screen with interactive demo board preview #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Redesign start screen with interactive demo board preview #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e97461
Initial plan
Copilot Apr 20, 2026
ae6ff9f
redesign start_screen.html with interactive demo board preview
Copilot Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 160 additions & 20 deletions app/templates/components/start_screen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,172 @@
<div id="game-container">
<div class="flex flex-col items-center justify-center min-h-full p-6" style="background: linear-gradient(135deg, #1F2937 0%, #2D1B4E 50%, #1F2937 100%);">
<div class="text-center max-w-sm animate-fade-up">
<!-- Decorative top element -->
<div class="text-4xl mb-4" style="animation: fadeInDown 1s ease-out; letter-spacing: 0.3em;">◆ ✦ ◈</div>

<h1 class="serif-display text-5xl" style="color: var(--primary-magenta); margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">BOLLYWOOD</h1>
<h1 class="serif-display text-5xl" style="color: var(--accent-gold); margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">BINGO</h1>
<p class="geom-bold text-2xl" style="color: var(--accent-teal); margin-bottom: 2rem; letter-spacing: 0.1em;">~ Masala Cinema ~</p>

<!-- Rules card with ornate border -->
<div class="rounded-lg p-6 mb-8 ornate-border-dashed" style="background: rgba(255, 255, 255, 0.95); border-color: var(--accent-gold); animation: fadeInUp 1.2s ease-out;">
<h2 class="serif-title text-2xl mb-3" style="color: var(--primary-magenta);">How to Play</h2>
<ul class="text-left text-gray-700 text-sm space-y-2">
<li>🎬 Find people who match the questions</li>
<li>🎭 Tap a square when you find a match</li>
<li>✨ Get 5 in a row to win the show!</li>
</ul>
<div class="flex flex-col min-h-full" style="background: linear-gradient(180deg, #0F0820 0%, #1F2937 40%, #2D1B4E 70%, #111827 100%);">

<!-- ══ SECTION 1: HERO ══ -->
<div class="text-center animate-fade-up" style="padding: 2rem 1.5rem 1.5rem;">
<div class="text-4xl mb-4" style="animation: fadeInDown 1s ease-out; letter-spacing: 0.3em; color: var(--accent-gold);">◆ ✦ ◈</div>
<h1 class="serif-display text-5xl" style="color: var(--primary-magenta); margin-bottom: 0.25rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">BOLLYWOOD</h1>
<h1 class="serif-display text-5xl" style="color: var(--accent-gold); margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">BINGO</h1>
<p class="geom-bold text-lg" style="color: var(--accent-teal); letter-spacing: 0.2em; margin-bottom: 0.25rem;">~ Masala Cinema ~</p>
<p class="text-sm" style="color: rgba(255,255,255,0.55); font-style: italic; margin-bottom: 1.75rem;">The social icebreaker game for Bollywood lovers</p>

<!-- 3-feature "Why" grid -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; max-width: 22rem; margin: 0 auto;">
<div class="rounded-lg ornate-border-dashed animate-fade-up" style="background: rgba(255,255,255,0.05); border-color: var(--primary-magenta); padding: 0.625rem 0.375rem; animation-delay: 0.2s;">
<div style="font-size: 1.5rem; margin-bottom: 0.25rem;">🎬</div>
<p class="geom-bold text-xs" style="color: var(--primary-magenta); margin-bottom: 0.125rem;">Find People</p>
<p class="text-xs" style="color: rgba(255,255,255,0.55); line-height: 1.3;">Match fellow Bollywood fans</p>
</div>
<div class="rounded-lg ornate-border-dashed animate-fade-up" style="background: rgba(255,255,255,0.05); border-color: var(--accent-teal); padding: 0.625rem 0.375rem; animation-delay: 0.35s;">
<div style="font-size: 1.5rem; margin-bottom: 0.25rem;">🎭</div>
<p class="geom-bold text-xs" style="color: var(--accent-teal); margin-bottom: 0.125rem;">Live Drama</p>
<p class="text-xs" style="color: rgba(255,255,255,0.55); line-height: 1.3;">Classic filmi moments alive</p>
</div>
<div class="rounded-lg ornate-border-dashed animate-fade-up" style="background: rgba(255,255,255,0.05); border-color: var(--accent-gold); padding: 0.625rem 0.375rem; animation-delay: 0.5s;">
<div style="font-size: 1.5rem; margin-bottom: 0.25rem;">✨</div>
<p class="geom-bold text-xs" style="color: var(--accent-gold); margin-bottom: 0.125rem;">Win the Show</p>
<p class="text-xs" style="color: rgba(255,255,255,0.55); line-height: 1.3;">5 in a row = Star!</p>
</div>
</div>
</div>

<!-- ══ SECTION 2: INTERACTIVE DEMO BOARD ══ -->
<div style="padding: 0 1rem 1.5rem; animation: fade-in-up 0.8s ease-out 0.3s both;">

<!-- Demo header badge -->
<div class="text-center" style="margin-bottom: 0.875rem;">
<span style="display: inline-block; background: linear-gradient(135deg, var(--primary-magenta-dark), var(--accent-deep-red)); border: 2px solid var(--accent-gold); border-radius: 2rem; padding: 0.25rem 1.25rem;">
<span class="geom-bold text-xs" style="color: var(--accent-gold); letter-spacing: 0.12em;">✦ LIVE PREVIEW ✦</span>
</span>
</div>
<h2 class="serif-title text-center" style="font-size: 1.375rem; color: var(--text-light); margin-bottom: 0.25rem;">Experience the Magic</h2>
<p class="text-sm text-center" style="color: var(--accent-teal); font-style: italic; font-family: 'Playfair Display', serif; margin-bottom: 1rem;">
Try clicking a few squares to see how it works!
</p>

<!-- Mini demo bingo board (static, no HTMX) -->
<div class="relative mx-auto" style="max-width: 26rem; padding: 1.25rem;">
<!-- Ornate frame -->
<div class="absolute inset-0" style="border: 3px dashed var(--accent-gold); border-radius: 0.75rem; pointer-events: none;"></div>
<!-- Corner flourishes -->
<div class="absolute" style="top:0.4rem;left:0.4rem;font-size:1.1rem;color:var(--accent-gold);opacity:0.85;">◆</div>
<div class="absolute" style="top:0.4rem;right:0.4rem;font-size:1.1rem;color:var(--accent-gold);opacity:0.85;">✦</div>
<div class="absolute" style="bottom:0.4rem;left:0.4rem;font-size:1.1rem;color:var(--accent-gold);opacity:0.85;">◈</div>
<div class="absolute" style="bottom:0.4rem;right:0.4rem;font-size:1.1rem;color:var(--accent-gold);opacity:0.85;">✦</div>

<div class="grid grid-cols-5 gap-1 relative" style="z-index:10;" id="demo-board">
<!-- Row 1 -->
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:0;">Loves 70s Bollywood hits</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:1;">Has seen a classic B&W film</button>
<button onclick="toggleDemo(this)" class="demo-sq demo-sq--marked animate-staggered" style="--index:2;">Knows filmi song lyrics</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:3;">Has a favourite Bollywood villain</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:4;">Owns ethnic Indian clothing</button>
<!-- Row 2 -->
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:5;">Can do a Bollywood dance move</button>
<button onclick="toggleDemo(this)" class="demo-sq demo-sq--marked animate-staggered" style="--index:6;">Been to a filmi themed party</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:7;">Can name the film Sholay</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:8;">Has Bollywood photos on phone</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:9;">Can name 3 Amitabh films</button>
<!-- Row 3 -->
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:10;">Introduced someone to Bollywood</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:11;">Knows 'Jai Ho' by heart</button>
<button class="demo-sq demo-sq--free animate-staggered" disabled style="--index:12;">⭐ FREE SPACE ⭐</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:13;">Rewatched a film 3+ times</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:14;">Can hum a Lata Mangeshkar song</button>
<!-- Row 4 -->
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:15;">Cried during a Bollywood scene</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:16;">Knows what masala film means</button>
<button onclick="toggleDemo(this)" class="demo-sq demo-sq--marked animate-staggered" style="--index:17;">Watched Bollywood with subtitles</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:18;">Loves the monsoon rain song trope</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:19;">Can identify a famous filmi dance</button>
<!-- Row 5 -->
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:20;">Grew up watching Doordarshan</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:21;">A Bollywood film in their top 5</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:22;">Quoted a Bollywood film today</button>
<button onclick="toggleDemo(this)" class="demo-sq demo-sq--marked animate-staggered" style="--index:23;">Knows a song from every decade</button>
<button onclick="toggleDemo(this)" class="demo-sq animate-staggered" style="--index:24;">Has dressed up Bollywood-style</button>
</div>
</div>

<p class="text-center text-xs" style="color: rgba(255,255,255,0.45); font-style: italic; margin-top: 0.625rem;">
☝️ Interactive preview — click any square above!
</p>
</div>

<!-- ══ SECTION 3: FINAL CTA ══ -->
<div class="text-center" style="padding: 0 1.5rem 2.5rem; animation: fade-in-up 0.8s ease-out 0.6s both;">
<div class="ornate-border-dashed rounded-lg" style="background: rgba(255,255,255,0.05); border-color: var(--accent-gold); padding: 1.125rem; margin-bottom: 1.25rem;">
<p class="serif-title" style="font-size: 1.125rem; color: var(--accent-gold); margin-bottom: 0.375rem;">Ready for the Full Show?</p>
<p class="text-sm" style="color: rgba(255,255,255,0.7); line-height: 1.5;">Gather your squad, tap BEGIN, and discover who's the ultimate Bollywood fan!</p>
</div>

<!-- Start button with glow and gradient -->
<button
hx-post="/start"
hx-target="#game-container"
hx-swap="outerHTML"
class="w-full text-white font-bold py-4 px-8 rounded-lg text-lg btn-glow"
style="background: linear-gradient(135deg, var(--primary-magenta), var(--accent-saffron)); box-shadow: 0 8px 20px rgba(217, 70, 239, 0.4); font-family: 'Fredoka', sans-serif; transition: all 0.3s ease;">
class="w-full text-white font-bold rounded-lg text-lg btn-glow"
style="background: linear-gradient(135deg, var(--primary-magenta), var(--accent-saffron)); box-shadow: 0 8px 20px rgba(217, 70, 239, 0.4); font-family: 'Fredoka', sans-serif; transition: all 0.3s ease; padding: 1rem 2rem; max-width: 22rem; margin: 0 auto; display: block;">
🎬 BEGIN THE SHOW 🎬
</button>
</div>
</div>

<!-- Demo board styles -->
<style>
.demo-sq {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
text-align: center;
border-radius: 0.375rem;
min-height: 54px;
font-size: 0.575rem;
line-height: 1.25;
font-weight: 700;
word-break: break-word;
hyphens: auto;
cursor: pointer;
background: rgba(255,255,255,0.1);
color: var(--text-light);
border: 2px solid var(--accent-gold);
transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
animation: staggered-scale-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: calc(var(--index) * 50ms);
}
.demo-sq:not(.demo-sq--free):not(.demo-sq--marked):hover {
background: rgba(255,255,255,0.18);
border-color: var(--primary-magenta);
transform: scale(1.06);
}
.demo-sq--marked {
background: linear-gradient(135deg, var(--primary-magenta), var(--accent-teal)) !important;
box-shadow: 0 0 12px rgba(6,182,212,0.5) !important;
color: var(--text-light) !important;
border: 2px solid var(--primary-magenta) !important;
animation: sparkle-pulse 1.5s ease-in-out infinite !important;
}
.demo-sq--free {
background: linear-gradient(135deg, var(--accent-orange), var(--accent-saffron)) !important;
color: var(--text-dark) !important;
border: 2px solid var(--accent-saffron) !important;
cursor: default !important;
font-family: 'Playfair Display', serif;
font-size: 0.6rem;
}
</style>

<!-- Demo board click handler -->
<script>
function toggleDemo(btn) {
const isMarked = btn.classList.toggle('demo-sq--marked');
if (isMarked) {
btn.style.animation = 'none';
void btn.offsetHeight; /* force reflow so the browser restarts the CSS animation from the beginning */
btn.style.animation = 'staggered-scale-up 0.35s cubic-bezier(0.34,1.56,0.64,1), sparkle-pulse 1.5s ease-in-out 0.35s infinite';
} else {
btn.style.animation = '';
}
}
</script>
</div>
5 changes: 3 additions & 2 deletions tests/test_api.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ def test_home_contains_start_screen(self, client: TestClient):
response = client.get("/")
assert "BOLLYWOOD" in response.text
assert "BEGIN THE SHOW" in response.text
assert "How to Play" in response.text
assert "Experience the Magic" in response.text
assert "LIVE PREVIEW" in response.text

def test_home_sets_session_cookie(self, client: TestClient):
response = client.get("/")
Expand Down Expand Up @@ -58,7 +59,7 @@ def test_reset_returns_start_screen(self, client: TestClient):
response = client.post("/reset")
assert response.status_code == 200
assert "BEGIN THE SHOW" in response.text
assert "How to Play" in response.text
assert "Experience the Magic" in response.text


class TestDismissModal:
Expand Down