ImBenjiandClaude Opus 5.5
b5e5ed5b75
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the components are CSS on top of them, and the cards cover foundations, components and whole hub and Arcs & Angles screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
69 lines
2.5 KiB
HTML
69 lines
2.5 KiB
HTML
<!-- @dsCard group="Patterns" -->
|
|
<!doctype html>
|
|
<html lang="en" data-scheme="carbon" data-density="product">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Page states</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
/* scaffolding - three workspace Panels on the chrome ground, one state each:
|
|
loading (a spinner), empty (one muted line), error (muted message + outline retry) */
|
|
html, body { background: var(--chrome); }
|
|
.screen { width: 1100px; height: 440px; }
|
|
.shell { height: 100%; align-items: stretch; }
|
|
.shell > .panel { flex: 1; min-width: 0; display: flex; flex-direction: column;
|
|
padding: var(--gap-xxl) var(--gap-xl); }
|
|
.shell > .panel > .page-heading { margin-bottom: var(--gap-xxl); }
|
|
.fill { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-md); }
|
|
.note { padding: var(--gap-md) var(--container-padding); display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="screen">
|
|
<div class="shell">
|
|
|
|
<!-- loading -->
|
|
<section class="panel">
|
|
<div class="page-heading">
|
|
<div class="title">Payments</div>
|
|
<div class="subtitle">What you've bought, and what you're still paying for.</div>
|
|
</div>
|
|
<div class="fill"><div class="spinner" role="status" aria-label="Loading"></div></div>
|
|
</section>
|
|
|
|
<!-- empty -->
|
|
<section class="panel">
|
|
<div class="page-heading">
|
|
<div class="title">Projects</div>
|
|
<div class="subtitle">Applications you build and sell on Garage.</div>
|
|
</div>
|
|
<div class="fill">
|
|
<div class="muted">No projects yet</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- error: still a section, with nothing in it -->
|
|
<section class="panel">
|
|
<div class="page-heading">
|
|
<div class="title">Security</div>
|
|
<div class="subtitle">Your password, passkeys and signed-in devices.</div>
|
|
</div>
|
|
<section class="properties-section">
|
|
<div class="header">
|
|
<svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
<div><div>Passkeys</div><span class="subtitle">Sign in with your device instead of a password</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="note">
|
|
<div class="muted">Couldn't load your passkeys.</div>
|
|
<button class="btn outline">Try again</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|