398 lines
No EOL
23 KiB
HTML
398 lines
No EOL
23 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>Catalogue Management</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"outline-variant": "#c6c6cd",
|
|
"on-tertiary-container": "#98805d",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary": "#000000",
|
|
"surface-container-highest": "#d3e4fe",
|
|
"on-tertiary-fixed-variant": "#574425",
|
|
"secondary-container": "#fd8a42",
|
|
"surface-tint": "#565e74",
|
|
"on-secondary-fixed": "#331200",
|
|
"on-primary-container": "#7c839b",
|
|
"inverse-on-surface": "#eaf1ff",
|
|
"on-primary-fixed": "#131b2e",
|
|
"on-surface": "#0b1c30",
|
|
"on-primary-fixed-variant": "#3f465c",
|
|
"surface": "#f8f9ff",
|
|
"on-background": "#0b1c30",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-low": "#eff4ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary-fixed-dim": "#bec6e0",
|
|
"outline": "#76777d",
|
|
"surface-container-high": "#dce9ff",
|
|
"on-primary": "#ffffff",
|
|
"inverse-primary": "#bec6e0",
|
|
"primary-container": "#131b2e",
|
|
"secondary-fixed": "#ffdbca",
|
|
"tertiary-fixed-dim": "#dec29a",
|
|
"secondary": "#9b4500",
|
|
"primary": "#000000",
|
|
"surface-container": "#e5eeff",
|
|
"background": "#f8f9ff",
|
|
"surface-variant": "#d3e4fe",
|
|
"on-error": "#ffffff",
|
|
"on-secondary-container": "#682c00",
|
|
"inverse-surface": "#213145",
|
|
"primary-fixed": "#dae2fd",
|
|
"on-secondary-fixed-variant": "#763300",
|
|
"on-surface-variant": "#45464d",
|
|
"error": "#ba1a1a",
|
|
"surface-dim": "#cbdbf5",
|
|
"secondary-fixed-dim": "#ffb68e",
|
|
"tertiary-container": "#271901",
|
|
"surface-bright": "#f8f9ff",
|
|
"error-container": "#ffdad6",
|
|
"on-tertiary-fixed": "#271901",
|
|
"on-tertiary": "#ffffff",
|
|
"tertiary-fixed": "#fcdeb5"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-gap-md": "12px",
|
|
"row-padding": "8px 12px",
|
|
"container-margin": "16px",
|
|
"unit": "4px",
|
|
"stack-gap-sm": "4px",
|
|
"cell-padding": "4px 8px",
|
|
"gutter": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"body-md": ["Inter", "sans-serif"],
|
|
"label-md": ["Inter", "sans-serif"],
|
|
"label-sm": ["Inter", "sans-serif"],
|
|
"headline-md": ["Inter", "sans-serif"],
|
|
"headline-sm": ["Inter", "sans-serif"],
|
|
"body-sm": ["Inter", "sans-serif"],
|
|
"table-data": ["Inter", "sans-serif"],
|
|
"headline-lg": ["Inter", "sans-serif"]
|
|
},
|
|
"fontSize": {
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"label-sm": ["11px", {"lineHeight": "14px", "fontWeight": "600"}],
|
|
"headline-md": ["20px", {"lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"headline-sm": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "400"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
|
|
|
/* Utility for Material Symbols */
|
|
.material-symbols-outlined {
|
|
font-family: 'Material Symbols Outlined';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 20px;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
}
|
|
|
|
/* Custom scrollbar for high-density data areas */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #c6c6cd; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #76777d; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background min-h-screen font-body-md overflow-hidden flex">
|
|
<!-- SideNavBar Component -->
|
|
<nav class="fixed left-0 top-0 bottom-0 flex flex-col p-4 z-40 w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest dark:bg-surface-container-lowest">
|
|
<!-- Brand Header -->
|
|
<div class="flex items-center gap-3 px-4 py-6 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center font-bold">
|
|
C
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-sm text-headline-sm font-bold text-primary">Crumbs & Co.</span>
|
|
<span class="font-label-sm text-label-sm text-on-surface-variant">Production Hub</span>
|
|
</div>
|
|
</div>
|
|
<!-- Primary CTA -->
|
|
<div class="px-4 mb-6">
|
|
<button class="w-full flex items-center justify-center gap-2 h-10 rounded bg-primary text-on-primary font-label-md hover:opacity-90 transition-opacity">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
New Order
|
|
</button>
|
|
</div>
|
|
<!-- Main Navigation -->
|
|
<ul class="flex flex-col gap-1 flex-1">
|
|
<li>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">shopping_cart</span>
|
|
Orders
|
|
</a>
|
|
</li>
|
|
<!-- Active Tab: Catalogue -->
|
|
<li>
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-bold transition-colors cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
|
|
Catalogue
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- Footer Navigation -->
|
|
<ul class="flex flex-col gap-1 mt-auto border-t border-outline-variant pt-4">
|
|
<li>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- TopNavBar Component -->
|
|
<header class="fixed top-0 right-0 left-[280px] flex justify-between items-center px-6 z-30 h-14 w-full border-b border-outline-variant bg-surface dark:bg-surface">
|
|
<!-- Left Side: Product Name & Search -->
|
|
<div class="flex items-center gap-6">
|
|
<h1 class="font-headline-md text-headline-md font-black text-primary">Order Tracker</h1>
|
|
<div class="relative flex items-center">
|
|
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-[18px]">search</span>
|
|
<input class="h-8 w-64 pl-9 pr-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-0 text-on-surface transition-colors placeholder:text-on-surface-variant" placeholder="Search orders..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- Center: Navigation Links (Optional/Contextual, kept for structural fidelity) -->
|
|
<nav class="hidden lg:flex items-center gap-6 font-body-sm text-body-sm">
|
|
<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">Today</a>
|
|
<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">This Week</a>
|
|
<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">Monthly</a>
|
|
</nav>
|
|
<!-- Right Side: Actions -->
|
|
<div class="flex items-center gap-4">
|
|
<button class="h-8 px-4 border border-primary text-primary font-label-md rounded hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
|
|
Sync Data
|
|
</button>
|
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
|
|
<span class="material-symbols-outlined">account_circle</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas (List-Detail Pattern) -->
|
|
<main class="ml-[280px] mt-14 flex-1 flex flex-col sm:flex-row h-[calc(100vh-56px)] bg-background">
|
|
<!-- Left Pane: Catalogue Table (Fluid) -->
|
|
<section class="flex-1 flex flex-col min-w-0 bg-surface-container-lowest border-r border-outline-variant overflow-hidden">
|
|
<!-- Pane Header -->
|
|
<div class="px-6 py-5 border-b border-outline-variant flex items-center justify-between bg-surface-container-lowest shrink-0">
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Catalogue Management</h2>
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[16px]">filter_list</span>
|
|
<select class="h-8 pl-8 pr-8 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none appearance-none text-on-surface">
|
|
<option>All Categories</option>
|
|
<option>Signature</option>
|
|
<option>Seasonal</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- High-Density Table Container -->
|
|
<div class="flex-1 overflow-auto bg-surface-container-lowest">
|
|
<table class="w-full text-left border-collapse whitespace-nowrap">
|
|
<thead class="sticky top-0 bg-surface z-10 shadow-[0_1px_0_0_#c6c6cd]">
|
|
<tr>
|
|
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium w-12"></th>
|
|
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">Cake Name</th>
|
|
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">SKU</th>
|
|
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Base Price</th>
|
|
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">Category</th>
|
|
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="font-table-data text-table-data text-on-surface divide-y divide-outline-variant/30">
|
|
<!-- Table Row 1 -->
|
|
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
|
|
<td class="px-4 py-1">
|
|
<div class="w-6 h-6 rounded bg-primary-container/20 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[14px] text-primary">cake</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-1 font-medium">Classic Vanilla Bean</td>
|
|
<td class="px-4 py-1 text-on-surface-variant">VB-1001</td>
|
|
<td class="px-4 py-1 text-right">$45.00</td>
|
|
<td class="px-4 py-1">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span>
|
|
</td>
|
|
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- Table Row 2 -->
|
|
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
|
|
<td class="px-4 py-1">
|
|
<div class="w-6 h-6 rounded bg-secondary-container/20 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[14px] text-secondary">cake</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-1 font-medium">Decadent Chocolate Fudge</td>
|
|
<td class="px-4 py-1 text-on-surface-variant">CF-1002</td>
|
|
<td class="px-4 py-1 text-right">$55.00</td>
|
|
<td class="px-4 py-1">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span>
|
|
</td>
|
|
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- Table Row 3 -->
|
|
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group bg-surface-container-highest/20">
|
|
<td class="px-4 py-1">
|
|
<div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-1 font-medium">Autumn Spiced Carrot</td>
|
|
<td class="px-4 py-1 text-on-surface-variant">SC-2001</td>
|
|
<td class="px-4 py-1 text-right">$48.00</td>
|
|
<td class="px-4 py-1">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface font-label-sm text-[10px]">Seasonal</span>
|
|
</td>
|
|
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- More rows appended to show density -->
|
|
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
|
|
<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
|
|
<td class="px-4 py-1 font-medium">Lemon Raspberry Delight</td>
|
|
<td class="px-4 py-1 text-on-surface-variant">LR-1004</td>
|
|
<td class="px-4 py-1 text-right">$50.00</td>
|
|
<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span></td>
|
|
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
|
|
<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
|
|
<td class="px-4 py-1 font-medium">Strawberry Shortcake</td>
|
|
<td class="px-4 py-1 text-on-surface-variant">SS-1005</td>
|
|
<td class="px-4 py-1 text-right">$42.00</td>
|
|
<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span></td>
|
|
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
|
|
<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
|
|
<td class="px-4 py-1 font-medium">Winter Peppermint Mocha</td>
|
|
<td class="px-4 py-1 text-on-surface-variant">PM-2002</td>
|
|
<td class="px-4 py-1 text-right">$52.00</td>
|
|
<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface font-label-sm text-[10px]">Seasonal</span></td>
|
|
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Table Footer / Pagination -->
|
|
<div class="p-3 border-t border-outline-variant bg-surface flex items-center justify-between shrink-0 font-body-sm text-body-sm text-on-surface-variant">
|
|
<span>Showing 1 to 6 of 24 entries</span>
|
|
<div class="flex items-center gap-1">
|
|
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center disabled:opacity-50"><span class="material-symbols-outlined text-[18px]">chevron_left</span></button>
|
|
<button class="w-8 h-8 rounded bg-primary text-on-primary flex items-center justify-center font-medium">1</button>
|
|
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center">2</button>
|
|
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center">3</button>
|
|
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center"><span class="material-symbols-outlined text-[18px]">chevron_right</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Right Pane: Add/Edit Form (Fixed Width) -->
|
|
<aside class="w-[320px] bg-surface flex flex-col shrink-0 overflow-y-auto border-l border-outline-variant">
|
|
<div class="p-5 border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10 flex items-center justify-between">
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface">Add New Cake</h3>
|
|
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[20px]">close</span></button>
|
|
</div>
|
|
<form class="p-5 flex flex-col gap-5 flex-1">
|
|
<!-- Input Group -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface">Cake Name <span class="text-error">*</span></label>
|
|
<input class="h-9 px-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface" placeholder="e.g. Red Velvet Dream" type="text"/>
|
|
</div>
|
|
<!-- Input Group -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface">SKU <span class="text-on-surface-variant font-normal">(Auto-generated)</span></label>
|
|
<input class="h-9 px-3 rounded border border-outline-variant bg-surface font-body-sm text-body-sm text-on-surface-variant w-full cursor-not-allowed" disabled="" type="text" value="RV-1006"/>
|
|
</div>
|
|
<!-- Split Row -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface">Base Price</label>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-2 text-on-surface-variant font-body-sm">$</span>
|
|
<input class="h-9 pl-7 pr-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface" placeholder="0.00" type="number"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface">Category</label>
|
|
<select class="h-9 px-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface">
|
|
<option>Signature</option>
|
|
<option>Seasonal</option>
|
|
<option>Custom</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Textarea -->
|
|
<div class="flex flex-col gap-1.5 mt-2">
|
|
<label class="font-label-md text-label-md text-on-surface">Internal Notes</label>
|
|
<textarea class="p-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface resize-none" placeholder="Production instructions or special alerts..." rows="3"></textarea>
|
|
</div>
|
|
<!-- Toggles / Checklist -->
|
|
<div class="flex flex-col gap-3 mt-2 border border-outline-variant rounded p-3 bg-surface-container-lowest">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
|
|
<span class="font-body-sm text-body-sm text-on-surface">Available for Order</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
|
|
<span class="font-body-sm text-body-sm text-on-surface">Requires 48hr Notice</span>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<!-- Form Actions -->
|
|
<div class="p-5 border-t border-outline-variant bg-surface-container-lowest sticky bottom-0 z-10 flex items-center justify-end gap-3 mt-auto">
|
|
<button class="h-10 px-4 rounded border border-outline-variant text-on-surface font-label-md hover:bg-surface-container-highest transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button class="h-10 px-6 rounded bg-primary text-on-primary font-label-md hover:opacity-90 transition-opacity flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">save</span>
|
|
Save Cake
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</body></html> |