mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-27 22:45:03 +00:00
a0f865ad85
Static Stitch export previously only available locally; referenced by the Ara Projects issues (#405-#429). README explains which parts are spec vs placeholder. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
278 lines
No EOL
28 KiB
HTML
278 lines
No EOL
28 KiB
HTML
<!DOCTYPE html><html class="light" lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Select Workstreams (Step 2)</title>
|
|
<!--
|
|
Ara Projects wireframe — Select Workstreams (Step 2)
|
|
Journey 1 — Admin import · screen 3 of 12
|
|
Stitch project 8537473387290162501 · screen ffa234f8dac44485895bbb0bc6f9866f
|
|
Original HTML <title>: Select Workstreams - Project Setup
|
|
Self-contained export: Tailwind, fonts and images vendored to ../assets/.
|
|
Body markup is unmodified except for these local asset paths.
|
|
-->
|
|
<script src="../assets/tailwind-play.js"></script>
|
|
<link href="../assets/fonts.css" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed": "#291800",
|
|
"on-secondary": "#ffffff",
|
|
"surface-low": "#e3edf9",
|
|
"tertiary-fixed": "#d0e4ff",
|
|
"on-tertiary-fixed-variant": "#004a79",
|
|
"ink": "#111111",
|
|
"primary-dark": "#222a63",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed-dim": "#bcc2ff",
|
|
"secondary-fixed": "#ffddb2",
|
|
"surface-container": "#e6eeff",
|
|
"primary-fixed": "#dfe0ff",
|
|
"outline-variant": "#c6c5d2",
|
|
"surface-variant": "#d8e3f8",
|
|
"on-primary-container": "#96a0ed",
|
|
"on-background": "#111c2b",
|
|
"surface-high": "#d9e5f4",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-container": "#2a347a",
|
|
"secondary-container": "#ffd6a0",
|
|
"surface-dim": "#cfdbef",
|
|
"on-error-container": "#93000a",
|
|
"on-surface-variant": "#454650",
|
|
"secondary": "#77592d",
|
|
"on-primary-fixed": "#04105a",
|
|
"tertiary": "#002743",
|
|
"canvas": "#eef4fc",
|
|
"on-surface": "#111c2b",
|
|
"surface-bright": "#f8f9ff",
|
|
"on-primary-fixed-variant": "#364087",
|
|
"primary": "#111c64",
|
|
"inverse-on-surface": "#ebf1ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"accent-soft": "#e4f1fc",
|
|
"tertiary-container": "#003d66",
|
|
"on-tan": "#3d2f16",
|
|
"on-primary": "#ffffff",
|
|
"inverse-surface": "#263141",
|
|
"tan-soft": "#f4ebdc",
|
|
"outline": "#767682",
|
|
"on-secondary-container": "#795c2f",
|
|
"background": "#f8f9ff",
|
|
"on-tertiary-container": "#50aaf9",
|
|
"line": "#d2ddec",
|
|
"surface-container-high": "#dee9fe",
|
|
"on-tertiary-fixed": "#001d34",
|
|
"tertiary-fixed-dim": "#9acbff",
|
|
"inverse-primary": "#bcc2ff",
|
|
"on-secondary-fixed-variant": "#5d4218",
|
|
"surface": "#f8f9ff",
|
|
"error-soft": "#fdecea",
|
|
"surface-container-highest": "#d8e3f8",
|
|
"secondary-fixed-dim": "#e7c08b",
|
|
"error": "#b3261e",
|
|
"surface-container-low": "#eff4ff",
|
|
"surface-tint": "#4f58a0"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xl": "40px",
|
|
"sm": "8px",
|
|
"xs": "4px",
|
|
"header-height": "64px",
|
|
"lg": "24px",
|
|
"max-width": "1440px",
|
|
"sidebar-width": "256px",
|
|
"md": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"display": ["Montserrat"],
|
|
"body": ["Montserrat"],
|
|
"h2": ["Montserrat"],
|
|
"technical": ["Questrial"],
|
|
"overline": ["Questrial"],
|
|
"h1": ["Montserrat"],
|
|
"display-mobile": ["Montserrat"],
|
|
"subheading": ["Montserrat"],
|
|
"body-bold": ["Montserrat"],
|
|
"h3": ["Montserrat"]
|
|
},
|
|
"fontSize": {
|
|
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
|
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
|
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
|
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
|
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
|
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
|
"subheading": ["18px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
|
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
|
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.shadow-card {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
|
}
|
|
.shadow-lifted {
|
|
box-shadow: 0 20px 25px -5px rgba(42, 52, 122, 0.10), 0 10px 10px -5px rgba(42, 52, 122, 0.04);
|
|
}
|
|
</style>
|
|
<style>
|
|
@keyframes slide-in-right {
|
|
from {
|
|
transform: translateX(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 400ms ease-out forwards;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-slide-in-right {
|
|
animation: none !important;
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
</style></head>
|
|
<body class="bg-canvas text-on-surface font-body antialiased selection:bg-primary-fixed selection:text-on-primary-fixed min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-surface-container-lowest dark:bg-surface-container-lowest text-primary dark:text-primary-fixed-dim font-body text-body docked full-width top-0 border-b border-line dark:border-outline-variant flat no shadows fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg">
|
|
<div class="flex items-center gap-lg">
|
|
<span class="font-display text-h3 font-extrabold text-primary dark:text-primary-fixed-dim tracking-tight">Ara Projects</span>
|
|
</div>
|
|
<div class="flex items-center gap-md">
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-high transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
</button>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-high transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full overflow-hidden bg-surface-high border border-line flex-shrink-0 cursor-pointer">
|
|
<img alt="User account menu" class="w-full h-full object-cover" data-alt="A small, professional headshot of an individual wearing business casual attire, suitable for an avatar in a corporate web application. The lighting is bright and even, set against a neutral gray background." src="../assets/img/img23.png">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 pt-[64px]">
|
|
<!-- SideNavBar -->
|
|
<nav class="bg-surface-container dark:bg-surface-container text-primary dark:text-primary-fixed-dim font-body text-body docked left-0 h-full w-sidebar-width bg-surface-container dark:bg-surface-container flat no shadows fixed left-0 top-header-height h-[calc(100vh-theme(spacing.header-height))] w-sidebar-width p-md flex flex-col gap-sm border-r border-line z-40 hidden md:flex">
|
|
<div class="mb-lg px-sm">
|
|
<div class="flex items-center gap-sm mb-xs">
|
|
<div class="w-8 h-8 rounded bg-primary-container text-on-primary-container flex items-center justify-center flex-shrink-0">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="account_tree">account_tree</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="font-display text-subheading text-primary dark:text-primary-fixed-dim font-bold leading-tight">Project Setup</h2>
|
|
<p class="font-technical text-technical text-on-surface-variant">Configuration Wizard</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-xs overflow-y-auto">
|
|
<div class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant cursor-pointer active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-[20px] text-primary" data-icon="layers" data-weight="fill" style="font-variation-settings: 'FILL' 1;">layers</span>
|
|
<span class="font-body-bold">Workstream</span>
|
|
<span class="ml-auto material-symbols-outlined text-[16px] text-primary" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
</div>
|
|
<!-- Active Tab -->
|
|
<div class="flex items-center gap-md px-sm py-2 bg-primary dark:bg-primary-container text-on-primary dark:text-on-primary-container font-body-bold rounded-lg cursor-pointer active:scale-95 transition-all relative">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="account_tree">account_tree</span>
|
|
<span class="">Stages</span>
|
|
<!-- Active indicator dot -->
|
|
<div class="absolute right-3 w-2 h-2 rounded-full bg-on-primary"></div>
|
|
</div>
|
|
<div class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant cursor-pointer active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="fact_check">fact_check</span>
|
|
<span class="">Checklist</span>
|
|
</div>
|
|
<div class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant cursor-pointer active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="admin_panel_settings">admin_panel_settings</span>
|
|
<span class="">Permissions</span>
|
|
</div>
|
|
<div class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant cursor-pointer active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="upload_file">upload_file</span>
|
|
<span class="">Import</span>
|
|
</div>
|
|
<div class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant cursor-pointer active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="table_chart">table_chart</span>
|
|
<span class="">Mapping</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto flex flex-col gap-sm pt-md border-t border-line">
|
|
<button class="w-full py-2 bg-surface-high text-primary font-body-bold rounded-lg border border-line hover:bg-surface-dim transition-colors text-center cursor-pointer">
|
|
Save Progress
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 md:ml-[256px] p-lg md:p-xl max-w-[1440px] mx-auto w-full flex flex-col animate-slide-in-right">
|
|
<!-- Step Header -->
|
|
<div class="mb-xl max-w-3xl">
|
|
<div class="flex items-center gap-sm mb-sm">
|
|
<span class="font-overline text-overline text-on-surface-variant uppercase tracking-wider">Step 2 of 6</span>
|
|
<div class="h-1 flex-1 bg-surface-high rounded-full overflow-hidden max-w-[200px]">
|
|
<div class="h-full bg-primary w-2/6 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<h1 class="font-display text-h1 text-ink mb-xs">Select workstreams</h1><span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-surface-high text-primary border border-line ml-2">Sample data</span>
|
|
<p class="font-body text-body text-on-surface-variant">Choose the technical disciplines and workstreams relevant to this specific project stage. You can refine these later in the checklist configuration.</p>
|
|
</div>
|
|
<!-- Search and Filter -->
|
|
<div class="mb-lg flex flex-col sm:flex-row gap-md">
|
|
<div class="relative flex-1 max-w-md">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline">search</span>
|
|
<input class="w-full bg-surface-low border border-line text-ink font-body rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors h-[40px]" placeholder="Search 40+ measures" type="text"><div class="hidden absolute top-full left-0 w-full mt-1 bg-surface-container-lowest border border-line rounded-lg shadow-lifted z-50 overflow-hidden"><div class="p-2 flex flex-col gap-1"><label class="flex items-center gap-2 p-2 hover:bg-surface-low rounded cursor-pointer"><input type="checkbox" class="rounded border-line text-primary focus:ring-primary"><span class="text-body">Heat pumps</span></label><label class="flex items-center gap-2 p-2 hover:bg-surface-low rounded cursor-pointer"><input type="checkbox" class="rounded border-line text-primary focus:ring-primary"><span class="text-body">Cavity wall insulation</span></label></div><div class="border-t border-line p-2 bg-surface-low"><button class="flex items-center gap-2 text-primary font-body-bold text-body hover:underline"><span class="material-symbols-outlined text-[18px]">add</span>Add measure</button></div></div>
|
|
</div>
|
|
<div class="flex gap-sm">
|
|
<button class="h-[40px] px-4 rounded-full bg-surface-high text-on-surface font-body-bold text-body border border-line hover:bg-surface-dim transition-colors flex items-center gap-xs">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="filter_list">filter_list</span>
|
|
Filters
|
|
</button>
|
|
<button class="h-[40px] px-4 rounded-full bg-surface-low text-on-surface font-body text-body border border-line hover:bg-surface-high transition-colors">
|
|
Structural
|
|
</button>
|
|
<button class="h-[40px] px-4 rounded-full bg-surface-low text-on-surface font-body text-body border border-line hover:bg-surface-high transition-colors">
|
|
MEP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Workstream Grid -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-md mb-xl flex-1 content-start"><!-- Selected: Windows --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">window</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Windows</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Installation and sealing of exterior units.</p></div><!-- Selected: Doors --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">door_front</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Doors</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Access points and hardware.</p></div><!-- Selected: Roofs --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">roofing</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Roofs</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Trusses and final covering.</p></div><!-- Selected: Cyclical decorations --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">format_paint</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Cyclical decorations</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Scheduled painting and aesthetic maintenance.</p></div><!-- Selected: Kitchens --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">countertops</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Kitchens</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Cabinetry and food prep areas.</p></div><!-- Selected: Bathrooms --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">bathtub</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Bathrooms</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Sanitaryware and tiling.</p></div><!-- Selected: Asbestos --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">warning</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Asbestos</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Surveying and safe removal.</p></div><!-- Selected: Electrical heating --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border-2 border-primary cursor-pointer relative group transition-all hover:shadow-lifted h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-primary"><span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span></div><div class="w-10 h-10 rounded bg-primary-container text-on-primary-container flex items-center justify-center mb-sm"><span class="material-symbols-outlined">bolt</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Electrical heating</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Storage heaters and electric radiators.</p></div><!-- Unselected: Insulation --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border border-line cursor-pointer group transition-all hover:border-outline-variant hover:shadow-md h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-outline opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined text-[24px]">add_circle</span></div><div class="w-10 h-10 rounded bg-surface-high text-on-surface-variant flex items-center justify-center mb-sm"><span class="material-symbols-outlined">ac_unit</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Insulation</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Loft and wall thermal protection.</p></div><!-- Unselected: Ventilation --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border border-line cursor-pointer group transition-all hover:border-outline-variant hover:shadow-md h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-outline opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined text-[24px]">add_circle</span></div><div class="w-10 h-10 rounded bg-surface-high text-on-surface-variant flex items-center justify-center mb-sm"><span class="material-symbols-outlined">air</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Ventilation</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Airflow and extraction systems.</p></div><!-- Unselected: Solar PV --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border border-line cursor-pointer group transition-all hover:border-outline-variant hover:shadow-md h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-outline opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined text-[24px]">add_circle</span></div><div class="w-10 h-10 rounded bg-surface-high text-on-surface-variant flex items-center justify-center mb-sm"><span class="material-symbols-outlined">solar_power</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Solar PV</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Photovoltaic panel installations.</p></div><!-- Unselected: Heating controls --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border border-line cursor-pointer group transition-all hover:border-outline-variant hover:shadow-md h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-outline opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined text-[24px]">add_circle</span></div><div class="w-10 h-10 rounded bg-surface-high text-on-surface-variant flex items-center justify-center mb-sm"><span class="material-symbols-outlined">thermostat</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Heating controls</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Smart thermostats and valves.</p></div><!-- Unselected: Damp and mould works --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border border-line cursor-pointer group transition-all hover:border-outline-variant hover:shadow-md h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-outline opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined text-[24px]">add_circle</span></div><div class="w-10 h-10 rounded bg-surface-high text-on-surface-variant flex items-center justify-center mb-sm"><span class="material-symbols-outlined">water_damage</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Damp and mould works</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Remediation and prevention.</p></div><!-- Unselected: Fire doors --><div class="bg-surface-container-lowest rounded-lg p-md shadow-card border border-line cursor-pointer group transition-all hover:border-outline-variant hover:shadow-md h-[140px] flex flex-col"><div class="absolute top-3 right-3 text-outline opacity-0 group-hover:opacity-100 transition-opacity"><span class="material-symbols-outlined text-[24px]">add_circle</span></div><div class="w-10 h-10 rounded bg-surface-high text-on-surface-variant flex items-center justify-center mb-sm"><span class="material-symbols-outlined">fire_extinguisher</span></div><h3 class="font-h3 text-h3 text-ink mb-xs leading-tight">Fire doors</h3><p class="font-technical text-technical text-on-surface-variant line-clamp-2 mt-auto">Safety compliance and installation.</p></div><div class="border-2 border-dashed border-line rounded-lg p-md cursor-pointer hover:border-primary hover:bg-surface-low transition-all h-[140px] flex flex-col items-center justify-center gap-2 group"><span class="material-symbols-outlined text-[32px] text-outline group-hover:text-primary">add_circle</span><span class="font-body-bold text-on-surface-variant group-hover:text-primary">Add measure</span></div></div><p class="text-outline font-body text-body mb-lg">Showing 14 common measures. Search or add your own.</p>
|
|
<!-- Bottom Action Bar -->
|
|
<div class="mt-auto pt-lg border-t border-line flex justify-between items-center bg-canvas">
|
|
<button class="px-6 py-2.5 rounded-lg bg-surface-container-lowest border border-line text-on-surface font-body-bold hover:bg-surface-high transition-colors shadow-sm">
|
|
Back
|
|
</button>
|
|
<div class="flex gap-md items-center">
|
|
<span class="font-technical text-technical text-on-surface-variant">8 selected</span>
|
|
<button class="px-6 py-2.5 rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors shadow-sm flex items-center gap-2">
|
|
Save and continue
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="hidden fixed inset-0 bg-ink/20 backdrop-blur-sm z-[60] flex items-center justify-center p-4"><div class="bg-surface-container-lowest rounded-xl shadow-lifted w-full max-w-md p-lg flex flex-col gap-md"><div class="flex justify-between items-center"><h3 class="font-display text-h3 text-ink">Add Custom Measure</h3><button class="material-symbols-outlined text-outline hover:text-ink">close</button></div><div class="flex flex-col gap-sm"><label class="font-body-bold text-body">Name</label><input type="text" class="w-full bg-surface-low border border-line rounded-lg px-3 py-2 focus:ring-1 focus:ring-primary" placeholder="e.g. Triple Glazing"></div><div class="flex flex-col gap-sm"><label class="font-body-bold text-body">Short Description</label><textarea class="w-full bg-surface-low border border-line rounded-lg px-3 py-2 focus:ring-1 focus:ring-primary h-20" placeholder="Briefly describe the measure..."></textarea></div><div class="flex flex-col gap-sm"><label class="font-body-bold text-body">Discipline Tag (Optional)</label><select class="w-full bg-surface-low border border-line rounded-lg px-3 py-2 focus:ring-1 focus:ring-primary"><option>Structural</option><option>MEP</option><option>Other</option></select></div><div class="flex gap-md mt-2"><button class="flex-1 py-2.5 rounded-lg bg-surface-high font-body-bold">Cancel</button><button class="flex-1 py-2.5 rounded-lg bg-primary text-on-primary font-body-bold">Add to Project</button></div></div></div>
|
|
|
|
</body></html> |