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
152 lines
10 KiB
HTML
152 lines
10 KiB
HTML
<!-- @dsCard group="Patterns" -->
|
|
<!doctype html>
|
|
<html lang="en" data-scheme="carbon" data-density="product">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hub page</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
/* scaffolding only - the mock screen and the hub's Measure (railWidth = fontSize*18,
|
|
contentMax = fontSize*56, pageGutter = fontSize*3). every value is a token */
|
|
html, body { background: var(--chrome); }
|
|
.screen { width: 1100px; height: 720px; }
|
|
.shell { height: 100%; align-items: stretch; }
|
|
|
|
.rail { width: calc(var(--font-size) * 18); flex: none; display: flex; flex-direction: column; }
|
|
.rail .wordmark { height: calc(var(--font-size) * 9); display: flex; align-items: center; justify-content: center; }
|
|
.rail .groups { flex: 1; min-height: 0; overflow: hidden; }
|
|
.rail .foot { padding: var(--gap-md) var(--gap-md) var(--gap-lg); }
|
|
|
|
.workspace { flex: 1; min-width: 0; }
|
|
/* contentMax plus a pageGutter either side, centred in the pane */
|
|
.column { width: 100%; max-width: calc(var(--font-size) * (56 + 6)); margin: 0 auto; align-self: center;
|
|
padding: var(--gap-xxl) calc(var(--font-size) * 3); }
|
|
.column > .page-heading { margin-bottom: var(--gap-xxl); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="screen">
|
|
<div class="shell">
|
|
|
|
<!-- nav rail: a sunken Panel -->
|
|
<nav class="panel sunken rail">
|
|
<div class="wordmark"><span class="text-lg semibold">Garage</span></div>
|
|
<hr class="divider">
|
|
<div class="groups">
|
|
<div class="nav-group">
|
|
<div class="caption">Settings</div>
|
|
<button class="btn secondary stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /> <circle cx="12" cy="7" r="4" /></svg>Account</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /></svg>Security</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17V7" /> <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8" /> <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" /></svg>Payments</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2" /> <rect x="14" y="2" width="8" height="8" rx="1" /></svg>Authorised apps</button>
|
|
</div>
|
|
<hr class="divider">
|
|
<div class="nav-group">
|
|
<div class="caption">Developer</div>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" /> <path d="M8 10v4" /> <path d="M12 10v2" /> <path d="M16 10v6" /></svg>Projects</button>
|
|
</div>
|
|
<hr class="divider">
|
|
<div class="nav-group">
|
|
<div class="caption">Garage Platform</div>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" /> <path d="M20 2v4" /> <path d="M22 4h-4" /> <circle cx="4" cy="20" r="2" /></svg>Assistant</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 15H6a4 4 0 0 0-4 4v2" /> <path d="m14.305 16.53.923-.382" /> <path d="m15.228 13.852-.923-.383" /> <path d="m16.852 12.228-.383-.923" /> <path d="m16.852 17.772-.383.924" /> <path d="m19.148 12.228.383-.923" /> <path d="m19.53 18.696-.382-.924" /> <path d="m20.772 13.852.924-.383" /> <path d="m20.772 16.148.924.383" /> <circle cx="18" cy="15" r="3" /> <circle cx="9" cy="7" r="4" /></svg>Users</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /> <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>Roles</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 12h-5" /> <path d="M15 8h-5" /> <path d="M19 17V5a2 2 0 0 0-2-2H4" /> <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" /></svg>Audit log</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" /></svg>Status</button>
|
|
</div>
|
|
</div>
|
|
<hr class="divider">
|
|
<div class="foot">
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m16 17 5-5-5-5" /> <path d="M21 12H9" /> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /></svg>Sign out</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- workspace: a Panel with the capped, centred reading column -->
|
|
<main class="panel workspace">
|
|
<div class="column">
|
|
<div class="page-heading">
|
|
<div class="title">Account</div>
|
|
<div class="subtitle">Your personal details and how you appear on Garage.</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>Account</div><span class="subtitle">Your names, sign-in email and account identifiers</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Username</div>
|
|
<div class="value">
|
|
<div class="btn-group span">
|
|
<div class="field secondary readonly grow"><input value="ellis" disabled></div>
|
|
<button class="btn secondary">Change</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Display name</div>
|
|
<div class="value"><div class="field secondary"><input value="Ellis Hart"></div></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Email</div>
|
|
<div class="value"><div class="field secondary readonly"><input value="ellis@hartworks.dev" disabled></div></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Member since</div>
|
|
<div class="value"><div class="field secondary readonly"><input value="6 Sep 2026" disabled></div></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">User ID</div>
|
|
<div class="value">
|
|
<div class="btn-group span">
|
|
<div class="field secondary readonly mono grow"><input value="usr_8f2c41d9a7" disabled></div>
|
|
<button class="btn secondary icon-only" aria-label="Copy"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /> <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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>Personal information</div><span class="subtitle">The name and details on your account</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Legal name</div>
|
|
<div class="value"><div class="field secondary readonly"><input value="Ellis Jordan Hart" disabled></div></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Date of birth</div>
|
|
<div class="value"><div class="field secondary readonly"><input value="14 Mar 1994" disabled></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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>Password</div><span class="subtitle">Used to sign in when a passkey isn't available</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Password</div>
|
|
<div class="value">
|
|
<div class="btn-group span">
|
|
<div class="field secondary readonly grow"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /> <path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg><input value="Hidden" disabled></div>
|
|
<button class="btn secondary icon-only" aria-label="Change password"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /> <path d="m15 5 4 4" /></svg></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|