mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-08-02 12:58:24 +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>
264 lines
No EOL
14 KiB
HTML
264 lines
No EOL
14 KiB
HTML
<!DOCTYPE html><html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Project Details (Step 1)</title>
|
|
<!--
|
|
Ara Projects wireframe — Project Details (Step 1)
|
|
Journey 1 — Admin import · screen 2 of 12
|
|
Stitch project 8537473387290162501 · screen 976cbaa080624a9d9d02f39b0618c0c3
|
|
Original HTML <title>: Project details - Step 1 of 6
|
|
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" }]
|
|
},
|
|
"boxShadow": {
|
|
"card": "0 2px 4px 0 rgba(0,0,0,0.04)",
|
|
"lifted": "0 8px 24px 0 rgba(42,52,122,0.10)"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.material-symbols-outlined[data-weight="fill"] {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
/* Custom Toggle Switch Styles */
|
|
.toggle-checkbox:checked {
|
|
right: 0;
|
|
border-color: #111c64;
|
|
}
|
|
.toggle-checkbox:checked + .toggle-label {
|
|
background-color: #111c64;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-canvas text-on-surface font-body font-body text-body antialiased min-h-screen">
|
|
<!-- Background Canvas Context (Getting Started Behind Overlay) -->
|
|
<div class="fixed inset-0 z-0 flex items-center justify-center pointer-events-none opacity-40">
|
|
<div class="max-w-4xl w-full p-xl">
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line p-xl">
|
|
<div class="h-64 bg-surface-low rounded-lg mb-lg"></div>
|
|
<div class="h-8 bg-surface-low rounded w-1/3 mb-md"></div>
|
|
<div class="h-4 bg-surface-low rounded w-2/3 mb-sm"></div>
|
|
<div class="h-4 bg-surface-low rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Overlay -->
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-md sm:p-lg bg-ink/40 backdrop-blur-sm overflow-y-auto">
|
|
<!-- Modal Container -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-lifted border border-line w-full max-w-[640px] my-auto relative animate-slide-in-right">
|
|
<!-- Modal Header -->
|
|
<div class="flex items-center justify-between p-lg border-b border-line">
|
|
<div><span class="inline-block bg-secondary-container text-on-secondary-container text-overline px-sm py-xs rounded mb-xs uppercase">Sample data</span>
|
|
<h2 class="font-h3 text-h3 text-primary mb-xs">Project details</h2>
|
|
<p class="font-technical text-technical text-on-surface-variant flex items-center gap-xs">
|
|
<span class="inline-flex w-4 h-4 rounded-full bg-primary-fixed text-on-primary-fixed items-center justify-center text-[10px] font-bold">1</span>
|
|
Step 1 of 6 in Configuration Wizard
|
|
</p>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors p-sm rounded-full hover:bg-surface-low">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal Body (Form) -->
|
|
<div class="p-lg">
|
|
<form class="space-y-lg">
|
|
<!-- Form Grid Layout -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-lg">
|
|
<!-- Project Name -->
|
|
<div class="sm:col-span-2">
|
|
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="projectName">Project Name <span class="text-error">*</span></label>
|
|
<input class="w-full bg-surface-low border border-line rounded-lg px-md py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none" id="projectName" placeholder="e.g. Alpha Sector Deployment" type="text" value="Stonewater Planned Works 2026">
|
|
</div>
|
|
<!-- Client -->
|
|
<div>
|
|
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="client">Client</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none appearance-none cursor-pointer" id="client">
|
|
<option disabled="" selected="" value="">Select client...</option>
|
|
<option value="1">Acme Corp</option>
|
|
<option value="2">Stark Industries</option>
|
|
<option value="3">Wayne Enterprises</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="expand_more">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Project Type -->
|
|
<div>
|
|
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="projectType">Project Type</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none appearance-none cursor-pointer" id="projectType">
|
|
<option disabled="" selected="" value="">Select type...</option>
|
|
<option value="infrastructure">Infrastructure</option>
|
|
<option value="software">Software Migration</option>
|
|
<option value="facility">Facility Management</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="expand_more">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Description -->
|
|
<div class="sm:col-span-2">
|
|
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="description">Description</label>
|
|
<textarea class="w-full bg-surface-low border border-line rounded-lg px-md py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none resize-none" id="description" placeholder="Provide a brief overview of the project scope and objectives..." rows="3"></textarea>
|
|
</div>
|
|
<!-- Start Date -->
|
|
<div>
|
|
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="startDate">Start Date</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-technical text-technical text-on-surface outline-none cursor-pointer" id="startDate" type="date">
|
|
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="calendar_month">calendar_month</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Date -->
|
|
<div>
|
|
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="endDate">Estimated End Date</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-technical text-technical text-on-surface outline-none cursor-pointer" id="endDate" type="date">
|
|
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="event">event</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Divider -->
|
|
<div class="w-full h-px bg-line my-lg"></div>
|
|
<!-- Admin Access Toggle -->
|
|
<div class="flex items-center justify-between p-md bg-surface-high rounded-lg border border-line">
|
|
<div class="pr-md">
|
|
<h4 class="font-body-bold text-body-bold text-on-surface mb-xs">Grant Domna admin access</h4>
|
|
<p class="font-technical text-technical text-on-surface-variant">Domna admins can help configure this project, support imports, and view project data. Stonewater can revoke this at any time.</p>
|
|
</div>
|
|
<div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in flex-shrink-0">
|
|
<input class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-surface-container-lowest border-4 border-line appearance-none cursor-pointer z-10 top-0 left-0 transition-all duration-300" id="toggle" name="toggle" type="checkbox">
|
|
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-line cursor-pointer transition-colors duration-300" for="toggle"></label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Modal Footer (Actions) -->
|
|
<div class="p-lg bg-surface-bright border-t border-line rounded-b-xl flex justify-end gap-md">
|
|
<button class="px-lg py-sm rounded-lg font-body-bold text-body-bold text-on-surface-variant bg-surface-container-lowest border border-line hover:bg-surface-low hover:text-on-surface transition-colors" type="button">
|
|
Cancel
|
|
</button>
|
|
<button class="px-lg py-sm rounded-lg font-body-bold text-body-bold text-on-primary bg-primary hover:bg-primary-dark shadow-sm transition-colors flex items-center gap-sm" type="button">
|
|
Create and continue
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body></html> |