Landing page HTML/CSS prototype for twitch-2k-wager

forgejo_admin commented

2026-04-04 06:04:21 +00:00

Contributor

Type

Feature

Lineage

Cross-repo work from forgejo_admin/twitch-2k-wager#4.

Repo

forgejo_admin/pal-e-playground

User Story

As a Twitch viewer
I want a clear, mobile-friendly landing page that explains the wager and lets me sign in and pay
So that I understand what I'm getting into and feel confident entering my payment info

Context

Following the playground-first pipeline: HTML/CSS prototype in pal-e-playground, then promote to SvelteKit. The landing page is the first thing a viewer sees after clicking the link in Marcus's Twitch stream description. Three buy-in tiers ($15/$30/$45), Twitch login, dark theme, mobile-first.

File Targets

twitch-2k-wager/index.html — landing page
twitch-2k-wager/style.css — styles
twitch-2k-wager/game-status.html — game status page (post-payment)

Acceptance Criteria

Landing page communicates the wager concept in under 5 seconds of reading
Three buy-in tiers ($15/$30/$45) with pot amounts shown ($30/$60/$90)
"Login with Twitch" button prominent (purple, Twitch branding)
Payout timeline (2-3 business days) clearly stated
Win/lose outcomes explained before payment
Mobile-first (390px viewport)
Dark theme (matches Twitch vibe — dark bg, purple accents)
Game status page shows: payment confirmed / game in progress / result / payout status

Test Expectations

Visual review: open in browser at 390px width
Lucas approves design before promoting to SvelteKit

Constraints

Pure HTML + CSS, no JavaScript frameworks
No Tailwind — pure CSS vars + explicit styles
Dark theme, Twitch-inspired
Mobile-first (390px viewport)

Checklist

PR opened
No unrelated changes

forgejo_admin/twitch-2k-wager#4

### Type Feature ### Lineage Cross-repo work from `forgejo_admin/twitch-2k-wager#4`. ### Repo `forgejo_admin/pal-e-playground` ### User Story As a **Twitch viewer** I want **a clear, mobile-friendly landing page that explains the wager and lets me sign in and pay** So that **I understand what I'm getting into and feel confident entering my payment info** ### Context Following the playground-first pipeline: HTML/CSS prototype in pal-e-playground, then promote to SvelteKit. The landing page is the first thing a viewer sees after clicking the link in Marcus's Twitch stream description. Three buy-in tiers ($15/$30/$45), Twitch login, dark theme, mobile-first. ### File Targets - `twitch-2k-wager/index.html` — landing page - `twitch-2k-wager/style.css` — styles - `twitch-2k-wager/game-status.html` — game status page (post-payment) ### Acceptance Criteria - [ ] Landing page communicates the wager concept in under 5 seconds of reading - [ ] Three buy-in tiers ($15/$30/$45) with pot amounts shown ($30/$60/$90) - [ ] "Login with Twitch" button prominent (purple, Twitch branding) - [ ] Payout timeline (2-3 business days) clearly stated - [ ] Win/lose outcomes explained before payment - [ ] Mobile-first (390px viewport) - [ ] Dark theme (matches Twitch vibe — dark bg, purple accents) - [ ] Game status page shows: payment confirmed / game in progress / result / payout status ### Test Expectations - [ ] Visual review: open in browser at 390px width - [ ] Lucas approves design before promoting to SvelteKit ### Constraints - Pure HTML + CSS, no JavaScript frameworks - No Tailwind — pure CSS vars + explicit styles - Dark theme, Twitch-inspired - Mobile-first (390px viewport) ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `forgejo_admin/twitch-2k-wager#4`