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>
372 lines
No EOL
21 KiB
HTML
372 lines
No EOL
21 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>Work orders (Admin)</title>
|
||
<!--
|
||
Ara Projects wireframe — Work orders (Admin)
|
||
Journey 3 — Contractor toggle · screen 1 of 4
|
||
Stitch project 8537473387290162501 · screen 2b340f911ce040a99cdb8b2cd0a231b2
|
||
Original HTML <title>: Work orders - Ara Projects
|
||
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": {
|
||
"background": "#f8f9ff",
|
||
"tan-soft": "#f4ebdc",
|
||
"primary-fixed-dim": "#bcc2ff",
|
||
"surface-container-low": "#eff4ff",
|
||
"inverse-surface": "#263141",
|
||
"surface": "#f8f9ff",
|
||
"error-soft": "#fdecea",
|
||
"outline-variant": "#c6c5d2",
|
||
"on-background": "#111c2b",
|
||
"on-surface-variant": "#454650",
|
||
"on-tan": "#3d2f16",
|
||
"secondary-fixed-dim": "#e7c08b",
|
||
"on-tertiary-fixed-variant": "#004a79",
|
||
"surface-container-lowest": "#ffffff",
|
||
"surface-dim": "#cfdbef",
|
||
"tertiary-fixed-dim": "#9acbff",
|
||
"primary-container": "#2a347a",
|
||
"ink": "#111111",
|
||
"secondary-fixed": "#ffddb2",
|
||
"on-primary-fixed-variant": "#364087",
|
||
"on-error": "#ffffff",
|
||
"secondary-container": "#ffd6a0",
|
||
"on-secondary-fixed-variant": "#5d4218",
|
||
"surface-container-highest": "#d8e3f8",
|
||
"on-surface": "#111c2b",
|
||
"surface-high": "#d9e5f4",
|
||
"on-tertiary": "#ffffff",
|
||
"on-error-container": "#93000a",
|
||
"surface-low": "#e3edf9",
|
||
"primary-fixed": "#dfe0ff",
|
||
"tertiary-fixed": "#d0e4ff",
|
||
"secondary": "#77592d",
|
||
"surface-variant": "#d8e3f8",
|
||
"error-container": "#ffdad6",
|
||
"canvas": "#eef4fc",
|
||
"on-secondary-fixed": "#291800",
|
||
"on-primary-fixed": "#04105a",
|
||
"on-primary-container": "#96a0ed",
|
||
"accent-soft": "#e4f1fc",
|
||
"surface-container-high": "#dee9fe",
|
||
"on-tertiary-fixed": "#001d34",
|
||
"tertiary": "#002743",
|
||
"inverse-on-surface": "#ebf1ff",
|
||
"inverse-primary": "#bcc2ff",
|
||
"line": "#d2ddec",
|
||
"primary": "#111c64",
|
||
"on-secondary-container": "#795c2f",
|
||
"surface-container": "#e6eeff",
|
||
"surface-bright": "#f8f9ff",
|
||
"outline": "#767682",
|
||
"primary-dark": "#222a63",
|
||
"surface-tint": "#4f58a0",
|
||
"error": "#b3261e",
|
||
"on-secondary": "#ffffff",
|
||
"tertiary-container": "#003d66",
|
||
"on-tertiary-container": "#50aaf9",
|
||
"on-primary": "#ffffff"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.25rem",
|
||
"lg": "0.5rem",
|
||
"xl": "0.75rem",
|
||
"full": "9999px"
|
||
},
|
||
"spacing": {
|
||
"sm": "8px",
|
||
"md": "16px",
|
||
"lg": "24px",
|
||
"xs": "4px",
|
||
"header-height": "64px",
|
||
"sidebar-width": "256px",
|
||
"xl": "40px",
|
||
"max-width": "1440px"
|
||
},
|
||
"fontFamily": {
|
||
"body": ["Montserrat"],
|
||
"technical": ["Questrial"],
|
||
"display": ["Montserrat"],
|
||
"overline": ["Questrial"],
|
||
"h2": ["Montserrat"],
|
||
"h1": ["Montserrat"],
|
||
"subheading": ["Montserrat"],
|
||
"h3": ["Montserrat"],
|
||
"display-mobile": ["Montserrat"],
|
||
"body-bold": ["Montserrat"]
|
||
},
|
||
"fontSize": {
|
||
"body": ["14px", {"lineHeight": "1.25", "fontWeight": "500"}],
|
||
"technical": ["12px", {"lineHeight": "1.4", "fontWeight": "400"}],
|
||
"display": ["36px", {"lineHeight": "1.1", "fontWeight": "800"}],
|
||
"overline": ["11px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||
"h2": ["24px", {"lineHeight": "1.2", "fontWeight": "800"}],
|
||
"h1": ["30px", {"lineHeight": "1.2", "fontWeight": "800"}],
|
||
"subheading": ["18px", {"lineHeight": "1.4", "fontWeight": "700"}],
|
||
"h3": ["20px", {"lineHeight": "1.4", "fontWeight": "700"}],
|
||
"display-mobile": ["32px", {"lineHeight": "1.1", "fontWeight": "800"}],
|
||
"body-bold": ["14px", {"lineHeight": "1.25", "fontWeight": "600"}]
|
||
},
|
||
"boxShadow": {
|
||
"card": "0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02)",
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||
}
|
||
.material-symbols-outlined.filled {
|
||
font-variation-settings: 'FILL' 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-canvas text-ink font-body min-h-screen flex flex-col">
|
||
<!-- TopNavBar -->
|
||
<header class="bg-surface-container-lowest dark:bg-inverse-surface shadow-card h-header-height w-full sticky top-0 z-50">
|
||
<div class="flex justify-between items-center px-lg w-full max-w-max-width mx-auto h-full">
|
||
<div class="flex items-center gap-lg h-full">
|
||
<div class="font-h2 text-h2 text-primary dark:text-primary-fixed-dim">Ara Projects</div>
|
||
<nav class="hidden md:flex h-full items-end gap-md">
|
||
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 pb-4 px-2" href="#">Dashboard</a>
|
||
<a class="text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-4 px-2 font-body-bold cursor-pointer active:opacity-80" href="#">Work orders</a>
|
||
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 pb-4 px-2" href="#">Workstreams</a>
|
||
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 pb-4 px-2" href="#">Properties</a>
|
||
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 pb-4 px-2" href="#">Documents</a>
|
||
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 pb-4 px-2" href="#">Imports</a>
|
||
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 pb-4 px-2" href="#">Reports</a>
|
||
|
||
</nav>
|
||
</div>
|
||
<div class="flex items-center gap-md"><div class="flex items-center gap-sm mr-sm">
|
||
<span class="text-body text-on-surface-variant whitespace-nowrap">View as contractor</span>
|
||
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-line transition-colors focus:outline-none" role="switch" aria-checked="false">
|
||
<span class="inline-block h-4 w-4 transform rounded-full bg-surface-container-lowest transition-transform translate-x-1"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
||
<span class="material-symbols-outlined">notifications</span>
|
||
</button>
|
||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
||
<span class="material-symbols-outlined">settings</span>
|
||
</button>
|
||
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center overflow-hidden border border-line">
|
||
<img alt="User profile" class="w-full h-full object-cover" data-alt="A small circular user profile picture showing a professional individual in a corporate setting. Light mode aesthetic, well-lit, sharp focus." src="../assets/img/img21.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Main Content -->
|
||
<main class="flex-grow flex flex-col p-lg lg:p-xl w-full max-w-max-width mx-auto gap-lg">
|
||
<!-- Header -->
|
||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-md">
|
||
<div>
|
||
<div class="flex items-center gap-sm mb-xs">
|
||
<h1 class="font-h1 text-h1 text-ink">Work orders</h1>
|
||
<span class="bg-accent-soft text-on-tertiary-fixed-variant font-overline text-overline px-sm py-xs rounded-full uppercase tracking-wider">Sample data</span>
|
||
</div>
|
||
<p class="font-body text-body text-on-surface-variant">1,231 work orders</p>
|
||
</div>
|
||
</div>
|
||
<!-- Toolbar -->
|
||
<div class="bg-surface shadow-card border border-line rounded-lg p-sm flex flex-col xl:flex-row gap-md justify-between items-center">
|
||
<div class="flex flex-wrap items-center gap-sm w-full xl:w-auto">
|
||
<div class="relative">
|
||
<span class="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
|
||
<input class="bg-surface-low border border-line rounded-lg pl-xl pr-sm py-sm text-body focus:border-primary focus:ring-0 w-full sm:w-48 transition-colors" placeholder="Search reference..." type="text">
|
||
</div>
|
||
<div class="h-6 w-px bg-line hidden sm:block mx-xs"></div>
|
||
<button class="bg-surface border border-line hover:bg-surface-low text-ink font-body text-body px-md py-sm rounded-lg flex items-center gap-xs transition-colors">
|
||
Workstream <span class="material-symbols-outlined text-[18px]">arrow_drop_down</span>
|
||
</button>
|
||
<button class="bg-surface border border-line hover:bg-surface-low text-ink font-body text-body px-md py-sm rounded-lg flex items-center gap-xs transition-colors">
|
||
Contractor <span class="material-symbols-outlined text-[18px]">arrow_drop_down</span>
|
||
</button>
|
||
<button class="bg-surface border border-line hover:bg-surface-low text-ink font-body text-body px-md py-sm rounded-lg flex items-center gap-xs transition-colors">
|
||
Stage <span class="material-symbols-outlined text-[18px]">arrow_drop_down</span>
|
||
</button>
|
||
<label class="flex items-center gap-xs cursor-pointer text-body text-on-surface-variant hover:text-ink transition-colors ml-xs">
|
||
<input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox">
|
||
Overdue only
|
||
</label>
|
||
<label class="flex items-center gap-xs cursor-pointer text-body text-on-surface-variant hover:text-ink transition-colors ml-xs">
|
||
<input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox">
|
||
Missing evidence
|
||
</label>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-sm w-full xl:w-auto justify-end">
|
||
<button class="text-primary hover:bg-surface-low font-body-bold text-body px-md py-sm rounded-lg transition-colors flex items-center gap-xs">
|
||
<span class="material-symbols-outlined text-[18px]">upload</span> Import
|
||
</button>
|
||
<button class="text-error hover:bg-error-soft font-body-bold text-body px-md py-sm rounded-lg transition-colors flex items-center gap-xs">
|
||
<span class="material-symbols-outlined text-[18px]">delete</span> Omit / delete
|
||
</button>
|
||
<button class="text-primary hover:bg-surface-low font-body-bold text-body px-md py-sm rounded-lg transition-colors flex items-center gap-xs">
|
||
<span class="material-symbols-outlined text-[18px]">download</span> Export
|
||
</button>
|
||
<button class="bg-primary hover:bg-primary-dark text-on-primary font-body-bold text-body px-md py-sm rounded-lg shadow-sm transition-colors flex items-center gap-xs ml-sm">
|
||
<span class="material-symbols-outlined text-[18px]">add</span> Add work order
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Data Table Card -->
|
||
<div class="bg-surface shadow-card border border-line rounded-lg overflow-hidden flex flex-col">
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-left border-collapse whitespace-nowrap">
|
||
<thead>
|
||
<tr class="bg-surface-low border-b border-line text-on-surface-variant font-body-bold text-body">
|
||
<th class="p-md w-12"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></th>
|
||
<th class="p-md">WO ref</th>
|
||
<th class="p-md">Asset ref</th>
|
||
<th class="p-md">Address</th>
|
||
<th class="p-md">Workstream</th>
|
||
<th class="p-md">Contractor</th>
|
||
<th class="p-md">Stage</th>
|
||
<th class="p-md">Forecast end</th>
|
||
<th class="p-md">Docs</th>
|
||
<th class="p-md">Priority</th>
|
||
<th class="p-md text-right">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="font-technical text-body text-ink divide-y divide-line">
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23881</td>
|
||
<td class="p-md">100245</td>
|
||
<td class="p-md font-body">12 High St</td>
|
||
<td class="p-md font-body">Windows</td>
|
||
<td class="p-md font-body">Contractor A</td>
|
||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Awaiting authorisation</span></td>
|
||
<td class="p-md">12 Jul</td>
|
||
<td class="p-md">2/4</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23882</td>
|
||
<td class="p-md">100245</td>
|
||
<td class="p-md font-body">12 High St</td>
|
||
<td class="p-md font-body">Bathrooms</td>
|
||
<td class="p-md font-body">Contractor B</td>
|
||
<td class="p-md"><span class="bg-accent-soft text-on-tertiary-fixed-variant px-sm py-xs rounded-full font-overline text-overline uppercase">In progress</span></td>
|
||
<td class="p-md">18 Jul</td>
|
||
<td class="p-md">1/4</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors bg-error-soft/10">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md font-body-bold">WO-23883</td>
|
||
<td class="p-md">100309</td>
|
||
<td class="p-md font-body">4 Vale Rd</td>
|
||
<td class="p-md font-body">Roofs</td>
|
||
<td class="p-md font-body">Contractor A</td>
|
||
<td class="p-md"><span class="bg-error-soft text-error px-sm py-xs rounded-full font-overline text-overline uppercase">Overdue</span></td>
|
||
<td class="p-md text-error font-body-bold">03 Jul</td>
|
||
<td class="p-md">0/4</td>
|
||
<td class="p-md"><span class="bg-tan-soft text-on-tan px-sm py-xs rounded-full font-overline text-overline uppercase">Priority</span></td>
|
||
<td class="p-md text-right"><a class="text-error hover:underline font-body-bold text-body flex items-center justify-end gap-xs" href="#"><span class="material-symbols-outlined text-[16px]">warning</span> Review</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23884</td>
|
||
<td class="p-md">100412</td>
|
||
<td class="p-md font-body">8 Mill Lane</td>
|
||
<td class="p-md font-body">Electrical heating</td>
|
||
<td class="p-md font-body">Contractor C</td>
|
||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Ordered</span></td>
|
||
<td class="p-md">21 Jul</td>
|
||
<td class="p-md">0/3</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23885</td>
|
||
<td class="p-md">100508</td>
|
||
<td class="p-md font-body">16 Park View</td>
|
||
<td class="p-md font-body">Asbestos</td>
|
||
<td class="p-md font-body">Contractor C</td>
|
||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Completed</span></td>
|
||
<td class="p-md">09 Jul</td>
|
||
<td class="p-md">2/3</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23886</td>
|
||
<td class="p-md">100522</td>
|
||
<td class="p-md font-body">3 Oak Close</td>
|
||
<td class="p-md font-body">Kitchens</td>
|
||
<td class="p-md font-body">Contractor B</td>
|
||
<td class="p-md"><span class="bg-accent-soft text-on-tertiary-fixed-variant px-sm py-xs rounded-full font-overline text-overline uppercase">In progress</span></td>
|
||
<td class="p-md">24 Jul</td>
|
||
<td class="p-md">1/4</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23887</td>
|
||
<td class="p-md">100547</td>
|
||
<td class="p-md font-body">27 Birch Way</td>
|
||
<td class="p-md font-body">Doors</td>
|
||
<td class="p-md font-body">Contractor A</td>
|
||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Ordered</span></td>
|
||
<td class="p-md">28 Jul</td>
|
||
<td class="p-md">0/4</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||
<td class="p-md">WO-23888</td>
|
||
<td class="p-md">100561</td>
|
||
<td class="p-md font-body">9 Cedar Rd</td>
|
||
<td class="p-md font-body">Cyclical decorations</td>
|
||
<td class="p-md font-body">Contractor B</td>
|
||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Completed</span></td>
|
||
<td class="p-md">05 Jul</td>
|
||
<td class="p-md">2/2</td>
|
||
<td class="p-md"></td>
|
||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- Pagination Footer -->
|
||
<div class="bg-surface border-t border-line p-md flex flex-col sm:flex-row justify-between items-center gap-sm">
|
||
<span class="font-body text-body text-on-surface-variant">Showing 1–8 of 1,231</span>
|
||
<div class="flex items-center gap-sm">
|
||
<button class="p-xs text-outline-variant hover:text-ink disabled:opacity-50 transition-colors" disabled="">
|
||
<span class="material-symbols-outlined">chevron_left</span>
|
||
</button>
|
||
<div class="flex items-center gap-xs">
|
||
<button class="w-8 h-8 rounded-full bg-primary text-on-primary font-body-bold text-body flex items-center justify-center">1</button>
|
||
<button class="w-8 h-8 rounded-full text-on-surface-variant hover:bg-surface-low font-body text-body flex items-center justify-center transition-colors">2</button>
|
||
<button class="w-8 h-8 rounded-full text-on-surface-variant hover:bg-surface-low font-body text-body flex items-center justify-center transition-colors">3</button>
|
||
<span class="text-on-surface-variant">...</span>
|
||
<button class="w-8 h-8 rounded-full text-on-surface-variant hover:bg-surface-low font-body text-body flex items-center justify-center transition-colors">154</button>
|
||
</div>
|
||
<button class="p-xs text-on-surface-variant hover:text-ink transition-colors">
|
||
<span class="material-symbols-outlined">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</body></html> |