Skip to content

Redesign start screen as Minimalist Elegant landing page #6

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 as Minimalist Elegant landing page #6

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
6b4a0d6
Initial plan
Copilot Apr 20, 2026
907a034
Redesign start_screen.html as Minimalist Elegant landing page
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
1 change: 1 addition & 0 deletions app/static/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
--text-dark: #1F2937;
--text-light: #FFFFFF;
--overlay-dark: rgba(0, 0, 0, 0.5);
--bg-near-black: #0C0A14;
}

html,
Expand Down
138 changes: 117 additions & 21 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,128 @@
<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 style="min-height: 100%; background: var(--bg-near-black); color: var(--text-light); font-family: 'Fredoka', system-ui, sans-serif; overflow-y: auto;">

<!-- Hero Section -->
<section style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 3rem 1.5rem; text-align: center; animation: elegantFadeIn 1s ease-out forwards;">
<!-- Thin rule above title -->
<div style="width: 3rem; height: 1px; background: var(--accent-gold); margin: 0 auto 2.5rem; opacity: 0.7;"></div>

<p class="geom-bold" style="font-size: 0.75rem; letter-spacing: 0.35em; color: var(--accent-teal); text-transform: uppercase; margin-bottom: 1.25rem; opacity: 0.85;">A Social Icebreaker Game</p>

<h1 class="serif-display" style="font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1.05; letter-spacing: 0.04em; margin-bottom: 0.15em;">
<span style="color: var(--text-light);">BOLLYWOOD</span>
</h1>
<h1 class="serif-display" style="font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1.05; letter-spacing: 0.04em; color: var(--accent-gold); margin-bottom: 2rem;">BINGO</h1>

<p style="font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.6); max-width: 28rem; margin: 0 auto 3rem; font-style: italic;">
Mingle, match, and celebrate — one square at a time.
</p>

<!-- CTA button -->
<button
class="hero-cta"
hx-post="/start"
hx-target="#game-container"
hx-swap="outerHTML"
style="background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 3rem; border-radius: 0.25rem; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;">
BEGIN THE SHOW
</button>

<!-- Subtle scroll hint -->
<div aria-hidden="true" style="position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.375rem; opacity: 0.35;">
<span style="font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;">scroll</span>
<div style="width: 1px; height: 1.5rem; background: rgba(255,255,255,0.4);"></div>
</div>
</section>

<!-- Why Section -->
<section style="padding: 5rem 1.5rem; max-width: 52rem; margin: 0 auto;">
<h2 class="serif-title" style="text-align: center; font-size: 1.5rem; color: rgba(255,255,255,0.9); margin-bottom: 3.5rem; letter-spacing: 0.02em;">Why You'll Love It</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem;">

<div style="padding: 1.75rem; border: 1px solid rgba(255,255,255,0.08); border-top: 2px solid var(--primary-magenta); border-radius: 0.25rem;">
<p class="geom-bold" style="font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--primary-magenta); margin-bottom: 0.75rem;">Connect</p>
<p class="serif-title" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem;">Break the Ice</p>
<p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5);">Discover fellow cinema lovers and start conversations that actually matter.</p>
</div>

<div style="padding: 1.75rem; border: 1px solid rgba(255,255,255,0.08); border-top: 2px solid var(--accent-teal); border-radius: 0.25rem;">
<p class="geom-bold" style="font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-teal); margin-bottom: 0.75rem;">Play</p>
<p class="serif-title" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem;">Simple Mechanics</p>
<p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5);">No setup, no scorekeeping. Just mingle, find matches, and mark your card.</p>
</div>

<div style="padding: 1.75rem; border: 1px solid rgba(255,255,255,0.08); border-top: 2px solid var(--accent-gold); border-radius: 0.25rem;">
<p class="geom-bold" style="font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 0.75rem;">Celebrate</p>
<p class="serif-title" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem;">Win Together</p>
<p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5);">Five in a row and the room erupts. Every game ends in shared joy.</p>
</div>

</div>
</section>

<!-- Divider -->
<div style="max-width: 52rem; margin: 0 auto 5rem; padding: 0 1.5rem;">
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);"></div>
</div>

<!-- How It Works Section -->
<section style="padding: 0 1.5rem 5rem; max-width: 38rem; margin: 0 auto;">
<h2 class="serif-title" style="text-align: center; font-size: 1.5rem; color: rgba(255,255,255,0.9); margin-bottom: 3.5rem; letter-spacing: 0.02em;">How to Play</h2>

<ol style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2rem;">
<li style="display: flex; gap: 1.5rem; align-items: flex-start;">
<span class="serif-display" style="font-size: 2.5rem; line-height: 1; color: rgba(255,255,255,0.12); flex-shrink: 0; width: 2.5rem; text-align: right;">1</span>
<div style="padding-top: 0.25rem;">
<p class="geom-bold" style="font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-bottom: 0.3rem;">Start your card</p>
<p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.45);">Tap the button and receive your unique 5×5 bingo card filled with social questions.</p>
</div>
</li>
<li style="display: flex; gap: 1.5rem; align-items: flex-start;">
<span class="serif-display" style="font-size: 2.5rem; line-height: 1; color: rgba(255,255,255,0.12); flex-shrink: 0; width: 2.5rem; text-align: right;">2</span>
<div style="padding-top: 0.25rem;">
<p class="geom-bold" style="font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-bottom: 0.3rem;">Find people who match</p>
<p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.45);">Mingle with the room. When someone fits a square, tap it to mark it.</p>
</div>
</li>
<li style="display: flex; gap: 1.5rem; align-items: flex-start;">
<span class="serif-display" style="font-size: 2.5rem; line-height: 1; color: rgba(255,255,255,0.12); flex-shrink: 0; width: 2.5rem; text-align: right;">3</span>
<div style="padding-top: 0.25rem;">
<p class="geom-bold" style="font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-bottom: 0.3rem;">Get five in a row</p>
<p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.45);">Horizontal, vertical, or diagonal — first to five wins the show!</p>
</div>
</li>
</ol>
</section>

<!-- Start button with glow and gradient -->
<!-- Final CTA Section -->
<section style="text-align: center; padding: 5rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06);">
<div style="width: 3rem; height: 1px; background: var(--accent-gold); margin: 0 auto 2.5rem; opacity: 0.5;"></div>
<h2 class="serif-title" style="font-size: 1.25rem; color: rgba(255,255,255,0.85); margin-bottom: 0.75rem; letter-spacing: 0.02em;">Ready to play?</h2>
<p style="font-size: 0.85rem; color: rgba(255,255,255,0.4); margin-bottom: 2.5rem; font-style: italic;">Your card is waiting.</p>
<button
class="final-cta"
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;">
style="background: var(--accent-gold); border: none; color: var(--bg-near-black); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 3rem; border-radius: 0.25rem; cursor: pointer; transition: opacity 0.2s ease, box-shadow 0.2s ease;">
🎬 BEGIN THE SHOW 🎬
</button>
</div>
</section>

</div>

<style>
@keyframes elegantFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-cta:hover {
background: rgba(252, 211, 77, 0.1) !important;
box-shadow: 0 0 24px rgba(252, 211, 77, 0.18);
}
.final-cta:hover {
opacity: 0.85;
box-shadow: 0 4px 20px rgba(252, 211, 77, 0.35);
}
</style>
</div>