From 6f5ed074ca48b77c2a8e2516d3d31eaf18060920 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 20 Apr 2026 23:11:40 +0000 Subject: [PATCH 1/3] Initial plan From 08481c806a08eba1111e55adaa329f6eeda36c6f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 20 Apr 2026 23:16:07 +0000 Subject: [PATCH 2/3] redesign start_screen.html to theatrical maximalist cinema poster style Agent-Logs-Url: https://github.com/prashantchahar/my-soc-ops-python/sessions/903e866a-fdee-4ad8-ba2d-8aeccc09317d Co-authored-by: prashantchahar <19215720+prashantchahar@users.noreply.github.com> --- app/static/css/app.css | 309 ++++++++++++++++ app/templates/components/start_screen.html | 389 +++++++++++++++++++-- tests/test_api.py | 4 +- 3 files changed, 672 insertions(+), 30 deletions(-) diff --git a/app/static/css/app.css b/app/static/css/app.css index 862928f..47a6d6f 100644 --- a/app/static/css/app.css +++ b/app/static/css/app.css @@ -309,3 +309,312 @@ button:disabled { .btn-glow:active { transform: scale(0.98); } + +/* ===== MAXIMALIST CINEMA POSTER ANIMATIONS ===== */ + +@keyframes float-up-down { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-12px); } +} + +@keyframes float-side { + 0%, 100% { transform: translateX(0px) rotate(0deg); } + 50% { transform: translateX(8px) rotate(5deg); } +} + +@keyframes slow-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +@keyframes slow-spin-reverse { + from { transform: rotate(360deg); } + to { transform: rotate(0deg); } +} + +@keyframes fadeInDown { + 0% { opacity: 0; transform: translateY(-30px); } + 100% { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeInUp { + 0% { opacity: 0; transform: translateY(30px); } + 100% { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeInLeft { + 0% { opacity: 0; transform: translateX(-30px); } + 100% { opacity: 1; transform: translateX(0); } +} + +@keyframes fadeInRight { + 0% { opacity: 0; transform: translateX(30px); } + 100% { opacity: 1; transform: translateX(0); } +} + +@keyframes pulse-glow { + 0%, 100% { + box-shadow: 0 0 10px rgba(217, 70, 239, 0.4), 0 0 20px rgba(217, 70, 239, 0.2); + } + 50% { + box-shadow: 0 0 25px rgba(217, 70, 239, 0.8), 0 0 50px rgba(217, 70, 239, 0.5), 0 0 80px rgba(255, 107, 53, 0.3); + } +} + +@keyframes pulse-gold-glow { + 0%, 100% { + box-shadow: 0 0 10px rgba(252, 211, 77, 0.4), 0 0 20px rgba(252, 211, 77, 0.2); + } + 50% { + box-shadow: 0 0 25px rgba(252, 211, 77, 0.8), 0 0 50px rgba(252, 211, 77, 0.5), 0 0 80px rgba(249, 115, 22, 0.3); + } +} + +@keyframes title-flicker { + 0%, 90%, 100% { opacity: 1; } + 92% { opacity: 0.85; } + 94% { opacity: 1; } + 96% { opacity: 0.9; } + 98% { opacity: 1; } +} + +@keyframes film-scroll { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +@keyframes card-hover-float { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-4px) scale(1.01); } +} + +@keyframes star-twinkle { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(0.85); } +} + +@keyframes grain-noise { + 0%, 100% { transform: translate(0, 0); } + 10% { transform: translate(-1%, -1%); } + 20% { transform: translate(1%, 1%); } + 30% { transform: translate(-1%, 1%); } + 40% { transform: translate(1%, -1%); } + 50% { transform: translate(-2%, 0); } + 60% { transform: translate(2%, 0); } + 70% { transform: translate(0, -2%); } + 80% { transform: translate(0, 2%); } + 90% { transform: translate(-1%, -1%); } +} + +@keyframes border-dance { + 0%, 100% { border-color: var(--accent-gold); } + 33% { border-color: var(--primary-magenta); } + 66% { border-color: var(--accent-teal); } +} + +/* Animation utility classes */ +.animate-float { animation: float-up-down 3s ease-in-out infinite; } +.animate-float-side { animation: float-side 4s ease-in-out infinite; } +.animate-slow-spin { animation: slow-spin 8s linear infinite; } +.animate-slow-spin-reverse { animation: slow-spin-reverse 10s linear infinite; } +.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } +.animate-pulse-gold { animation: pulse-gold-glow 2s ease-in-out infinite; } +.animate-title-flicker { animation: title-flicker 5s ease-in-out infinite; } +.animate-film-scroll { animation: film-scroll 15s linear infinite; } +.animate-star-twinkle { animation: star-twinkle 1.5s ease-in-out infinite; } +.animate-border-dance { animation: border-dance 3s ease-in-out infinite; } +.animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; } +.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; } +.animate-fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; } +.animate-fade-in-right { animation: fadeInRight 0.8s ease-out forwards; } + +/* Hover lift effect for cards */ +.card-lift { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card-lift:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 16px 40px rgba(217, 70, 239, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4); +} + +/* Film strip border */ +.film-strip-border { + border-top: 8px solid var(--text-dark); + border-bottom: 8px solid var(--text-dark); + position: relative; + overflow: hidden; +} + +/* Grain overlay effect */ +.grain-overlay { + position: relative; +} + +.grain-overlay::after { + content: ''; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); + opacity: 0.04; + pointer-events: none; + animation: grain-noise 0.5s steps(1) infinite; + z-index: 0; +} + +/* Inner glow for sections */ +.section-inner-glow { + box-shadow: inset 0 0 60px rgba(217, 70, 239, 0.08), inset 0 0 120px rgba(6, 182, 212, 0.05); +} + +/* Ornamental divider */ +.ornate-divider { + display: flex; + align-items: center; + gap: 1rem; + color: var(--accent-gold); + font-size: 1.25rem; + letter-spacing: 0.3em; +} + +.ornate-divider::before, +.ornate-divider::after { + content: ''; + flex: 1; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); +} + +/* Testimonial gradient border */ +.testimonial-card { + position: relative; + border-radius: 0.75rem; + padding: 1px; + transition: transform 0.3s ease; +} + +.testimonial-card::before { + content: ''; + position: absolute; + inset: 0; + border-radius: 0.75rem; + padding: 2px; + background: linear-gradient(135deg, var(--accent-gold), var(--primary-magenta), var(--accent-teal)); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; +} + +.testimonial-card:hover { + transform: translateY(-6px); +} + +/* Step number circle */ +.step-circle { + width: 3rem; + height: 3rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Playfair Display', serif; + font-weight: 900; + font-size: 1.25rem; + flex-shrink: 0; +} + +/* Perforated film strip holes */ +.film-holes { + display: flex; + gap: 0.5rem; + justify-content: center; + padding: 0.5rem 1rem; + background: #111; +} + +.film-hole { + width: 1rem; + height: 1.5rem; + border-radius: 0.2rem; + background: #333; + border: 1px solid #444; +} + +/* Scrollable landing page layout */ +.landing-scroll { + overflow-y: auto; + overflow-x: hidden; + scroll-behavior: smooth; +} + +/* Section padding */ +.section-pad { + padding: 3rem 1.5rem; +} + +/* Feature card icon circle */ +.feature-icon { + width: 4rem; + height: 4rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.75rem; + margin: 0 auto 1rem; + transition: transform 0.3s ease; +} + +.card-lift:hover .feature-icon { + transform: scale(1.2) rotate(10deg); +} + +/* Intense CTA button */ +.btn-cta-intense { + position: relative; + overflow: hidden; + transition: all 0.3s ease; + letter-spacing: 0.1em; +} + +.btn-cta-intense::before { + content: ''; + position: absolute; + top: -50%; + left: -60%; + width: 40%; + height: 200%; + background: rgba(255, 255, 255, 0.25); + transform: skewX(-20deg); + transition: left 0.5s ease; +} + +.btn-cta-intense:hover::before { + left: 120%; +} + +.btn-cta-intense:hover { + box-shadow: 0 0 30px rgba(217, 70, 239, 0.8), 0 0 60px rgba(255, 107, 53, 0.5), 0 0 100px rgba(252, 211, 77, 0.3); + transform: scale(1.05); +} + +.btn-cta-intense:active { + transform: scale(0.97); +} + +/* Floating decorative elements */ +.deco-float-1 { animation: float-up-down 3s ease-in-out infinite; } +.deco-float-2 { animation: float-up-down 3.7s ease-in-out infinite 0.5s; } +.deco-float-3 { animation: float-up-down 4.2s ease-in-out infinite 1s; } +.deco-float-4 { animation: float-up-down 2.8s ease-in-out infinite 1.5s; } + +/* Poster style text shadow */ +.poster-title-shadow { + text-shadow: 3px 3px 0 rgba(0,0,0,0.5), 0 0 30px rgba(217, 70, 239, 0.5), 0 0 60px rgba(217, 70, 239, 0.3); +} + +.poster-gold-shadow { + text-shadow: 3px 3px 0 rgba(0,0,0,0.5), 0 0 30px rgba(252, 211, 77, 0.6), 0 0 60px rgba(252, 211, 77, 0.3); +} diff --git a/app/templates/components/start_screen.html b/app/templates/components/start_screen.html index 9fe766b..f2c7451 100644 --- a/app/templates/components/start_screen.html +++ b/app/templates/components/start_screen.html @@ -1,32 +1,365 @@
-
-
- -
โ—† โœฆ โ—ˆ
- -

