Initial import of AbelBirdNest Stock
This commit is contained in:
350
design-assets/stitch_abel_stock/scan_lookup/code.html
Normal file
350
design-assets/stitch_abel_stock/scan_lookup/code.html
Normal file
@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&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"/>
|
||||
<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": {
|
||||
"secondary": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.scanner-overlay {
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 100%);
|
||||
}
|
||||
.scan-frame {
|
||||
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 bg-slate-50 flex flex-col py-4 z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-teal-900 font-black font-h1">Walet Operations</h2>
|
||||
<p class="text-[11px] text-slate-500 font-medium">V1.0.4-Operational</p>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span>Inventory Stock</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
||||
<span>Traceability Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="database">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 text-teal-700 border-r-4 border-teal-600 rounded-l-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
<span>Barcode Scanner</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 border-t border-slate-200">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span>Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top AppBar -->
|
||||
<header class="fixed top-0 right-0 left-64 h-14 bg-white border-b border-slate-200 flex items-center justify-between px-6 z-40 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-lg font-bold tracking-tight text-teal-800 font-h1">SarangTrace ERP</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded-full transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded-full transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full bg-slate-200 overflow-hidden border border-slate-200">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a warehouse supervisor in a clean industrial setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARVXYHFOGloaGEc95MlVgvd7qA1tOCFpdByU9ijmuXuO4f_-Vq09xJtx1idx0paPaCVA5n-kv90SlftFo_PjYc6bTtLwfRnhRb8U-dCmnYxC8L76_oEXJsE50ApRL8LR90UDpGD0ECsGAYO-DjFKe_-UC1h8VGy09pyybilbKuGt4RKuHTAqSUXyMyq7iBXnmETuw4qDuCWTz8sFnwKq6BXJUeebaWs5ERKCBCm4msGCve0OfxHw7t_ORGEiNrh_ZWuBpRDFGvcQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-14 min-h-screen bg-surface">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-6 flex justify-between items-end">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface mb-1">Scan Lookup</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Pindai kode QR atau masukkan ID Lot secara manual untuk melihat detail operasional.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-3 py-1 bg-teal-50 text-teal-700 text-label-caps rounded-full border border-teal-200">STATUS: OPERASIONAL</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scanner & Input Section -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Left: Scanner View -->
|
||||
<div class="col-span-12 lg:col-span-7">
|
||||
<div class="bg-black rounded-xl overflow-hidden relative aspect-video shadow-sm border border-outline-variant">
|
||||
<img alt="Scanner View" class="w-full h-full object-cover opacity-60" data-alt="POV through a smartphone camera scanning a QR code on a wooden crate in a bright warehouse" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOCNtRY7V_VboiKG3-z1LGtxYZr4XaDszqWPa6IIGbhfHdNlGehWcCtNfwVrQzsf2s8rEfxSm6AHWW0kj0hq4jCT47h5lRgP15u87Sr6-rxmYH27xCXeCqlaRLmiKLlDa9MxDSlnqajPl9dqtYT0Uk-NZJnk93eH1N8S7Q6ofLLj8K-T8iw078jTO3sOMQYb40oHlbtCL8jr9cmfqRCyHf_oJqSmpwOQo5YIMqvVCqeHvcdSx_P3BAVnsui7HTj3JgamlUsve-nQ"/>
|
||||
<!-- Scanning UI Overlays -->
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<div class="w-64 h-64 border-2 border-teal-400 rounded-lg scan-frame relative">
|
||||
<div class="absolute inset-x-0 top-0 h-0.5 bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.8)] animate-pulse"></div>
|
||||
<!-- Corner Markers -->
|
||||
<div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-teal-500"></div>
|
||||
<div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-teal-500"></div>
|
||||
<div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-teal-500"></div>
|
||||
<div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-teal-500"></div>
|
||||
</div>
|
||||
<p class="mt-6 text-white font-body-base bg-black/40 backdrop-blur-md px-4 py-2 rounded-full">Posisikan Kode di Tengah Bingkai</p>
|
||||
</div>
|
||||
<!-- Scanner Controls -->
|
||||
<div class="absolute bottom-4 right-4 flex flex-col gap-2">
|
||||
<button class="w-10 h-10 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full flex items-center justify-center transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="flashlight_on">flashlight_on</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full flex items-center justify-center transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="zoom_in">zoom_in</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Manual Input Field -->
|
||||
<div class="mt-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-600 focus:border-transparent outline-none font-body-base" placeholder="Masukkan ID Lot Manual (Contoh: SBW-2023-10-001)" type="text"/>
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" data-icon="keyboard">keyboard</span>
|
||||
</div>
|
||||
<button class="px-6 py-3 bg-primary text-white font-h2 rounded-lg hover:bg-teal-900 transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Results Panel -->
|
||||
<div class="col-span-12 lg:col-span-5 flex flex-col gap-gutter">
|
||||
<!-- Result Card -->
|
||||
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<span class="text-label-caps text-slate-500 uppercase">Hasil Pemindaian Terakhir</span>
|
||||
<span class="text-label-caps text-teal-600 bg-teal-50 px-2 py-0.5 rounded">TERDETEKSI</span>
|
||||
</div>
|
||||
<div class="p-6 flex-1">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="font-display-lot text-display-lot text-teal-900 mb-1">SBW-LOT-4412</h3>
|
||||
<p class="font-body-sm text-body-sm text-slate-500">Kategori: Sarang Putih (Super)</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-label-caps text-slate-400 mb-1">STATUS LOT</div>
|
||||
<span class="px-3 py-1 bg-green-50 text-green-700 text-label-caps rounded-full border border-green-100 font-bold">READY TO EXPORT</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Grid -->
|
||||
<div class="grid grid-cols-2 gap-y-6 gap-x-4 mb-8">
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">GRADE PRODUK</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="verified">verified</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">AAA+ (Premium)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">BERAT BERSIH</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="weight">weight</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">12.450 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">LOKASI GUDANG</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="location_on">location_on</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">Sector B, Rack 42</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">KADAR AIR</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="humidity_low">humidity_low</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">8.4%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Lifecycle -->
|
||||
<div class="mb-8">
|
||||
<label class="text-label-caps text-slate-400 block mb-3 uppercase">Tahap Operasional</label>
|
||||
<div class="relative flex items-center justify-between">
|
||||
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-0.5 bg-slate-200"></div>
|
||||
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-3/4 h-0.5 bg-teal-600"></div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-teal-600 border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[10px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-teal-600 border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[10px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-teal-600 border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[10px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-slate-200 border-4 border-white shadow-sm"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2">
|
||||
<span class="text-[10px] font-bold text-teal-800">BAHAN BAKU</span>
|
||||
<span class="text-[10px] font-bold text-teal-800">SORTASI</span>
|
||||
<span class="text-[10px] font-bold text-teal-800">PACKING</span>
|
||||
<span class="text-[10px] font-bold text-slate-400">PENGIRIMAN</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="col-span-2 py-3 bg-primary text-white font-h2 rounded-lg hover:bg-teal-900 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
||||
Lihat Detail
|
||||
</button>
|
||||
<button class="py-3 border border-teal-600 text-teal-700 font-h2 rounded-lg hover:bg-teal-50 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="print">print</span>
|
||||
Print Label
|
||||
</button>
|
||||
<button class="py-3 border border-teal-600 text-teal-700 font-h2 rounded-lg hover:bg-teal-50 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="move_down">move_down</span>
|
||||
Pindah Lokasi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- History / Recent Scans (Simplified Bento) -->
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="font-h2 text-h2 text-teal-900">Scan Terakhir</h4>
|
||||
<a class="text-body-sm text-teal-600 hover:underline" href="#">Lihat Semua</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg cursor-pointer transition-colors border-l-2 border-transparent hover:border-teal-500">
|
||||
<div class="w-10 h-10 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-500" data-icon="barcode">barcode</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-table-data text-on-surface">SBW-LOT-3990</div>
|
||||
<div class="text-[11px] text-slate-400 uppercase">2 menit yang lalu • Raw Material</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg cursor-pointer transition-colors border-l-2 border-transparent hover:border-teal-500">
|
||||
<div class="w-10 h-10 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-500" data-icon="qr_code">qr_code</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-table-data text-on-surface">SBW-LOT-2281</div>
|
||||
<div class="text-[11px] text-slate-400 uppercase">15 menit yang lalu • Sorting</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for Quick Actions -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 transition-transform active:scale-95 z-50">
|
||||
<span class="material-symbols-outlined" data-icon="add" style="font-variation-settings: 'wght' 600;">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/scan_lookup/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/scan_lookup/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
Reference in New Issue
Block a user