funman300
fa7f98ac52
Adds the spec the recent visual-identity port pass referenced: - design-system.md — base16-eighties palette, type scale, spacing scale, motion budget, component library, accessibility notes (color-blind toggle, high-contrast mode, glyph differentiation), and the canonical "Terminal" card-back theme. - 24 Stitch-rendered mockups (HTML + PNG): 12 redesigned existing screens, 1 desktop home variant, 2 onboarding steps, and 9 missing-plugin screens (splash, challenge, time-attack, weekly-goals, leaderboard, sync, level-up, replay, radial-menu). These mockups are the source the engine plugins were ported against in commits0d477acthrough9891ae4(token system, modal scaffold, gameplay-feedback layer, toasts, table chrome, card chrome, splash cursor, hint highlight). Future plugin work should diff against the matching mockup before touching pixels. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
219 lines
10 KiB
HTML
219 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=390, height=844, initial-scale=1.0" name="viewport"/>
|
|
<title>Challenge Mode Menu</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"inverse-surface": "#e0e3e6",
|
|
"error-container": "#93000a",
|
|
"tertiary": "#f7c3ff",
|
|
"on-primary-container": "#004f6c",
|
|
"on-surface": "#e0e3e6",
|
|
"surface-dim": "#101417",
|
|
"surface-container-high": "#272a2d",
|
|
"surface-container-lowest": "#0b0f11",
|
|
"secondary-container": "#435401",
|
|
"suit-red": "#fb9fb1",
|
|
"on-error": "#690005",
|
|
"surface-container-low": "#181c1f",
|
|
"surface-variant": "#313538",
|
|
"surface-tint": "#7ed0fe",
|
|
"primary-container": "#6fc2ef",
|
|
"background": "#101417",
|
|
"primary": "#a1dcff",
|
|
"outline": "#505050",
|
|
"suit-black": "#d0d0d0",
|
|
"secondary-fixed": "#d5ec8c",
|
|
"surface-container": "#202020",
|
|
"on-tertiary-fixed": "#340043",
|
|
"on-tertiary-fixed-variant": "#653173",
|
|
"outline-variant": "#3f484e",
|
|
"on-surface-variant": "#bfc8cf",
|
|
"error": "#fb9fb1",
|
|
"on-primary-fixed": "#001e2c",
|
|
"highlight-celebration": "#e1a3ee",
|
|
"highlight-valid": "#acc267",
|
|
"suit-red-cb": "#6fc2ef",
|
|
"primary-fixed-dim": "#7ed0fe",
|
|
"tertiary-fixed-dim": "#f0b0fc",
|
|
"primary-fixed": "#c4e7ff",
|
|
"on-error-container": "#ffdad6",
|
|
"tertiary-container": "#e1a3ee",
|
|
"on-secondary": "#293500",
|
|
"on-tertiary": "#4c195b",
|
|
"on-background": "#e0e3e6",
|
|
"secondary-fixed-dim": "#bad073",
|
|
"secondary": "#bad073",
|
|
"inverse-primary": "#00668a",
|
|
"surface-bright": "#363a3d",
|
|
"surface": "#151515",
|
|
"on-tertiary-container": "#683476",
|
|
"on-secondary-fixed": "#161e00",
|
|
"inverse-on-surface": "#2d3134",
|
|
"warning": "#ddb26f",
|
|
"info": "#12cfc0",
|
|
"surface-container-highest": "#313538",
|
|
"on-primary-fixed-variant": "#004c69",
|
|
"tertiary-fixed": "#fbd7ff",
|
|
"on-secondary-fixed-variant": "#3c4d00",
|
|
"on-secondary-container": "#b2c86d",
|
|
"on-primary": "#003549"
|
|
},
|
|
"fontFamily": {
|
|
"mono": ["JetBrains Mono", "monospace"],
|
|
"label-caps": ["JetBrains Mono"],
|
|
"hud-score": ["JetBrains Mono"],
|
|
"body-md": ["Inter"],
|
|
"card-rank": ["JetBrains Mono"],
|
|
"hud-timer": ["JetBrains Mono"],
|
|
"headline": ["JetBrains Mono"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
background-color: #101417;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
.retro-scanline {
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center min-h-screen text-on-background overflow-hidden">
|
|
<!-- Mobile Container (390x844) -->
|
|
<div class="relative w-[390px] h-[844px] bg-background flex flex-col overflow-hidden border border-outline-variant">
|
|
<!-- Status Bar -->
|
|
<div class="h-[32px] bg-surface-container flex items-center justify-between px-4 text-[11px] font-mono border-b border-outline-variant shrink-0">
|
|
<span class="text-suit-black">▌challenge.tsx</span>
|
|
<span class="text-[#a0a0a0]">LV 12 · UNLOCKED</span>
|
|
</div>
|
|
<!-- Header -->
|
|
<header class="h-[80px] px-margin-edge flex flex-col justify-center border-b border-outline-variant shrink-0">
|
|
<h1 class="text-[24px] font-bold leading-tight text-suit-black">CHALLENGE MODE</h1>
|
|
<p class="text-[12px] text-[#a0a0a0] mt-1">Curated puzzles · Beat par for bonus XP</p>
|
|
</header>
|
|
<!-- Stats Row -->
|
|
<div class="mx-margin-edge mt-4 bg-surface-container rounded-[4px] p-3 flex items-center justify-between border border-outline-variant shrink-0">
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-[14px] font-bold text-suit-black">DONE 8/24</span>
|
|
<span class="text-[14px] font-bold text-highlight-celebration">(33%)</span>
|
|
</div>
|
|
<span class="text-outline-variant text-[14px]">│</span>
|
|
<div class="text-[14px] font-bold text-suit-black">BEST AVG 03:42</div>
|
|
<span class="text-outline-variant text-[14px]">│</span>
|
|
<div class="text-[14px] font-bold text-highlight-valid">+1240 XP</div>
|
|
</div>
|
|
<!-- Scrollable List Area -->
|
|
<div class="flex-1 overflow-y-auto px-margin-edge pt-4 space-y-3 pb-6">
|
|
<!-- Card 1 -->
|
|
<div class="h-[80px] bg-surface-container border border-outline rounded-[4px] flex relative overflow-hidden">
|
|
<div class="w-[6px] h-full bg-warning"></div>
|
|
<div class="flex-1 flex items-center justify-between px-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-[14px] font-bold text-suit-black">DEEP STACK</span>
|
|
<span class="text-[12px] text-on-surface-variant">Win with 0 stock · ★★★☆☆</span>
|
|
</div>
|
|
<div class="bg-highlight-valid px-2 py-1 rounded-[2px] text-background text-[11px] font-bold">
|
|
✓ DONE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div class="h-[80px] bg-surface-container border border-primary rounded-[4px] flex relative overflow-hidden">
|
|
<div class="w-[6px] h-full bg-highlight-valid"></div>
|
|
<div class="flex-1 flex items-center justify-between px-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-[14px] font-bold text-suit-black">SPEED RUN</span>
|
|
<span class="text-[12px] text-on-surface-variant">Win under 2:30 · ★★☆☆☆</span>
|
|
</div>
|
|
<div class="bg-primary px-2 py-1 rounded-[2px] text-background text-[11px] font-bold">
|
|
▶ ACTIVE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div class="h-[80px] bg-surface-container border border-outline rounded-[4px] flex relative overflow-hidden">
|
|
<div class="w-[6px] h-full bg-suit-red"></div>
|
|
<div class="flex-1 flex items-center justify-between px-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-[14px] font-bold text-suit-black">NO UNDO</span>
|
|
<span class="text-[12px] text-on-surface-variant">Win without undo · ★★★★☆</span>
|
|
</div>
|
|
<div class="bg-primary px-2 py-1 rounded-[2px] text-background text-[11px] font-bold">
|
|
▶ ACTIVE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 4 -->
|
|
<div class="h-[80px] bg-surface-container border border-outline rounded-[4px] flex relative overflow-hidden">
|
|
<div class="w-[6px] h-full bg-info"></div>
|
|
<div class="flex-1 flex items-center justify-between px-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-[14px] font-bold text-suit-black">FOUR SUITS</span>
|
|
<span class="text-[12px] text-on-surface-variant">1 card per suit · ★☆☆☆☆</span>
|
|
</div>
|
|
<div class="bg-highlight-valid px-2 py-1 rounded-[2px] text-background text-[11px] font-bold">
|
|
✓ DONE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 5 (Locked) -->
|
|
<div class="h-[80px] bg-surface-container border border-outline-variant rounded-[4px] flex relative overflow-hidden opacity-60">
|
|
<div class="w-[6px] h-full bg-highlight-celebration"></div>
|
|
<div class="flex-1 flex items-center justify-between px-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-[14px] font-bold text-suit-black">PERFECT RUN</span>
|
|
<span class="text-[12px] text-on-surface-variant">Below par moves · ★★★★★</span>
|
|
</div>
|
|
<div class="bg-outline px-2 py-1 rounded-[2px] text-on-surface text-[11px] font-bold">
|
|
🔒 LOCKED
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Filler Graphic for retro feel -->
|
|
<div class="flex items-center justify-center py-4">
|
|
<div class="h-[1px] flex-1 bg-outline-variant"></div>
|
|
<span class="px-4 text-[10px] text-outline text-label-caps">END OF LIST</span>
|
|
<div class="h-[1px] flex-1 bg-outline-variant"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Shared Component: Terminal Context (Used as Footer) -->
|
|
<div class="h-[24px] bg-surface px-4 flex items-center justify-between text-[10px] font-mono border-t border-outline-variant shrink-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-primary">▌ NORMAL</span>
|
|
<span class="text-outline">│</span>
|
|
<span class="text-on-surface-variant uppercase tracking-widest">challenge</span>
|
|
</div>
|
|
<div class="text-[#a0a0a0] flex items-center gap-3">
|
|
<span>[ENTER] select</span>
|
|
<span>[F] filter</span>
|
|
<span class="text-suit-red">[ESC] back</span>
|
|
</div>
|
|
</div>
|
|
<!-- Retro Scanline Overlay -->
|
|
<div class="absolute inset-0 retro-scanline z-50"></div>
|
|
</div>
|
|
</body></html> |