BOLLYWOOD

-

BINGO

-

~ Masala Cinema ~

- - -
-

How to Play

-
    -
  • ๐ŸŽฌ Find people who match the questions
    • -
  • ๐ŸŽญ Tap a square when you find a match
    • -
  • โœจ Get 5 in a row to win the show!
    • -
-
- - - + +
+ + +
+ โœฆ + โ—† + โ—ˆ + โœฆ + โ—† + โ—ˆ
+ + +
+ + +
+
+
+
+
+
+
+ +
+
+ ๐ŸŽž๏ธ BOLLYWOOD BINGOโœฆ MASALA CINEMA๐ŸŽฌ 70s 80s MAGIC + ๐ŸŽญ SOCIAL GAMEโ—† FIND YOUR TRIBEโœฆ WIN THE SHOW + ๐ŸŽž๏ธ BOLLYWOOD BINGOโœฆ MASALA CINEMA๐ŸŽฌ 70s 80s MAGIC + ๐ŸŽญ SOCIAL GAMEโ—† FIND YOUR TRIBEโœฆ WIN THE SHOW +
+
+
+ + +
+ +
+ โ—ˆ + โœฆ + โ—ˆ +
+ + +
+ + A Social Experience Presents + +
+ + +

+ BOLLYWOOD + BINGO +

