ldraney/pal-e-playground

Archived

Fork 0

feat: twitch-2k-wager landing page prototype #13

Merged

forgejo_admin merged 1 commit from 12-landing-page-html-css-prototype-for-twit into main

2026-04-04 06:12:11 +00:00

forgejo_admin commented

2026-04-04 06:07:57 +00:00

Contributor

Summary

Dark-themed, mobile-first landing page and game status prototype for the PlayMe2K Twitch NBA 2K wagering platform. Twitch viewers click a link in Marcus's stream description, land here, sign in with Twitch, pick a wager tier, and pay to challenge him.

Changes

twitch-2k-wager/index.html -- Landing page with hero, Twitch login button, how-it-works steps, three buy-in tier cards ($15/$30/$45 with pot amounts), win/lose outcome cards, payout details box, and FAQ
twitch-2k-wager/style.css -- Full CSS with custom properties for theming, Twitch-inspired dark palette (#0e0e10 bg, #9147ff purple accents), mobile-first at 390px with responsive breakpoints at 768px and 1024px
twitch-2k-wager/game-status.html -- Post-payment status page with match card (players, pot), progress tracker (payment confirmed, queue position, game in progress, result, payout), and three visual variants (in-progress active state, win result, lose result) as HTML comment blocks for easy review

Design Decisions

Twitch color palette: #0e0e10 background, #9147ff purple, #18181b surfaces -- matches Twitch's actual dark mode
Bronze/Silver/Gold tier naming with color-coded icons -- communicates escalation without being generic
"Most Popular" tag on Silver tier -- anchoring the middle option as the default choice
Progress tracker with dot+line pattern -- familiar status UI, works for all three game states
Win/lose variants as HTML comments in game-status.html -- reviewer can uncomment to see each state without needing JS
Pulsing live dot and glowing active states -- subtle motion that says "live" without being distracting

Test Plan

Open twitch-2k-wager/index.html in browser at 390px width (mobile-first viewport)
Verify all three tier cards show correct amounts ($15/$30, $30/$60, $45/$90)
Verify Twitch login button is prominent purple with Twitch SVG icon
Open twitch-2k-wager/game-status.html to see in-progress state
Uncomment win variant (line ~106) and lose variant (line ~152) to review those states
Check at 768px and 1024px for responsive behavior

Review Checklist

Files limited to twitch-2k-wager/ directory only
No JavaScript -- pure HTML + CSS
No Tailwind -- CSS custom properties throughout
Mobile-first (390px primary viewport)
Dark theme with Twitch branding
No unrelated changes

Cross-repo spec: forgejo_admin/twitch-2k-wager#4

Closes #12

## Summary Dark-themed, mobile-first landing page and game status prototype for the PlayMe2K Twitch NBA 2K wagering platform. Twitch viewers click a link in Marcus's stream description, land here, sign in with Twitch, pick a wager tier, and pay to challenge him. ## Changes - `twitch-2k-wager/index.html` -- Landing page with hero, Twitch login button, how-it-works steps, three buy-in tier cards ($15/$30/$45 with pot amounts), win/lose outcome cards, payout details box, and FAQ - `twitch-2k-wager/style.css` -- Full CSS with custom properties for theming, Twitch-inspired dark palette (#0e0e10 bg, #9147ff purple accents), mobile-first at 390px with responsive breakpoints at 768px and 1024px - `twitch-2k-wager/game-status.html` -- Post-payment status page with match card (players, pot), progress tracker (payment confirmed, queue position, game in progress, result, payout), and three visual variants (in-progress active state, win result, lose result) as HTML comment blocks for easy review ## Design Decisions - Twitch color palette: #0e0e10 background, #9147ff purple, #18181b surfaces -- matches Twitch's actual dark mode - Bronze/Silver/Gold tier naming with color-coded icons -- communicates escalation without being generic - "Most Popular" tag on Silver tier -- anchoring the middle option as the default choice - Progress tracker with dot+line pattern -- familiar status UI, works for all three game states - Win/lose variants as HTML comments in game-status.html -- reviewer can uncomment to see each state without needing JS - Pulsing live dot and glowing active states -- subtle motion that says "live" without being distracting ## Test Plan - Open `twitch-2k-wager/index.html` in browser at 390px width (mobile-first viewport) - Verify all three tier cards show correct amounts ($15/$30, $30/$60, $45/$90) - Verify Twitch login button is prominent purple with Twitch SVG icon - Open `twitch-2k-wager/game-status.html` to see in-progress state - Uncomment win variant (line ~106) and lose variant (line ~152) to review those states - Check at 768px and 1024px for responsive behavior ## Review Checklist - [x] Files limited to `twitch-2k-wager/` directory only - [x] No JavaScript -- pure HTML + CSS - [x] No Tailwind -- CSS custom properties throughout - [x] Mobile-first (390px primary viewport) - [x] Dark theme with Twitch branding - [x] No unrelated changes ## Related Notes - Cross-repo spec: forgejo_admin/twitch-2k-wager#4 ## Related Closes #12

forgejo_admin added 1 commit

2026-04-04 06:07:57 +00:00

feat: add twitch-2k-wager landing page and game status prototype fc539d1243

Dark theme, Twitch-inspired landing page with three buy-in tiers
($15/$30/$45), Twitch login button, how-it-works flow, win/lose
outcomes, payout details, and FAQ. Game status page shows the full
progress tracker from payment through payout with three visual
variants (in-progress, win, lose) as HTML comments for easy review.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-04-04 06:09:03 +00:00

Author

Contributor

QA Review

Acceptance Criteria Check

Landing page communicates the wager concept in under 5 seconds -- hero ("Play Marcus. Win Cash.") + tagline + 5-step flow delivers immediately
Three buy-in tiers ($15/$30/$45) with pot amounts ($30/$60/$90) -- all amounts correct across all three cards
"Login with Twitch" button prominent -- full-width purple button with Twitch SVG icon, hover glow effect
Payout timeline (2-3 business days) clearly stated -- in payout details box, in step 5, in win outcome card, and on game status page
Win/lose outcomes explained before payment -- outcome cards section with clear descriptions
Mobile-first (390px viewport) -- max-width 420px, responsive breakpoints at 768px and 1024px
Dark theme with Twitch branding -- #0e0e10 bg, #9147ff purple accents, matches Twitch dark mode
Game status page shows all states -- in-progress (active), win result (commented variant), lose result (commented variant)

Code Quality

Pure HTML + CSS, no JavaScript
No Tailwind -- all CSS custom properties
CSS vars for full theming (30+ variables in :root)
Clean semantic HTML -- header, section, footer, aria-hidden, aria-label
Proper font loading -- preconnect + display=swap
No unrelated file changes -- all 3 files in twitch-2k-wager/ directory only

Nits (not blocking -- track for SvelteKit promotion)

--color-surface-hover declared in :root but unused in any rule (style.css line 11)
Section elements use p.section-label instead of h2 -- accessible names should use heading elements when promoted to SvelteKit
Game status commented variants work for prototype review but should become separate component states in SvelteKit

VERDICT: APPROVED

## QA Review ### Acceptance Criteria Check - [x] Landing page communicates the wager concept in under 5 seconds -- hero ("Play Marcus. Win Cash.") + tagline + 5-step flow delivers immediately - [x] Three buy-in tiers ($15/$30/$45) with pot amounts ($30/$60/$90) -- all amounts correct across all three cards - [x] "Login with Twitch" button prominent -- full-width purple button with Twitch SVG icon, hover glow effect - [x] Payout timeline (2-3 business days) clearly stated -- in payout details box, in step 5, in win outcome card, and on game status page - [x] Win/lose outcomes explained before payment -- outcome cards section with clear descriptions - [x] Mobile-first (390px viewport) -- max-width 420px, responsive breakpoints at 768px and 1024px - [x] Dark theme with Twitch branding -- #0e0e10 bg, #9147ff purple accents, matches Twitch dark mode - [x] Game status page shows all states -- in-progress (active), win result (commented variant), lose result (commented variant) ### Code Quality - [x] Pure HTML + CSS, no JavaScript - [x] No Tailwind -- all CSS custom properties - [x] CSS vars for full theming (30+ variables in :root) - [x] Clean semantic HTML -- header, section, footer, aria-hidden, aria-label - [x] Proper font loading -- preconnect + display=swap - [x] No unrelated file changes -- all 3 files in twitch-2k-wager/ directory only ### Nits (not blocking -- track for SvelteKit promotion) 1. `--color-surface-hover` declared in :root but unused in any rule (style.css line 11) 2. Section elements use `p.section-label` instead of `h2` -- accessible names should use heading elements when promoted to SvelteKit 3. Game status commented variants work for prototype review but should become separate component states in SvelteKit ### VERDICT: APPROVED

forgejo_admin commented

2026-04-04 06:10:37 +00:00

Author

Contributor

PR #13 Review

DOMAIN REVIEW

Tech stack: Vanilla HTML + CSS (playground prototype). No JavaScript, no frameworks, no build step. Three files: twitch-2k-wager/index.html, twitch-2k-wager/game-status.html, twitch-2k-wager/style.css. 1,286 additions, 0 deletions.

This is a static HTML/CSS prototype in the playground repo. Domain review applies the HTML/CSS/Accessibility checklist.

Accessibility

lang="en" set on both HTML documents -- good.
aria-hidden="true" on decorative SVGs and emoji spans -- good.
aria-label on avatar divs in match card -- good.
role="button" on the Twitch login anchor -- good.
FAQ section uses divs instead of <details>/<summary> or ARIA disclosure pattern. Acceptable for a prototype but worth noting for the production build.
No skip-nav link. Fine for a prototype, needed in production.

Responsive design

Mobile-first at 390px (close to 375px convention, reasonable for modern devices).
Breakpoints at 768px and 1024px -- sensible. Only --max-width changes at breakpoints, which is appropriate for a single-column mobile-first layout that just loosens width constraints on larger screens.

CSS quality

All colors, spacing, radii, and fonts use CSS custom properties -- no magic numbers in the design system layer.
Two minor hardcoded pixel values in content rules: margin-bottom: 2px (in .step-content h3 line ~267 and .progress-info h3 line ~594) and margin-top: 2px (in .progress-time line ~609). These are fine-tuning values at the sub-spacing-scale level; not a real concern.
gap: 0 on .progress-tracker is explicit rather than relying on the default -- clear intent.
Font stack includes proper fallbacks.
Animations use ease-in-out timing and are purely cosmetic (pulsing dots/glows) -- no motion-reduction media query (prefers-reduced-motion). Nit for production.

HTML quality

Semantic structure: <header>, <section>, <footer> used appropriately.
Meta descriptions present on both pages.
<link rel="preconnect"> for Google Fonts -- good performance practice.
Google Fonts loaded externally (Inter). Acceptable for prototype; production should self-host.

Content correctness

Tier math checks out: $15/$30, $30/$60, $45/$90 -- all consistent.
Game status page defaults to Silver Tier $30 buy-in with $60 pot -- matches the tier card data.
Win/lose variants clearly documented as HTML comments with line references in the test plan.

BLOCKERS

None.

This is a pure HTML/CSS prototype in a playground repo. No user input handling, no JavaScript, no server-side code, no secrets, no auth logic. None of the BLOCKER criteria apply:

No new functionality requiring test coverage (static HTML prototype)
No user input to validate (no forms, no JS)
No secrets or credentials in code
No auth/security paths to duplicate

NITS

prefers-reduced-motion media query: The pulse-dot and pulse-status animations should be disabled for users who prefer reduced motion. Add @media (prefers-reduced-motion: reduce) { .live-dot, .progress-step.active .progress-dot { animation: none; } } when this moves to production.
Truncated branch name: Branch is 12-landing-page-html-css-prototype-for-twit -- the name appears truncated (likely from twitch-2k-wager). Not a blocker since the issue number prefix is present and the intent is clear, but future branches should preserve the full purpose string.
Inline style in game-status.html: The "Run It Back" link (inside the lose variant comment block, line ~237) uses style="margin-top: var(--space-lg);". Since this is inside a comment block for reviewer convenience, it is a minor concern, but the production version should move this to a CSS class.
Font loading: Google Fonts loaded via external CDN. Production should self-host Inter for performance and privacy.
Placeholder links: href="#" on the Twitch login button and Terms/Privacy footer links. Expected for a prototype, but should be tracked for production.

SOP COMPLIANCE

Branch named after issue (12-landing-page-html-css-prototype-for-twit references issue #12)
PR body follows template (Summary, Changes, Test Plan, Related sections all present)
Related references cross-repo spec (forgejo_admin/twitch-2k-wager#4)
No secrets committed
No unrelated changes (all files scoped to twitch-2k-wager/ directory)
Commit messages are descriptive (PR title follows conventional commits: feat:)

PROCESS OBSERVATIONS

Clean cross-repo linkage: issue #12 in pal-e-playground is the local work item, forgejo_admin/twitch-2k-wager#4 is the cross-repo spec. PR body references both. Traceability is solid.
Prototype scope is well-contained: three files, one directory, zero dependencies. This is exactly what the playground repo pattern is for.
The variant-as-HTML-comment pattern in game-status.html is a smart approach for reviewer-friendly state visualization without needing JS. Good design decision.
Deployment frequency: this is a low-risk, high-throughput change (pure static content, no infrastructure impact).

VERDICT: APPROVED

## PR #13 Review ### DOMAIN REVIEW **Tech stack**: Vanilla HTML + CSS (playground prototype). No JavaScript, no frameworks, no build step. Three files: `twitch-2k-wager/index.html`, `twitch-2k-wager/game-status.html`, `twitch-2k-wager/style.css`. 1,286 additions, 0 deletions. This is a static HTML/CSS prototype in the playground repo. Domain review applies the HTML/CSS/Accessibility checklist. **Accessibility** - `lang="en"` set on both HTML documents -- good. - `aria-hidden="true"` on decorative SVGs and emoji spans -- good. - `aria-label` on avatar divs in match card -- good. - `role="button"` on the Twitch login anchor -- good. - FAQ section uses divs instead of `<details>`/`<summary>` or ARIA disclosure pattern. Acceptable for a prototype but worth noting for the production build. - No skip-nav link. Fine for a prototype, needed in production. **Responsive design** - Mobile-first at 390px (close to 375px convention, reasonable for modern devices). - Breakpoints at 768px and 1024px -- sensible. Only `--max-width` changes at breakpoints, which is appropriate for a single-column mobile-first layout that just loosens width constraints on larger screens. **CSS quality** - All colors, spacing, radii, and fonts use CSS custom properties -- no magic numbers in the design system layer. - Two minor hardcoded pixel values in content rules: `margin-bottom: 2px` (in `.step-content h3` line ~267 and `.progress-info h3` line ~594) and `margin-top: 2px` (in `.progress-time` line ~609). These are fine-tuning values at the sub-spacing-scale level; not a real concern. - `gap: 0` on `.progress-tracker` is explicit rather than relying on the default -- clear intent. - Font stack includes proper fallbacks. - Animations use `ease-in-out` timing and are purely cosmetic (pulsing dots/glows) -- no motion-reduction media query (`prefers-reduced-motion`). Nit for production. **HTML quality** - Semantic structure: `<header>`, `<section>`, `<footer>` used appropriately. - Meta descriptions present on both pages. - `<link rel="preconnect">` for Google Fonts -- good performance practice. - Google Fonts loaded externally (Inter). Acceptable for prototype; production should self-host. **Content correctness** - Tier math checks out: $15/$30, $30/$60, $45/$90 -- all consistent. - Game status page defaults to Silver Tier $30 buy-in with $60 pot -- matches the tier card data. - Win/lose variants clearly documented as HTML comments with line references in the test plan. ### BLOCKERS None. This is a pure HTML/CSS prototype in a playground repo. No user input handling, no JavaScript, no server-side code, no secrets, no auth logic. None of the BLOCKER criteria apply: - No new functionality requiring test coverage (static HTML prototype) - No user input to validate (no forms, no JS) - No secrets or credentials in code - No auth/security paths to duplicate ### NITS 1. **`prefers-reduced-motion` media query**: The `pulse-dot` and `pulse-status` animations should be disabled for users who prefer reduced motion. Add `@media (prefers-reduced-motion: reduce) { .live-dot, .progress-step.active .progress-dot { animation: none; } }` when this moves to production. 2. **Truncated branch name**: Branch is `12-landing-page-html-css-prototype-for-twit` -- the name appears truncated (likely from `twitch-2k-wager`). Not a blocker since the issue number prefix is present and the intent is clear, but future branches should preserve the full purpose string. 3. **Inline style in game-status.html**: The "Run It Back" link (inside the lose variant comment block, line ~237) uses `style="margin-top: var(--space-lg);"`. Since this is inside a comment block for reviewer convenience, it is a minor concern, but the production version should move this to a CSS class. 4. **Font loading**: Google Fonts loaded via external CDN. Production should self-host Inter for performance and privacy. 5. **Placeholder links**: `href="#"` on the Twitch login button and Terms/Privacy footer links. Expected for a prototype, but should be tracked for production. ### SOP COMPLIANCE - [x] Branch named after issue (`12-landing-page-html-css-prototype-for-twit` references issue #12) - [x] PR body follows template (Summary, Changes, Test Plan, Related sections all present) - [x] Related references cross-repo spec (`forgejo_admin/twitch-2k-wager#4`) - [x] No secrets committed - [x] No unrelated changes (all files scoped to `twitch-2k-wager/` directory) - [x] Commit messages are descriptive (PR title follows conventional commits: `feat:`) ### PROCESS OBSERVATIONS - Clean cross-repo linkage: issue #12 in pal-e-playground is the local work item, `forgejo_admin/twitch-2k-wager#4` is the cross-repo spec. PR body references both. Traceability is solid. - Prototype scope is well-contained: three files, one directory, zero dependencies. This is exactly what the playground repo pattern is for. - The variant-as-HTML-comment pattern in `game-status.html` is a smart approach for reviewer-friendly state visualization without needing JS. Good design decision. - Deployment frequency: this is a low-risk, high-throughput change (pure static content, no infrastructure impact). ### VERDICT: APPROVED