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>
323 lines
No EOL
16 KiB
HTML
323 lines
No EOL
16 KiB
HTML
<!DOCTYPE html><html class="light" lang="en" style=""><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Import Upload (Step 6)</title>
|
|
<!--
|
|
Ara Projects wireframe — Import Upload (Step 6)
|
|
Journey 1 — Admin import · screen 7 of 12
|
|
Stitch project 8537473387290162501 · screen 7053d9accf824e3c876da3162e58998c
|
|
Original HTML <title>: Import Programme Data
|
|
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>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.icon-fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
<style>
|
|
@keyframes slide-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 400ms ease-out forwards;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-slide-in-right {
|
|
animation: none;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
</style></head>
|
|
<body class="bg-canvas text-on-background font-body min-h-screen antialiased flex flex-col" style="min-height: 1024px;">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg bg-surface-container-lowest border-b border-line">
|
|
<div class="flex items-center gap-lg">
|
|
<div class="font-display text-h3 font-extrabold text-primary">
|
|
Ara Projects
|
|
</div>
|
|
<nav class="hidden md:flex gap-md">
|
|
<a class="font-body text-body text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Dashboard</a>
|
|
<a class="font-body text-body text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Projects</a>
|
|
<a class="font-body text-body text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80" href="#">Maintenance</a>
|
|
<a class="font-body text-body text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Schedule</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-sm">
|
|
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
</button>
|
|
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-surface-high overflow-hidden border border-line ml-sm">
|
|
<img alt="User account menu" class="object-cover w-full h-full" data-alt="A small, circular avatar portrait of a professional woman with a warm, subtle smile in a modern corporate setting. She is wearing a dark indigo blazer. The background is a soft, out-of-focus light gray. Clean, corporate aesthetic." src="../assets/img/img17.png">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 pt-header-height">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-header-height h-[calc(100vh-theme(spacing.header-height))] w-sidebar-width p-md flex flex-col gap-sm bg-surface-container z-40 hidden md:flex">
|
|
<div class="mb-md p-sm">
|
|
<div class="w-10 h-10 rounded-lg bg-surface-low flex items-center justify-center mb-sm border border-line shadow-sm">
|
|
<span class="material-symbols-outlined text-primary" data-icon="rocket_launch">rocket_launch</span>
|
|
</div>
|
|
<h2 class="font-display text-subheading text-primary">Project Setup</h2>
|
|
<p class="font-body text-technical text-on-surface-variant mt-xs">Configuration Wizard</p>
|
|
</div>
|
|
<nav class="flex-1 flex flex-col gap-xs">
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="layers">layers</span>
|
|
<span class="font-body text-body">Workstream</span>
|
|
</a>
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="account_tree">account_tree</span>
|
|
<span class="font-body text-body">Stages</span>
|
|
</a>
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="fact_check">fact_check</span>
|
|
<span class="font-body text-body">Checklist</span>
|
|
</a>
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="admin_panel_settings">admin_panel_settings</span>
|
|
<span class="font-body text-body">Permissions</span>
|
|
</a>
|
|
<a class="flex items-center gap-sm p-sm rounded-lg bg-primary text-on-primary font-body-bold cursor-pointer active:scale-95 shadow-sm" href="#">
|
|
<span class="material-symbols-outlined text-xl icon-fill" data-icon="upload_file">upload_file</span>
|
|
<span class="">Import</span>
|
|
</a>
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="table_chart">table_chart</span>
|
|
<span class="font-body text-body">Mapping</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto flex flex-col gap-sm">
|
|
<button class="w-full py-sm px-md rounded-lg bg-primary-container text-on-primary-container font-body-bold hover:opacity-90 transition-opacity">
|
|
Save Progress
|
|
</button>
|
|
<div class="border-t border-line pt-sm flex flex-col gap-xs">
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="help">help</span>
|
|
<span class="font-body text-body">Help Center</span>
|
|
</a>
|
|
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer" href="#">
|
|
<span class="material-symbols-outlined text-xl" data-icon="settings">settings</span>
|
|
<span class="font-body text-body">Settings</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 md:ml-sidebar-width p-lg max-w-max-width mx-auto w-full animate-slide-in-right" style="min-height: 1024px;">
|
|
<div class="flex justify-between items-end mb-lg">
|
|
<div>
|
|
<span class="font-technical text-technical text-primary uppercase tracking-widest mb-xs block">Step 6 of 6</span>
|
|
<h1 class="font-h1 text-h1 text-ink">Import programme data</h1>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-xs">
|
|
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
|
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
|
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
|
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
|
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
|
<div class="w-16 h-2 rounded-full bg-primary"></div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-lg">
|
|
<!-- Import Canvas -->
|
|
<div class="lg:col-span-2 flex flex-col gap-md">
|
|
<!-- Dropzone Card -->
|
|
<div class="bg-surface-container-lowest rounded-xl p-lg border border-line shadow-sm relative overflow-hidden group">
|
|
<!-- Decorative background element -->
|
|
<div class="absolute -right-20 -top-20 w-64 h-64 bg-surface-high rounded-full opacity-50 blur-3xl group-hover:bg-primary-fixed-dim transition-colors duration-700"></div>
|
|
<div class="relative z-10 border-2 border-dashed border-outline-variant hover:border-primary rounded-lg p-xl flex flex-col items-center justify-center text-center min-h-[300px] transition-colors bg-surface-bright/50">
|
|
<div class="w-16 h-16 rounded-full bg-surface-container flex items-center justify-center mb-md text-primary">
|
|
<span class="material-symbols-outlined text-display" data-icon="cloud_upload">cloud_upload</span>
|
|
</div>
|
|
<h3 class="font-h3 text-h3 text-ink mb-xs">Drag and drop your file here</h3>
|
|
<p class="font-body text-body text-on-surface-variant mb-md max-w-sm">
|
|
Supported formats: .csv, .xlsx, .xls. Maximum file size 50MB. Ensure data matches the required schema.
|
|
</p>
|
|
<div class="flex items-center gap-sm">
|
|
<button class="py-sm px-lg rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors shadow-sm">Browse files</button>
|
|
<span class="font-body text-technical text-on-surface-variant mx-xs">or</span>
|
|
<button class="flex items-center gap-xs py-sm px-md rounded-lg border border-line text-on-surface-variant font-body-bold hover:bg-surface-low transition-colors"><span class="material-symbols-outlined text-lg" data-icon="download">download</span>Download template</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Required Fields Info -->
|
|
|
|
</div>
|
|
<!-- Guidance Sidebar -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-surface-container-lowest rounded-xl p-md border border-line shadow-sm sticky top-[88px]">
|
|
<h3 class="font-h3 text-h3 text-ink mb-md">What happens next?</h3>
|
|
<div class="relative pl-lg border-l-2 border-line space-y-md">
|
|
<!-- Step 1 -->
|
|
<div class="relative">
|
|
<div class="absolute -left-[25px] top-0 w-6 h-6 rounded-full bg-surface-container border-2 border-primary flex items-center justify-center">
|
|
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
|
</div>
|
|
<h4 class="font-body-bold text-body text-ink mb-xs">Upload & Validation</h4>
|
|
<p class="font-body text-technical text-on-surface-variant">We'll scan your file to ensure all required fields are present and data formats are correct.</p>
|
|
</div>
|
|
<!-- Step 2 -->
|
|
<div class="relative">
|
|
<div class="absolute -left-[25px] top-0 w-6 h-6 rounded-full bg-surface-container border-2 border-line flex items-center justify-center">
|
|
</div>
|
|
<h4 class="font-body-bold text-body text-ink mb-xs">Column Mapping</h4>
|
|
<p class="font-body text-technical text-on-surface-variant">You'll have a chance to map any unrecognized columns to our system's fields.</p>
|
|
</div>
|
|
<!-- Step 3 -->
|
|
<div class="relative">
|
|
<div class="absolute -left-[25px] top-0 w-6 h-6 rounded-full bg-surface-container border-2 border-line flex items-center justify-center">
|
|
</div>
|
|
<h4 class="font-body-bold text-body text-ink mb-xs">Preview & Commit</h4>
|
|
<p class="font-body text-technical text-on-surface-variant">Review a sample of the imported data before finalizing the changes to the database.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-xl pt-md border-t border-line flex gap-sm">
|
|
<button class="flex-1 py-sm px-md rounded-lg border border-line text-on-surface-variant font-body-bold hover:bg-surface-low transition-colors text-center">
|
|
Back
|
|
</button>
|
|
<button class="flex-1 py-sm px-md rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors shadow-sm text-center opacity-50 cursor-not-allowed">
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body></html> |