+ + +
+

+ ~ Masala Cinema เค•เคพ เคœเคพเคฆเฅ‚ ~ +

+
+ + +
+ โ˜… + โ˜… + โ˜… + โ˜… + โ˜… +
+ + +

+ The ultimate Bollywood-themed social bingo โ€” find people, make connections, and shout BINGO! +

+ + +
+ +
+ + +
+ โ†“   scroll to discover   โ†“ +
+
+ + +
+
+
+ โ˜… RATED SUPER HIT โ˜…๐ŸŽž๏ธ COLOR PRODUCTIONโ—† PANAVISION + ๐ŸŽฌ MASALA ENTERTAINMENTโœฆ NOW PLAYINGโ—ˆ EXCLUSIVE + โ˜… RATED SUPER HIT โ˜…๐ŸŽž๏ธ COLOR PRODUCTIONโ—† PANAVISION + ๐ŸŽฌ MASALA ENTERTAINMENTโœฆ NOW PLAYINGโ—ˆ EXCLUSIVE +
+
+
+
+
+ + +
+ + +
+
โ—† โœฆ โ—ˆ
+

CINEMA MAGIC

+

โœฆ WHAT MAKES THIS SPECIAL โœฆ

+
โ—ˆ โœฆ โ—†
+
+ + +
+ + +
+
+ ๐ŸŽฌ +
+

Cinema Magic

+

+ Immerse in the golden era of 70s & 80s Bollywood. Every square is a filmy adventure waiting to unfold. +

+
โ—† โœฆ โ—†
+
+ + +
+
+ ๐Ÿค +
+

Quick Connections

+

+ Break the ice instantly! Find people who share your Bollywood memories and start real conversations. +

+
โ—ˆ โœฆ โ—ˆ
+
+ + +
+
+ โšก +
+

No Setup

+

+ Tap once, play instantly. No accounts, no downloads, no drama โ€” except the Bollywood kind! +

+
โœฆ โ—† โœฆ
+
+
+
+ + +
+ + +
+
โœฆ โ—ˆ โœฆ
+

HOW IT WORKS

+

โ—† YOUR FOUR-ACT ADVENTURE โ—†

+
โœฆ โ—ˆ โœฆ
+
+ + +
+ + +
+
1
+
+

Enter the Show

+

Tap BEGIN THE SHOW to receive your unique 5ร—5 bingo card, freshly generated just for you.

+
+
+ + +
+
2
+
+

Find the People

+

Mingle, chat, and find real people who match the Bollywood-flavored prompts on your card.

+
+
+ + +
+
3
+
+

Mark the Square

+

Tap any square once you've found your match โ€” it lights up in a gorgeous Bollywood glow!

+
+
+ + +
+
4
+
+

Shout BINGO!

+

Get 5 in a row โ€” horizontally, vertically, or diagonally โ€” and claim your SUPER HIT victory!

+
+
+
+
+ + +
+ + +
+
โ—† โœฆ โ—†
+

PUBLIC REVIEWS

+

โœฆ THE AUDIENCE HAS SPOKEN โœฆ

+
โ—† โœฆ โ—†
+
+ + +
+ + +
+
+
โ˜…โ˜…โ˜…โ˜…โ˜…
+

+ "I found three people who knew Sholay's entire dialogue! Best icebreaker of the conference โ€” Filmy to the core!" +

+
+
๐ŸŽญ
+
+

Priya S.

+

Bollywood Enthusiast

+
+
+
+
+ + +
+
+
โ˜…โ˜…โ˜…โ˜…โ˜…
+

+ "My team bonding event went from awkward silences to Amitabh Bachchan impressions in 10 minutes. SUPER HIT!" +

+
+
๐ŸŽฌ
+
+

Arjun M.

+

Team Lead

+
+
+
+
+ + +
+
+
โ˜…โ˜…โ˜…โ˜…โ˜…
+

+ "Every card is different! Played it at three different events and discovered something new each time. Bahut acha!" +

+
+
โญ
+
+

Kavita R.

+

Event Organizer

+
+
+
+
+ + +
+
+
โ˜…โ˜…โ˜…โ˜…โ˜…
+

+ "My nani (who's 75) played it and won first! Said it reminded her of watching Dev Anand films. Tears of joy, I tell you!" +

+
+
๐ŸŒŸ
+
+

Rohit K.

+

Retro Cinema Fan

+
+
+
+
+
+
+ + +
+ + +
+ + โ—† + โ—† + โ—† + โ—† + + +
๐ŸŽž๏ธ
+

+ LIGHTS, CAMERA,
+ BINGO! +

+

+ Your 5ร—5 bingo card of social adventure awaits.
+ Find your people. Make your memories. +

+ + +
+ +

+ โ—† NO SIGN-UP REQUIRED โ—† FREE TO PLAY โ—† +

+
+
+ + +
+ ๐ŸŽž๏ธ   BOLLYWOOD BINGO   โœฆ   MASALA CINEMA EXPERIENCE   ๐ŸŽž๏ธ +
+
+ โ—† โœฆ โ—ˆ โœฆ โ—† +
+ + +
+
+
+
+
diff --git a/tests/test_api.py b/tests/test_api.py index f81b4c2..f341a47 100644 --- a/tests/test_api.py +++ b/tests/test_api.py @@ -18,7 +18,7 @@ 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 "HOW IT WORKS" in response.text def test_home_sets_session_cookie(self, client: TestClient): response = client.get("/") @@ -58,7 +58,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 "HOW IT WORKS" in response.text class TestDismissModal: From c58d40b135c6f4c8cbed9894ca5e2df844b78460 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 20 Apr 2026 23:17:54 +0000 Subject: [PATCH 3/3] fix code review feedback: CSS-only step hover, lang=hi, mask-composite Agent-Logs-Url: https://github.com/prashantchahar/my-soc-ops-python/sessions/903e866a-fdee-4ad8-ba2d-8aeccc09317d Co-authored-by: prashantchahar <19215720+prashantchahar@users.noreply.github.com> --- app/static/css/app.css | 12 +++++++++++- app/templates/components/start_screen.html | 10 +++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/app/static/css/app.css b/app/static/css/app.css index 47a6d6f..79db923 100644 --- a/app/static/css/app.css +++ b/app/static/css/app.css @@ -502,7 +502,7 @@ button:disabled { background: linear-gradient(135deg, var(--accent-gold), var(--primary-magenta), var(--accent-teal)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - -webkit-mask-composite: xor; + -webkit-mask-composite: exclude; mask-composite: exclude; pointer-events: none; } @@ -542,6 +542,16 @@ button:disabled { border: 1px solid #444; } +/* Step card hover slide effect */ +.step-card { + transition: transform 0.3s ease; +} + +.step-card:hover, +.step-card:focus-within { + transform: translateX(8px); +} + /* Scrollable landing page layout */ .landing-scroll { overflow-y: auto; diff --git a/app/templates/components/start_screen.html b/app/templates/components/start_screen.html index f2c7451..0bfe723 100644 --- a/app/templates/components/start_screen.html +++ b/app/templates/components/start_screen.html @@ -62,7 +62,7 @@

-

+

~ Masala Cinema เค•เคพ เคœเคพเคฆเฅ‚ ~

@@ -184,7 +184,7 @@

-
+
1

Enter the Show

@@ -193,7 +193,7 @@

+
2

Find the People

@@ -202,7 +202,7 @@

+
3

Mark the Square

@@ -211,7 +211,7 @@

+
4

Shout BINGO!