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>
258 lines
14 KiB
HTML
258 lines
14 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>Rusty Solitaire - Daily Challenge</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;800&family=Inter:wght@400;500;600&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"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
background-color: #101417;
|
|
color: #e0e3e6;
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.scanline-bg {
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(26, 26, 26, 0.5) 50%);
|
|
background-size: 100% 4px;
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed": "#161e00",
|
|
"on-error": "#690005",
|
|
"on-primary-fixed": "#001e2c",
|
|
"tertiary": "#f7c3ff",
|
|
"secondary-fixed-dim": "#bad073",
|
|
"primary-container": "#6fc2ef",
|
|
"surface-dim": "#101417",
|
|
"surface-variant": "#313538",
|
|
"on-error-container": "#ffdad6",
|
|
"warning": "#ddb26f",
|
|
"on-surface": "#e0e3e6",
|
|
"inverse-on-surface": "#2d3134",
|
|
"surface-tint": "#7ed0fe",
|
|
"error-container": "#93000a",
|
|
"on-tertiary": "#4c195b",
|
|
"info": "#12cfc0",
|
|
"tertiary-fixed": "#fbd7ff",
|
|
"tertiary-fixed-dim": "#f0b0fc",
|
|
"primary": "#a1dcff",
|
|
"on-primary": "#003549",
|
|
"inverse-surface": "#e0e3e6",
|
|
"highlight-valid": "#acc267",
|
|
"surface-container-low": "#181c1f",
|
|
"surface-container": "#1c2023",
|
|
"on-surface-variant": "#bfc8cf",
|
|
"secondary-container": "#435401",
|
|
"error": "#fb9fb1",
|
|
"surface": "#151515",
|
|
"primary-fixed": "#c4e7ff",
|
|
"outline": "#505050",
|
|
"surface-container-highest": "#313538",
|
|
"on-secondary": "#293500",
|
|
"on-primary-container": "#004f6c",
|
|
"secondary-fixed": "#d5ec8c",
|
|
"background": "#101417",
|
|
"surface-container-high": "#272a2d",
|
|
"suit-red-cb": "#6fc2ef",
|
|
"surface-container-lowest": "#0b0f11",
|
|
"suit-red": "#fb9fb1",
|
|
"on-secondary-container": "#b2c86d",
|
|
"outline-variant": "#3f484e",
|
|
"on-secondary-fixed-variant": "#3c4d00",
|
|
"inverse-primary": "#00668a",
|
|
"surface-bright": "#363a3d",
|
|
"primary-fixed-dim": "#7ed0fe",
|
|
"tertiary-container": "#e1a3ee",
|
|
"on-background": "#e0e3e6",
|
|
"on-tertiary-container": "#683476",
|
|
"suit-black": "#d0d0d0",
|
|
"on-primary-fixed-variant": "#004c69",
|
|
"secondary": "#bad073",
|
|
"on-tertiary-fixed-variant": "#653173",
|
|
"on-tertiary-fixed": "#340043",
|
|
"highlight-celebration": "#e1a3ee"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"gutter-card": "0.375rem",
|
|
"stack-overlap": "2rem",
|
|
"margin-edge": "1rem",
|
|
"action-bar-height": "64px",
|
|
"touch-target-min": "48dp"
|
|
},
|
|
"fontFamily": {
|
|
"label-caps": ["JetBrains Mono"],
|
|
"hud-timer": ["JetBrains Mono"],
|
|
"card-rank": ["JetBrains Mono"],
|
|
"hud-score": ["JetBrains Mono"],
|
|
"body-md": ["Inter"],
|
|
"headline": ["JetBrains Mono"]
|
|
},
|
|
"fontSize": {
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
|
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
|
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen max-w-[390px] mx-auto overflow-hidden shadow-2xl border-x border-outline">
|
|
<!-- 1. Status Bar -->
|
|
<div class="h-[32px] bg-[#202020] flex items-center justify-between px-margin-edge border-b border-outline">
|
|
<span class="font-hud-timer text-[12px] text-on-surface-variant">▌daily/2024-127.json</span>
|
|
<div class="bg-warning/10 border border-warning px-2 py-0.5 rounded-sm">
|
|
<span class="font-hud-timer text-[11px] text-warning font-bold tracking-tighter">EXPIRES 11:42:30</span>
|
|
</div>
|
|
</div>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 p-margin-edge space-y-4 overflow-y-auto pb-8">
|
|
<!-- 2. Header Card -->
|
|
<section class="h-[130px] bg-[#1a1a1a] border border-[#353535] rounded-lg p-4 flex flex-col justify-between">
|
|
<div class="flex flex-col">
|
|
<span class="font-headline font-bold text-[24px] text-suit-black leading-none">MAY 07 · 2026</span>
|
|
<span class="font-headline font-extrabold text-[32px] text-highlight-valid -tracking-[0.01em] leading-tight">#2024-127</span>
|
|
</div>
|
|
<span class="font-label-caps text-[11px] text-on-surface-variant/70">DRAW-3 · DIFFICULTY ★★★☆☆ · PAR 04:30</span>
|
|
</section>
|
|
<!-- 3. Primary CTA -->
|
|
<button class="w-full h-[64px] bg-primary-container text-surface font-headline font-bold text-[14px] uppercase tracking-wider rounded-lg active:scale-95 transition-transform duration-80 flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">play_arrow</span>
|
|
ATTEMPT TODAY'S SEED
|
|
</button>
|
|
<!-- 4. Your Attempts Card -->
|
|
<section class="h-[96px] bg-[#202020] rounded-lg p-4 flex flex-col justify-between">
|
|
<span class="font-label-caps text-[11px] text-on-surface-variant/60 uppercase">YOUR ATTEMPTS</span>
|
|
<div class="flex justify-between items-end">
|
|
<div class="flex flex-col">
|
|
<span class="font-hud-score text-[16px] text-suit-black">BEST 04:12</span>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<span class="bg-warning text-surface text-[10px] font-bold px-1.5 py-0.5 rounded-sm">WIN</span>
|
|
<span class="font-label-caps text-[11px] text-warning">RANK 17/2843</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-hud-timer text-[13px] text-error mb-1">LAST: FAILED at move 47</span>
|
|
</div>
|
|
</section>
|
|
<!-- 5. Leaderboard Card -->
|
|
<section class="bg-[#202020] rounded-lg p-4 flex flex-col flex-grow">
|
|
<span class="font-label-caps text-[11px] text-on-surface-variant/60 uppercase mb-4">TOP TODAY · 2,843 PLAYERS</span>
|
|
<div class="space-y-0 divide-y divide-[#353535]">
|
|
<!-- Row 1 -->
|
|
<div class="h-[32px] flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-5 h-5 flex items-center justify-center bg-warning text-surface text-[10px] font-bold rounded-full">01</span>
|
|
<span class="font-hud-timer text-[14px]">swift_jaguar</span>
|
|
</div>
|
|
<span class="font-hud-timer text-[14px] text-on-surface-variant">02:47</span>
|
|
</div>
|
|
<!-- Row 2 -->
|
|
<div class="h-[32px] flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-5 h-5 flex items-center justify-center bg-[#a0a0a0] text-surface text-[10px] font-bold rounded-full">02</span>
|
|
<span class="font-hud-timer text-[14px]">base16_fan</span>
|
|
</div>
|
|
<span class="font-hud-timer text-[14px] text-on-surface-variant">03:12</span>
|
|
</div>
|
|
<!-- Row 3 -->
|
|
<div class="h-[32px] flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-5 h-5 flex items-center justify-center bg-[#7a5d3b] text-surface text-[10px] font-bold rounded-full">03</span>
|
|
<span class="font-hud-timer text-[14px]">cli_player</span>
|
|
</div>
|
|
<span class="font-hud-timer text-[14px] text-on-surface-variant">03:54</span>
|
|
</div>
|
|
<!-- Row 4 -->
|
|
<div class="h-[32px] flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-5 h-5 flex items-center justify-center bg-[#353535] text-on-surface-variant text-[10px] font-bold rounded-full">04</span>
|
|
<span class="font-hud-timer text-[14px]">tablejockey</span>
|
|
</div>
|
|
<span class="font-hud-timer text-[14px] text-on-surface-variant">04:01</span>
|
|
</div>
|
|
<!-- Row 5 -->
|
|
<div class="h-[32px] flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-5 h-5 flex items-center justify-center bg-[#353535] text-on-surface-variant text-[10px] font-bold rounded-full">05</span>
|
|
<span class="font-hud-timer text-[14px]">vim_motions</span>
|
|
</div>
|
|
<span class="font-hud-timer text-[14px] text-on-surface-variant">04:05</span>
|
|
</div>
|
|
<!-- Row 17 (YOU) -->
|
|
<div class="h-[36px] flex items-center justify-between bg-primary-container/10 -mx-4 px-4 border-y border-primary-container/20">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-5 h-5 flex items-center justify-center bg-primary-container text-surface text-[10px] font-bold rounded-full">17</span>
|
|
<span class="font-hud-timer text-[14px] text-primary-container font-bold">(YOU) anonymous</span>
|
|
</div>
|
|
<span class="font-hud-timer text-[14px] text-primary-container font-bold">04:12</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex-1 border-t border-[#353535] pt-4 flex flex-col items-center justify-center opacity-30 select-none">
|
|
<span class="material-symbols-outlined text-[48px]">terminal</span>
|
|
<span class="font-label-caps text-[10px] mt-2">END OF VISIBLE LOG</span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- 6. Footer Navigation -->
|
|
<footer class="h-[24px] bg-background border-t border-outline flex items-center justify-between px-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-label-caps text-[10px] text-on-surface-variant">▌ NORMAL │ daily</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-label-caps text-[9px] text-on-surface-variant/70"><span class="text-primary-container">[ENTER]</span> attempt</span>
|
|
<span class="font-label-caps text-[9px] text-on-surface-variant/70"><span class="text-primary-container">[L]</span> full leaderboard</span>
|
|
<span class="font-label-caps text-[9px] text-on-surface-variant/70"><span class="text-primary-container">[ESC]</span> back</span>
|
|
</div>
|
|
</footer>
|
|
<!-- Shared Component Shell Rendering Logic -->
|
|
<header class="w-full top-0 sticky bg-background border-b border-outline flex justify-between items-center px-margin-edge h-action-bar-height hidden">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary">terminal</span>
|
|
<h1 class="font-headline text-headline text-primary uppercase tracking-widest">RUSTY SOLITAIRE</h1>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors duration-120 cursor-pointer">settings</span>
|
|
</header>
|
|
<nav class="fixed bottom-0 w-full h-action-bar-height z-50 bg-surface-container border-t border-outline flex justify-around items-center px-2 hidden">
|
|
<div class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-120 cursor-pointer w-full h-full">
|
|
<span class="material-symbols-outlined">refresh</span>
|
|
<span class="font-label-caps text-label-caps">DEAL</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-120 cursor-pointer w-full h-full">
|
|
<span class="material-symbols-outlined">undo</span>
|
|
<span class="font-label-caps text-label-caps">UNDO</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-120 cursor-pointer w-full h-full">
|
|
<span class="material-symbols-outlined">lightbulb</span>
|
|
<span class="font-label-caps text-label-caps">HINT</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-surface-container-highest transition-colors duration-120 cursor-pointer w-full h-full">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
<span class="font-label-caps text-label-caps">MENU</span>
|
|
</div>
|
|
</nav>
|
|
</body></html> |