From 3e97461a24c7dea0e7e2d1a2978202eae21ed7c2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 20 Apr 2026 23:12:11 +0000
Subject: [PATCH 1/2] Initial plan


From ae6ff9f9e53cba3fb81be98ecce0af784b2a40d7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 20 Apr 2026 23:19:13 +0000
Subject: [PATCH 2/2] redesign start_screen.html with interactive demo board
 preview

Agent-Logs-Url: https://github.com/prashantchahar/my-soc-ops-python/sessions/f7b26cef-f42c-4ddb-ab97-9c90713934df

Co-authored-by: prashantchahar <19215720+prashantchahar@users.noreply.github.com>
---
 app/templates/components/start_screen.html | 180 ++++++++++++++++++---
 tests/test_api.py                          |   5 +-
 2 files changed, 163 insertions(+), 22 deletions(-)

diff --git a/app/templates/components/start_screen.html b/app/templates/components/start_screen.html
index 9fe766b..17330e4 100644
--- a/app/templates/components/start_screen.html
+++ b/app/templates/components/start_screen.html
@@ -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>
diff --git a/tests/test_api.py b/tests/test_api.py
index f81b4c2..68abbce 100644
--- a/tests/test_api.py
+++ b/tests/test_api.py
@@ -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("/")
@@ -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: