docs(ui): land the Terminal design system + 24-mockup library
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>
This commit is contained in:
funman300
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rusty Solitaire - Achievements</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;700&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": {
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"error": "#fb9fb1",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"background": "#101417",
|
||||
"error-container": "#93000a",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"inverse-primary": "#00668a",
|
||||
"highlight-valid": "#acc267",
|
||||
"suit-red": "#fb9fb1",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-secondary": "#293500",
|
||||
"on-primary-container": "#004f6c",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-surface": "#e0e3e6",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-background": "#e0e3e6",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"info": "#12cfc0",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"warning": "#ddb26f",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface": "#151515",
|
||||
"surface-container-highest": "#313538",
|
||||
"outline": "#505050",
|
||||
"on-primary": "#003549",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-variant": "#313538",
|
||||
"on-error": "#690005",
|
||||
"suit-black": "#d0d0d0",
|
||||
"primary": "#a1dcff",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-tertiary": "#4c195b",
|
||||
"surface-dim": "#101417",
|
||||
"primary-container": "#6fc2ef",
|
||||
"tertiary": "#f7c3ff",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"surface-container": "#1c2023",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"secondary-container": "#435401",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"secondary": "#bad073",
|
||||
"surface-container-low": "#181c1f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"touch-target-min": "48dp",
|
||||
"margin-edge": "1rem",
|
||||
"action-bar-height": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #151515;
|
||||
color: #e0e3e6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.scanline {
|
||||
background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.1) 50%);
|
||||
background-size: 100% 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md overflow-x-hidden pb-[action-bar-height]">
|
||||
<!-- Status Bar -->
|
||||
<header class="fixed top-0 w-full h-[32px] bg-[#202020] flex items-center justify-between px-margin-edge z-[60] border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2 font-label-caps text-on-surface">
|
||||
<span class="text-primary">▌</span>achievements.json
|
||||
</div>
|
||||
<div class="font-label-caps text-[#a0a0a0]">
|
||||
8/19 UNLOCKED
|
||||
</div>
|
||||
</header>
|
||||
<!-- Top App Bar (Shared Component Reference) -->
|
||||
<nav class="fixed top-[32px] w-full h-[64px] bg-surface flex items-center justify-between px-margin-edge z-50 border-b border-outline-variant">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="terminal">terminal</span>
|
||||
<h1 class="font-headline text-[20px] text-primary uppercase tracking-widest">Rusty Solitaire</h1>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</nav>
|
||||
<main class="mt-[112px] px-margin-edge">
|
||||
<!-- Hero Progress Card -->
|
||||
<section class="w-full h-[100px] bg-[#202020] border border-[#353535] rounded-lg p-4 mb-6">
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<span class="font-label-caps text-[10px] text-[#a0a0a0]">PROGRESS</span>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-headline text-[28px] font-bold text-[#d0d0d0]">8/19</span>
|
||||
<span class="font-label-caps text-[14px] text-highlight-celebration">(42%)</span>
|
||||
</div>
|
||||
<div class="w-full h-[4px] bg-[#353535] rounded-full overflow-hidden mt-1">
|
||||
<div class="h-full bg-highlight-celebration" style="width: 42%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Filter Chip Row -->
|
||||
<section class="flex gap-2 mb-6 overflow-x-auto no-scrollbar">
|
||||
<button class="h-[32px] px-3 flex items-center justify-center border border-[#6fc2ef] text-[#6fc2ef] rounded-[4px] font-label-caps text-[11px]">
|
||||
[ ALL ]
|
||||
</button>
|
||||
<button class="h-[32px] px-3 flex items-center justify-center border border-outline text-[#a0a0a0] rounded-[4px] font-label-caps text-[11px] hover:border-primary hover:text-primary transition-colors">
|
||||
UNLOCKED
|
||||
</button>
|
||||
<button class="h-[32px] px-3 flex items-center justify-center border border-outline text-[#a0a0a0] rounded-[4px] font-label-caps text-[11px] hover:border-primary hover:text-primary transition-colors">
|
||||
LOCKED
|
||||
</button>
|
||||
<button class="h-[32px] px-3 flex items-center justify-center border border-outline text-[#a0a0a0] rounded-[4px] font-label-caps text-[11px] hover:border-primary hover:text-primary transition-colors">
|
||||
SECRET
|
||||
</button>
|
||||
</section>
|
||||
<!-- Achievements Grid -->
|
||||
<section class="grid grid-cols-2 gap-3 mb-10">
|
||||
<!-- FIRST WIN -->
|
||||
<div class="h-[100px] bg-[#202020] border border-[#353535] p-3 flex flex-col justify-between rounded-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-[#6fc2ef] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#151515] text-[20px]" data-icon="emoji_events" style="font-variation-settings: 'FILL' 1;">emoji_events</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#d0d0d0] leading-none mb-1">FIRST WIN</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#a0a0a0] leading-tight">Win your first game</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SPEED DEMON -->
|
||||
<div class="h-[100px] bg-[#202020] border border-highlight-celebration p-3 flex flex-col justify-between rounded-sm relative">
|
||||
<div class="absolute inset-0 border border-highlight-celebration opacity-20 pointer-events-none"></div>
|
||||
<div class="w-8 h-8 rounded-full bg-[#6fc2ef] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#151515] text-[20px]" data-icon="speed" style="font-variation-settings: 'FILL' 1;">speed</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#d0d0d0] leading-none mb-1">SPEED DEMON</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#a0a0a0] leading-tight">Win in under 3:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- STREAK 10 -->
|
||||
<div class="h-[100px] bg-[#202020] border border-[#353535] p-3 flex flex-col justify-between rounded-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-[#6fc2ef] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#151515] text-[20px]" data-icon="bolt" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#d0d0d0] leading-none mb-1">STREAK 10</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#a0a0a0] leading-tight">10 wins in a row</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DAILY DEFENDER -->
|
||||
<div class="h-[100px] bg-[#202020] border border-[#353535] p-3 flex flex-col justify-between rounded-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-[#6fc2ef] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#151515] text-[20px]" data-icon="calendar_today" style="font-variation-settings: 'FILL' 1;">calendar_today</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#d0d0d0] leading-none mb-1">DAILY DEFENDER</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#a0a0a0] leading-tight">Complete 7 daily seeds</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PERFECTIONIST (LOCKED) -->
|
||||
<div class="h-[100px] bg-[#0d0d0d] border border-[#353535] p-3 flex flex-col justify-between rounded-sm opacity-80">
|
||||
<div class="w-8 h-8 rounded-full border border-[#505050] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#505050] text-[20px]" data-icon="undo">undo</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#505050] leading-none mb-1">PERFECTIONIST</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#353535] leading-tight">Win without using undo</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CHALLENGE BEATEN (LOCKED) -->
|
||||
<div class="h-[100px] bg-[#0d0d0d] border border-[#353535] p-3 flex flex-col justify-between rounded-sm opacity-80">
|
||||
<div class="w-8 h-8 rounded-full border border-[#505050] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#505050] text-[20px]" data-icon="military_tech">military_tech</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#505050] leading-none mb-1">CHALLENGE BEATEN</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#353535] leading-tight">Complete CHALLENGE mode</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SECRET (LOCKED) -->
|
||||
<div class="h-[100px] bg-[#0d0d0d] border border-[#353535] p-3 flex flex-col justify-between rounded-sm opacity-80">
|
||||
<div class="w-8 h-8 rounded-full border border-[#505050] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#505050] text-[20px]" data-icon="help_outline">help_outline</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#505050] leading-none mb-1">????</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#353535] leading-tight">SECRET · Hidden until unlocked</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PAR HUNTER (LOCKED) -->
|
||||
<div class="h-[100px] bg-[#0d0d0d] border border-[#353535] p-3 flex flex-col justify-between rounded-sm opacity-80">
|
||||
<div class="w-8 h-8 rounded-full border border-[#505050] flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[#505050] text-[20px]" data-icon="golf_course">golf_course</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-label-caps text-[13px] font-bold text-[#505050] leading-none mb-1">PAR HUNTER</h3>
|
||||
<p class="font-label-caps text-[10px] text-[#353535] leading-tight">Beat par on 50 games</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer Status -->
|
||||
<footer class="fixed bottom-[action-bar-height] w-full h-[24px] bg-background border-t border-outline-variant flex items-center justify-between px-margin-edge z-40 text-[10px] font-label-caps">
|
||||
<div class="flex items-center">
|
||||
<span class="text-primary mr-1">▌</span>
|
||||
<span class="text-on-surface-variant">NORMAL</span>
|
||||
<span class="mx-2 text-outline">│</span>
|
||||
<span class="text-on-surface-variant">achievements</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div><span class="text-[#a0a0a0]">[F]</span> <span class="text-[#505050]">filter</span></div>
|
||||
<div><span class="text-[#a0a0a0]">[/]</span> <span class="text-[#505050]">search</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Bottom Navigation Bar (Shared Component Reference) -->
|
||||
<nav class="fixed bottom-0 w-full h-action-bar-height bg-surface-container flex justify-around items-center px-margin-edge z-50 border-t border-outline-variant">
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary hover:bg-surface-container-highest transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="power_settings_new">power_settings_new</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[Q] QUIT</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary hover:bg-surface-container-highest transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="add_box">add_box</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[N] NEW</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary hover:bg-surface-container-highest transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="undo">undo</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[U] UNDO</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary hover:bg-surface-container-highest transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="lightbulb">lightbulb</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[H] HINT</span>
|
||||
</button>
|
||||
</nav>
|
||||
<!-- CRT Overlay Effect (Visual Decoration) -->
|
||||
<div class="fixed inset-0 pointer-events-none z-[100] opacity-[0.03] scanline"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,219 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@@ -0,0 +1,258 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,278 @@
|
||||
---
|
||||
name: Terminal
|
||||
colors:
|
||||
surface: '#151515'
|
||||
surface-dim: '#0d0d0d'
|
||||
surface-bright: '#2a2a2a'
|
||||
surface-container-lowest: '#0a0a0a'
|
||||
surface-container-low: '#1a1a1a'
|
||||
surface-container: '#202020'
|
||||
surface-container-high: '#2a2a2a'
|
||||
surface-container-highest: '#353535'
|
||||
on-surface: '#d0d0d0'
|
||||
on-surface-variant: '#a0a0a0'
|
||||
inverse-surface: '#d0d0d0'
|
||||
inverse-on-surface: '#151515'
|
||||
outline: '#505050'
|
||||
outline-variant: '#353535'
|
||||
surface-tint: '#6fc2ef'
|
||||
primary: '#6fc2ef'
|
||||
on-primary: '#151515'
|
||||
primary-container: '#1f3a4a'
|
||||
on-primary-container: '#a8dcf5'
|
||||
inverse-primary: '#0e6e99'
|
||||
secondary: '#acc267'
|
||||
on-secondary: '#151515'
|
||||
secondary-container: '#2a3320'
|
||||
on-secondary-container: '#c5d585'
|
||||
tertiary: '#e1a3ee'
|
||||
on-tertiary: '#151515'
|
||||
tertiary-container: '#3a2a40'
|
||||
on-tertiary-container: '#eec3f5'
|
||||
error: '#fb9fb1'
|
||||
on-error: '#151515'
|
||||
error-container: '#4a2530'
|
||||
on-error-container: '#fdc3ce'
|
||||
background: '#151515'
|
||||
on-background: '#d0d0d0'
|
||||
surface-variant: '#353535'
|
||||
suit-red: '#fb9fb1'
|
||||
suit-black: '#d0d0d0'
|
||||
suit-red-cb: '#6fc2ef'
|
||||
highlight-valid: '#acc267'
|
||||
highlight-celebration: '#e1a3ee'
|
||||
highlight-warning: '#ddb26f'
|
||||
highlight-info: '#12cfc0'
|
||||
typography:
|
||||
hud-score:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 24px
|
||||
fontWeight: '700'
|
||||
lineHeight: 32px
|
||||
letterSpacing: '-0.02em'
|
||||
hud-timer:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
card-rank:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 18px
|
||||
fontWeight: '700'
|
||||
lineHeight: 18px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
label-caps:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 12px
|
||||
fontWeight: '500'
|
||||
lineHeight: 16px
|
||||
letterSpacing: '0.08em'
|
||||
headline:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 28px
|
||||
fontWeight: '700'
|
||||
lineHeight: 32px
|
||||
letterSpacing: '-0.01em'
|
||||
rounded:
|
||||
sm: 0.125rem
|
||||
DEFAULT: 0.25rem
|
||||
md: 0.5rem
|
||||
lg: 0.75rem
|
||||
xl: 1rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
margin-edge: 1rem
|
||||
gutter-card: 0.375rem
|
||||
stack-overlap: 2rem
|
||||
touch-target-min: 48dp
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The "Terminal" design system replaces the previous "Premium Solitaire" calm-indie aesthetic with a **retro-terminal / synthwave** identity. The intent is the visual confidence of a well-tuned terminal emulator (think Berkeley Mono dotfiles, base16-eighties, CRT phosphor): monospaced, dense, legible, snappy. It is *not* casino-glitz, *not* skeuomorphic felt, and *not* whimsical.
|
||||
|
||||
The personality is **technical, deliberate, slightly playful**. Cards are flat with thin colored strokes; the HUD reads like a status bar; modals look like terminal panes. Motion is short and snap-easing — no bouncy springs. Long-session calm is preserved by keeping the chroma low and reserving saturated accents for *meaning* (CTAs, feedback, celebrations) rather than decoration.
|
||||
|
||||
Influences: base16-eighties (Chris Kempson), Berkeley Mono, Vim/Neovim status lines, the iA Writer aesthetic, classic CRT phosphor with no chromatic aberration.
|
||||
|
||||
## Palette
|
||||
|
||||
The palette is base16-eighties — a 16-slot terminal palette where indices 00–07 form a monochrome ramp and 08–0F provide saturated accents. We map base16 slots to Material Design 3 token roles below.
|
||||
|
||||
### Source palette (base16-eighties)
|
||||
|
||||
| Slot | Hex | Role |
|
||||
|---|---|---|
|
||||
| base00 | `#151515` | background |
|
||||
| base01 | `#202020` | surface-container |
|
||||
| base02 | `#303030` | line-highlight (subtle) |
|
||||
| base03 | `#505050` | outline / muted text |
|
||||
| base04 | `#b0b0b0` | secondary text |
|
||||
| base05 | `#d0d0d0` | foreground / on-surface |
|
||||
| base06 | `#e0e0e0` | bright text |
|
||||
| base07 | `#f5f5f5` | brightest highlight |
|
||||
| base08 | `#fb9fb1` | red — used for `error`, `suit-red` |
|
||||
| base09 | `#ddb26f` | orange — used for warning chips |
|
||||
| base0A | `#acc267` | yellow/lime — used for `highlight-valid` (drag targets, valid moves) |
|
||||
| base0B | `#12cfc0` | green/teal — used for `highlight-info` (toasts, neutral status) |
|
||||
| base0C | `#6fc2ef` | cyan/sky — primary CTA, focus ring, `selection`, `suit-red-cb` (color-blind tinted red) |
|
||||
| base0D | `#6fc2ef` | (alias) |
|
||||
| base0E | `#e1a3ee` | violet — used for celebration (level-up, achievement unlock) |
|
||||
| base0F | `#fb9fb1` | (alias) |
|
||||
|
||||
### Semantic assignments
|
||||
|
||||
- **CTA / Primary action**: cyan `#6fc2ef`. Reserved for "Play," "New Game," "Save," "Resume," and the focus ring on selected cards. Never used decoratively.
|
||||
- **Valid-move / drag-target highlight**: lime `#acc267`. Reserved for in-game feedback only. Never appears in chrome.
|
||||
- **Celebration**: lavender `#e1a3ee`. Used for level-up flashes, achievement unlock cards, and the daily-streak chip when the streak is active. Quiet otherwise.
|
||||
- **Warning / soft alert**: gold `#ddb26f`. Used for "challenge expires in N minutes" chips, sync-pending status, and the daily-seed countdown.
|
||||
- **Info**: teal `#12cfc0`. Used for neutral system toasts and the sync-connected indicator.
|
||||
- **Error**: pink `#fb9fb1`. Used for sync conflict, server unreachable, invalid move shake.
|
||||
|
||||
## Suit Colors
|
||||
|
||||
**Two-color traditional mapping**, with mandatory color-blind support:
|
||||
|
||||
| Suit | Default | Color-blind mode | Glyph differentiation |
|
||||
|---|---|---|---|
|
||||
| Hearts | `#fb9fb1` (pink) | `#6fc2ef` (cyan) | Solid filled glyph |
|
||||
| Diamonds | `#fb9fb1` (pink) | `#6fc2ef` (cyan) | **Outlined glyph (1.5px stroke)** |
|
||||
| Spades | `#d0d0d0` (foreground) | `#d0d0d0` | Solid filled glyph |
|
||||
| Clubs | `#d0d0d0` (foreground) | `#d0d0d0` | **Outlined glyph (1.5px stroke)** |
|
||||
|
||||
The outlined-glyph treatment is the **primary** differentiation mechanism. Color is supplementary. This means a player viewing the game on a monochrome display, or with severe red-green deficiency, can still distinguish all four suits without context. This is a hard requirement, not an optional setting.
|
||||
|
||||
The "color-blind mode" toggle in Settings only swaps red→cyan; it does not turn the outlined glyphs on or off, because outlined glyphs are always on.
|
||||
|
||||
## Typography
|
||||
|
||||
**Monospace-forward, dual-font system.**
|
||||
|
||||
- **JetBrains Mono** is used for: HUD (score, timer, moves), card rank/value text, all labels, all headlines, all numerals anywhere in the app, and any chip-style component. This is the dominant face.
|
||||
- **Inter** is used only for: long-form body copy (Help screen, Settings descriptions, achievement tooltips, onboarding copy). It is the *exception*, not the default.
|
||||
|
||||
Weights: 400 regular, 500 medium for labels, 700 bold for HUD numbers and headlines. No 600 / no italics anywhere — the terminal aesthetic doesn't have them.
|
||||
|
||||
Letter spacing: tight (`-0.02em`) on HUD score for visual mass; wide (`+0.08em`) on uppercase labels for readability at 12px. Body uses default (0).
|
||||
|
||||
HUD numbers must use **tabular figures** (`font-feature-settings: 'tnum'`) so the timer and score don't reflow as digits change.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
Optimized for **Android portrait, 390×844 (Pixel 6 baseline), API 34**.
|
||||
|
||||
- **Margins**: 16px (1rem) edge safety margin. *Tighter than the previous system's 24px.* Eighties palettes are dense by nature; over-padding fights the aesthetic.
|
||||
- **Tableau**: 7-column layout, 32px (2rem) vertical card overlap. Tighter than before to fit a longer cascade on phone screens.
|
||||
- **HUD position**: top of screen, in the system safe area. Bottom 64px holds the action bar (Undo / Hint / New Game / Auto-complete). Action bar is **always visible** in-game — no hover-fade — because there is no hover on touch.
|
||||
- **Touch target minimum**: 48dp on all interactive elements. Cards in the tableau may be smaller visually but use a 48dp invisible hit area centered on the visible glyph.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Depth is created through **tonal layering and 1px outlines**, not blur shadows. (Synthwave-flat, not Material-soft.)
|
||||
|
||||
- **Level 0 (Background)**: the `#151515` base canvas.
|
||||
- **Level 1 (Tableau slots, empty piles)**: 1px dashed outline in `#353535`. Empty foundations show a faint suit glyph at 12% opacity inside the outline.
|
||||
- **Level 2 (Cards at rest)**: solid `#1a1a1a` fill, 1px solid border in the suit color (so the suit is detectable at a glance even if the card is partially obscured).
|
||||
- **Level 3 (Active / dragged card)**: same border, but glow effect: 0 0 12px of `#6fc2ef` at 40% opacity. **No scale transform** — flatness preserved. Z-index lifts above siblings.
|
||||
- **Modals**: full-screen with backdrop `#151515` at 95% opacity (just enough to dim the table without blurring it). Modal panel is `#202020` with a 1px `#505050` border — like a terminal pane.
|
||||
- **Toasts**: bottom of screen, `#202020` fill, 1px border in the toast's accent color (info=teal, warning=gold, error=pink, celebration=lavender). 16px monospaced caption.
|
||||
|
||||
No `box-shadow` is used anywhere. **All depth is achieved with borders and tonal value.** This is a hard constraint.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is **soft-rounded but tight**:
|
||||
|
||||
- **Cards**: `rounded-md` (8px) — slightly less rounded than the previous system's 16px to read more "technical."
|
||||
- **Buttons / chips / inputs**: `rounded` (4px) default, `rounded-sm` (2px) for the smallest chips.
|
||||
- **Modals / sheets**: `rounded-lg` (12px).
|
||||
- **Avatars / circular indicators**: `rounded-full`.
|
||||
- **Card-back pattern corners**: matches the card's `rounded-md`.
|
||||
|
||||
Selection highlights use a **2px inset stroke** in `#6fc2ef` following the host shape's corner radius. Never an outer stroke — the outer stroke is reserved for the suit-color hairline.
|
||||
|
||||
## Motion
|
||||
|
||||
**Snappy, no spring.** All transitions use `ease-out` with a 120ms duration unless specified.
|
||||
|
||||
- Card lift (start drag): 80ms.
|
||||
- Card place (drop): 120ms with a 16ms holdframe (no bounce).
|
||||
- Modal enter: 200ms ease-out, fade + 8px translate-up.
|
||||
- Modal exit: 120ms ease-in, fade only.
|
||||
- Selection ring appear: 80ms.
|
||||
- Win-summary stat reveal: 60ms each, staggered 40ms.
|
||||
- HUD number tick: instant (no transition) — terminal counters don't ease.
|
||||
|
||||
**Optional CRT effect**: a 1-frame scanline sweep across the screen on game-state transitions (start, win, restart). User-toggleable in Settings. Off by default.
|
||||
|
||||
## Components
|
||||
|
||||
### Game Cards
|
||||
|
||||
Flat face design.
|
||||
- Background: `#1a1a1a`
|
||||
- Border: 1px solid in suit color (pink for hearts/diamonds, foreground gray for spades/clubs)
|
||||
- Top-left: rank in JetBrains Mono Bold 18px + small suit glyph (10px)
|
||||
- Bottom-right: large suit glyph (32px), rotated 180°
|
||||
- Corner radius: 8px
|
||||
- Suit differentiation: hearts and spades have **filled** glyphs; diamonds and clubs have **outlined** glyphs (1.5px stroke)
|
||||
|
||||
### Card Back ("Terminal" theme)
|
||||
|
||||
- Theme name: `"Terminal"`
|
||||
- Author: `"Rusty Solitaire"`
|
||||
- Background: `#151515`
|
||||
- Pattern: horizontal scanlines at 2px pitch in `#1a1a1a` (1px line, 1px gap), full bleed
|
||||
- Border: 1px solid `#353535`
|
||||
- Top-left badge: a 12×16px solid `#6fc2ef` block (the "terminal cursor"), 6px from the corner
|
||||
- Bottom-right monogram: the characters `▌RS` in JetBrains Mono 12px, color `#505050`, 6px from the corner
|
||||
- Corner radius: 8px (matches face)
|
||||
|
||||
### Primary Buttons
|
||||
|
||||
Solid `#6fc2ef` fill, `#151515` text, JetBrains Mono Medium 14px uppercase with `+0.08em` tracking. 4px corner radius. Pressed state: darken to `#5aa9d4`. Disabled: `#353535` fill, `#505050` text.
|
||||
|
||||
### Secondary Buttons
|
||||
|
||||
Transparent fill, 1px `#505050` border, `#d0d0d0` text. Hover/press: border becomes `#6fc2ef`, text becomes `#6fc2ef`.
|
||||
|
||||
### HUD Chips
|
||||
|
||||
`#202020` fill, no border, 4px radius. Monospaced 16px text. Score chip pulses to `#acc267` for 200ms when score increases.
|
||||
|
||||
### Drag Targets
|
||||
|
||||
When a card is being dragged over a valid pile, the pile's empty-slot dashed outline becomes:
|
||||
- Solid 1px in `#acc267`
|
||||
- Plus a 0 0 8px outer glow in `#acc267` at 30% opacity
|
||||
|
||||
This is the *only* place glow effects appear in the system.
|
||||
|
||||
### Modals
|
||||
|
||||
Full-screen backdrop at 95% opacity. Centered panel: `#202020` fill, 1px `#505050` border, 12px corner radius. Title bar shows the screen name in monospaced 14px, color `#a0a0a0`, with a single `▌` cursor character prefix to reinforce the terminal pane motif.
|
||||
|
||||
### Navigation Bar
|
||||
|
||||
Fixed at the bottom of in-game screens. Height: 64px. `#202020` fill, 1px top border in `#353535`. Four icon buttons: Undo / Hint / New / Auto-complete. Icons: 24px, 1.5px stroke weight, color `#d0d0d0`. Active/pressed: icon color `#6fc2ef`.
|
||||
|
||||
### Status / Sync Indicator
|
||||
|
||||
Top-right corner of the HUD: a 6px circular dot.
|
||||
- Connected & synced: `#12cfc0`
|
||||
- Pending: `#ddb26f` (pulsing 1.5s)
|
||||
- Error: `#fb9fb1` (steady)
|
||||
- Offline: `#505050`
|
||||
|
||||
## Accessibility
|
||||
|
||||
1. **Color-blind mode** (Settings → Gameplay): swaps red suits' default `#fb9fb1` for `#6fc2ef`. Outlined-glyph differentiation remains active in *all* modes.
|
||||
2. **High-contrast mode** (Settings → Gameplay): boosts on-surface from `#d0d0d0` to `#f5f5f5`, outline from `#505050` to `#a0a0a0`, suit-red from `#fb9fb1` to `#ff8aa0`.
|
||||
3. **Reduce-motion mode** (Settings → Gameplay): disables card-lift transition (instant z-lift), disables CRT scanline effect, disables the warning-chip pulse animation.
|
||||
4. **Tabular figures** are mandatory for any number that updates live (timer, score, moves) so they don't reflow.
|
||||
5. **Touch targets** are 48dp minimum even when the visual element is smaller.
|
||||
6. **Text contrast**: all body text on background passes WCAG AA at minimum (`#d0d0d0` on `#151515` = 9.5:1; `#a0a0a0` on `#151515` = 5.7:1).
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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&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;
|
||||
}
|
||||
.outlined-glyph {
|
||||
-webkit-text-stroke: 1.5px currentColor;
|
||||
color: transparent;
|
||||
}
|
||||
.scanline-pattern {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
#1a1a1a,
|
||||
#1a1a1a 2px,
|
||||
#151515 2px,
|
||||
#151515 4px
|
||||
);
|
||||
}
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface": "#151515",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"warning": "#ddb26f",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-background": "#e0e3e6",
|
||||
"on-primary-container": "#004f6c",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-surface": "#e0e3e6",
|
||||
"error": "#fb9fb1",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface-container-high": "#272a2d",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-primary": "#003549",
|
||||
"on-tertiary": "#4c195b",
|
||||
"error-container": "#93000a",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"surface-container": "#202020",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"surface-container-highest": "#313538",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"highlight-valid": "#acc267",
|
||||
"primary": "#a1dcff",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-error-container": "#ffdad6",
|
||||
"secondary": "#bad073",
|
||||
"on-tertiary": "#293500",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-error": "#690005",
|
||||
"info": "#12cfc0",
|
||||
"suit-red": "#fb9fb1",
|
||||
"surface-dim": "#101417",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"background": "#101417",
|
||||
"secondary-container": "#435401",
|
||||
"surface-variant": "#313538",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"suit-black": "#d0d0d0"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48px",
|
||||
"margin-edge": "1rem",
|
||||
"action-bar-height": "64px",
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md overflow-hidden selection:bg-primary selection:text-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-margin-edge h-[56px] bg-surface-container border-b border-outline dark:border-outline z-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">terminal</span>
|
||||
<h1 class="font-hud-score text-[18px] text-primary">solitaire.sh</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-[6px] h-[6px] rounded-full bg-info"></div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- HUD Band -->
|
||||
<div class="fixed top-[56px] left-0 w-full h-[56px] bg-surface-container border-b border-outline-variant flex items-center justify-around px-margin-edge z-40">
|
||||
<div class="bg-surface p-1 px-3 rounded flex flex-col items-center">
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant">SCORE</span>
|
||||
<span class="font-hud-score text-primary tabular-nums">247</span>
|
||||
</div>
|
||||
<div class="bg-surface p-1 px-3 rounded flex flex-col items-center border border-outline">
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant">TIME</span>
|
||||
<span class="font-hud-timer text-on-surface tabular-nums">12:34</span>
|
||||
</div>
|
||||
<div class="bg-surface p-1 px-3 rounded flex flex-col items-center">
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant">MOVES</span>
|
||||
<span class="font-hud-score text-secondary tabular-nums">87</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Game Table -->
|
||||
<main class="pt-[124px] px-margin-edge h-screen w-full relative">
|
||||
<!-- Top Row: Stock, Waste, Foundations -->
|
||||
<div class="grid grid-cols-7 gap-gutter-card h-[110px]">
|
||||
<!-- Stock -->
|
||||
<div class="relative w-full h-full rounded-xl border border-outline-variant bg-surface overflow-hidden scanline-pattern">
|
||||
<div class="absolute top-1 left-1 w-3 h-4 bg-suit-red-cb"></div>
|
||||
<div class="absolute bottom-1 right-1 font-label-caps text-[8px] text-suit-black">▌RS</div>
|
||||
<div class="absolute bottom-[-16px] left-0 w-full text-center font-label-caps text-[10px] text-on-surface-variant">STOCK · 18</div>
|
||||
</div>
|
||||
<!-- Waste -->
|
||||
<div class="relative w-full h-full rounded-xl border border-suit-red bg-[#1a1a1a] flex flex-col justify-between p-1.5">
|
||||
<div class="font-card-rank text-suit-red leading-none">10<br/><span class="font-normal">♥</span></div>
|
||||
<div class="self-end text-[32px] font-card-rank text-suit-red rotate-180">♥</div>
|
||||
</div>
|
||||
<!-- Empty Gap -->
|
||||
<div></div>
|
||||
<!-- Foundation S -->
|
||||
<div class="relative w-full h-full rounded-xl border border-dashed border-outline-variant flex items-center justify-center">
|
||||
<span class="text-on-surface-variant opacity-20 text-[32px] font-card-rank">♠</span>
|
||||
</div>
|
||||
<!-- Foundation H -->
|
||||
<div class="relative w-full h-full rounded-xl border border-suit-red bg-[#1a1a1a] flex flex-col justify-between p-1.5">
|
||||
<div class="font-card-rank text-suit-red leading-none">2<br/><span class="font-normal">♥</span></div>
|
||||
<div class="self-end text-[32px] font-card-rank text-suit-red rotate-180">♥</div>
|
||||
</div>
|
||||
<!-- Foundation C -->
|
||||
<div class="relative w-full h-full rounded-xl border border-dashed border-outline-variant flex items-center justify-center">
|
||||
<span class="text-on-surface-variant opacity-20 text-[32px] font-card-rank outlined-glyph">♣</span>
|
||||
</div>
|
||||
<!-- Foundation D -->
|
||||
<div class="relative w-full h-full rounded-xl border border-dashed border-outline-variant flex items-center justify-center">
|
||||
<span class="text-on-surface-variant opacity-20 text-[32px] font-card-rank outlined-glyph">♦</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tableau -->
|
||||
<div class="mt-8 grid grid-cols-7 gap-gutter-card items-start relative h-[400px]">
|
||||
<!-- Col 1 -->
|
||||
<div class="relative w-full h-full">
|
||||
<div class="w-full h-[96px] rounded-xl border border-suit-black bg-[#1a1a1a] p-1.5">
|
||||
<div class="font-card-rank text-suit-black leading-none">K<br/><span class="font-normal">♠</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Col 2 -->
|
||||
<div class="relative w-full h-full">
|
||||
<div class="w-full h-[96px] rounded-xl border border-outline bg-[#1a1a1a] scanline-pattern"></div>
|
||||
<div class="absolute top-[32px] w-full h-[96px] rounded-xl border border-suit-red bg-[#1a1a1a] p-1.5">
|
||||
<div class="font-card-rank text-suit-red leading-none">Q<br/><span class="font-normal">♥</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Col 3 -->
|
||||
<div class="relative w-full h-full">
|
||||
<div class="w-full h-[96px] rounded-xl border border-outline bg-[#1a1a1a] scanline-pattern"></div>
|
||||
<div class="absolute top-[32px] w-full h-[96px] rounded-xl border border-outline bg-[#1a1a1a] scanline-pattern"></div>
|
||||
<div class="absolute top-[64px] w-full h-[96px] rounded-xl border border-suit-red bg-[#1a1a1a] p-1.5">
|
||||
<div class="font-card-rank text-suit-red leading-none">10<br/><span class="font-normal outlined-glyph">♦</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Col 4 -->
|
||||
<div class="relative w-full h-full">
|
||||
<div class="w-full h-[96px] rounded-xl border border-outline bg-[#1a1a1a] scanline-pattern"></div>
|
||||
<div class="w-full h-[96px] rounded-xl border border-outline bg-[#1a1a1a] scanline-pattern absolute top-[32px]"></div>
|
||||
<!-- Valid Drop Target Glow -->
|
||||
<div class="absolute top-[64px] w-full h-[96px] rounded-xl border border-suit-black bg-[#1a1a1a] p-1.5 ring-4 ring-highlight-valid/30">
|
||||
<div class="font-card-rank text-suit-black leading-none">9<br/><span class="font-normal">♠</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Col 5, 6 (Empty/Filler) -->
|
||||
<div class="relative w-full"></div>
|
||||
<div class="relative w-full"></div>
|
||||
<!-- Col 7 -->
|
||||
<div class="relative w-full">
|
||||
<!-- Original Position Placeholder -->
|
||||
<div class="w-full h-[96px] rounded-xl border border-dashed border-outline"></div>
|
||||
<!-- Being Dragged Card -->
|
||||
<div class="absolute top-[-20px] left-[30px] w-full h-[96px] rounded-xl border border-suit-red bg-[#1a1a1a] p-1.5 shadow-[0_0_20px_rgba(111,194,239,0.4)] z-50 ring-1 ring-primary/40">
|
||||
<div class="font-card-rank text-suit-red leading-none">4<br/><span class="font-normal outlined-glyph">♦</span></div>
|
||||
<div class="absolute bottom-1 right-1 text-[24px] font-card-rank text-suit-red rotate-180 outlined-glyph">♦</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar / Action Bar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full h-action-bar-height bg-surface-container border-t border-outline-variant flex justify-around items-center px-margin-edge z-50">
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-info transition-colors duration-120 active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[ESC] MENU</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-info font-bold active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="undo">undo</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[U] UNDO</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-info transition-colors duration-120 active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="lightbulb">lightbulb</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[H] HINT</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-info transition-colors duration-120 active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="add_box">add_box</span>
|
||||
<span class="font-label-caps text-[10px] mt-1">[N] NEW</span>
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Drag & CRT Overlay (Visual Decoration) -->
|
||||
<div class="pointer-events-none fixed inset-0 z-[100] opacity-[0.03] scanline-pattern mix-blend-overlay"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"surface-container-low": "#181c1f",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"secondary": "#bad073",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"secondary-container": "#435401",
|
||||
"background": "#101417",
|
||||
"surface-variant": "#313538",
|
||||
"on-primary-container": "#004f6c",
|
||||
"highlight-valid": "#acc267",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-background": "#e0e3e6",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"surface-dim": "#101417",
|
||||
"on-surface": "#e0e3e6",
|
||||
"info": "#12cfc0",
|
||||
"on-secondary": "#293500",
|
||||
"suit-red": "#fb9fb1",
|
||||
"error": "#fb9fb1",
|
||||
"error-container": "#93000a",
|
||||
"surface-container": "#202020",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"warning": "#ddb26f",
|
||||
"tertiary": "#f7c3ff",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-tertiary": "#4c195b",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-container-highest": "#313538",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"surface-container-high": "#272a2d",
|
||||
"primary": "#a1dcff",
|
||||
"suit-black": "#d0d0d0",
|
||||
"on-tertiary-container": "#683476",
|
||||
"on-error": "#690005",
|
||||
"inverse-primary": "#00668a",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"outline": "#505050",
|
||||
"on-primary": "#003549",
|
||||
"surface": "#151515"
|
||||
},
|
||||
"fontFamily": {
|
||||
"jetbrains": ["JetBrains Mono", "monospace"],
|
||||
"inter": ["Inter", "sans-serif"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
body { background-color: #151515; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex items-center justify-center min-h-screen p-4">
|
||||
<!-- Mobile Container (390x844) -->
|
||||
<div class="w-[390px] h-[844px] bg-surface flex flex-col overflow-hidden relative border border-outline/20">
|
||||
<!-- 1. Status Bar -->
|
||||
<header class="h-[32px] bg-surface-container flex items-center justify-between px-4 shrink-0">
|
||||
<span class="font-jetbrains text-[12px] font-bold text-suit-black tracking-tight">▌rusty-solitaire(1) · MAN PAGE</span>
|
||||
<button class="font-jetbrains text-[12px] font-bold text-suit-black/60 hover:text-primary transition-colors">× CLOSE</button>
|
||||
</header>
|
||||
<!-- 2. Heading Band -->
|
||||
<div class="h-[120px] px-4 pt-10 pb-4 shrink-0">
|
||||
<h1 class="font-jetbrains font-bold text-[24px] text-suit-black leading-none mb-1">GESTURES & SHORTCUTS</h1>
|
||||
<p class="font-inter text-[13px] text-on-surface-variant/80">Touch gestures and keyboard equivalents.</p>
|
||||
</div>
|
||||
<!-- Scrollable Content Section -->
|
||||
<main class="flex-1 overflow-y-auto px-4 pb-8 space-y-6">
|
||||
<!-- 3a. TOUCH GESTURES -->
|
||||
<section class="space-y-3">
|
||||
<h2 class="font-jetbrains text-[11px] font-medium tracking-widest text-on-surface-variant/60 uppercase">TOUCH GESTURES</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- Row 1 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-suit-black" data-icon="square">square</span>
|
||||
<span class="font-jetbrains text-[13px] font-medium text-suit-black uppercase">TAP card</span>
|
||||
</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Select / unselect for move</div>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-suit-black" data-icon="east">east</span>
|
||||
<span class="font-jetbrains text-[13px] font-medium text-suit-black uppercase">DRAG stack</span>
|
||||
</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Move with translucent ghost preview</div>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-suit-black" data-icon="double_arrow">double_arrow</span>
|
||||
<span class="font-jetbrains text-[13px] font-medium text-suit-black uppercase">DOUBLE-TAP</span>
|
||||
</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Auto-send to best foundation</div>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-suit-black" data-icon="touch_app">touch_app</span>
|
||||
<span class="font-jetbrains text-[13px] font-medium text-suit-black uppercase">LONG-PRESS</span>
|
||||
</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Highlight all legal moves for card</div>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-suit-black" data-icon="south">south</span>
|
||||
<span class="font-jetbrains text-[13px] font-medium text-suit-black uppercase">SWIPE DOWN</span>
|
||||
</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Reveal hidden action bar</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 3b. KEYBOARD SHORTCUTS -->
|
||||
<section class="space-y-3">
|
||||
<h2 class="font-jetbrains text-[11px] font-medium tracking-widest text-on-surface-variant/60 uppercase">KEYBOARD SHORTCUTS</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- Row 1 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] font-jetbrains text-[13px] font-medium text-suit-black uppercase">[U]</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Undo last move</div>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] font-jetbrains text-[13px] font-medium text-suit-black uppercase">[H]</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Show hint</div>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] font-jetbrains text-[13px] font-medium text-suit-black uppercase">[N]</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">New game</div>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] font-jetbrains text-[13px] font-medium text-suit-black uppercase">[A]</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Auto-complete (when possible)</div>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="h-[56px] bg-surface-container rounded-lg px-3 flex items-center border border-outline/10">
|
||||
<div class="w-[40%] font-jetbrains text-[13px] font-medium text-suit-black uppercase">[ESC]</div>
|
||||
<div class="w-[60%] font-jetbrains text-[12px] text-on-surface-variant leading-tight">Pause / back</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- 4. Footer -->
|
||||
<footer class="h-[24px] bg-surface-container border-t border-outline/20 flex items-center justify-between px-2 shrink-0">
|
||||
<div class="font-jetbrains text-[10px] text-suit-black">
|
||||
<span class="opacity-80">▌ NORMAL │ help</span>
|
||||
</div>
|
||||
<div class="font-jetbrains text-[10px] uppercase tracking-wider flex items-center gap-1">
|
||||
<span class="text-outline">PRESS</span>
|
||||
<span class="text-on-surface-variant">[ESC]</span>
|
||||
<span class="text-outline">OR TAP</span>
|
||||
<span class="text-on-surface-variant">×</span>
|
||||
<span class="text-outline">TO RETURN</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>RS_TERMINAL_OS - Rusty Solitaire</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&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;
|
||||
font-size: 18px;
|
||||
}
|
||||
body {
|
||||
background-color: #151515;
|
||||
color: #d0d0d0;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scanline {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: rgba(26, 26, 26, 0.5);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #151515;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #353535;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-dim": "#101417",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-error": "#690005",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"on-tertiary": "#4c195b",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"outline-variant": "#3f484e",
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface": "#151515",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"background": "#101417",
|
||||
"surface-container": "#202020",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-surface": "#d0d0d0",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-background": "#e0e3e6",
|
||||
"secondary-container": "#435401",
|
||||
"error": "#fb9fb1",
|
||||
"info": "#12cfc0",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"warning": "#ddb26f",
|
||||
"inverse-primary": "#00668a",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"suit-black": "#d0d0d0",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-secondary": "#293500",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"surface-container-highest": "#313538",
|
||||
"error-container": "#93000a",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-primary-container": "#004f6c",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"on-primary": "#003549",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"highlight-valid": "#acc267",
|
||||
"surface-variant": "#313538",
|
||||
"secondary": "#bad073",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"outline": "#505050",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"primary": "#a1dcff",
|
||||
"surface-bright": "#363a3d",
|
||||
"suit-red": "#fb9fb1"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0px",
|
||||
"lg": "0px",
|
||||
"xl": "0px",
|
||||
"full": "0px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-overlap": "2rem",
|
||||
"touch-target-min": "48px",
|
||||
"margin-edge": "1rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"action-bar-height": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"label-caps": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface h-screen flex flex-col antialiased">
|
||||
<!-- TOP BAR (32px) -->
|
||||
<header class="h-8 bg-surface-container border-b border-outline flex items-center justify-between px-4 z-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-primary-container font-bold">▌</span>
|
||||
<h1 class="font-headline text-[14px] font-bold tracking-tight text-on-surface">RS_TERMINAL_OS</h1>
|
||||
</div>
|
||||
<nav class="flex gap-4 font-label-caps text-[12px] uppercase tracking-widest">
|
||||
<span class="text-primary-container">[ HOME ]</span>
|
||||
<span class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer">· PLAY</span>
|
||||
<span class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer">· STATS</span>
|
||||
<span class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer">· SETTINGS</span>
|
||||
</nav>
|
||||
<div class="flex items-center gap-3 font-label-caps text-[11px] text-on-surface-variant">
|
||||
<div class="flex items-center gap-1">
|
||||
<span>LV 12</span>
|
||||
<span class="text-outline">|</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>XP 320/500</span>
|
||||
<div class="w-[60px] h-1 bg-surface-container-highest">
|
||||
<div class="h-full bg-primary-container w-[64%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-outline">|</span>
|
||||
<div class="flex items-center gap-1 text-info">
|
||||
<span class="w-2 h-2 rounded-full bg-info"></span>
|
||||
<span class="uppercase">Synced</span>
|
||||
</div>
|
||||
<span class="text-outline">|</span>
|
||||
<span class="text-outline">v0.20.0</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- MAIN CONTENT AREA -->
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
<!-- LEFT PANE (40%) -->
|
||||
<section class="w-[40%] border-r border-outline flex flex-col p-8 gap-8 overflow-y-auto custom-scrollbar">
|
||||
<div class="space-y-1">
|
||||
<p class="text-outline font-label-caps text-xs">▌play.tsx</p>
|
||||
<h2 class="font-headline text-[32px] font-bold text-on-surface leading-none uppercase">Ready to play?</h2>
|
||||
<p class="text-on-surface-variant font-label-caps text-sm tracking-wide">RESUME · 12:34 ELAPSED · DRAW-3</p>
|
||||
</div>
|
||||
<button class="w-full h-24 bg-primary-container text-surface font-headline text-[24px] font-bold flex items-center justify-center gap-4 hover:brightness-110 active:scale-[0.98] transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||
CONTINUE GAME
|
||||
</button>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="h-12 border border-outline bg-transparent text-on-surface font-label-caps text-sm hover:border-primary-container hover:text-primary-container transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
NEW GAME
|
||||
</button>
|
||||
<button class="h-12 border border-outline bg-transparent text-on-surface font-label-caps text-sm hover:border-primary-container hover:text-primary-container transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">refresh</span>
|
||||
RESTART RUN
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-outline font-label-caps text-xs uppercase tracking-widest">Game Modes</p>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Zen -->
|
||||
<div class="aspect-square border border-outline flex flex-col items-center justify-center gap-2 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary-container">spa</span>
|
||||
<span class="font-label-caps text-[10px] uppercase">Zen</span>
|
||||
</div>
|
||||
<!-- Time Attack -->
|
||||
<div class="aspect-square border border-outline flex flex-col items-center justify-center gap-2 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary-container">timer</span>
|
||||
<span class="font-label-caps text-[10px] uppercase text-center">Time<br/>Attack</span>
|
||||
</div>
|
||||
<!-- Locked Challenge -->
|
||||
<div class="aspect-square bg-[#0d0d0d] border border-outline/30 flex flex-col items-center justify-center gap-2 relative opacity-60">
|
||||
<span class="material-symbols-outlined text-outline">lock</span>
|
||||
<span class="font-label-caps text-[10px] uppercase">Challenge</span>
|
||||
<div class="absolute -top-2 -right-2 bg-warning text-surface px-1 py-0.5 text-[8px] font-bold">LV 5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- VISUAL DECORATION (IMAGE PLACEHOLDER) -->
|
||||
<div class="mt-auto pt-8">
|
||||
<div class="w-full h-40 border border-outline overflow-hidden">
|
||||
<img class="w-full h-full object-cover opacity-40 grayscale hover:grayscale-0 transition-all duration-700" data-alt="A dark, high-contrast digital art piece showing an abstract terminal interface with glowing cyan scanlines and retro-futuristic grid patterns. The composition is geometric and minimalist, following a synthwave aesthetic with deep black backgrounds and crisp cyan light elements. The lighting is moody and artificial, suggesting a high-performance computer screen in a dimly lit server room. Professional, sharp-edged UI design style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAet8SrRWSacZfwd8ISRQdDC7CDGixBwRnPAVMmMcjbifq1jnHSzCGWgSSL6YPSRfCkLNWr91BxTzV4zigGjMBLlk7rCLo5I7X7F6ydinDrKJVqZkRbvHJeSo90BPANoQwZtzPvhKXVEA9C2DbBaj8KPR4ObCo24Mj25NXPvGNThOE-3BSpuU6MPC-hrUMPVCPJpZnJdI_OmSz8mT021vjTxFERN12S1PFOzXKmNUDleoTDIat-8UifyKmKg4eKilecrBW6sFqaBw"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CENTER PANE (30%) -->
|
||||
<section class="w-[30%] border-r border-outline flex flex-col p-8 gap-8 overflow-y-auto custom-scrollbar">
|
||||
<div class="space-y-1">
|
||||
<p class="text-outline font-label-caps text-xs">▌daily.json</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-headline text-[18px] font-bold text-on-surface">MAY 07 · 2026</h3>
|
||||
<span class="bg-warning/20 text-warning px-2 py-1 text-[10px] font-bold border border-warning/40">EXPIRES 11:42:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container p-6 border border-outline space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-on-surface-variant font-label-caps text-[10px] uppercase tracking-tighter">Current Seed</p>
|
||||
<p class="font-headline text-[24px] font-extrabold text-highlight-valid">#2024-127</p>
|
||||
</div>
|
||||
<button class="w-full py-3 bg-primary-container text-surface font-label-caps text-xs font-bold uppercase tracking-widest hover:brightness-110 active:scale-95 transition-all">
|
||||
▶ Attempt Today
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-outline font-label-caps text-xs uppercase tracking-widest">Global Standings</p>
|
||||
<div class="space-y-1 text-xs font-label-caps">
|
||||
<div class="flex justify-between py-2 border-b border-outline/30 text-highlight-valid">
|
||||
<span>01 │ swift_jaguar</span>
|
||||
<span>02:47</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-outline/30 text-on-surface-variant">
|
||||
<span>02 │ pixel_drifter</span>
|
||||
<span>03:12</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-outline/30 text-on-surface-variant">
|
||||
<span>03 │ null_ptr</span>
|
||||
<span>03:15</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b border-outline/30 text-on-surface-variant">
|
||||
<span>04 │ core_dump_88</span>
|
||||
<span>03:44</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 text-primary-container bg-primary-container/10 px-2 -mx-2">
|
||||
<span>12 │ YOU (anon)</span>
|
||||
<span>--:--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RIGHT PANE (30%) -->
|
||||
<section class="w-[30%] flex flex-col p-8 gap-8 overflow-y-auto custom-scrollbar">
|
||||
<div class="space-y-1">
|
||||
<p class="text-outline font-label-caps text-xs">▌stats.log</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="border border-outline p-4 space-y-1">
|
||||
<p class="text-on-surface-variant text-[10px] uppercase">Games</p>
|
||||
<p class="font-hud-score text-[28px] text-on-surface">247</p>
|
||||
</div>
|
||||
<div class="border border-outline p-4 space-y-1 text-highlight-valid">
|
||||
<p class="text-on-surface-variant text-[10px] uppercase">Win Rate</p>
|
||||
<p class="font-hud-score text-[28px]">61%</p>
|
||||
</div>
|
||||
<div class="border border-outline p-4 space-y-1">
|
||||
<p class="text-on-surface-variant text-[10px] uppercase">Best Time</p>
|
||||
<p class="font-hud-score text-[28px]">01:54</p>
|
||||
</div>
|
||||
<div class="border border-outline p-4 space-y-1 text-primary-container">
|
||||
<p class="text-on-surface-variant text-[10px] uppercase">Streak</p>
|
||||
<p class="font-hud-score text-[28px]">7</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-outline font-label-caps text-xs uppercase tracking-widest">Achievements (8/19)</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!-- Filled Cyan Dots -->
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<div class="w-3 h-3 bg-primary-container"></div>
|
||||
<!-- Empty Dots -->
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
<div class="w-3 h-3 border border-outline"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto border border-outline bg-surface-container p-4 flex items-center justify-between hover:border-primary-container transition-colors cursor-pointer group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-primary-container text-surface flex items-center justify-center font-bold text-lg">RS</div>
|
||||
<div class="space-y-0.5">
|
||||
<p class="text-on-surface font-bold text-xs">anonymous@local</p>
|
||||
<p class="text-on-surface-variant text-[10px]">Session: Active</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary-container group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BOTTOM BAR (24px) -->
|
||||
<footer class="h-6 bg-surface-container border-t border-outline flex items-center justify-between px-4 text-[10px] font-label-caps">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-primary-container">▌ NORMAL</span>
|
||||
<span class="text-outline">│</span>
|
||||
<span class="text-on-surface-variant">~/rusty-solitaire/home</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-on-surface-variant">
|
||||
<div class="flex items-center gap-1"><span class="text-primary-container">[SPACE]</span> play</div>
|
||||
<div class="flex items-center gap-1"><span class="text-primary-container">[D]</span> daily</div>
|
||||
<div class="flex items-center gap-1"><span class="text-primary-container">[S]</span> settings</div>
|
||||
<div class="flex items-center gap-1"><span class="text-primary-container">[?]</span> help</div>
|
||||
</div>
|
||||
<div class="text-outline">
|
||||
2026-05-07 17:42 EDT
|
||||
</div>
|
||||
</footer>
|
||||
<!-- GLOBAL SCANLINE EFFECT -->
|
||||
<div class="fixed inset-0 pointer-events-none z-[100] overflow-hidden opacity-10">
|
||||
<div class="absolute inset-0" style="background: repeating-linear-gradient(0deg, #151515, #151515 2px, #202020 4px);"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rusty Solitaire - Main Menu</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400&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": {
|
||||
"outline": "#505050",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"suit-black": "#d0d0d0",
|
||||
"surface-container-high": "#272a2d",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"background": "#101417",
|
||||
"primary-container": "#6fc2ef",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-surface": "#d0d0d0",
|
||||
"primary": "#a1dcff",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"secondary-container": "#435401",
|
||||
"inverse-primary": "#00668a",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"warning": "#ddb26f",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"suit-red": "#fb9fb1",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"info": "#12cfc0",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"error": "#fb9fb1",
|
||||
"surface-variant": "#313538",
|
||||
"on-error": "#690005",
|
||||
"surface": "#151515",
|
||||
"surface-container": "#202020",
|
||||
"on-primary-container": "#004f6c",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-secondary": "#293500",
|
||||
"error-container": "#93000a",
|
||||
"secondary": "#bad073",
|
||||
"tertiary": "#f7c3ff",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"surface-container-highest": "#313538",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-primary": "#003549",
|
||||
"on-background": "#e0e3e6",
|
||||
"surface-dim": "#101417",
|
||||
"on-tertiary": "#4c195b",
|
||||
"highlight-valid": "#acc267"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-edge": "1rem",
|
||||
"touch-target-min": "48px",
|
||||
"stack-overlap": "2rem",
|
||||
"action-bar-height": "64px",
|
||||
"gutter-card": "0.375rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"card-rank": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"hud-timer": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
||||
"headline": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700" }],
|
||||
"label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500" }],
|
||||
"hud-score": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||
"body-md": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
||||
"card-rank": ["18px", { "lineHeight": "18px", "fontWeight": "700" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.scanline {
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
|
||||
background-size: 100% 4px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-hud-timer min-h-screen flex flex-col relative overflow-hidden">
|
||||
<!-- Subtle CRT scanline overlay -->
|
||||
<div class="absolute inset-0 pointer-events-none scanline opacity-20 z-0"></div>
|
||||
<!-- Status Bar Zone -->
|
||||
<div class="h-6 w-full flex justify-end items-center px-margin-edge pt-2 z-10 relative">
|
||||
<div class="w-2 h-2 rounded-full bg-info"></div>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<header class="px-margin-edge pt-4 pb-6 flex justify-between items-center z-10 relative">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="font-headline text-headline text-on-surface">▌RUSTY SOLITAIRE</span>
|
||||
<div class="w-2 h-6 bg-primary-container inline-block ml-1 animate-pulse"></div>
|
||||
</div>
|
||||
<div class="bg-surface-container px-3 py-1 flex items-center gap-2 border border-outline">
|
||||
<span class="font-label-caps text-label-caps text-on-surface">LV 12</span>
|
||||
<div class="w-2 h-2 rounded-full bg-highlight-celebration"></div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 px-margin-edge flex flex-col gap-8 z-10 relative pb-24 overflow-y-auto">
|
||||
<!-- XP Section -->
|
||||
<section class="flex flex-col gap-2">
|
||||
<div class="w-full h-1 bg-surface-container border border-outline relative">
|
||||
<div class="absolute top-0 left-0 h-full bg-primary-container w-[64%]"></div>
|
||||
</div>
|
||||
<div class="font-label-caps text-label-caps text-on-surface-variant text-right">
|
||||
320 / 500 XP
|
||||
</div>
|
||||
</section>
|
||||
<!-- Primary Action -->
|
||||
<section class="flex flex-col gap-2">
|
||||
<button class="w-full h-[56px] bg-primary-container text-surface flex items-center justify-center gap-2 hover:bg-surface-tint transition-colors duration-120">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||
<span class="font-label-caps text-[14px] uppercase tracking-widest font-bold">PLAY</span>
|
||||
</button>
|
||||
<div class="font-label-caps text-label-caps text-on-surface-variant text-center">
|
||||
RESUME LAST GAME · 12:34 ELAPSED
|
||||
</div>
|
||||
</section>
|
||||
<!-- Daily Challenge Tile -->
|
||||
<section>
|
||||
<div class="bg-surface-container border border-outline p-4 flex justify-between items-center hover:bg-surface-container-high transition-colors cursor-pointer group">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="font-label-caps text-label-caps text-primary">DAILY CHALLENGE</span>
|
||||
<span class="font-body-md text-body-md text-on-surface">DRAW-3 · SEED #2024-127</span>
|
||||
<div class="inline-flex">
|
||||
<span class="bg-surface px-2 py-0.5 border border-warning text-warning font-label-caps text-[10px]">EXPIRES 11:42:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform">chevron_right</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Special Modes Grid -->
|
||||
<section class="flex flex-col gap-4">
|
||||
<h2 class="font-label-caps text-label-caps text-on-surface-variant">SPECIAL MODES</h2>
|
||||
<div class="grid grid-cols-3 gap-gutter-card">
|
||||
<!-- ZEN -->
|
||||
<button class="aspect-square bg-surface border border-outline flex flex-col items-center justify-center gap-2 hover:border-primary hover:text-primary transition-colors text-on-surface">
|
||||
<span class="material-symbols-outlined text-[32px]">self_improvement</span>
|
||||
<span class="font-label-caps text-label-caps">ZEN</span>
|
||||
</button>
|
||||
<!-- TIME ATTACK -->
|
||||
<button class="aspect-square bg-surface border border-outline flex flex-col items-center justify-center gap-2 hover:border-primary hover:text-primary transition-colors text-on-surface">
|
||||
<span class="material-symbols-outlined text-[32px]">timer</span>
|
||||
<span class="font-label-caps text-label-caps">TIME ATTACK</span>
|
||||
</button>
|
||||
<!-- CHALLENGE (Locked) -->
|
||||
<button class="aspect-square bg-[#0d0d0d] border border-surface-container-high flex flex-col items-center justify-center gap-2 text-on-surface-variant opacity-75 cursor-not-allowed relative">
|
||||
<span class="material-symbols-outlined text-[32px]">lock</span>
|
||||
<span class="font-label-caps text-label-caps">CHALLENGE</span>
|
||||
<div class="absolute top-2 right-2 bg-surface px-1 py-0.5 border border-warning text-warning font-label-caps text-[10px]">
|
||||
LV 5
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Secondary Nav Grid -->
|
||||
<section class="grid grid-cols-2 gap-y-4 gap-x-6 pb-6">
|
||||
<button class="flex items-center gap-3 h-[56px] border-l-2 border-outline pl-3 hover:border-primary hover:text-primary transition-colors text-on-surface justify-start">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
<span class="font-label-caps text-label-caps">STATS</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-3 h-[56px] border-l-2 border-outline pl-3 hover:border-primary hover:text-primary transition-colors text-on-surface justify-start relative">
|
||||
<span class="material-symbols-outlined">emoji_events</span>
|
||||
<span class="font-label-caps text-label-caps">ACHIEVEMENTS</span>
|
||||
<div class="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-highlight-celebration"></div>
|
||||
</button>
|
||||
<button class="flex items-center gap-3 h-[56px] border-l-2 border-outline pl-3 hover:border-primary hover:text-primary transition-colors text-on-surface justify-start">
|
||||
<span class="material-symbols-outlined">format_list_numbered</span>
|
||||
<span class="font-label-caps text-label-caps">LEADERBOARD</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-3 h-[56px] border-l-2 border-outline pl-3 hover:border-primary hover:text-primary transition-colors text-on-surface justify-start">
|
||||
<span class="material-symbols-outlined">account_circle</span>
|
||||
<span class="font-label-caps text-label-caps">PROFILE</span>
|
||||
</button>
|
||||
</section>
|
||||
<!-- Footer Links -->
|
||||
<footer class="flex flex-col items-center gap-4 mt-auto">
|
||||
<div class="flex items-center gap-4 font-label-caps text-label-caps text-primary cursor-pointer hover:text-surface-tint">
|
||||
<span>SETTINGS</span>
|
||||
<span class="text-on-surface-variant">·</span>
|
||||
<span>HELP</span>
|
||||
</div>
|
||||
<div class="font-label-caps text-[10px] text-on-surface-variant text-center opacity-60">
|
||||
v0.20.0 — TERMINAL THEME · BUILD 2026.05
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rusty Solitaire - Leaderboard</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&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>
|
||||
body {
|
||||
background-color: #151515;
|
||||
color: #e0e3e6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.scanline-overlay {
|
||||
background: linear-gradient(to bottom, rgba(21, 21, 21, 0) 50%, rgba(26, 26, 26, 0.2) 50%);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.terminal-glow {
|
||||
box-shadow: 0 0 10px rgba(111, 194, 239, 0.1);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"outline": "#505050",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"secondary-container": "#435401",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"primary": "#a1dcff",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"on-error": "#690005",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface-container": "#202020",
|
||||
"highlight-valid": "#acc267",
|
||||
"suit-black": "#d0d0d0",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-secondary": "#293500",
|
||||
"on-surface": "#e0e3e6",
|
||||
"on-tertiary-container": "#683476",
|
||||
"secondary": "#bad073",
|
||||
"surface-bright": "#363a3d",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"surface-variant": "#313538",
|
||||
"suit-red": "#fb9fb1",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"surface-container-low": "#181c1f",
|
||||
"surface": "#151515",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-primary": "#003549",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-background": "#e0e3e6",
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface-container-highest": "#313538",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"info": "#12cfc0",
|
||||
"error": "#fb9fb1",
|
||||
"warning": "#ddb26f",
|
||||
"on-primary-container": "#004f6c",
|
||||
"surface-container-high": "#272a2d",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"error-container": "#93000a",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-tertiary": "#4c195b",
|
||||
"background": "#101417",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"outline-variant": "#3f484e",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface-dim": "#101417",
|
||||
"on-primary-fixed-variant": "#004c69"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48px",
|
||||
"action-bar-height": "64px",
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md overflow-hidden h-[844px] w-[390px] mx-auto relative border-x border-outline/20">
|
||||
<div class="scanline-overlay absolute inset-0 z-0"></div>
|
||||
<!-- Top AppBar (Identity Anchor) -->
|
||||
<header class="fixed top-0 w-full h-action-bar-height z-50 flex items-center px-margin-edge justify-between bg-surface dark:bg-surface text-primary dark:text-primary border-b border-outline dark:border-outline">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">terminal</span>
|
||||
<h1 class="font-headline text-headline text-primary dark:text-primary uppercase tracking-tighter">Rusty Solitaire</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:bg-surface-variant transition-colors duration-120 p-2 rounded-lg cursor-pointer">sync</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-[64px] h-[calc(100%-64px)] flex flex-col z-10 relative">
|
||||
<!-- Pseudo Status Bar -->
|
||||
<div class="h-[32px] bg-surface-container flex items-center justify-between px-4 font-label-caps text-[10px] tracking-tight">
|
||||
<div class="text-[#a0a0a0]">▌leaderboard.tsx</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-info"></span>
|
||||
<span class="text-on-surface-variant">SYNCED</span>
|
||||
</span>
|
||||
<span class="text-outline">v0.20.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Strip -->
|
||||
<nav class="h-[40px] bg-[#1a1a1a] border-b border-[#353535] flex items-center">
|
||||
<div class="flex-1 flex flex-col items-center justify-center relative">
|
||||
<span class="font-label-caps text-[11px] text-[#6fc2ef]">[ TODAY ]</span>
|
||||
<div class="absolute bottom-0 w-full h-[2px] bg-[#6fc2ef]"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<span class="font-label-caps text-[11px] text-[#a0a0a0]">WEEK</span>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<span class="font-label-caps text-[11px] text-[#a0a0a0]">ALL-TIME</span>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<span class="font-label-caps text-[11px] text-[#a0a0a0]">FRIENDS</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="flex-1 overflow-y-auto px-margin-edge pt-4 space-y-4 pb-[88px]">
|
||||
<!-- Hero Podium Card -->
|
||||
<section class="h-[120px] bg-surface-container border border-[#353535] rounded-lg p-2 flex flex-col justify-between">
|
||||
<div class="font-label-caps text-[10px] text-[#a0a0a0]">TOP 3 · TODAY</div>
|
||||
<div class="flex gap-2 items-end justify-between flex-1 mt-1">
|
||||
<!-- 2nd -->
|
||||
<div class="flex-1 border border-[#a0a0a0] h-full rounded flex flex-col items-center justify-center relative py-1">
|
||||
<span class="font-card-rank text-[16px] text-[#a0a0a0]">02</span>
|
||||
<span class="text-[9px] font-mono text-[#d0d0d0] truncate w-full text-center px-1">base16_fan</span>
|
||||
<span class="text-[10px] font-mono text-[#a0a0a0]">03:12</span>
|
||||
</div>
|
||||
<!-- 1st -->
|
||||
<div class="flex-[1.2] border border-warning h-[110%] mb-[-2px] rounded-lg bg-surface flex flex-col items-center justify-center relative py-1 terminal-glow">
|
||||
<span class="absolute top-1 right-1 text-warning material-symbols-outlined text-[14px]">star</span>
|
||||
<span class="font-card-rank text-[24px] text-warning leading-none">01</span>
|
||||
<span class="text-[11px] font-mono text-[#d0d0d0] font-bold truncate w-full text-center px-1">swift_jaguar</span>
|
||||
<span class="text-[12px] font-mono text-[#d0d0d0]">02:47</span>
|
||||
</div>
|
||||
<!-- 3rd -->
|
||||
<div class="flex-1 border border-[#7a5d3b] h-full rounded flex flex-col items-center justify-center relative py-1">
|
||||
<span class="font-card-rank text-[16px] text-[#7a5d3b]">03</span>
|
||||
<span class="text-[9px] font-mono text-[#d0d0d0] truncate w-full text-center px-1">cli_player</span>
|
||||
<span class="text-[10px] font-mono text-[#a0a0a0]">03:54</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Search/Filter Row -->
|
||||
<div class="flex items-center gap-2 h-[40px]">
|
||||
<div class="px-3 h-8 border border-outline rounded flex items-center justify-center bg-surface-container-low">
|
||||
<span class="font-label-caps text-[10px] text-[#6fc2ef]">[ ALL TIMES ]</span>
|
||||
</div>
|
||||
<div class="flex-1 h-8 border border-outline rounded flex items-center px-2 bg-surface gap-2">
|
||||
<span class="font-mono text-[12px] text-outline">/ search players</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Leaderboard List -->
|
||||
<div class="space-y-0.5 font-mono text-[12px]">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between px-2 pb-1 border-b border-outline/20 text-outline text-[10px] uppercase font-bold tracking-widest">
|
||||
<span>Rank & User</span>
|
||||
<span>Time</span>
|
||||
</div>
|
||||
<!-- Rank 04 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">004</span>
|
||||
<span class="text-on-surface">tablejockey</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">04:01</span>
|
||||
</div>
|
||||
<!-- Rank 05 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">005</span>
|
||||
<span class="text-on-surface">vim_motions</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">04:05</span>
|
||||
</div>
|
||||
<!-- Rank 06 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">006</span>
|
||||
<span class="text-on-surface">tmux_lover</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">04:18</span>
|
||||
</div>
|
||||
<!-- Rank 07 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">007</span>
|
||||
<span class="text-on-surface">nvim_dotfiles</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">04:23</span>
|
||||
</div>
|
||||
<!-- Rank 08 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">008</span>
|
||||
<span class="text-on-surface">dark_theme</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">04:31</span>
|
||||
</div>
|
||||
<!-- Spacer for truncated view -->
|
||||
<div class="flex justify-center py-2 text-outline/30 tracking-[1em]">...</div>
|
||||
<!-- YOU (Rank 17) -->
|
||||
<div class="flex items-center justify-between px-2 py-2 bg-[#1f3a4a]/30 border border-[#6fc2ef]/40 rounded-sm">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#6fc2ef] w-8 font-bold">▶ 017</span>
|
||||
<span class="text-[#6fc2ef] font-bold">anonymous (YOU)</span>
|
||||
</div>
|
||||
<span class="text-[#6fc2ef] font-bold">04:12</span>
|
||||
</div>
|
||||
<!-- Rank 18 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">018</span>
|
||||
<span class="text-on-surface">bash_brawler</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">05:01</span>
|
||||
</div>
|
||||
<!-- Rank 19 -->
|
||||
<div class="flex items-center justify-between px-2 py-2 border-b border-[#353535]">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-[#a0a0a0] w-8">019</span>
|
||||
<span class="text-on-surface">curl_master</span>
|
||||
</div>
|
||||
<span class="text-[#a0a0a0]">05:14</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CLI Style Footer -->
|
||||
<footer class="fixed bottom-0 w-full h-[24px] bg-[#202020] border-t border-[#353535] px-2 flex items-center justify-between font-mono text-[9px] z-50">
|
||||
<div class="text-[#a0a0a0]">
|
||||
<span class="text-info font-bold">▌</span> NORMAL │ leaderboard
|
||||
</div>
|
||||
<div class="text-[#a0a0a0] flex gap-3">
|
||||
<span>[1-4] tab</span>
|
||||
<span>[/] search</span>
|
||||
<span>[ESC] back</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Shared Component: BottomNavBar -->
|
||||
<nav class="fixed bottom-[24px] w-full h-action-bar-height z-50 flex justify-around items-center bg-surface-container dark:bg-surface-container border-t border-outline dark:border-outline">
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant p-2 hover:text-primary dark:hover:text-primary transition-all duration-120 ease-linear active:bg-surface-container-highest">
|
||||
<span class="material-symbols-outlined">playing_cards</span>
|
||||
<span class="font-label-caps text-label-caps">DEAL [F1]</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant p-2 hover:text-primary dark:hover:text-primary transition-all duration-120 ease-linear active:bg-surface-container-highest">
|
||||
<span class="material-symbols-outlined">undo</span>
|
||||
<span class="font-label-caps text-label-caps">UNDO [Z]</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant p-2 hover:text-primary dark:hover:text-primary transition-all duration-120 ease-linear active:bg-surface-container-highest">
|
||||
<span class="material-symbols-outlined">lightbulb</span>
|
||||
<span class="font-label-caps text-label-caps">HINT [H]</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center bg-primary-container dark:bg-primary-container text-on-primary-container dark:text-on-primary-container rounded-none p-2 transition-all duration-120 ease-linear active:bg-surface-container-highest">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
<span class="font-label-caps text-label-caps">STATS [S]</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant p-2 hover:text-primary dark:hover:text-primary transition-all duration-120 ease-linear active:bg-surface-container-highest">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
<span class="font-label-caps text-label-caps">MENU [ESC]</span>
|
||||
</button>
|
||||
</nav>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ROOT@SOLITAIRE:~ | LEVEL UP</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&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;
|
||||
}
|
||||
.scanline-overlay {
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-glow {
|
||||
box-shadow: 0 0 24px rgba(225, 163, 238, 0.25);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"secondary-container": "#435401",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"background": "#101417",
|
||||
"on-primary": "#003549",
|
||||
"info": "#12cfc0",
|
||||
"surface-container-highest": "#313538",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-secondary": "#293500",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"surface-container-low": "#181c1f",
|
||||
"surface-container-high": "#272a2d",
|
||||
"secondary": "#bad073",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-surface": "#e0e3e6",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-tertiary": "#4c195b",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-tertiary-container": "#683476",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"inverse-primary": "#00668a",
|
||||
"primary-container": "#6fc2ef",
|
||||
"surface-container": "#1c2023",
|
||||
"on-background": "#e0e3e6",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-dim": "#101417",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"tertiary": "#f7c3ff",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"error": "#fb9fb1",
|
||||
"error-container": "#93000a",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-primary-container": "#004f6c",
|
||||
"warning": "#ddb26f",
|
||||
"surface": "#151515",
|
||||
"suit-black": "#d0d0d0",
|
||||
"highlight-valid": "#acc267",
|
||||
"outline": "#505050",
|
||||
"surface-variant": "#313538",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-error": "#690005",
|
||||
"primary": "#a1dcff",
|
||||
"suit-red": "#fb9fb1"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "0.375rem",
|
||||
"action-bar-height": "64px",
|
||||
"stack-overlap": "2rem",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md overflow-hidden h-screen select-none">
|
||||
<!-- Top App Bar -->
|
||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-margin-edge h-action-bar-height bg-background dark:bg-background border-b border-outline-variant dark:border-outline-variant">
|
||||
<div class="font-headline text-headline text-primary dark:text-primary uppercase tracking-tighter">ROOT@SOLITAIRE:~</div>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="memory">memory</span>
|
||||
<span class="material-symbols-outlined text-primary" data-icon="settings_ethernet">settings_ethernet</span>
|
||||
<span class="material-symbols-outlined text-primary" data-icon="wifi_tethering">wifi_tethering</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Tableau (Dimmed Background) -->
|
||||
<main class="pt-24 px-4 flex flex-col gap-8 opacity-20 filter grayscale">
|
||||
<!-- HUD Chips -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="bg-surface-container p-3 flex flex-col">
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">SCORE</span>
|
||||
<span class="font-hud-score text-hud-score text-primary">04,820</span>
|
||||
</div>
|
||||
<div class="bg-surface-container p-3 flex flex-col items-end">
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">TIMER</span>
|
||||
<span class="font-hud-timer text-hud-timer text-on-surface">04:12</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Foundation & Stock -->
|
||||
<div class="flex gap-gutter-card justify-between">
|
||||
<div class="flex gap-gutter-card">
|
||||
<div class="w-[64px] h-[88px] border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="w-[64px] h-[88px] bg-surface border border-outline rounded-DEFAULT relative overflow-hidden">
|
||||
<div class="absolute inset-0 scanline-overlay"></div>
|
||||
<div class="absolute top-2 left-2 w-3 h-4 bg-suit-red-cb"></div>
|
||||
<div class="absolute bottom-2 right-2 font-card-rank text-[12px] text-on-surface">▌RS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-gutter-card">
|
||||
<div class="w-[64px] h-[88px] border border-outline rounded-DEFAULT bg-surface"></div>
|
||||
<div class="w-[64px] h-[88px] border border-outline rounded-DEFAULT bg-surface"></div>
|
||||
<div class="w-[64px] h-[88px] border border-outline rounded-DEFAULT bg-surface"></div>
|
||||
<div class="w-[64px] h-[88px] border border-outline rounded-DEFAULT bg-surface"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cascades -->
|
||||
<div class="grid grid-cols-7 gap-gutter-card">
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
<div class="h-24 border border-dashed border-outline rounded-DEFAULT"></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- CELEBRATION OVERLAY SCREEM -->
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-surface/95 backdrop-blur-sm">
|
||||
<!-- Celebration Card -->
|
||||
<div class="w-[340px] h-[480px] bg-[#202020] border border-highlight-celebration rounded-xl card-glow flex flex-col overflow-hidden relative">
|
||||
<!-- Title Bar -->
|
||||
<div class="h-[28px] bg-[#1a1a1a] border-b border-outline flex items-center px-4 shrink-0">
|
||||
<span class="text-primary mr-1">▌</span>
|
||||
<span class="font-headline text-[12px] text-[#a0a0a0]">level-up.tsx</span>
|
||||
</div>
|
||||
<!-- Content Area -->
|
||||
<div class="flex-grow p-6 flex flex-col">
|
||||
<!-- Hero Band -->
|
||||
<div class="text-center mb-6">
|
||||
<div class="font-headline text-[14px] text-highlight-celebration uppercase tracking-[0.08em] mb-2">▲ LEVEL UP</div>
|
||||
<div class="flex items-baseline justify-center gap-2">
|
||||
<span class="font-headline font-bold text-[96px] text-suit-black leading-none tracking-tighter">13</span>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-label-caps text-[11px] text-outline uppercase">FROM 12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 font-headline font-medium text-[13px] text-highlight-celebration tracking-[0.08em]">█ NEW PERKS UNLOCKED</div>
|
||||
</div>
|
||||
<!-- Perks List -->
|
||||
<div class="space-y-2 mb-6">
|
||||
<!-- Item 1 -->
|
||||
<div class="h-[48px] bg-[#1a1a1a] rounded-[4px] px-3 flex items-center justify-between">
|
||||
<span class="font-headline text-[13px] text-suit-black">▢ +1 daily challenge slot</span>
|
||||
<span class="bg-highlight-celebration/10 text-highlight-celebration px-2 py-0.5 rounded-full font-label-caps text-[10px] border border-highlight-celebration/30">NEW</span>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="h-[48px] bg-[#1a1a1a] rounded-[4px] px-3 flex items-center justify-between">
|
||||
<span class="font-headline text-[13px] text-suit-black">▢ Background: Forest</span>
|
||||
<span class="bg-highlight-valid/10 text-highlight-valid px-2 py-0.5 rounded-full font-label-caps text-[10px] border border-highlight-valid/30">UNLOCKED</span>
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<div class="h-[48px] bg-[#1a1a1a] rounded-[4px] px-3 flex items-center justify-between">
|
||||
<span class="font-headline text-[13px] text-suit-black">▢ Card-back: Stripes</span>
|
||||
<span class="bg-highlight-valid/10 text-highlight-valid px-2 py-0.5 rounded-full font-label-caps text-[10px] border border-highlight-valid/30">UNLOCKED</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- XP Recap -->
|
||||
<div class="h-[48px] bg-[#1a1a1a] rounded-[4px] px-4 flex items-center justify-between mt-auto">
|
||||
<span class="font-headline text-[12px] text-[#a0a0a0]">XP</span>
|
||||
<span class="font-headline font-bold text-[14px] text-highlight-valid uppercase">+200 XP THIS LEVEL</span>
|
||||
<div class="w-[60px] h-[4px] bg-outline-variant rounded-full overflow-hidden">
|
||||
<div class="w-[0%] h-full bg-suit-red-cb"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Button -->
|
||||
<button class="h-[56px] w-full bg-suit-red-cb flex items-center justify-center gap-2 hover:opacity-90 active:opacity-75 transition-opacity">
|
||||
<span class="font-headline font-bold text-[14px] text-background tracking-wider">▶ CONTINUE</span>
|
||||
</button>
|
||||
<!-- Scanline layer inside card -->
|
||||
<div class="absolute inset-0 scanline-overlay opacity-20 pointer-events-none"></div>
|
||||
</div>
|
||||
<!-- Caption -->
|
||||
<div class="absolute bottom-8 w-full text-center">
|
||||
<span class="font-body-md text-[11px] text-[#a0a0a0] uppercase tracking-widest opacity-60">Tap anywhere to dismiss</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Nav Bar -->
|
||||
<nav class="fixed bottom-0 w-full z-50 flex justify-between items-center h-action-bar-height bg-surface-container dark:bg-surface-container border-t border-outline dark:border-outline">
|
||||
<div class="flex flex-col items-center justify-center bg-primary text-background p-2 w-1/5 h-full transition-colors font-label-caps text-label-caps uppercase tracking-widest">
|
||||
<span class="material-symbols-outlined" data-icon="videogame_asset">videogame_asset</span>
|
||||
<span>NORMAL</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 w-1/5 h-full hover:text-primary transition-colors font-label-caps text-label-caps uppercase tracking-widest">
|
||||
<span class="material-symbols-outlined" data-icon="edit">edit</span>
|
||||
<span>INSERT</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 w-1/5 h-full hover:text-primary transition-colors font-label-caps text-label-caps uppercase tracking-widest">
|
||||
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
||||
<span>VISUAL</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 w-1/5 h-full hover:text-primary transition-colors font-label-caps text-label-caps uppercase tracking-widest">
|
||||
<span class="material-symbols-outlined" data-icon="auto_fix_high">auto_fix_high</span>
|
||||
<span>SOLVE</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 w-1/5 h-full hover:text-primary transition-colors font-label-caps text-label-caps uppercase tracking-widest">
|
||||
<span class="material-symbols-outlined" data-icon="power_settings_new">power_settings_new</span>
|
||||
<span>QUIT</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Persistent Background Overlay (CRT Effect) -->
|
||||
<div class="fixed inset-0 pointer-events-none z-[200] scanline-overlay opacity-30"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface": "#151515",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"surface-variant": "#313538",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"primary": "#a1dcff",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-tertiary-container": "#683476",
|
||||
"secondary": "#bad073",
|
||||
"surface-dim": "#101417",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-tertiary": "#4c195b",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"surface-container": "#202020",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"background": "#101417",
|
||||
"suit-red": "#fb9fb1",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"error": "#fb9fb1",
|
||||
"on-surface": "#d0d0d0",
|
||||
"info": "#12cfc0",
|
||||
"secondary-container": "#435401",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"surface-bright": "#363a3d",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"warning": "#ddb26f",
|
||||
"surface-container-highest": "#313538",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"highlight-valid": "#acc267",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-error": "#690005",
|
||||
"on-primary-container": "#004f6c",
|
||||
"suit-black": "#d0d0d0",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-secondary": "#293500",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"outline": "#505050",
|
||||
"error-container": "#93000a",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-background": "#e0e3e6",
|
||||
"on-primary": "#003549",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"primary-fixed-dim": "#7ed0fe"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-edge": "1rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"touch-target-min": "48dp",
|
||||
"stack-overlap": "2rem",
|
||||
"action-bar-height": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #151515;
|
||||
color: #d0d0d0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.card-scanline {
|
||||
background: linear-gradient(rgba(21, 21, 21, 0) 50%, rgba(26, 26, 26, 1) 50%);
|
||||
background-size: 100% 4px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex items-center justify-center min-h-screen">
|
||||
<!-- Mobile Canvas (390x844 simulated) -->
|
||||
<main class="w-[390px] h-[844px] bg-surface relative overflow-hidden flex flex-col">
|
||||
<!-- Status Bar -->
|
||||
<header class="h-8 bg-surface-container flex items-center justify-between px-margin-edge border-b border-outline-variant">
|
||||
<div class="font-hud-timer text-[11px] text-primary tracking-tight">▌onboard/01-draw.tsx</div>
|
||||
<div class="font-hud-timer text-[11px] text-on-surface-variant font-bold">STEP 1 OF 3</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<div class="flex-1 overflow-y-auto pb-action-bar-height">
|
||||
<!-- Hero Section -->
|
||||
<section class="h-[140px] flex flex-col items-center justify-center mt-8">
|
||||
<div class="w-8 h-12 bg-primary animate-pulse mb-2"></div>
|
||||
<h1 class="font-headline text-headline text-on-surface uppercase tracking-tighter">
|
||||
WELCOME <span class="text-primary">▌_</span>
|
||||
</h1>
|
||||
</section>
|
||||
<!-- Headline -->
|
||||
<section class="px-margin-edge mt-4 text-center">
|
||||
<h2 class="font-headline text-[22px] leading-tight text-on-surface mb-1">CHOOSE A DRAW MODE</h2>
|
||||
<p class="font-body-md text-[12px] text-on-surface-variant">You can change this any time in Settings.</p>
|
||||
</section>
|
||||
<!-- Choice Cards -->
|
||||
<section class="px-margin-edge mt-8 space-y-4">
|
||||
<!-- DRAW-3 Card -->
|
||||
<div class="h-[120px] bg-surface-container border border-primary p-4 relative flex items-start gap-4">
|
||||
<div class="absolute top-0 right-0 bg-primary px-2 py-0.5">
|
||||
<span class="font-label-caps text-[10px] text-surface font-bold">RECOMMENDED</span>
|
||||
</div>
|
||||
<div class="w-12 h-16 flex items-center justify-center border border-outline-variant bg-surface-dim">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="filter_3">filter_3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline text-[16px] text-primary mb-1">DRAW-3 (CLASSIC)</h3>
|
||||
<p class="font-hud-timer text-[12px] leading-snug text-on-surface-variant">
|
||||
Cycle 3 cards at a time. Standard solitaire rules for a tactical challenge.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DRAW-1 Card -->
|
||||
<div class="h-[120px] bg-surface-container border border-outline-variant p-4 flex items-start gap-4">
|
||||
<div class="w-12 h-16 flex items-center justify-center border border-outline-variant bg-surface-dim">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="filter_1">filter_1</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline text-[16px] text-on-surface mb-1">DRAW-1 (EASY)</h3>
|
||||
<p class="font-hud-timer text-[12px] leading-snug text-on-surface-variant">
|
||||
Cycle one card at a time. More winnable, faster pace, perfect for quick sessions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Step Indicator -->
|
||||
<section class="mt-12 flex flex-col items-center">
|
||||
<div class="flex gap-2 mb-2">
|
||||
<div class="w-8 h-1.5 bg-primary"></div>
|
||||
<div class="w-8 h-1.5 bg-outline-variant"></div>
|
||||
<div class="w-8 h-1.5 bg-outline-variant"></div>
|
||||
</div>
|
||||
<div class="font-hud-timer text-[12px] flex gap-4">
|
||||
<span class="text-primary font-bold">[1]</span>
|
||||
<span class="text-outline-variant">[2]</span>
|
||||
<span class="text-outline-variant">[3]</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Bottom Action Bar -->
|
||||
<footer class="h-action-bar-height bg-surface-container border-t border-outline flex items-center justify-between px-margin-edge fixed bottom-0 w-[390px] z-50">
|
||||
<!-- Back Button (Disabled/Muted) -->
|
||||
<button class="w-[48%] h-12 border border-outline-variant flex items-center justify-center gap-2 opacity-40 cursor-not-allowed">
|
||||
<span class="material-symbols-outlined text-outline-variant text-[18px]" data-icon="arrow_back">arrow_back</span>
|
||||
<span class="font-label-caps text-outline-variant">BACK</span>
|
||||
</button>
|
||||
<!-- Next Button -->
|
||||
<button class="w-[48%] h-12 bg-primary flex items-center justify-center gap-2 active:opacity-80 transition-opacity">
|
||||
<span class="font-headline text-[14px] text-surface font-bold uppercase tracking-widest">NEXT</span>
|
||||
<span class="material-symbols-outlined text-surface text-[18px]" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Terminal Overlay (Faint scanlines for atmosphere) -->
|
||||
<div class="pointer-events-none absolute inset-0 opacity-[0.03] card-scanline z-[100]"></div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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&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": {
|
||||
"outline-variant": "#3f484e",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"surface-bright": "#363a3d",
|
||||
"secondary-container": "#435401",
|
||||
"info": "#12cfc0",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface-container": "#202020",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-surface": "#d0d0d0",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"error": "#fb9fb1",
|
||||
"background": "#101417",
|
||||
"suit-red": "#fb9fb1",
|
||||
"surface-dim": "#101417",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-tertiary-container": "#683476",
|
||||
"secondary": "#bad073",
|
||||
"primary": "#a1dcff",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-tertiary": "#4c195b",
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface": "#151515",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"surface-variant": "#313538",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-primary": "#003549",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"outline": "#505050",
|
||||
"on-secondary": "#293500",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-background": "#e0e3e6",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"error-container": "#93000a",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-primary-container": "#004f6c",
|
||||
"suit-black": "#d0d0d0",
|
||||
"inverse-primary": "#00668a",
|
||||
"on-error": "#690005",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"surface-container-highest": "#313538",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"highlight-valid": "#acc267",
|
||||
"warning": "#ddb26f",
|
||||
"tertiary-container": "#e1a3ee"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-edge": "1rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"touch-target-min": "48dp",
|
||||
"stack-overlap": "2rem",
|
||||
"action-bar-height": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.scanline-bg {
|
||||
background: linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md select-none overflow-hidden h-screen flex flex-col">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 w-full bg-background z-50 border-b border-outline flex justify-between items-center px-margin-edge h-action-bar-height">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="terminal">terminal</span>
|
||||
<span class="font-headline text-headline text-primary uppercase tracking-tighter text-sm md:text-base">▌onboard/03-demo.tsx</span>
|
||||
</div>
|
||||
<div class="font-label-caps text-label-caps text-on-surface-variant">STEP 3 OF 3</div>
|
||||
</header>
|
||||
<main class="flex-1 mt-[64px] mb-[64px] flex flex-col items-center px-margin-edge pt-6 space-y-6 overflow-y-auto">
|
||||
<!-- Header Text -->
|
||||
<div class="w-full text-center space-y-2">
|
||||
<h1 class="font-headline text-headline text-on-surface">TRY IT OUT</h1>
|
||||
<p class="font-body-md text-on-surface-variant max-w-xs mx-auto">Tap a face-up card to auto-move it to the best legal pile.</p>
|
||||
</div>
|
||||
<!-- Demo Panel -->
|
||||
<div class="w-full max-w-sm bg-surface border border-outline p-6 rounded-lg relative overflow-hidden">
|
||||
<!-- Subtle scanline background effect for "terminal" pane feel -->
|
||||
<div class="absolute inset-0 scanline-bg opacity-10 pointer-events-none"></div>
|
||||
<div class="relative z-10 flex flex-col items-center">
|
||||
<!-- Foundation Slot -->
|
||||
<div class="w-20 h-28 border border-dashed border-outline-variant flex items-center justify-center mb-12">
|
||||
<span class="material-symbols-outlined text-outline-variant opacity-40 text-4xl" data-icon="spades">playing_cards</span>
|
||||
</div>
|
||||
<!-- Path Indicator (The Arrow) -->
|
||||
<div class="absolute top-[84px] left-1/2 -translate-x-1/2 flex flex-col items-center">
|
||||
<div class="font-label-caps text-secondary text-[10px] mb-1">MOVES HERE</div>
|
||||
<span class="material-symbols-outlined text-secondary text-3xl font-bold" data-icon="arrow_upward">arrow_upward</span>
|
||||
</div>
|
||||
<!-- Mini-Cards Row -->
|
||||
<div class="flex gap-gutter-card">
|
||||
<!-- A-Spades (Target) -->
|
||||
<div class="w-20 h-28 bg-surface border-2 border-primary rounded flex flex-col justify-between p-2 relative ring-1 ring-primary ring-offset-2 ring-offset-surface">
|
||||
<div class="font-card-rank text-card-rank text-suit-black">A</div>
|
||||
<span class="material-symbols-outlined self-end text-3xl text-suit-black" data-icon="spades" style="font-variation-settings: 'FILL' 1;">playing_cards</span>
|
||||
<!-- Pulse Icon -->
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-4xl opacity-80" data-icon="touch_app">touch_app</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- K-Hearts -->
|
||||
<div class="w-20 h-28 bg-surface border border-suit-red rounded flex flex-col justify-between p-2 opacity-50">
|
||||
<div class="font-card-rank text-card-rank text-suit-red">K</div>
|
||||
<span class="material-symbols-outlined self-end text-3xl text-suit-red" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</div>
|
||||
<!-- Q-Clubs -->
|
||||
<div class="w-20 h-28 bg-surface border border-outline rounded flex flex-col justify-between p-2 opacity-50">
|
||||
<div class="font-card-rank text-card-rank text-on-surface">Q</div>
|
||||
<span class="material-symbols-outlined self-end text-3xl text-on-surface" data-icon="clubs">groups</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CLI Prompt -->
|
||||
<div class="w-full max-w-sm flex items-center gap-2 font-label-caps text-on-surface py-2">
|
||||
<span class="text-primary">▌</span>
|
||||
<span class="tracking-widest">TAP THE A♠ TO CONTINUE</span>
|
||||
<span class="w-3 h-5 bg-primary animate-pulse"></span>
|
||||
</div>
|
||||
<!-- Feature List -->
|
||||
<div class="w-full max-w-sm space-y-3 pt-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="font-label-caps text-label-caps">TAP TO AUTO-MOVE</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="font-label-caps text-label-caps">DRAG TO TARGET PILE</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="font-label-caps text-label-caps">DOUBLE-TAP TO FOUNDATION</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step Indicators -->
|
||||
<div class="flex gap-2 py-4">
|
||||
<div class="w-8 h-1 bg-primary"></div>
|
||||
<div class="w-8 h-1 bg-primary"></div>
|
||||
<div class="w-8 h-1 bg-primary"></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 w-full h-[64px] bg-surface-container border-t border-outline flex items-center px-margin-edge justify-between z-50">
|
||||
<button class="px-6 py-2 border border-outline text-on-surface-variant font-label-caps text-label-caps transition-colors duration-120 active:bg-surface-bright flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="arrow_back">arrow_back</span>
|
||||
BACK
|
||||
</button>
|
||||
<button class="px-6 py-2 bg-primary text-on-primary font-label-caps text-label-caps transition-colors duration-120 active:bg-primary-container flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="play_arrow" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||
START PLAYING
|
||||
</button>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=390, height=844, initial-scale=1.0" name="viewport"/>
|
||||
<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;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": {
|
||||
"highlight-valid": "#acc267",
|
||||
"outline": "#505050",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"error-container": "#93000a",
|
||||
"surface-container": "#202020",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"tertiary": "#f7c3ff",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"info": "#12cfc0",
|
||||
"on-tertiary": "#4c195b",
|
||||
"secondary-container": "#435401",
|
||||
"surface": "#151515",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"outline-variant": "#3f484e",
|
||||
"suit-red": "#fb9fb1",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"error": "#fb9fb1",
|
||||
"primary-container": "#6fc2ef",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-surface": "#e0e3e6",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-primary": "#003549",
|
||||
"on-secondary": "#293500",
|
||||
"on-primary-container": "#004f6c",
|
||||
"secondary": "#bad073",
|
||||
"surface-container-highest": "#313538",
|
||||
"primary": "#a1dcff",
|
||||
"surface-container-low": "#181c1f",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"warning": "#ddb26f",
|
||||
"suit-black": "#d0d0d0",
|
||||
"surface-variant": "#313538",
|
||||
"on-tertiary-container": "#683476",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-background": "#e0e3e6",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-error": "#690005",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"background": "#101417",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-error-container": "#ffdad6",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface-dim": "#101417",
|
||||
"surface-container-high": "#272a2d",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"cyan-terminal": "#6fc2ef"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48dp",
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"action-bar-height": "64px",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.scanline-pattern {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
#151515,
|
||||
#151515 2px,
|
||||
#1a1a1a 2px,
|
||||
#1a1a1a 4px
|
||||
);
|
||||
}
|
||||
.checker-pattern {
|
||||
background-color: #ffffff;
|
||||
background-image:
|
||||
linear-gradient(45deg, #004c69 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #004c69 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #004c69 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #004c69 75%);
|
||||
background-size: 8px 8px;
|
||||
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
|
||||
}
|
||||
.stripe-pattern {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
#fb9fb1,
|
||||
#fb9fb1 4px,
|
||||
#151515 4px,
|
||||
#151515 8px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen flex flex-col items-center overflow-hidden selection:bg-cyan-terminal selection:text-surface">
|
||||
<!-- 1. Status Bar -->
|
||||
<header class="w-full h-8 bg-surface-container flex items-center justify-between px-4 border-b border-outline-variant">
|
||||
<span class="font-label-caps text-[12px] text-on-surface uppercase tracking-tight">▌onboard/02-theme.tsx</span>
|
||||
<span class="font-label-caps text-[12px] text-[#a0a0a0] uppercase tracking-widest">STEP 2 OF 3</span>
|
||||
</header>
|
||||
<!-- 2. Hero Illustration Band -->
|
||||
<section class="w-full flex flex-col items-center pt-8 pb-4">
|
||||
<div class="h-[100px] flex items-center justify-center relative">
|
||||
<span class="text-cyan-terminal font-headline text-[48px] mr-4 select-none">▌</span>
|
||||
<div class="flex -space-x-4">
|
||||
<div class="w-[24px] h-[34px] border border-outline bg-surface scanline-pattern transform -rotate-12 translate-y-2"></div>
|
||||
<div class="w-[24px] h-[34px] border border-outline bg-surface checker-pattern transform rotate-0 z-10"></div>
|
||||
<div class="w-[24px] h-[34px] border border-outline bg-surface stripe-pattern transform rotate-12 translate-y-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="font-headline text-[28px] font-bold text-suit-black tracking-tight leading-none">PICK YOUR DECK</h2>
|
||||
</section>
|
||||
<!-- 3. Headline & Description -->
|
||||
<section class="w-full px-margin-edge text-center mb-6">
|
||||
<h3 class="font-headline text-[22px] font-bold text-suit-black mb-1">CHOOSE A CARD-BACK</h3>
|
||||
<p class="font-body-md text-[12px] text-[#a0a0a0] leading-tight">
|
||||
You can swap or import more themes from Settings later.
|
||||
</p>
|
||||
</section>
|
||||
<!-- 4. Theme Selection Grid -->
|
||||
<main class="w-full px-margin-edge grid grid-cols-3 gap-2 flex-grow max-h-[220px]">
|
||||
<!-- Tile 1: Terminal (Active) -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-full aspect-[110/150] bg-surface-container border-2 border-cyan-terminal rounded-lg p-3 relative flex items-center justify-center overflow-hidden">
|
||||
<div class="w-full h-full scanline-pattern border border-outline-variant relative">
|
||||
<div class="absolute top-1 left-1 w-2 h-3 bg-cyan-terminal"></div>
|
||||
<div class="absolute bottom-1 right-1 font-headline text-[10px] text-on-surface opacity-50">▌RS</div>
|
||||
</div>
|
||||
<div class="absolute top-1 right-1 bg-cyan-terminal text-surface w-4 h-4 flex items-center justify-center rounded-full">
|
||||
<span class="material-symbols-outlined text-[12px] font-bold">check</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mt-2 font-label-caps text-[12px] font-bold text-suit-black tracking-widest uppercase">TERMINAL</span>
|
||||
</div>
|
||||
<!-- Tile 2: Classic -->
|
||||
<div class="flex flex-col items-center opacity-70">
|
||||
<div class="w-full aspect-[110/150] bg-surface-container border border-outline rounded-lg p-3 relative flex items-center justify-center overflow-hidden">
|
||||
<div class="w-full h-full checker-pattern border border-outline-variant"></div>
|
||||
</div>
|
||||
<span class="mt-2 font-label-caps text-[12px] font-bold text-suit-black tracking-widest uppercase">CLASSIC</span>
|
||||
</div>
|
||||
<!-- Tile 3: Stripes -->
|
||||
<div class="flex flex-col items-center opacity-70">
|
||||
<div class="w-full aspect-[110/150] bg-surface-container border border-outline rounded-lg p-3 relative flex items-center justify-center overflow-hidden">
|
||||
<div class="w-full h-full stripe-pattern border border-outline-variant"></div>
|
||||
</div>
|
||||
<span class="mt-2 font-label-caps text-[12px] font-bold text-suit-black tracking-widest uppercase">STRIPES</span>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 5. More Info -->
|
||||
<div class="w-full text-center mt-4">
|
||||
<span class="font-label-caps text-[11px] font-medium text-[#a0a0a0] tracking-widest">
|
||||
<span class="text-cyan-terminal">+</span> MORE IN SETTINGS
|
||||
</span>
|
||||
</div>
|
||||
<!-- 6. Step Indicator -->
|
||||
<section class="w-full flex flex-col items-center mt-6">
|
||||
<div class="flex gap-1 h-2 mb-2">
|
||||
<div class="w-8 h-1 bg-cyan-terminal rounded-full"></div>
|
||||
<div class="w-8 h-1 bg-cyan-terminal rounded-full"></div>
|
||||
<div class="w-8 h-1 bg-outline rounded-full"></div>
|
||||
</div>
|
||||
<div class="font-headline text-[12px] font-medium tracking-[0.2em]">
|
||||
<span class="text-cyan-terminal">[1]</span>
|
||||
<span class="text-cyan-terminal">[2]</span>
|
||||
<span class="text-outline">[3]</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 7. Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 w-full h-[64px] bg-surface-container flex items-center justify-between px-margin-edge z-50">
|
||||
<button class="w-[48%] h-12 border border-outline bg-transparent text-suit-black font-label-caps text-[13px] font-medium uppercase rounded-lg active:bg-surface-variant transition-colors">
|
||||
← BACK
|
||||
</button>
|
||||
<button class="w-[48%] h-12 bg-cyan-terminal text-surface font-label-caps text-[14px] font-bold uppercase rounded-lg active:opacity-80 transition-opacity">
|
||||
NEXT →
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Image descriptive data for the model (hidden visually) -->
|
||||
<div class="hidden" data-alt="A detailed user interface screen for a retro-terminal themed solitaire game called Rusty Solitaire. The background is a deep black with cyan and gray accents. In the center, a card theme selection grid displays three different card back designs: a scanline pattern, a checker pattern, and a striped pattern. The visual style is crisp, technical, and uses monospaced typography to evoke a command-line interface or professional developer environment. The mood is minimalist, efficient, and technologically nostalgic."></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rouge Solitaire - Pause</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700;800&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": {
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"warning": "#ddb26f",
|
||||
"surface-container-low": "#181c1f",
|
||||
"surface-container": "#1c2023",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"surface-bright": "#363a3d",
|
||||
"outline": "#505050",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"tertiary": "#f7c3ff",
|
||||
"on-surface": "#e0e3e6",
|
||||
"secondary": "#bad073",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"info": "#12cfc0",
|
||||
"primary": "#a1dcff",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"background": "#101417",
|
||||
"surface-container-highest": "#313538",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"highlight-valid": "#acc267",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface-dim": "#101417",
|
||||
"error": "#fb9fb1",
|
||||
"on-error": "#690005",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"suit-red": "#fb9fb1",
|
||||
"suit-black": "#d0d0d0",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-primary": "#003549",
|
||||
"surface": "#151515",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-secondary": "#293500",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-tertiary": "#4c195b",
|
||||
"error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-primary-container": "#004f6c",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-background": "#e0e3e6",
|
||||
"surface-variant": "#313538",
|
||||
"secondary-container": "#435401",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"tertiary-container": "#e1a3ee"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48dp",
|
||||
"action-bar-height": "64px",
|
||||
"stack-overlap": "2rem",
|
||||
"margin-edge": "1rem",
|
||||
"gutter-card": "0.375rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Inter"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.scanline {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.05) 50%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md overflow-hidden antialiased">
|
||||
<!-- Background Tableau (Simulated by Dimmed Image Overlay) -->
|
||||
<div class="fixed inset-0 z-0">
|
||||
<img alt="Game Tableau Background" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDJSHHDQ5Y5qul5C_xabnOSM9aS3uxcWSTk47AOHrS_KIlQi0Ur7YhtL0BomjEWTDc8vRLpytWeG4kf5xgxBzpORahTtsWyXOUPsVRg6_H_qp0QjM6DDo57rOPwjU6TFdfK3Pi7cO9rg-xnUSSu1wu29WyKVwSWDDaA5cZ4QN_9L81YMTCTMKAwDTGsY3eGsj1b1i1X2CdF211aepkhmX8xf4bnV35WSB3QuYxUwlPct0Met7iLFf-AGBeizhK6IAboW5u-Wpg8Ag"/>
|
||||
<!-- 95% Opacity Scrim -->
|
||||
<div class="absolute inset-0 bg-surface opacity-95"></div>
|
||||
<!-- Scanline Overlay for Texture -->
|
||||
<div class="absolute inset-0 scanline"></div>
|
||||
</div>
|
||||
<!-- Modal Container -->
|
||||
<div class="fixed inset-0 z-10 flex items-center justify-center p-margin-edge">
|
||||
<!-- Modal Panel -->
|
||||
<div class="w-[330px] h-[480px] bg-[#202020] border border-outline rounded-xl flex flex-col overflow-hidden">
|
||||
<!-- Title Bar -->
|
||||
<div class="h-[28px] bg-[#1a1a1a] border-b border-[#353535] px-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-primary-container font-headline text-[12px] leading-none mt-px">▌</span>
|
||||
<span class="font-headline text-[12px] text-[#a0a0a0] leading-none">pause.tsx</span>
|
||||
</div>
|
||||
<button class="flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[16px] text-[#505050]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Content Canvas -->
|
||||
<div class="flex-1 flex flex-col items-center pt-8 px-4">
|
||||
<!-- Headline -->
|
||||
<h1 class="font-headline text-[24px] font-bold text-[#d0d0d0] tracking-tight text-center">
|
||||
GAME PAUSED
|
||||
</h1>
|
||||
<!-- Subline -->
|
||||
<p class="font-headline text-[12px] text-[#a0a0a0] mt-1 text-center">
|
||||
12:34 ELAPSED · 87 MOVES · DRAW-3
|
||||
</p>
|
||||
<!-- Mini-Stat Chips -->
|
||||
<div class="flex gap-2 mt-4 justify-center">
|
||||
<div class="bg-[#1a1a1a] border border-[#353535] rounded-sm px-2 py-1 flex flex-col items-center">
|
||||
<span class="font-headline text-[11px] text-[#d0d0d0]">SCORE 247</span>
|
||||
</div>
|
||||
<div class="bg-[#1a1a1a] border border-[#353535] rounded-sm px-2 py-1 flex flex-col items-center">
|
||||
<span class="font-headline text-[11px] text-[#d0d0d0]">STOCK 18</span>
|
||||
</div>
|
||||
<div class="bg-[#1a1a1a] border border-[#353535] rounded-sm px-2 py-1 flex flex-col items-center">
|
||||
<span class="font-headline text-[11px] text-[#d0d0d0]">MOVES 87</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons Cluster -->
|
||||
<div class="w-full mt-6 space-y-3">
|
||||
<!-- Primary CTA -->
|
||||
<button class="w-full h-[48px] bg-primary-container text-surface flex items-center justify-center rounded-lg active:scale-95 transition-transform duration-75">
|
||||
<span class="font-headline text-[14px] font-bold tracking-[0.08em] uppercase">▶ RESUME GAME</span>
|
||||
</button>
|
||||
<!-- Secondary Buttons -->
|
||||
<button class="w-full h-[48px] bg-transparent border border-outline text-[#d0d0d0] flex items-center justify-center rounded-lg hover:border-primary-container hover:text-primary-container transition-colors duration-120">
|
||||
<span class="font-headline text-[13px] font-medium tracking-[0.08em] uppercase">↻ RESTART</span>
|
||||
</button>
|
||||
<button class="w-full h-[48px] bg-transparent border border-outline text-[#d0d0d0] flex items-center justify-center rounded-lg hover:border-primary-container hover:text-primary-container transition-colors duration-120">
|
||||
<span class="font-headline text-[13px] font-medium tracking-[0.08em] uppercase">✕ FORFEIT</span>
|
||||
</button>
|
||||
<button class="w-full h-[48px] bg-transparent border border-outline text-[#d0d0d0] flex items-center justify-center rounded-lg hover:border-primary-container hover:text-primary-container transition-colors duration-120">
|
||||
<span class="font-headline text-[13px] font-medium tracking-[0.08em] uppercase">⌂ QUIT TO MENU</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Status Line -->
|
||||
<div class="h-[24px] border-t border-[#353535] px-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-primary-container font-headline text-[11px]">▌</span>
|
||||
<span class="font-headline text-[11px] text-[#a0a0a0]">NORMAL</span>
|
||||
<span class="text-[#505050] text-[11px]">│</span>
|
||||
<span class="font-headline text-[11px] text-[#a0a0a0]">pause</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 font-headline text-[11px]">
|
||||
<span class="text-[#a0a0a0]">[ESC]</span>
|
||||
<span class="text-[#505050]">resume</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden Navigation Shell (Suppressed due to Task-Focused Modal Context) -->
|
||||
<!-- But included visually as per the brand anchor hierarchy for TopAppBar identity if it were visible -->
|
||||
<header class="hidden fixed top-0 w-full h-action-bar-height flex items-center justify-between px-margin-edge w-full bg-background border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">terminal</span>
|
||||
<span class="font-headline text-headline text-primary uppercase tracking-tighter">▌ROUGE_SOLITAIRE</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Bottom Nav Suppression Logic: Not rendered to prioritize the focus canvas -->
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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&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;
|
||||
}
|
||||
/* CRT Scanline Overlay Effect */
|
||||
.crt-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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% 3px, 3px 100%;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #151515;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #505050;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-error": "#690005",
|
||||
"suit-black": "#d0d0d0",
|
||||
"inverse-primary": "#00668a",
|
||||
"on-primary-container": "#004f6c",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"highlight-valid": "#acc267",
|
||||
"surface-container-highest": "#313538",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"warning": "#ddb26f",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-primary": "#003549",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-background": "#e0e3e6",
|
||||
"error-container": "#93000a",
|
||||
"outline": "#505050",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-surface": "#e0e3e6",
|
||||
"on-secondary": "#293500",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-tertiary": "#4c195b",
|
||||
"secondary": "#bad073",
|
||||
"on-tertiary-container": "#683476",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"surface-dim": "#101417",
|
||||
"primary": "#a1dcff",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-variant": "#313538",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"surface": "#151515",
|
||||
"tertiary": "#f7c3ff",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"surface-bright": "#363a3d",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"outline-variant": "#3f484e",
|
||||
"info": "#12cfc0",
|
||||
"secondary-container": "#435401",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"error": "#fb9fb1",
|
||||
"suit-red": "#fb9fb1",
|
||||
"background": "#101417",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"surface-container": "#202020"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-overlap": "2rem",
|
||||
"action-bar-height": "64px",
|
||||
"touch-target-min": "48dp",
|
||||
"gutter-card": "0.375rem",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"card-rank": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md selection:bg-primary selection:text-background overflow-x-hidden">
|
||||
<div class="crt-overlay"></div>
|
||||
<!-- Status Bar -->
|
||||
<header class="bg-surface-container h-[32px] w-full flex items-center justify-between px-margin-edge z-50">
|
||||
<div class="font-headline text-[12px] text-on-surface-variant tracking-wider">
|
||||
▌profile.tsx
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-info"></span>
|
||||
<span class="font-label-caps text-[10px] text-on-surface">● SYNCED</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Canvas -->
|
||||
<main class="flex-1 overflow-y-auto pb-24">
|
||||
<!-- Profile Header -->
|
||||
<section class="h-[120px] bg-surface-container border-b border-outline-variant flex items-center px-margin-edge gap-4">
|
||||
<div class="w-[64px] h-[64px] bg-[#1a1a1a] border border-outline flex items-center justify-center shrink-0">
|
||||
<span class="font-headline text-[28px] text-primary-container">RS</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 overflow-hidden">
|
||||
<h1 class="font-headline text-[18px] text-on-surface truncate">anonymous@local</h1>
|
||||
<p class="font-label-caps text-on-surface-variant text-[10px]">MEMBER SINCE 2026-04-22</p>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<span class="px-2 py-0.5 bg-[#1a1a1a] font-label-caps text-[10px] text-suit-black">247 GAMES</span>
|
||||
<span class="px-2 py-0.5 bg-[#1a1a1a] font-label-caps text-[10px] text-suit-black">61% WR</span>
|
||||
<span class="px-2 py-0.5 bg-[#1a1a1a] font-label-caps text-[10px] text-suit-black">12 STREAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Level/XP Section -->
|
||||
<section class="p-margin-edge bg-surface-container border-b border-outline-variant">
|
||||
<div class="flex justify-between items-baseline mb-2">
|
||||
<span class="font-headline text-[24px] text-on-surface">LEVEL 12</span>
|
||||
<span class="font-hud-timer text-on-surface-variant">320/500 XP</span>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-[#353535] relative overflow-hidden">
|
||||
<div class="h-full bg-primary-container" style="width: 64%;"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-3">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-highlight-celebration"></span>
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant">180 XP TO LEVEL 13</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Unlocked Cards -->
|
||||
<section class="mt-6">
|
||||
<h2 class="px-margin-edge font-headline text-[14px] text-on-surface mb-4">▌ unlocked.cards</h2>
|
||||
<div class="flex overflow-x-auto gap-4 px-margin-edge pb-4 custom-scrollbar">
|
||||
<!-- Terminal (Active) -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[60px] h-[84px] bg-surface-container-low border-2 border-primary-container relative flex items-center justify-center p-1">
|
||||
<div class="w-full h-full bg-[#151515] overflow-hidden flex flex-col p-1">
|
||||
<div class="w-2 h-2.5 bg-primary-container mb-auto"></div>
|
||||
<div class="self-end text-[8px] font-headline text-on-surface-variant opacity-50">▌RS</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-caps text-[9px] text-primary-container text-center">ACTIVE</span>
|
||||
</div>
|
||||
<!-- Classic -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[60px] h-[84px] bg-white border border-outline relative p-1">
|
||||
<div class="w-full h-full border border-red-200 bg-red-50 opacity-20"></div>
|
||||
</div>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant text-center opacity-50">TAP TO USE</span>
|
||||
</div>
|
||||
<!-- Stripes -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[60px] h-[84px] bg-surface-container border border-outline p-1">
|
||||
<div class="w-full h-full bg-gradient-to-br from-secondary-container via-surface to-secondary-container opacity-40"></div>
|
||||
</div>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant text-center opacity-50">TAP TO USE</span>
|
||||
</div>
|
||||
<!-- Polka -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[60px] h-[84px] bg-surface-container border border-outline p-1 overflow-hidden relative">
|
||||
<div class="w-full h-full opacity-30" style="background-image: radial-gradient(#505050 1px, transparent 0); background-size: 6px 6px;"></div>
|
||||
</div>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant text-center opacity-50">TAP TO USE</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Unlocked Backgrounds -->
|
||||
<section class="mt-6">
|
||||
<h2 class="px-margin-edge font-headline text-[14px] text-on-surface mb-4">▌ unlocked.backgrounds</h2>
|
||||
<div class="flex overflow-x-auto gap-4 px-margin-edge pb-4 custom-scrollbar">
|
||||
<!-- Default (Active) -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[80px] h-[56px] bg-[#151515] border-2 border-primary-container"></div>
|
||||
<span class="font-label-caps text-[9px] text-primary-container text-center">ACTIVE</span>
|
||||
</div>
|
||||
<!-- Forest -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[80px] h-[56px] bg-[#0d160d] border border-outline"></div>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant text-center opacity-50">FOREST</span>
|
||||
</div>
|
||||
<!-- Slate -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[80px] h-[56px] bg-[#1c2128] border border-outline"></div>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant text-center opacity-50">SLATE</span>
|
||||
</div>
|
||||
<!-- Midnight -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<div class="w-[80px] h-[56px] bg-[#09090b] border border-outline"></div>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant text-center opacity-50">MIDNIGHT</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Sign-in Card -->
|
||||
<section class="mt-8 px-margin-edge">
|
||||
<button class="w-full h-[64px] bg-surface-container border border-dashed border-outline flex items-center justify-between px-6 hover:bg-surface-variant transition-colors group">
|
||||
<span class="font-label-caps text-on-surface-variant tracking-widest">+ SIGN IN TO SYNC PROGRESS</span>
|
||||
<span class="material-symbols-outlined text-primary-container group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
<!-- TopAppBar (from Shared Components - as Terminal Header) -->
|
||||
<div class="fixed top-[32px] left-0 w-full z-40 bg-background border-b border-outline-variant flex items-center justify-between px-margin-edge h-action-bar-height">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary">terminal</span>
|
||||
<span class="font-headline text-headline text-primary tracking-tighter">~/root/usr/settings</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="p-2 hover:bg-surface-variant text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BottomNavBar (from Shared Components - as Terminal Footer) -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 h-[24px] bg-surface-container-lowest border-t border-outline-variant flex justify-between items-center px-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant">▌ NORMAL │ profile</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center gap-1 group">
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant group-hover:text-primary">[ESC] back</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Decorative CRT Scanline overlay line -->
|
||||
<div class="fixed top-0 left-0 w-full h-[1px] bg-primary opacity-20 pointer-events-none animate-pulse"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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;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": {
|
||||
"surface-variant": "#313538",
|
||||
"surface-dim": "#101417",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"surface-bright": "#363a3d",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"secondary-container": "#435401",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"surface-container-highest": "#313538",
|
||||
"outline-variant": "#3f484e",
|
||||
"error": "#fb9fb1",
|
||||
"surface-container": "#202020",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"outline": "#505050",
|
||||
"on-secondary": "#293500",
|
||||
"suit-red": "#fb9fb1",
|
||||
"inverse-primary": "#00668a",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"warning": "#ddb26f",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"info": "#12cfc0",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"highlight-valid": "#acc267",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"on-tertiary": "#4c195b",
|
||||
"background": "#101417",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"suit-black": "#d0d0d0",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-surface": "#d0d0d0",
|
||||
"primary": "#a1dcff",
|
||||
"error-container": "#93000a",
|
||||
"secondary": "#bad073",
|
||||
"surface": "#151515",
|
||||
"primary-container": "#6fc2ef",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-primary": "#003549",
|
||||
"surface-container-low": "#181c1f",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-tertiary-container": "#683476",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-error": "#690005",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"tertiary": "#f7c3ff",
|
||||
"on-background": "#e0e3e6",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-primary-container": "#004f6c",
|
||||
"inverse-surface": "#e0e3e6"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"action-bar-height": "64px",
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"touch-target-min": "48dp",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"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"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.radial-segment {
|
||||
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.scanline-bg {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(26, 26, 26, 1) 0px,
|
||||
rgba(26, 26, 26, 1) 2px,
|
||||
rgba(21, 21, 21, 1) 2px,
|
||||
rgba(21, 21, 21, 1) 4px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface select-none overflow-hidden h-screen w-screen flex flex-col">
|
||||
<!-- Underlying Game Tableau (Dimmed Background) -->
|
||||
<main class="relative flex-grow opacity-30 grid grid-cols-7 gap-2 p-margin-edge pointer-events-none">
|
||||
<!-- Top row: Foundation/Stock -->
|
||||
<div class="col-span-1 aspect-[2/3] border border-dashed border-outline-variant bg-surface-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline-variant">terminal</span>
|
||||
</div>
|
||||
<div class="col-span-1 aspect-[2/3] border border-dashed border-outline-variant"></div>
|
||||
<div class="col-span-1"></div>
|
||||
<div class="col-span-1 aspect-[2/3] border border-outline border-suit-red-cb flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-suit-red-cb">favorite</span>
|
||||
</div>
|
||||
<div class="col-span-1 aspect-[2/3] border border-outline border-suit-black flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-suit-black">backspace</span>
|
||||
</div>
|
||||
<div class="col-span-1 aspect-[2/3] border border-outline border-suit-red-cb flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-suit-red-cb">diamond</span>
|
||||
</div>
|
||||
<div class="col-span-1 aspect-[2/3] border border-outline border-suit-black flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-suit-black">spa</span>
|
||||
</div>
|
||||
<!-- Tableau piles -->
|
||||
<div class="col-span-7 grid grid-cols-7 gap-2 mt-4">
|
||||
<div class="space-y-[-120%]">
|
||||
<div class="aspect-[2/3] bg-surface-container-high border border-outline p-1 flex flex-col justify-between">
|
||||
<span class="font-card-rank text-card-rank text-suit-red-cb">K</span>
|
||||
<span class="material-symbols-outlined self-end text-3xl rotate-180 text-suit-red-cb">diamond</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[-120%]">
|
||||
<div class="aspect-[2/3] scanline-bg border border-outline relative">
|
||||
<div class="absolute top-1 left-1 w-3 h-4 bg-primary"></div>
|
||||
<span class="absolute bottom-1 right-1 font-label-caps text-[10px] text-primary">▌RS</span>
|
||||
</div>
|
||||
<div class="aspect-[2/3] bg-surface-container-high border border-outline p-1 flex flex-col justify-between">
|
||||
<span class="font-card-rank text-card-rank text-suit-black">Q</span>
|
||||
<span class="material-symbols-outlined self-end text-3xl rotate-180 text-suit-black" style="font-variation-settings: 'FILL' 1;">spa</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[-120%]">
|
||||
<div class="aspect-[2/3] scanline-bg border border-outline"></div>
|
||||
<div class="aspect-[2/3] scanline-bg border border-outline"></div>
|
||||
<div class="aspect-[2/3] bg-surface-container-high border border-outline p-1 flex flex-col justify-between">
|
||||
<span class="font-card-rank text-card-rank text-suit-red-cb">J</span>
|
||||
<span class="material-symbols-outlined self-end text-3xl rotate-180 text-suit-red-cb" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- More stacks... omitted for brevity as background -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- Radial Menu Overlay -->
|
||||
<div class="fixed inset-0 z-50 bg-[#151515]/70 flex items-center justify-center overflow-hidden">
|
||||
<div class="relative w-[280px] h-[280px] flex items-center justify-center">
|
||||
<!-- Outer Circular Ring Shell -->
|
||||
<div class="absolute inset-0 rounded-full border border-outline bg-surface-container overflow-hidden">
|
||||
<!-- SVG Segments Construction -->
|
||||
<svg class="w-full h-full transform -rotate-22.5" viewbox="0 0 100 100">
|
||||
<!-- Slice 1 (UNDO) - Top / 12:00 -->
|
||||
<!-- Active state: bg-primary-container/15, stroke-primary -->
|
||||
<path d="M 50 50 L 50 0 A 50 50 0 0 1 85.35 14.65 Z" fill="#6fc2ef26" stroke="#6fc2ef" stroke-width="0.5" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 2 (REDO) -->
|
||||
<path d="M 50 50 L 85.35 14.65 A 50 50 0 0 1 100 50 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 3 (HINT) -->
|
||||
<path d="M 50 50 L 100 50 A 50 50 0 0 1 85.35 85.35 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 4 (AUTO) -->
|
||||
<path d="M 50 50 L 85.35 85.35 A 50 50 0 0 1 50 100 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 5 (NEW) -->
|
||||
<path d="M 50 50 L 50 100 A 50 50 0 0 1 14.65 85.35 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 6 (PAUSE) -->
|
||||
<path d="M 50 50 L 14.65 85.35 A 50 50 0 0 1 0 50 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 7 (STATS) -->
|
||||
<path d="M 50 50 L 0 50 A 50 50 0 0 1 14.65 14.65 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
<!-- Slice 8 (SETTINGS) -->
|
||||
<path d="M 50 50 L 14.65 14.65 A 50 50 0 0 1 50 0 Z" fill="transparent" stroke="#353535" stroke-width="0.25" transform="rotate(-22.5, 50, 50)"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Labels and Icons Overlay -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<!-- 12:00 UNDO (ACTIVE) -->
|
||||
<div class="absolute top-[12%] left-1/2 -translate-x-1/2 flex flex-col items-center text-primary">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="undo">undo</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">UNDO</span>
|
||||
</div>
|
||||
<!-- 1:30 REDO -->
|
||||
<div class="absolute top-[22%] right-[12%] flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="redo">redo</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">REDO</span>
|
||||
</div>
|
||||
<!-- 3:00 HINT -->
|
||||
<div class="absolute top-1/2 right-[8%] -translate-y-1/2 flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="lightbulb">lightbulb</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">HINT</span>
|
||||
</div>
|
||||
<!-- 4:30 AUTO -->
|
||||
<div class="absolute bottom-[22%] right-[12%] flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="double_arrow">double_arrow</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">AUTO</span>
|
||||
</div>
|
||||
<!-- 6:00 NEW -->
|
||||
<div class="absolute bottom-[12%] left-1/2 -translate-x-1/2 flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="add">add</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">NEW</span>
|
||||
</div>
|
||||
<!-- 7:30 PAUSE -->
|
||||
<div class="absolute bottom-[22%] left-[12%] flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="pause">pause</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">PAUSE</span>
|
||||
</div>
|
||||
<!-- 9:00 STATS -->
|
||||
<div class="absolute top-1/2 left-[8%] -translate-y-1/2 flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="bar_chart">bar_chart</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">STATS</span>
|
||||
</div>
|
||||
<!-- 10:30 SETTINGS -->
|
||||
<div class="absolute top-[22%] left-[12%] flex flex-col items-center text-on-surface">
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="settings">settings</span>
|
||||
<span class="font-label-caps text-[11px] mt-1">SETTINGS</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Inner Hole -->
|
||||
<div class="absolute w-20 h-20 rounded-full bg-surface-container border border-outline-variant flex flex-col items-center justify-center z-10">
|
||||
<div class="font-headline text-[32px] text-primary leading-none">▌</div>
|
||||
<div class="font-label-caps text-[10px] text-on-surface-variant tracking-widest mt-1">RADIAL</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Instructions (Bottom Floating) -->
|
||||
<div class="absolute bottom-12 left-0 w-full flex flex-col items-center gap-4">
|
||||
<div class="font-label-caps text-[12px] text-on-surface-variant tracking-wider">
|
||||
DRAG TO SELECT · RELEASE TO ACTIVATE
|
||||
</div>
|
||||
<!-- Status Line (Vim style) -->
|
||||
<div class="w-full h-8 bg-surface-container border-t border-outline-variant flex items-center justify-center">
|
||||
<span class="font-label-caps text-[11px] text-on-surface-variant">
|
||||
<span class="text-primary">▌</span> NORMAL │ radial · 1/8 selected
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden image for standard requirement compliance, though not visually used in this specific overlay task -->
|
||||
<div class="hidden">
|
||||
<img data-alt="A macro shot of a vintage terminal screen displaying green computer code and technical data. The lighting is low-key, with a soft glow emanating from the screen, highlighting the CRT scanlines and subtle reflections. The aesthetic is purely technical and retro-futuristic, focusing on precision and high-contrast digital artifacts. Deep blacks and vibrant green neon tones dominate the color palette, evoking a high-performance system environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQuJUCOQev_BN72KyX0c-ylmW3DMZD-gOUlylYo3w1SrSpGnvorMvSUwe5oGPAgBgc050cCowC8f1QaxHEDN-DUkyCynOLhzrZHXyCJh2ebCWd6x1quLQwp0ffwbHsZW1-J2zAMuUydMNpEVmpHFQDij0yjVg6lxc6JdsC0etMoAWMhb61S3HUoDffSl-Q23N8Oc77r3dSf6kLFKAMAJCbXFz4nTaJKCKAwtMs62pLr6fd1jzMZrItH43RaO28uzMzvnGGZj3Miw"/>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Solitaire Replay Overlay</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&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": {
|
||||
"on-background": "#e0e3e6",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-container": "#202020",
|
||||
"primary": "#a1dcff",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"outline": "#505050",
|
||||
"suit-black": "#d0d0d0",
|
||||
"secondary": "#bad073",
|
||||
"on-surface": "#d0d0d0",
|
||||
"on-primary": "#003549",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"surface-bright": "#363a3d",
|
||||
"surface-variant": "#313538",
|
||||
"secondary-container": "#435401",
|
||||
"surface-container-highest": "#313538",
|
||||
"surface-container-low": "#181c1f",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-error": "#690005",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"on-tertiary-container": "#683476",
|
||||
"suit-red": "#fb9fb1",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-primary-container": "#004f6c",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"warning": "#ddb26f",
|
||||
"on-secondary": "#293500",
|
||||
"info": "#12cfc0",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"background": "#101417",
|
||||
"surface-container-high": "#272a2d",
|
||||
"surface-dim": "#101417",
|
||||
"surface": "#151515",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"error-container": "#93000a",
|
||||
"tertiary": "#f7c3ff",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"highlight-valid": "#acc267",
|
||||
"outline-variant": "#3f484e",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"error": "#fb9fb1",
|
||||
"on-tertiary": "#4c195b",
|
||||
"on-secondary-container": "#b2c86d"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48dp",
|
||||
"stack-overlap": "2rem",
|
||||
"margin-edge": "1rem",
|
||||
"action-bar-height": "64px",
|
||||
"gutter-card": "0.375rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.card-back-pattern {
|
||||
background-color: #151515;
|
||||
background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #1a1a1a 2px, #1a1a1a 4px);
|
||||
}
|
||||
/* Custom mechanical transition style */
|
||||
.mechanical-transition {
|
||||
transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md select-none overflow-hidden flex flex-col h-[844px] w-[390px] mx-auto border-x border-outline-variant">
|
||||
<!-- Status Bar -->
|
||||
<header class="h-8 bg-surface-container flex items-center justify-between px-4 border-b border-outline-variant flex-shrink-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-primary font-headline text-[14px]">▌replay.tsx</span>
|
||||
</div>
|
||||
<div class="flex items-center text-on-surface-variant font-label-caps text-[10px] tracking-wider uppercase">
|
||||
GAME #2024-127 · 87 MOVES
|
||||
</div>
|
||||
</header>
|
||||
<!-- Game Peek Band (Tableau) -->
|
||||
<main class="h-[240px] relative bg-background overflow-hidden border-b border-outline-variant">
|
||||
<!-- 7-Column Tableau (Dimmed 50%) -->
|
||||
<div class="absolute inset-0 opacity-50 flex justify-around p-2 gap-1">
|
||||
<!-- Tableau Columns 1-7 -->
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] border border-dashed border-outline-variant mb-1"></div>
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full aspect-[2/3] bg-surface-container-low border border-outline relative">
|
||||
<!-- Central Focused Card (Move 47) -->
|
||||
<div class="absolute inset-0 z-20 opacity-100">
|
||||
<!-- Shadow-less highlight using glow outline -->
|
||||
<div class="w-full h-full bg-[#1a1a1a] border border-suit-red-cb ring-2 ring-suit-red-cb/40 flex flex-col justify-between p-1">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-card-rank text-card-rank text-suit-red-cb">4</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-suit-red-cb" data-icon="diamond">diamond</span>
|
||||
</div>
|
||||
<div class="self-end rotate-180 flex flex-col">
|
||||
<span class="font-card-rank text-card-rank text-suit-red-cb">4</span>
|
||||
<span class="material-symbols-outlined text-[14px] text-suit-red-cb" data-icon="diamond">diamond</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Move Chip -->
|
||||
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-suit-red-cb px-2 py-0.5 rounded-sm">
|
||||
<span class="text-surface font-label-caps text-[9px] font-bold">MOVE 47/87</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Playback Toolbar -->
|
||||
<div class="h-16 bg-surface-container flex items-center justify-between px-4 border-b border-outline-variant">
|
||||
<!-- Left: Timer -->
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface font-hud-timer text-[18px] font-bold leading-none">00:42</span>
|
||||
<span class="text-[11px] text-[#a0a0a0] font-label-caps tracking-tighter">/ 02:18</span>
|
||||
</div>
|
||||
<!-- Center: Controls -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary mechanical-transition" data-icon="skip_previous">skip_previous</button>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary mechanical-transition" data-icon="arrow_left">arrow_left</button>
|
||||
<button class="material-symbols-outlined text-suit-red-cb text-[32px] mechanical-transition" data-icon="play_arrow">play_arrow</button>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary mechanical-transition" data-icon="arrow_right">arrow_right</button>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary mechanical-transition" data-icon="skip_next">skip_next</button>
|
||||
</div>
|
||||
<!-- Right: Speed -->
|
||||
<div class="flex items-center bg-surface-variant border border-outline px-2 py-1 gap-1">
|
||||
<span class="font-label-caps text-[14px] font-bold text-on-surface">1.0x</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-on-surface-variant" data-icon="unfold_more">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scrub Bar Area -->
|
||||
<div class="px-margin-edge pt-6 pb-8 bg-surface-container-low border-b border-outline-variant">
|
||||
<div class="relative w-full h-1 bg-outline rounded-full">
|
||||
<!-- Cyan Progress Track -->
|
||||
<div class="absolute left-0 top-0 h-full bg-suit-red-cb" style="width: 54%;"></div>
|
||||
<!-- Notches & Labels -->
|
||||
<div class="absolute inset-0 flex justify-between">
|
||||
<div class="relative">
|
||||
<div class="w-[1px] h-3 bg-outline -mt-1"></div>
|
||||
<span class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-label-caps text-outline">0%</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="w-[1px] h-3 bg-outline -mt-1"></div>
|
||||
<span class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-label-caps text-outline">25%</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="w-[1px] h-3 bg-outline -mt-1"></div>
|
||||
<span class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-label-caps text-outline">50%</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="w-[1px] h-3 bg-outline -mt-1"></div>
|
||||
<span class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-label-caps text-outline">75%</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="w-[1px] h-3 bg-outline -mt-1"></div>
|
||||
<span class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-label-caps text-outline">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Current Marker (54%) -->
|
||||
<div class="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-suit-red-cb border border-surface" style="left: 54%;"></div>
|
||||
<div class="absolute -top-4 left-[54%] -translate-x-1/2 text-[10px] text-suit-red-cb font-label-caps font-bold">47/87</div>
|
||||
<!-- Win Marker (72%) -->
|
||||
<div class="absolute top-0 w-[2px] h-3 bg-highlight-valid -translate-y-1" style="left: 72%;"></div>
|
||||
<div class="absolute -bottom-5 left-[72%] -translate-x-1/2 text-[8px] text-highlight-valid font-label-caps font-bold whitespace-nowrap">WIN MOVE</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Move Log Card -->
|
||||
<section class="flex-1 bg-surface-container p-4 overflow-y-auto">
|
||||
<h3 class="font-label-caps text-label-caps text-on-surface-variant mb-4 flex items-center gap-2">
|
||||
<span class="w-1.5 h-3 bg-primary block"></span>
|
||||
MOVE LOG · 47/87
|
||||
</h3>
|
||||
<div class="flex flex-col font-label-caps text-[12px]">
|
||||
<!-- Log Rows -->
|
||||
<div class="flex items-center h-6 px-2 text-[#a0a0a0] border-b border-outline-variant/30">
|
||||
<span class="w-8">44 |</span>
|
||||
<span>5♥ → tableau col 3</span>
|
||||
</div>
|
||||
<div class="flex items-center h-6 px-2 text-[#a0a0a0] border-b border-outline-variant/30">
|
||||
<span class="w-8">45 |</span>
|
||||
<span>8♣ → tableau col 1</span>
|
||||
</div>
|
||||
<div class="flex items-center h-6 px-2 text-[#a0a0a0] border-b border-outline-variant/30">
|
||||
<span class="w-8">46 |</span>
|
||||
<span>stock cycle</span>
|
||||
</div>
|
||||
<!-- Highlighted Active Move -->
|
||||
<div class="flex items-center h-6 px-2 bg-suit-red-cb text-surface-container font-bold">
|
||||
<span class="w-8">▶ 47 |</span>
|
||||
<span>4♦ → 5♣ on col 7</span>
|
||||
</div>
|
||||
<div class="flex items-center h-6 px-2 text-on-surface border-b border-outline-variant/30">
|
||||
<span class="w-8">48 |</span>
|
||||
<span class="material-symbols-outlined text-[14px] align-middle mr-1" data-icon="foundation">foundation</span> A♠ → foundation
|
||||
</div>
|
||||
<div class="flex items-center h-6 px-2 text-on-surface border-b border-outline-variant/30">
|
||||
<span class="w-8">49 |</span>
|
||||
<span class="material-symbols-outlined text-[14px] align-middle mr-1" data-icon="foundation">foundation</span> 2♠ → foundation
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="h-6 bg-surface-container flex items-center justify-between px-4 border-t border-outline-variant flex-shrink-0 text-[10px] font-label-caps tracking-wider">
|
||||
<div class="text-on-surface-variant">
|
||||
<span class="text-primary">▌</span> NORMAL │ replay
|
||||
</div>
|
||||
<div class="text-on-surface-variant opacity-70">
|
||||
[SPACE] play · [← →] scrub · [ESC]
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Overlay Background (For visualization of depth) -->
|
||||
<div class="fixed inset-0 pointer-events-none border-[16px] border-surface-dim/40 z-50"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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": {
|
||||
"on-secondary": "#293500",
|
||||
"surface-container": "#1c2023",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"suit-black": "#d0d0d0",
|
||||
"on-background": "#e0e3e6",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-tertiary": "#4c195b",
|
||||
"on-error": "#690005",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-primary-container": "#004f6c",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-surface": "#e0e3e6",
|
||||
"secondary-container": "#435401",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"suit-red": "#fb9fb1",
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface-dim": "#101417",
|
||||
"background": "#101417",
|
||||
"error": "#fb9fb1",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-primary": "#003549",
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-container-low": "#181c1f",
|
||||
"warning": "#ddb26f",
|
||||
"surface-variant": "#313538",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"primary": "#a1dcff",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"surface": "#151515",
|
||||
"secondary": "#bad073",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"highlight-valid": "#acc267",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"surface-bright": "#363a3d",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"primary-container": "#6fc2ef",
|
||||
"surface-container-highest": "#313538",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"surface-container-high": "#272a2d",
|
||||
"inverse-primary": "#00668a",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"outline": "#505050",
|
||||
"info": "#12cfc0",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"error-container": "#93000a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter-card": "0.375rem",
|
||||
"stack-overlap": "2rem",
|
||||
"margin-edge": "1rem",
|
||||
"touch-target-min": "48dp",
|
||||
"action-bar-height": "64px",
|
||||
"top-action-bar-height": "32px",
|
||||
"bottom-action-bar-height": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Inter"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.card-back-pattern {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
#151515,
|
||||
#151515 2px,
|
||||
#1a1a1a 2px,
|
||||
#1a1a1a 4px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md selection:bg-primary selection:text-on-primary-container overflow-hidden flex flex-col h-[844px] w-[390px] mx-auto border-x border-outline-variant">
|
||||
<!-- Status Bar / TopAppBar Logic -->
|
||||
<header class="bg-[#202020] h-8 flex items-center justify-between px-4 w-full z-50">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-primary font-headline text-[12px]">▌</span>
|
||||
<span class="text-on-surface font-label-caps text-[12px]">settings.toml</span>
|
||||
</div>
|
||||
<div class="text-outline font-label-caps text-[12px]">v0.20.0</div>
|
||||
</header>
|
||||
<!-- NavigationDrawer (Tab Strip Mapping) -->
|
||||
<nav class="bg-[#1a1a1a] h-10 border-b border-[#353535] flex items-center w-full">
|
||||
<!-- COSMETIC Tab (Active) -->
|
||||
<div class="h-full flex-1 flex flex-col items-center justify-center relative">
|
||||
<span class="text-primary font-label-caps text-[12px] px-2">[ COSMETIC ]</span>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[2px] bg-primary"></div>
|
||||
</div>
|
||||
<!-- GAMEPLAY Tab -->
|
||||
<div class="h-full flex-1 flex items-center justify-center">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[12px]">GAMEPLAY</span>
|
||||
</div>
|
||||
<!-- SYNC Tab -->
|
||||
<div class="h-full flex-1 flex items-center justify-center">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[12px]">SYNC</span>
|
||||
</div>
|
||||
<!-- AUDIO Tab -->
|
||||
<div class="h-full flex-1 flex items-center justify-center">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[12px]">AUDIO</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Content Area (Canvas) -->
|
||||
<main class="flex-1 bg-[#151515] p-margin-edge overflow-y-auto space-y-2">
|
||||
<!-- row: card_theme -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">card_theme</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">Terminal</span>
|
||||
</div>
|
||||
<span class="text-primary material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
<!-- row: background -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">background</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">Solid #151515</span>
|
||||
</div>
|
||||
<span class="text-primary material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
<!-- row: card_back -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">card_back</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">Terminal</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-4 h-6 border border-outline card-back-pattern relative overflow-hidden">
|
||||
<div class="absolute top-0.5 left-0.5 w-1.5 h-2 bg-primary"></div>
|
||||
</div>
|
||||
<span class="text-primary material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row: color_blind_mode -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">color_blind_mode</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">false</span>
|
||||
</div>
|
||||
<!-- Toggle OFF -->
|
||||
<div class="w-10 h-5 bg-[#202020] border border-outline rounded-full relative">
|
||||
<div class="absolute left-0.5 top-0.5 w-3.5 h-3.5 bg-outline rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row: high_contrast -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">high_contrast</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">false</span>
|
||||
</div>
|
||||
<!-- Toggle OFF -->
|
||||
<div class="w-10 h-5 bg-[#202020] border border-outline rounded-full relative">
|
||||
<div class="absolute left-0.5 top-0.5 w-3.5 h-3.5 bg-outline rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row: reduce_motion -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">reduce_motion</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">true</span>
|
||||
</div>
|
||||
<!-- Toggle ON -->
|
||||
<div class="w-10 h-5 bg-[#1f3a4a] border border-primary/50 rounded-full relative">
|
||||
<div class="absolute right-0.5 top-0.5 w-3.5 h-3.5 bg-primary-container rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row: crt_scanline_effect -->
|
||||
<div class="bg-[#202020] h-14 rounded-[4px] px-3 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#a0a0a0] font-label-caps text-[11px]">crt_scanline_effect</span>
|
||||
<span class="text-suit-black font-label-caps text-[14px]">false</span>
|
||||
</div>
|
||||
<!-- Toggle OFF -->
|
||||
<div class="w-10 h-5 bg-[#202020] border border-outline rounded-full relative">
|
||||
<div class="absolute left-0.5 top-0.5 w-3.5 h-3.5 bg-outline rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar (Footer Logic) -->
|
||||
<footer class="h-6 bg-[#202020] border-t border-[#353535] flex items-center justify-between px-4 w-full z-50">
|
||||
<div class="flex items-center gap-1 font-label-caps text-[11px]">
|
||||
<span class="text-primary">▌</span>
|
||||
<span class="text-suit-black">NORMAL</span>
|
||||
<span class="text-outline">│</span>
|
||||
<span class="text-on-surface">settings</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 font-label-caps text-[11px]">
|
||||
<div class="flex items-center">
|
||||
<span class="text-[#a0a0a0]">[1-4]</span>
|
||||
<span class="text-outline ml-1">tab</span>
|
||||
</div>
|
||||
<span class="text-outline">·</span>
|
||||
<div class="flex items-center">
|
||||
<span class="text-[#a0a0a0]">[ESC]</span>
|
||||
<span class="text-outline ml-1">back</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rusty Solitaire - Terminal Edition</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&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": {
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"surface-dim": "#101417",
|
||||
"on-error": "#690005",
|
||||
"inverse-primary": "#00668a",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface-variant": "#313538",
|
||||
"on-background": "#e0e3e6",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-primary-container": "#004f6c",
|
||||
"on-surface": "#d0d0d0",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-container-high": "#272a2d",
|
||||
"error": "#fb9fb1",
|
||||
"highlight-valid": "#acc267",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-secondary": "#293500",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"outline-variant": "#3f484e",
|
||||
"secondary-container": "#435401",
|
||||
"background": "#101417",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"suit-black": "#d0d0d0",
|
||||
"surface-container": "#1c2023",
|
||||
"on-primary": "#003549",
|
||||
"primary": "#a1dcff",
|
||||
"error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"info": "#12cfc0",
|
||||
"warning": "#ddb26f",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-tertiary": "#4c195b",
|
||||
"surface": "#151515",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"surface-container-highest": "#313538",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"suit-red": "#fb9fb1",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-error-container": "#ffdad6",
|
||||
"tertiary": "#f7c3ff",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"outline": "#505050",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"secondary": "#bad073",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"boot-cyan": "#a1dcff",
|
||||
"boot-lime": "#acc267"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-overlap": "2rem",
|
||||
"action-bar-height": "64px",
|
||||
"margin-edge": "1rem",
|
||||
"gutter-card": "0.375rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #151515;
|
||||
color: #d0d0d0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.cyan-halo {
|
||||
box-shadow: 0 0 40px 4px rgba(161, 220, 255, 0.15);
|
||||
}
|
||||
.scanlines {
|
||||
background: linear-gradient(to bottom, rgba(21, 21, 21, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col items-center justify-between font-body-md w-[390px] h-[844px] mx-auto relative overflow-hidden">
|
||||
<div class="absolute inset-0 scanlines opacity-30 z-10"></div>
|
||||
<!-- Top Safe Area (Blank) -->
|
||||
<div class="h-10 w-full"></div>
|
||||
<!-- Main Content Stack -->
|
||||
<main class="flex-1 w-full flex flex-col items-center z-20">
|
||||
<!-- Header Section (~30% Top) -->
|
||||
<div class="mt-[10%] flex flex-col items-center">
|
||||
<div class="w-24 h-24 flex items-center justify-center relative mb-4">
|
||||
<div class="text-[96px] text-boot-cyan font-headline cyan-halo leading-none">▌</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="font-headline text-[32px] font-bold text-on-surface tracking-tight mb-1">RUSTY SOLITAIRE</h1>
|
||||
<div class="w-48 h-[1px] bg-outline-variant"></div>
|
||||
<span class="font-label-caps text-[12px] text-outline mt-2 tracking-[0.1em] uppercase">TERMINAL EDITION</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Terminal Boot Log (~60% Top Position) -->
|
||||
<div class="mt-48 w-[70%] flex flex-col items-start font-hud-timer text-[11px] space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-boot-lime">✓</span>
|
||||
<span class="text-outline">assets loaded</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-boot-lime">✓</span>
|
||||
<span class="text-outline">theme: terminal</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-boot-lime">✓</span>
|
||||
<span class="text-outline">progress restored</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mt-1">
|
||||
<span class="text-on-surface-variant">▌ ready_</span>
|
||||
<span class="w-[6px] h-3 bg-boot-cyan animate-pulse"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Bar (~75% Top Position) -->
|
||||
<div class="mt-20 w-full px-8">
|
||||
<div class="w-full h-[1px] bg-surface-container-highest relative">
|
||||
<div class="absolute top-0 left-0 h-full bg-boot-cyan w-full"></div>
|
||||
</div>
|
||||
<div class="w-full text-right mt-2">
|
||||
<span class="font-label-caps text-[10px] text-outline tracking-wider uppercase">DONE · 247 ASSETS</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Strip & Footer -->
|
||||
<footer class="w-full flex flex-col items-center z-20 pb-10">
|
||||
<div class="flex flex-col items-center mb-8">
|
||||
<span class="font-label-caps text-[9px] text-outline mb-3 tracking-widest uppercase">BASE16-EIGHTIES</span>
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 bg-[#fb9fb1]"></div>
|
||||
<div class="w-3 h-3 bg-[#ddb26f]"></div>
|
||||
<div class="w-3 h-3 bg-[#acc267]"></div>
|
||||
<div class="w-3 h-3 bg-[#12cfc0]"></div>
|
||||
<div class="w-3 h-3 bg-[#6fc2ef]"></div>
|
||||
<div class="w-3 h-3 bg-[#e1a3ee]"></div>
|
||||
<div class="w-3 h-3 bg-[#d0d0d0]"></div>
|
||||
<div class="w-3 h-3 bg-[#505050]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-hud-timer text-[11px] text-outline">
|
||||
v0.20.0
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Top App Bar Content (Hidden as per requirement, but following Shared Components Logic) -->
|
||||
<div class="hidden">
|
||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-margin-edge h-action-bar-height border-b border-outline-variant bg-background">
|
||||
<div class="font-headline text-headline text-primary uppercase tracking-tighter">ROOT@SOLITAIRE:~</div>
|
||||
<div class="flex gap-4 text-primary">
|
||||
<span class="material-symbols-outlined">memory</span>
|
||||
<span class="material-symbols-outlined">settings_ethernet</span>
|
||||
<span class="material-symbols-outlined">wifi_tethering</span>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<!-- Placeholder for data-alt requirements even if visual images are minimal -->
|
||||
<div class="hidden">
|
||||
<img data-alt="A cinematic, low-angle digital render of a retro-terminal interface appearing on a high-end mobile display in a dark room. The screen glows with a soft cyan light, illuminating a minimalist layout with sharp, 1px white lines and a large block cursor symbol. The atmosphere is quiet, technical, and high-performance, reflecting a dark-mode synthwave aesthetic with muted grays and vibrant cyan accents. The focus is on the crisp, high-density typography and the mechanical precision of the digital environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBeZymuyGd_-VJr-zgC8p08qBLD4pk0WyRtxuIhVT5kY6cc3y_qSkZ-P_EYYwKIliGysN5rDgqbCsXLxksfslVnB4nj4BYktu4d5EAKi1zEQ8t8MId17UzIgKujbGqebDo0FWO51Snqxt9AvrjX_afEsvACaaeAyIfTKgoAB8MBOUnanIre26Y1tNTftn1y9jxKfrXgi9eCYiJn6zoiaRmNmdLwo_s7RenmSlloPdIURVb3KKHKaBZHldPaStbWcyMYNR877R6O_A"/>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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;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;
|
||||
}
|
||||
/* CRT Scanline effect overlay */
|
||||
.crt-overlay::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
|
||||
z-index: 100;
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface-container": "#202020",
|
||||
"primary-container": "#6fc2ef",
|
||||
"surface": "#151515",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"info": "#12cfc0",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"suit-red": "#fb9fb1",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-background": "#e0e3e6",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"suit-black": "#d0d0d0",
|
||||
"on-primary": "#003549",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"primary": "#a1dcff",
|
||||
"on-primary-container": "#004f6c",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"surface-dim": "#101417",
|
||||
"on-tertiary-container": "#683476",
|
||||
"inverse-primary": "#00668a",
|
||||
"background": "#101417",
|
||||
"on-surface": "#d0d0d0",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-error": "#690005",
|
||||
"surface-container-highest": "#313538",
|
||||
"outline-variant": "#3f484e",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"warning": "#ddb26f",
|
||||
"surface-variant": "#313538",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"outline": "#505050",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"surface-container-high": "#272a2d",
|
||||
"secondary": "#bad073",
|
||||
"error": "#fb9fb1",
|
||||
"highlight-valid": "#acc267",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-secondary": "#293500",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"on-error-container": "#ffdad6",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-tertiary": "#4c195b",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"secondary-container": "#435401",
|
||||
"error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-secondary-fixed-variant": "#3c4d00"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48dp",
|
||||
"stack-overlap": "2rem",
|
||||
"margin-edge": "1rem",
|
||||
"action-bar-height": "64px",
|
||||
"gutter-card": "0.375rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md min-h-screen selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- Top Navigation Shell -->
|
||||
<header class="fixed top-0 w-full bg-background z-50 border-b border-outline flex justify-between items-center px-margin-edge h-action-bar-height">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="terminal">terminal</span>
|
||||
<h1 class="font-headline text-headline text-primary uppercase tracking-tighter">STATISTICS.LOG</h1>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container-highest transition-colors duration-120 p-2 rounded" data-icon="settings_input_component">settings_input_component</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-action-bar-height pb-[88px] crt-overlay">
|
||||
<!-- Status Bar (Emulated Retro Style) -->
|
||||
<div class="h-[32px] bg-surface-container flex items-center justify-between px-margin-edge text-[11px] font-hud-timer">
|
||||
<span class="text-on-surface">▌stats.log</span>
|
||||
<span class="text-on-surface-variant">247 GAMES TRACKED</span>
|
||||
</div>
|
||||
<!-- Sub-tab Strip -->
|
||||
<nav class="h-[40px] bg-[#1a1a1a] border-b border-outline flex items-center px-margin-edge overflow-x-auto whitespace-nowrap scrollbar-hide">
|
||||
<div class="flex items-center h-full gap-4">
|
||||
<button class="h-full px-1 flex flex-col justify-center font-label-caps text-[11px] text-primary-container border-b-2 border-primary-container">
|
||||
[ OVERVIEW ]
|
||||
</button>
|
||||
<button class="h-full px-1 flex flex-col justify-center font-label-caps text-[11px] text-on-surface-variant hover:text-primary transition-colors">
|
||||
DRAW-1
|
||||
</button>
|
||||
<button class="h-full px-1 flex flex-col justify-center font-label-caps text-[11px] text-on-surface-variant hover:text-primary transition-colors">
|
||||
DRAW-3
|
||||
</button>
|
||||
<button class="h-full px-1 flex flex-col justify-center font-label-caps text-[11px] text-on-surface-variant hover:text-primary transition-colors">
|
||||
DAILY
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Grid -->
|
||||
<section class="p-4 flex flex-col gap-4">
|
||||
<!-- Hero Stat Card -->
|
||||
<div class="h-24 bg-surface-container border border-outline rounded-lg p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<span class="font-headline text-[48px] text-on-surface">61%</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant">WIN RATE</p>
|
||||
<p class="font-hud-timer text-[13px] text-highlight-valid">▲ +3% vs last 30</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2x2 Grid -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="h-[88px] bg-surface-container border border-outline rounded-lg p-3 flex flex-col justify-between">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant">GAMES</p>
|
||||
<p class="font-hud-score text-hud-score">247</p>
|
||||
</div>
|
||||
<div class="h-[88px] bg-surface-container border border-outline rounded-lg p-3 flex flex-col justify-between">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant">WINS</p>
|
||||
<p class="font-hud-score text-hud-score">151</p>
|
||||
</div>
|
||||
<div class="h-[88px] bg-surface-container border border-outline rounded-lg p-3 flex flex-col justify-between">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant">BEST TIME</p>
|
||||
<p class="font-hud-score text-hud-score text-primary">01:54</p>
|
||||
</div>
|
||||
<div class="h-[88px] bg-surface-container border border-outline rounded-lg p-3 flex flex-col justify-between">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant">STREAK</p>
|
||||
<p class="font-hud-score text-hud-score">12</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sparkline Card -->
|
||||
<div class="bg-surface-container border border-outline rounded-lg p-4 h-[200px] flex flex-col">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant mb-4">WIN RATE · LAST 30 DAYS</p>
|
||||
<div class="relative flex-1 flex items-end justify-between border-b border-outline pb-1">
|
||||
<!-- Y-Axis Labels -->
|
||||
<span class="absolute top-0 left-0 text-[9px] font-hud-timer text-outline">100%</span>
|
||||
<span class="absolute bottom-1 left-0 text-[9px] font-hud-timer text-outline">0%</span>
|
||||
<!-- Pixel Bar Chart -->
|
||||
<div class="flex items-end justify-between w-full h-[80%] gap-[2px]">
|
||||
<!-- Generated bars with upward trend -->
|
||||
<div class="bg-primary-container w-full" style="height: 35%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 30%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 40%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 38%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 45%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 42%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 50%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 48%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 55%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 52%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 58%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 60%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 55%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 62%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 65%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 63%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 68%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 70%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 65%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 72%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 75%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 78%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 74%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 80%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 82%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 85%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 88%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 86%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 90%"></div>
|
||||
<div class="bg-primary-container w-full" style="height: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1">
|
||||
<span class="text-[9px] font-hud-timer text-outline uppercase">30d ago</span>
|
||||
<span class="text-[9px] font-hud-timer text-outline uppercase">today</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Draw-Mode Split Card -->
|
||||
<div class="h-20 bg-surface-container border border-outline rounded-lg p-4 flex flex-col justify-between">
|
||||
<p class="font-label-caps text-[11px] text-on-surface-variant">DRAW MODE SPLIT</p>
|
||||
<div class="h-3 w-full flex rounded-sm overflow-hidden bg-outline">
|
||||
<div class="h-full bg-highlight-valid" style="width: 60%"></div>
|
||||
<div class="h-full bg-primary-container" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="font-hud-timer text-[11px] text-highlight-valid">DRAW-1 · 60%</span>
|
||||
<span class="font-hud-timer text-[11px] text-primary-container">DRAW-3 · 40%</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Retro Footer Strip -->
|
||||
<footer class="h-[24px] px-margin-edge flex items-center justify-between font-hud-timer text-[10px] text-outline mt-2">
|
||||
<div>▌ NORMAL │ stats</div>
|
||||
<div>[1-4] view</div>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- Bottom Navigation Shell -->
|
||||
<nav class="fixed bottom-0 w-full z-50 h-[64px] bg-surface-container border-t border-outline flex justify-around items-center">
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant pt-1 hover:text-primary transition-colors duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="playing_cards">playing_cards</span>
|
||||
<span class="font-label-caps text-label-caps">DECK</span>
|
||||
</div>
|
||||
<!-- ACTIVE TAB: STATS -->
|
||||
<div class="flex flex-col items-center justify-center text-primary border-t-2 border-primary pt-1 hover:text-primary transition-colors duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="query_stats" style="font-variation-settings: 'FILL' 1;">query_stats</span>
|
||||
<span class="font-label-caps text-label-caps">STATS</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant pt-1 hover:text-primary transition-colors duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
|
||||
<span class="font-label-caps text-label-caps">LOGS</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant pt-1 hover:text-primary transition-colors duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
||||
<span class="font-label-caps text-label-caps">SYS</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rusty Solitaire - Sync Progress</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&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": {
|
||||
"surface-container-low": "#181c1f",
|
||||
"highlight-valid": "#acc267",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-tertiary": "#4c195b",
|
||||
"suit-black": "#d0d0d0",
|
||||
"surface-container": "#1c2023",
|
||||
"warning": "#ddb26f",
|
||||
"outline": "#505050",
|
||||
"error-container": "#93000a",
|
||||
"on-secondary": "#293500",
|
||||
"surface-dim": "#101417",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"secondary": "#bad073",
|
||||
"on-surface": "#e0e3e6",
|
||||
"primary": "#a1dcff",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"on-tertiary-container": "#683476",
|
||||
"inverse-primary": "#00668a",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-primary-container": "#004f6c",
|
||||
"secondary-container": "#435401",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-background": "#e0e3e6",
|
||||
"on-primary": "#003549",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface": "#151515",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"suit-red": "#fb9fb1",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"surface-variant": "#313538",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"outline-variant": "#3f484e",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"info": "#12cfc0",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"surface-container-highest": "#313538",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-error": "#690005",
|
||||
"background": "#101417",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"error": "#fb9fb1",
|
||||
"tertiary": "#f7c3ff",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"surface-bright": "#363a3d"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"touch-target-min": "48dp",
|
||||
"gutter-card": "0.375rem",
|
||||
"action-bar-height": "64px",
|
||||
"stack-overlap": "2rem",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.scanline {
|
||||
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.1) 50%);
|
||||
background-size: 100% 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md min-h-screen flex flex-col overflow-x-hidden selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- 1. Status Bar (Top) -->
|
||||
<nav class="h-8 bg-[#202020] flex items-center justify-between px-4 border-b border-outline-variant z-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline text-[13px] tracking-tight text-on-surface-variant">▌sync.config</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-warning animate-pulse"></span>
|
||||
<span class="font-label-caps text-[11px] text-warning">PENDING</span>
|
||||
</div>
|
||||
<span class="font-label-caps text-[11px] text-outline">v0.20.0</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Shared TopAppBar Component -->
|
||||
<header class="bg-surface flex justify-between items-center w-full px-margin-edge h-action-bar-height max-w-full border-b border-outline-variant">
|
||||
<div class="font-headline text-headline text-primary tracking-tighter uppercase">▌RS_TERMINAL_OS</div>
|
||||
<div class="hidden md:flex gap-6 items-center">
|
||||
<a class="font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:text-primary transition-colors duration-120" href="#">PLAY</a>
|
||||
<a class="font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:text-primary transition-colors duration-120" href="#">DAILY</a>
|
||||
<a class="font-label-caps text-label-caps uppercase tracking-widest text-primary border-b-2 border-primary pb-1" href="#">STATS</a>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer">account_circle</span>
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer">sync</span>
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer">settings</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow p-4 md:p-8 max-w-3xl mx-auto w-full space-y-6">
|
||||
<!-- 2. Header Area -->
|
||||
<div class="h-20 flex flex-col justify-center border-l-2 border-outline-variant pl-4">
|
||||
<h1 class="font-headline text-[24px] font-bold text-suit-black leading-tight">SYNC PROGRESS</h1>
|
||||
<p class="font-body-md text-[12px] text-[#a0a0a0]">Connect to a server to sync games across devices.</p>
|
||||
</div>
|
||||
<!-- 3. Status Card -->
|
||||
<section class="bg-[#202020] rounded-[4px] p-4 border-l-[4px] border-warning flex flex-col gap-1">
|
||||
<h2 class="font-label-caps text-[10px] text-[#a0a0a0] uppercase tracking-widest">STATUS</h2>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-headline text-[16px] font-bold text-[#a0a0a0]">○ NOT SIGNED IN</span>
|
||||
<span class="text-[11px] text-outline font-medium">Local progress only · Last attempt: never</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 4. Login Form Card -->
|
||||
<section class="bg-[#202020] border border-outline-variant rounded-[4px] p-4 flex flex-col gap-5">
|
||||
<div class="flex items-center gap-2 border-b border-outline-variant pb-2 mb-1">
|
||||
<span class="font-headline text-[12px] text-[#a0a0a0] flex items-center">
|
||||
▌ AUTH.toml <span class="ml-1 w-1.5 h-3 bg-primary-container animate-pulse"></span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Server URL -->
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="font-label-caps text-[10px] text-[#a0a0a0] uppercase tracking-widest">server_url</label>
|
||||
<div class="h-12 bg-[#1a1a1a] border border-outline-variant rounded-[2px] flex items-center px-4">
|
||||
<span class="font-headline text-[13px] text-suit-black">https://sync.rusty-solitaire.app</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="font-label-caps text-[10px] text-[#a0a0a0] uppercase tracking-widest">email</label>
|
||||
<div class="h-12 bg-[#1a1a1a] border border-outline-variant rounded-[2px] flex items-center px-4">
|
||||
<span class="font-headline text-[13px] text-outline">/ user@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Passcode -->
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="font-label-caps text-[10px] text-[#a0a0a0] uppercase tracking-widest">passcode</label>
|
||||
<div class="h-12 bg-[#1a1a1a] border border-outline-variant rounded-[2px] flex items-center justify-between px-4">
|
||||
<span class="font-headline text-[13px] text-outline">•••••••• (12 chars)</span>
|
||||
<span class="material-symbols-outlined text-outline cursor-pointer text-[18px]">visibility</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 5. Form Actions -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="h-12 bg-primary-container text-surface flex items-center justify-center rounded-[2px] font-headline text-[14px] font-bold active:scale-95 transition-transform">
|
||||
▶ SIGN IN
|
||||
</button>
|
||||
<button class="h-12 border border-outline text-suit-black flex items-center justify-center rounded-[2px] font-headline text-[13px] font-medium hover:border-primary-container hover:text-primary-container transition-all">
|
||||
+ CREATE ACCOUNT
|
||||
</button>
|
||||
</div>
|
||||
<!-- 6. Recent History Panel -->
|
||||
<section class="bg-[#202020] rounded-[4px] p-4 flex flex-col gap-3">
|
||||
<h2 class="font-label-caps text-[12px] text-[#a0a0a0] uppercase tracking-widest">RECENT</h2>
|
||||
<div class="space-y-2 border-l border-outline-variant pl-4">
|
||||
<div class="font-headline text-[11px] text-[#a0a0a0] flex items-center gap-2">
|
||||
<span class="text-outline">2026-05-07 17:38</span>
|
||||
<span class="text-outline">·</span>
|
||||
<span>○ no auth</span>
|
||||
<span class="text-outline">·</span>
|
||||
<span>skip</span>
|
||||
</div>
|
||||
<div class="font-headline text-[11px] text-[#a0a0a0] flex items-center gap-2">
|
||||
<span class="text-outline">2026-05-07 14:12</span>
|
||||
<span class="text-outline">·</span>
|
||||
<span>○ no auth</span>
|
||||
<span class="text-outline">·</span>
|
||||
<span>skip</span>
|
||||
</div>
|
||||
<div class="font-headline text-[11px] text-[#a0a0a0] flex items-center gap-2">
|
||||
<span class="text-outline">2026-05-06 09:01</span>
|
||||
<span class="text-outline">·</span>
|
||||
<span class="text-highlight-valid">✓ synced 12 games</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- 7. Footer -->
|
||||
<footer class="h-10 bg-surface border-t border-outline-variant flex items-center justify-between px-4 fixed bottom-0 w-full z-50">
|
||||
<div class="flex items-center gap-2 font-headline text-[11px]">
|
||||
<span class="text-primary-container">▌ NORMAL</span>
|
||||
<span class="text-outline">│</span>
|
||||
<span class="text-on-surface-variant">sync</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 font-headline text-[11px] text-outline uppercase tracking-wider">
|
||||
<span>[ENTER] <span class="text-on-surface-variant">sign in</span></span>
|
||||
<span>[ESC] <span class="text-on-surface-variant">cancel</span></span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Shared BottomNavBar Component (Mobile Only) -->
|
||||
<nav class="md:hidden fixed bottom-10 w-full z-50 flex justify-around items-center h-action-bar-height px-margin-edge bg-surface-container border-t border-outline-variant">
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-bright transition-all duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="videogame_asset">videogame_asset</span>
|
||||
<span class="font-label-caps text-[10px] uppercase tracking-widest mt-1">F1_NEW_GAME</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-bright transition-all duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="event_upcoming">event_upcoming</span>
|
||||
<span class="font-label-caps text-[10px] uppercase tracking-widest mt-1">F2_CHALLENGE</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-primary dark:text-primary-fixed-dim bg-surface-container-highest rounded-none p-2 transition-all duration-120 scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="query_stats">query_stats</span>
|
||||
<span class="font-label-caps text-[10px] uppercase tracking-widest mt-1">F5_STATS</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-bright transition-all duration-120">
|
||||
<span class="material-symbols-outlined" data-icon="power_settings_new">power_settings_new</span>
|
||||
<span class="font-label-caps text-[10px] uppercase tracking-widest mt-1">ESC_EXIT</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Decorative Screen Texture -->
|
||||
<div class="fixed inset-0 pointer-events-none opacity-[0.03] scanline z-[100]"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<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
|
||||
}
|
||||
.scanline-pattern {
|
||||
background: repeating-linear-gradient(0deg, #1a1a1a, #1a1a1a 2px, #151515 2px, #151515 4px)
|
||||
}
|
||||
.checker-pattern {
|
||||
background-color: #001e2c;
|
||||
background-image: radial-gradient(#a1dcff 10%, transparent 10%), radial-gradient(#a1dcff 10%, transparent 10%);
|
||||
background-size: 8px 8px;
|
||||
background-position: 0 0, 4px 4px
|
||||
}
|
||||
.stripe-pattern {
|
||||
background: repeating-linear-gradient(0deg, #fb9fb1, #fb9fb1 4px, #202020 4px, #202020 8px)
|
||||
}
|
||||
.polka-pattern {
|
||||
background-color: #001e2c;
|
||||
background-image: radial-gradient(#e0e3e6 15%, transparent 15%);
|
||||
background-size: 12px 12px
|
||||
}
|
||||
.vintage-pattern {
|
||||
background-color: #d5ec8c;
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuD8S9vQTpEh-DjYtjB5CUHqi2CO326ZEjVVLJoOqG1AA6b92NZ6ctGoD4yZHKV7oHJnSFdvp3z3Wei9zfTI2EGAdrQfHxFYJ-h1DaeiZQY3vTa5khIQ83Sf-bjz2xiudHsjs3RyhSKC5bHv2c8_9t6YjepJdQnJa4GelCetFEs_agpN6u2IfMS1M9RrGxGKLl4K18fj0Pg3BW8IptX_ladhVFR5Hk8F0Reu5WHY8eQt1Nr-p9NNXl-w3C9Jz0uGSxi_Wb7R771lgQ);
|
||||
opacity: 0.8
|
||||
}</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#313538",
|
||||
"on-error-container": "#ffdad6",
|
||||
"warning": "#ddb26f",
|
||||
"on-surface": "#e0e3e6",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"on-error": "#690005",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"primary-container": "#6fc2ef",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"tertiary": "#f7c3ff",
|
||||
"surface-dim": "#101417",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"surface-container": "#1c2023",
|
||||
"secondary-container": "#435401",
|
||||
"error": "#fb9fb1",
|
||||
"on-tertiary": "#4c195b",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"error-container": "#93000a",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"info": "#12cfc0",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"highlight-valid": "#acc267",
|
||||
"on-primary": "#003549",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"primary": "#a1dcff",
|
||||
"surface-container-high": "#272a2d",
|
||||
"background": "#101417",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"suit-red": "#fb9fb1",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"surface": "#151515",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"outline": "#505050",
|
||||
"on-secondary": "#293500",
|
||||
"surface-container-highest": "#313538",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"on-primary-container": "#004f6c",
|
||||
"suit-black": "#d0d0d0",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-tertiary-container": "#683476",
|
||||
"secondary": "#bad073",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"surface-bright": "#363a3d",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"inverse-primary": "#00668a",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-background": "#e0e3e6",
|
||||
"tertiary-container": "#e1a3ee"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"touch-target-min": "48dp",
|
||||
"action-bar-height": "64px",
|
||||
"margin-edge": "1rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface selection:bg-primary-container selection:text-on-primary-container min-h-screen flex flex-col font-body-md overflow-x-hidden">
|
||||
<!-- TopAppBar Semantic Shell -->
|
||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center h-[32px] px-margin-edge bg-surface-container border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[16px] text-primary" data-icon="terminal">terminal</span>
|
||||
<span class="font-headline text-[14px] font-bold text-on-surface">▌theme.picker</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity">
|
||||
<span class="font-label-caps text-[12px] text-on-surface-variant uppercase">× CLOSE</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mt-[32px] mb-[64px] flex-grow flex flex-col px-margin-edge py-6">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-start mb-8">
|
||||
<div class="flex-1">
|
||||
<h1 class="font-headline text-[24px] font-bold text-on-surface mb-1">CARD THEMES</h1>
|
||||
<p class="font-body-md text-[13px] text-on-surface-variant max-w-[280px]">Choose a card-face theme. Imported themes appear at the bottom.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-high px-2 py-1 border border-outline-variant">
|
||||
<span class="font-label-caps text-[11px] text-primary">5 INSTALLED</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme Grid -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Active Theme: Terminal -->
|
||||
<div class="relative flex flex-col bg-surface border-2 border-primary-container">
|
||||
<div class="aspect-[2.5/3.5] w-full p-2 overflow-hidden flex items-center justify-center bg-background">
|
||||
<!-- Card Preview -->
|
||||
<div class="w-24 h-36 bg-surface border border-primary-container scanline-pattern relative">
|
||||
<div class="absolute top-1 left-1 w-3 h-4 bg-primary-container"></div>
|
||||
<div class="absolute bottom-1 right-1 font-headline text-[10px] text-on-surface">▌RS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-high border-t border-primary-container">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<span class="font-headline text-[14px] font-bold truncate">Terminal</span>
|
||||
<span class="font-label-caps text-[10px] text-primary-container">✓ ACTIVE</span>
|
||||
</div>
|
||||
<span class="font-body-md text-[11px] text-on-surface-variant">by Rusty Solitaire</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme: Classic -->
|
||||
<div class="relative flex flex-col bg-surface border border-outline">
|
||||
<div class="aspect-[2.5/3.5] w-full p-2 overflow-hidden flex items-center justify-center bg-background">
|
||||
<div class="w-24 h-36 bg-surface border border-outline checker-pattern"></div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-low border-t border-outline">
|
||||
<span class="font-headline text-[14px] font-bold block truncate">Classic</span>
|
||||
<span class="font-body-md text-[11px] text-on-surface-variant">by Rusty Solitaire</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme: Stripes -->
|
||||
<div class="relative flex flex-col bg-surface border border-outline">
|
||||
<div class="aspect-[2.5/3.5] w-full p-2 overflow-hidden flex items-center justify-center bg-background">
|
||||
<div class="w-24 h-36 bg-surface border border-outline stripe-pattern"></div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-low border-t border-outline">
|
||||
<span class="font-headline text-[14px] font-bold block truncate">Stripes</span>
|
||||
<span class="font-body-md text-[11px] text-on-surface-variant">by hayeah</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme: Polka -->
|
||||
<div class="relative flex flex-col bg-surface border border-outline">
|
||||
<div class="aspect-[2.5/3.5] w-full p-2 overflow-hidden flex items-center justify-center bg-background">
|
||||
<div class="w-24 h-36 bg-surface border border-outline polka-pattern"></div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-low border-t border-outline">
|
||||
<span class="font-headline text-[14px] font-bold block truncate">Polka</span>
|
||||
<span class="font-body-md text-[11px] text-on-surface-variant">by hayeah</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme: Vintage -->
|
||||
<div class="relative flex flex-col bg-surface border border-outline">
|
||||
<div class="aspect-[2.5/3.5] w-full p-2 overflow-hidden flex items-center justify-center bg-background">
|
||||
<div class="w-24 h-36 bg-surface border border-outline vintage-pattern"></div>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-low border-t border-outline">
|
||||
<span class="font-headline text-[14px] font-bold block truncate">Vintage</span>
|
||||
<span class="font-body-md text-[11px] text-on-surface-variant">by hayeah</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Import Theme -->
|
||||
<div class="relative flex flex-col bg-surface border-2 border-dashed border-outline-variant hover:border-primary-container transition-colors cursor-pointer">
|
||||
<div class="aspect-[2.5/3.5] w-full flex flex-col items-center justify-center gap-3">
|
||||
<span class="material-symbols-outlined text-[32px] text-primary-container" data-icon="add">add</span>
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant tracking-widest text-center px-4">IMPORT FROM .ZIP</span>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-low border-t border-outline-variant">
|
||||
<span class="font-headline text-[14px] font-bold block truncate">+ IMPORT THEME</span>
|
||||
<span class="font-body-md text-[11px] opacity-0">spacer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar Semantic Shell -->
|
||||
<footer class="fixed bottom-0 left-0 w-full h-[64px] z-50 bg-surface-container border-t border-outline-variant flex justify-between items-center px-margin-edge pb-safe">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline text-[14px] font-bold text-on-surface">▌ NORMAL</span>
|
||||
<span class="text-on-surface-variant">│</span>
|
||||
<span class="font-label-caps text-[12px] text-on-surface-variant">theme</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center">
|
||||
<span class="text-on-surface-variant font-label-caps text-[11px]">[ENTER]</span>
|
||||
<span class="text-on-surface-variant font-body-md text-[11px] ml-1">activate</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-on-surface-variant font-label-caps text-[11px]">[I]</span>
|
||||
<span class="text-on-surface-variant font-body-md text-[11px] ml-1">import</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-on-surface-variant font-label-caps text-[11px]">[ESC]</span>
|
||||
<span class="text-on-surface-variant font-body-md text-[11px] ml-1">back</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Rusty Solitaire - Time Attack Configuration</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&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": {
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"primary-container": "#6fc2ef",
|
||||
"surface-container-high": "#272a2d",
|
||||
"tertiary": "#f7c3ff",
|
||||
"suit-black": "#d0d0d0",
|
||||
"secondary-container": "#435401",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"surface-dim": "#101417",
|
||||
"on-primary-container": "#004f6c",
|
||||
"info": "#12cfc0",
|
||||
"outline-variant": "#3f484e",
|
||||
"surface": "#151515",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"surface-container-low": "#181c1f",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"inverse-primary": "#00668a",
|
||||
"suit-red": "#fb9fb1",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-surface": "#d0d0d0",
|
||||
"on-secondary": "#293500",
|
||||
"error-container": "#93000a",
|
||||
"highlight-valid": "#acc267",
|
||||
"surface-container-highest": "#313538",
|
||||
"primary": "#a1dcff",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"error": "#fb9fb1",
|
||||
"outline": "#505050",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"surface-container": "#202020",
|
||||
"on-primary": "#003549",
|
||||
"on-error": "#690005",
|
||||
"warning": "#ddb26f",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-background": "#e0e3e6",
|
||||
"on-tertiary": "#4c195b",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"background": "#101417",
|
||||
"surface-variant": "#313538",
|
||||
"secondary": "#bad073",
|
||||
"on-tertiary-container": "#683476",
|
||||
"surface-bright": "#363a3d",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"primary-fixed": "#c4e7ff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-edge": "1rem",
|
||||
"touch-target-min": "48px",
|
||||
"stack-overlap": "2rem",
|
||||
"gutter-card": "0.375rem",
|
||||
"action-bar-height": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"hud-timer": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #151515; color: #d0d0d0; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.scanline {
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%);
|
||||
background-size: 100% 4px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex items-center justify-center min-h-screen">
|
||||
<!-- Mobile Container (390x844) -->
|
||||
<div class="w-[390px] h-[844px] bg-surface relative flex flex-col overflow-hidden border border-outline-variant">
|
||||
<!-- STATUS BAR -->
|
||||
<header class="h-8 bg-surface-container flex items-center justify-between px-4 z-10">
|
||||
<span class="font-headline text-[12px] tracking-tight text-primary">▌time-attack.tsx</span>
|
||||
<span class="font-label-caps text-[10px] text-on-surface-variant">MODE · TIMED</span>
|
||||
</header>
|
||||
<!-- TOP APP BAR (from JSON) -->
|
||||
<nav class="flex justify-between items-center w-full px-margin-edge h-action-bar-height max-w-full bg-surface text-primary font-headline text-headline font-bold border-b border-outline-variant">
|
||||
<div class="font-headline text-headline text-primary tracking-tighter uppercase">▌RS_TERMINAL_OS</div>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-primary-fixed transition-colors duration-120">account_circle</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-primary-fixed transition-colors duration-120">sync</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-primary-fixed transition-colors duration-120">settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- MAIN CONTENT -->
|
||||
<main class="flex-1 px-4 py-4 flex flex-col gap-4 overflow-y-auto">
|
||||
<!-- HERO BAND -->
|
||||
<section class="flex flex-col items-center justify-center h-[100px] text-center">
|
||||
<h1 class="font-headline text-[32px] font-bold tracking-tighter text-on-surface uppercase">TIME ATTACK</h1>
|
||||
<p class="font-body-md text-[12px] text-on-surface-variant max-w-[280px]">Race the clock. The faster you finish, the higher your score.</p>
|
||||
</section>
|
||||
<!-- TIMER DISPLAY -->
|
||||
<section class="w-full h-[120px] bg-surface-dim border border-outline-variant flex flex-col items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 scanline opacity-10 pointer-events-none"></div>
|
||||
<div class="font-headline text-[64px] font-bold tracking-tight text-primary tabular-nums leading-none">05:00</div>
|
||||
<div class="font-label-caps text-[11px] uppercase tracking-[0.2em] text-on-surface-variant mt-2">MINUTES</div>
|
||||
</section>
|
||||
<!-- DURATION PICKER -->
|
||||
<section class="grid grid-cols-4 gap-px bg-outline-variant border border-outline-variant">
|
||||
<button class="h-12 bg-surface-container font-label-caps text-[12px] text-on-surface hover:bg-surface-bright transition-all">1 MIN</button>
|
||||
<button class="h-12 bg-surface-container font-label-caps text-[12px] text-on-surface hover:bg-surface-bright transition-all">3 MIN</button>
|
||||
<button class="h-12 bg-primary text-on-primary font-bold font-label-caps text-[12px]">5 MIN</button>
|
||||
<button class="h-12 bg-surface-container font-label-caps text-[12px] text-on-surface hover:bg-surface-bright transition-all">10 MIN</button>
|
||||
</section>
|
||||
<!-- RULES CARD -->
|
||||
<section class="bg-surface-container h-20 p-3 border border-outline-variant flex flex-col justify-between">
|
||||
<div class="font-label-caps text-[10px] text-on-surface-variant uppercase tracking-widest">RULES</div>
|
||||
<div class="font-headline text-[12px] text-on-surface flex items-center gap-2">
|
||||
<span class="w-1 h-1 bg-primary"></span> DRAW-3
|
||||
<span class="w-1 h-1 bg-primary ml-2"></span> NO HINT PENALTY
|
||||
<span class="w-1 h-1 bg-primary ml-2"></span> +50 XP / WIN
|
||||
</div>
|
||||
</section>
|
||||
<!-- BEST RUN CARD -->
|
||||
<section class="bg-surface-container h-16 p-3 border border-outline-variant flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<div class="font-label-caps text-[10px] text-on-surface-variant uppercase tracking-widest">PERSONAL BEST · 5 MIN</div>
|
||||
<div class="font-headline text-[24px] font-bold text-on-surface leading-tight">02:47 <span class="text-[12px] font-normal text-on-surface-variant">WIN</span></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="font-label-caps text-[10px] text-on-surface-variant">GLOBAL RANK 142</div>
|
||||
<div class="bg-warning text-on-surface text-[9px] px-1.5 py-0.5 font-bold mt-1">TOP 5%</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- PRIMARY CTA -->
|
||||
<section class="mt-auto pt-4">
|
||||
<button class="w-full h-20 bg-primary text-on-primary flex flex-col items-center justify-center transition-all active:scale-[0.98] duration-80">
|
||||
<div class="font-headline text-[18px] font-extrabold uppercase tracking-[0.2em] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span> BEGIN COUNTDOWN
|
||||
</div>
|
||||
</button>
|
||||
<p class="font-body-md text-[11px] text-on-surface-variant text-center mt-3">Game starts after a 3-second countdown.</p>
|
||||
</section>
|
||||
</main>
|
||||
<!-- FOOTER -->
|
||||
<footer class="h-6 bg-surface-container-lowest flex items-center justify-between px-4 border-t border-outline-variant">
|
||||
<span class="font-headline text-[10px] text-on-surface-variant">▌ NORMAL │ time-attack</span>
|
||||
<span class="font-label-caps text-[9px] text-on-surface-variant uppercase">[ENTER] begin · [ESC] back</span>
|
||||
</footer>
|
||||
<!-- BOTTOM NAV BAR (from JSON) -->
|
||||
<nav class="fixed bottom-0 w-[390px] z-50 flex justify-around items-center h-action-bar-height px-margin-edge bg-surface-container border-t border-outline-variant">
|
||||
<div class="flex flex-col items-center justify-center text-primary bg-surface-container-highest rounded-none p-2 transition-transform duration-80 active:scale-95">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">videogame_asset</span>
|
||||
<span class="font-label-caps text-label-caps uppercase tracking-widest">F1_NEW_GAME</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-bright transition-all duration-120">
|
||||
<span class="material-symbols-outlined">event_upcoming</span>
|
||||
<span class="font-label-caps text-label-caps uppercase tracking-widest">F2_CHALLENGE</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-bright transition-all duration-120">
|
||||
<span class="material-symbols-outlined">query_stats</span>
|
||||
<span class="font-label-caps text-label-caps uppercase tracking-widest">F5_STATS</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-bright transition-all duration-120">
|
||||
<span class="material-symbols-outlined">power_settings_new</span>
|
||||
<span class="font-label-caps text-label-caps uppercase tracking-widest">ESC_EXIT</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- PADDING FOR FIXED NAV -->
|
||||
<div class="h-action-bar-height"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Weekly Goals - Rusty Solitaire</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&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": {
|
||||
"surface-container-high": "#272a2d",
|
||||
"on-primary": "#003549",
|
||||
"highlight-valid": "#acc267",
|
||||
"primary-container": "#6fc2ef",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"outline": "#505050",
|
||||
"on-primary-container": "#004f6c",
|
||||
"on-background": "#e0e3e6",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"error": "#fb9fb1",
|
||||
"suit-black": "#d0d0d0",
|
||||
"secondary": "#bad073",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"surface-container": "#202020",
|
||||
"primary": "#a1dcff",
|
||||
"error-container": "#93000a",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"surface-container-highest": "#313538",
|
||||
"surface-dim": "#101417",
|
||||
"suit-red": "#fb9fb1",
|
||||
"warning": "#ddb26f",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"on-tertiary-container": "#683476",
|
||||
"on-surface": "#e0e3e6",
|
||||
"on-surface-variant": "#bfc8cf",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"tertiary-fixed": "#fbd7ff",
|
||||
"info": "#12cfc0",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"surface-variant": "#313538",
|
||||
"inverse-primary": "#00668a",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"secondary-container": "#435401",
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"surface-container-low": "#181c1f",
|
||||
"background": "#101417",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"surface-bright": "#363a3d",
|
||||
"on-primary-fixed": "#001e2c",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"on-secondary": "#293500",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"on-tertiary": "#4c195b",
|
||||
"tertiary": "#f7c3ff",
|
||||
"outline-variant": "#3f484e",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"surface": "#151515",
|
||||
"on-error": "#690005"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-edge": "1rem",
|
||||
"touch-target-min": "48dp",
|
||||
"gutter-card": "0.375rem",
|
||||
"stack-overlap": "2rem",
|
||||
"action-bar-height": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["JetBrains Mono"],
|
||||
"body-md": ["Inter"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar-track { background: #151515; }
|
||||
::-webkit-scrollbar-thumb { background: #353535; border-radius: 2px; }
|
||||
|
||||
/* Scanline Overlay Effect */
|
||||
.crt-overlay {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
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% 3px, 3px 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary-container overflow-hidden h-screen flex flex-col">
|
||||
<!-- Top Status Bar -->
|
||||
<div class="h-[32px] bg-surface flex items-center justify-between px-margin-edge z-50 shrink-0">
|
||||
<div class="font-label-caps text-[12px] text-[#a0a0a0] flex items-center">
|
||||
<span class="mr-1">▌</span>weekly-goals.json
|
||||
</div>
|
||||
<div class="bg-warning/10 text-warning px-2 py-0.5 rounded-sm flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[14px]">timer</span>
|
||||
<span class="font-headline text-[10px] font-bold tabular-nums tracking-wider uppercase">RESETS IN 2D 14H</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Header Band -->
|
||||
<header class="h-[80px] px-margin-edge flex flex-col justify-center border-b border-outline/20 shrink-0">
|
||||
<h1 class="font-headline text-[24px] font-bold text-suit-black tracking-tight leading-none">WEEKLY GOALS</h1>
|
||||
<p class="font-body-md text-[12px] text-[#a0a0a0] mt-1">Complete goals before reset to claim XP and rewards.</p>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 overflow-y-auto px-margin-edge py-4 space-y-4">
|
||||
<!-- Overall Progress Card -->
|
||||
<section class="h-[80px] bg-surface-container border border-outline/30 rounded-[4px] p-4 flex flex-col justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-caps text-[10px] text-[#a0a0a0] tracking-widest uppercase">OVERALL · 3/5</span>
|
||||
<span class="font-headline text-[12px] text-highlight-celebration tabular-nums">(60%)</span>
|
||||
</div>
|
||||
<div class="w-full h-[6px] bg-[#353535] rounded-full overflow-hidden">
|
||||
<div class="h-full bg-highlight-celebration w-[60%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="font-label-caps text-[11px] text-highlight-valid flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">stars</span>
|
||||
+220 XP CLAIMED
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Goal List -->
|
||||
<div class="space-y-2 pb-16">
|
||||
<!-- Goal 1: COMPLETED -->
|
||||
<div class="h-[88px] bg-surface-container border border-outline/30 rounded-[4px] p-3 flex flex-col justify-between">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline text-[14px] font-bold text-suit-black">PLAY 10 GAMES</h3>
|
||||
<div class="bg-highlight-valid/10 text-highlight-valid px-2 py-0.5 rounded-sm font-label-caps text-[11px]">+50 XP</div>
|
||||
</div>
|
||||
<div class="w-full h-[4px] bg-[#353535] rounded-full">
|
||||
<div class="h-full bg-highlight-valid w-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center font-label-caps text-[10px]">
|
||||
<span class="text-[#a0a0a0]">10/10 GAMES</span>
|
||||
<span class="text-highlight-valid flex items-center gap-1">✓ CLAIMED</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Goal 2: COMPLETED -->
|
||||
<div class="h-[88px] bg-surface-container border border-outline/30 rounded-[4px] p-3 flex flex-col justify-between">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline text-[14px] font-bold text-suit-black">WIN 5 DAILY SEEDS</h3>
|
||||
<div class="bg-highlight-celebration/10 text-highlight-celebration px-2 py-0.5 rounded-sm font-label-caps text-[11px]">+100 XP</div>
|
||||
</div>
|
||||
<div class="w-full h-[4px] bg-[#353535] rounded-full">
|
||||
<div class="h-full bg-highlight-valid w-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center font-label-caps text-[10px]">
|
||||
<span class="text-[#a0a0a0]">5/5 DONE</span>
|
||||
<span class="text-highlight-valid flex items-center gap-1">✓ CLAIMED</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Goal 3: IN PROGRESS -->
|
||||
<div class="h-[88px] bg-surface-container border border-outline/30 rounded-[4px] p-3 flex flex-col justify-between border-l-2 border-l-primary-container">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline text-[14px] font-bold text-suit-black">WIN UNDER 4:00 (3 TIMES)</h3>
|
||||
<div class="bg-highlight-valid/10 text-highlight-valid px-2 py-0.5 rounded-sm font-label-caps text-[11px]">+75 XP</div>
|
||||
</div>
|
||||
<div class="w-full h-[4px] bg-[#353535] rounded-full">
|
||||
<div class="h-full bg-primary-container w-[66%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center font-label-caps text-[10px]">
|
||||
<span class="text-[#a0a0a0]">2/3</span>
|
||||
<span class="text-primary-container flex items-center gap-1">▶ IN PROGRESS</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Goal 4: NOT STARTED -->
|
||||
<div class="h-[88px] bg-surface-container border border-outline/30 rounded-[4px] p-3 flex flex-col justify-between opacity-70">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline text-[14px] font-bold text-suit-black">PERFECT GAME (NO UNDO)</h3>
|
||||
<div class="bg-warning/10 text-warning px-2 py-0.5 rounded-sm font-label-caps text-[11px]">+150 XP</div>
|
||||
</div>
|
||||
<div class="w-full h-[4px] bg-[#353535] rounded-full">
|
||||
<div class="h-full bg-outline w-0"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center font-label-caps text-[10px]">
|
||||
<span class="text-[#a0a0a0]">0/1</span>
|
||||
<span class="text-outline flex items-center gap-1">○ NOT STARTED</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Goal 5: IN PROGRESS -->
|
||||
<div class="h-[88px] bg-surface-container border border-outline/30 rounded-[4px] p-3 flex flex-col justify-between border-l-2 border-l-primary-container">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-headline text-[14px] font-bold text-suit-black">STREAK OF 5 WINS</h3>
|
||||
<div class="bg-highlight-valid/10 text-highlight-valid px-2 py-0.5 rounded-sm font-label-caps text-[11px]">+50 XP</div>
|
||||
</div>
|
||||
<div class="w-full h-[4px] bg-[#353535] rounded-full">
|
||||
<div class="h-full bg-primary-container w-[60%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center font-label-caps text-[10px]">
|
||||
<span class="text-[#a0a0a0]">3/5</span>
|
||||
<span class="text-primary-container flex items-center gap-1">▶ IN PROGRESS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Navigation Shell from JSON -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-margin-edge bg-surface-container border-t border-outline-variant h-action-bar-height">
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-120 active:scale-95 transition-transform duration-80">
|
||||
<span class="material-symbols-outlined">refresh</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-120 active:scale-95 transition-transform duration-80">
|
||||
<span class="material-symbols-outlined">undo</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-primary active:scale-95 transition-transform duration-80">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">style</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-120 active:scale-95 transition-transform duration-80">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Bottom Terminal Status Footer -->
|
||||
<footer class="fixed bottom-[64px] left-0 w-full h-[24px] bg-surface flex items-center justify-between px-margin-edge z-50 border-t border-outline/10">
|
||||
<div class="font-label-caps text-[10px] text-[#a0a0a0]">
|
||||
<span class="text-primary">▌</span> NORMAL │ weekly
|
||||
</div>
|
||||
<div class="font-label-caps text-[10px] flex gap-3">
|
||||
<span class="text-[#505050]"><span class="text-[#a0a0a0]">[C]</span> claim all</span>
|
||||
<span class="text-[#505050]"><span class="text-[#a0a0a0]">[ESC]</span> back</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- CRT Overlay -->
|
||||
<div class="crt-overlay"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ROOT@SOLITAIRE:~ | Win Summary</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": {
|
||||
"primary-fixed": "#c4e7ff",
|
||||
"inverse-surface": "#e0e3e6",
|
||||
"on-tertiary": "#4c195b",
|
||||
"suit-red-cb": "#6fc2ef",
|
||||
"secondary-fixed-dim": "#bad073",
|
||||
"on-secondary-fixed-variant": "#3c4d00",
|
||||
"on-secondary-fixed": "#161e00",
|
||||
"surface-container-highest": "#313538",
|
||||
"primary-fixed-dim": "#7ed0fe",
|
||||
"on-secondary": "#293500",
|
||||
"on-background": "#e0e3e6",
|
||||
"highlight-celebration": "#e1a3ee",
|
||||
"warning": "#ddb26f",
|
||||
"on-tertiary-fixed-variant": "#653173",
|
||||
"background": "#101417",
|
||||
"surface-container-lowest": "#0b0f11",
|
||||
"info": "#12cfc0",
|
||||
"tertiary-container": "#e1a3ee",
|
||||
"surface-container": "#202020",
|
||||
"secondary": "#bad073",
|
||||
"outline": "#505050",
|
||||
"tertiary-fixed-dim": "#f0b0fc",
|
||||
"secondary-container": "#435401",
|
||||
"inverse-primary": "#00668a",
|
||||
"surface": "#151515",
|
||||
"on-error-container": "#ffdad6",
|
||||
"error-container": "#93000a",
|
||||
"surface-bright": "#363a3d",
|
||||
"surface-dim": "#101417",
|
||||
"on-primary-fixed-variant": "#004c69",
|
||||
"on-tertiary-fixed": "#340043",
|
||||
"inverse-on-surface": "#2d3134",
|
||||
"surface-container-high": "#272a2d",
|
||||
"secondary-fixed": "#d5ec8c",
|
||||
"on-tertiary-container": "#683476",
|
||||
"on-secondary-container": "#b2c86d",
|
||||
"surface-tint": "#7ed0fe",
|
||||
"on-primary-container": "#004f6c",
|
||||
"on-error": "#690005",
|
||||
"on-surface": "#e0e3e6",
|
||||
"surface-variant": "#313538",
|
||||
"highlight-valid": "#acc267",
|
||||
"primary": "#a1dcff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-edge": "1rem",
|
||||
"action-bar-height": "64px",
|
||||
"gutter-card": "0.375rem",
|
||||
"touch-target-min": "48dp",
|
||||
"stack-overlap": "2rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Inter"],
|
||||
"label-caps": ["JetBrains Mono"],
|
||||
"card-rank": ["JetBrains Mono"],
|
||||
"hud-timer": ["JetBrains Mono"],
|
||||
"headline": ["JetBrains Mono"],
|
||||
"hud-score": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "500"}],
|
||||
"card-rank": ["18px", {"lineHeight": "18px", "fontWeight": "700"}],
|
||||
"hud-timer": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline": ["28px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"hud-score": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.crt-scanlines {
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.lavender-glow {
|
||||
text-shadow: 0 0 16px rgba(225, 163, 238, 0.3);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md selection:bg-primary-container selection:text-on-primary-container min-h-screen flex flex-col relative overflow-hidden">
|
||||
<!-- CRT Overlay -->
|
||||
<div class="fixed inset-0 crt-scanlines z-[100] opacity-30"></div>
|
||||
<!-- Status Bar (Emulating TopAppBar context) -->
|
||||
<header class="h-[32px] bg-surface-container flex items-center justify-between px-margin-edge z-50 border-b border-outline-variant">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-caps text-[11px] text-on-surface">▌win.tsx</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-2 h-2 rounded-full bg-info"></span>
|
||||
<span class="font-label-caps text-[11px] text-info uppercase">Synced</span>
|
||||
</div>
|
||||
<span class="font-label-caps text-[11px] text-outline uppercase tracking-tight">v0.20.0</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<main class="flex-1 flex flex-col px-margin-edge pt-12 pb-8 gap-8 relative z-10">
|
||||
<!-- Hero Band -->
|
||||
<section class="flex flex-col items-center text-center space-y-2">
|
||||
<h1 class="font-headline text-[48px] leading-tight text-highlight-celebration uppercase lavender-glow tracking-tighter">
|
||||
█ COMPLETE
|
||||
</h1>
|
||||
<p class="font-label-caps text-[12px] text-outline-variant tracking-[0.2em]">
|
||||
GAME #2024-127 · DRAW-3
|
||||
</p>
|
||||
</section>
|
||||
<!-- Stats Card -->
|
||||
<section class="bg-surface-container border border-outline-variant rounded-lg overflow-hidden p-6 grid grid-cols-2 gap-y-8 gap-x-4">
|
||||
<div class="space-y-1">
|
||||
<span class="block font-label-caps text-outline uppercase text-[10px]">Final Score</span>
|
||||
<span class="block font-hud-score text-on-background">1,024</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="block font-label-caps text-outline uppercase text-[10px]">Time</span>
|
||||
<span class="block font-hud-timer text-on-background">12:34</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="block font-label-caps text-outline uppercase text-[10px]">Moves</span>
|
||||
<span class="block font-hud-timer text-on-background">87</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="block font-label-caps text-outline uppercase text-[10px]">Par Delta</span>
|
||||
<span class="block font-hud-timer text-highlight-valid">−13</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Achievement Card -->
|
||||
<section class="bg-surface-container border-l-2 border-highlight-celebration rounded-r-lg p-4 flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<span class="font-label-caps text-highlight-celebration text-[10px] flex items-center gap-1">
|
||||
<span class="text-[8px]">▲</span> ACHIEVEMENT UNLOCKED
|
||||
</span>
|
||||
<p class="font-label-caps text-suit-black uppercase tracking-wider text-[14px]">FIRST DAILY WIN</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 rounded-full border border-outline-variant flex items-center justify-center bg-surface-container-low">
|
||||
<span class="material-symbols-outlined text-highlight-celebration text-2xl" data-icon="military_tech">military_tech</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-auto space-y-3">
|
||||
<button class="w-full h-[56px] bg-info text-surface font-label-caps text-[14px] font-bold tracking-widest flex items-center justify-center gap-2 hover:opacity-90 active:opacity-80 transition-all uppercase">
|
||||
<span class="text-lg">▶</span> New Game
|
||||
</button>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="h-[48px] border border-outline text-on-surface-variant font-label-caps text-[12px] flex items-center justify-center gap-2 hover:border-info hover:text-info transition-colors uppercase">
|
||||
<span class="text-sm">↺</span> Replay Seed
|
||||
</button>
|
||||
<button class="h-[48px] border border-outline text-on-surface-variant font-label-caps text-[12px] flex items-center justify-center gap-2 hover:border-info hover:text-info transition-colors uppercase">
|
||||
<span class="text-sm">⌂</span> Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Keys -->
|
||||
<footer class="h-action-bar-height flex flex-col items-center justify-center px-margin-edge border-t border-outline-variant bg-surface-container-low">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-label-caps text-outline-variant">[ S ]</span>
|
||||
<span class="font-label-caps text-outline uppercase text-[10px]">share screenshot</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-label-caps text-outline-variant">[ X ]</span>
|
||||
<span class="font-label-caps text-outline uppercase text-[10px]">copy seed</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Bottom Nav Suppression Logic: This is a task-focused confirmation screen, so the global BottomNavBar from JSON is suppressed to focus on primary actions. -->
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Reference in New Issue
Block a user