Initial commit
This commit is contained in:
592
design/device_registry_monitoring/code.html
Normal file
592
design/device_registry_monitoring/code.html
Normal file
@ -0,0 +1,592 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Device Registry | Soundbox Ops</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&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"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
[data-weight="fill"] .material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #E2E8F0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.data-table-container {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"warning": "#F59E0B",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"inverse-surface": "#2e3039",
|
||||
"surface": "#faf8ff",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"outline": "#737686",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"primary": "#004ac6",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-tint": "#0053db",
|
||||
"tertiary-container": "#bc4800",
|
||||
"surface-variant": "#e1e2ed",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"info": "#0EA5E9",
|
||||
"slate-500": "#64748B",
|
||||
"tertiary-fixed-dim": "#ffb596",
|
||||
"on-surface": "#191b23",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"surface-bright": "#faf8ff",
|
||||
"surface-container": "#ededf9",
|
||||
"error-container": "#ffdad6",
|
||||
"slate-900": "#0F172A",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"slate-700": "#334155",
|
||||
"slate-200": "#E2E8F0",
|
||||
"on-background": "#191b23",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary": "#505f76",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"danger": "#DC2626",
|
||||
"on-primary-container": "#eeefff",
|
||||
"success": "#16A34A",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"on-surface-variant": "#434655",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"primary-container": "#2563eb",
|
||||
"background": "#F8FAFC",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"tertiary": "#943700",
|
||||
"secondary-fixed": "#d3e4fe",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"on-secondary-container": "#54647a",
|
||||
"slate-100": "#F1F5F9"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"page-padding": "24px",
|
||||
"gutter": "24px",
|
||||
"topbar-height": "72px",
|
||||
"card-padding": "20px",
|
||||
"row-height": "52px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"body-lg": ["Inter"],
|
||||
"metric-lg": ["Inter"],
|
||||
"metric-sm": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
|
||||
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500" }],
|
||||
"headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||
"headline-lg": ["28px", { "lineHeight": "36px", "fontWeight": "600" }],
|
||||
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
||||
"metric-lg": ["32px", { "lineHeight": "40px", "fontWeight": "600" }],
|
||||
"metric-sm": ["14px", { "lineHeight": "20px", "fontWeight": "600" }]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background font-body-md text-on-background min-h-screen">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="w-64 h-full fixed left-0 top-0 bg-surface-container-lowest border-r border-slate-200 flex flex-col py-6 px-4 gap-2 z-50">
|
||||
<div class="mb-8 px-2">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</h1>
|
||||
<p class="text-label-md font-label-md text-slate-500">Admin Console</p>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-1 flex-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-body-md text-body-md">Overview</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
|
||||
<span class="font-body-md text-body-md">Merchant Management</span>
|
||||
</a>
|
||||
<!-- Active State: Device Registry -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-secondary-container text-on-secondary-container font-bold rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="speaker_group" data-weight="fill" style="font-variation-settings: 'FILL' 1;">speaker_group</span>
|
||||
<span class="font-body-md text-body-md">Device Registry</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span class="font-body-md text-body-md">Transactions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
|
||||
<span class="font-body-md text-body-md">Ledger & Settlement</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
|
||||
<span class="font-body-md text-body-md">Audit Control</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col gap-1 pt-4 border-t border-slate-100">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-body-md text-body-md">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
<span class="font-body-md text-body-md">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 right-0 h-[72px] flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding bg-surface-container-lowest z-40">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="relative w-96">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
||||
<input class="w-full bg-slate-50 border-none rounded-full pl-10 pr-4 py-2 text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search devices, merchants..." type="text"/>
|
||||
</div>
|
||||
<nav class="hidden md:flex gap-6">
|
||||
<a class="text-primary font-bold border-b-2 border-primary h-[72px] flex items-center" href="#">Dashboard</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors h-[72px] flex items-center" href="#">System Health</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-on-surface-variant relative">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-danger rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" data-icon="calendar_today">calendar_today</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
|
||||
<img alt="Administrator Profile" class="w-8 h-8 rounded-full border border-slate-200" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAUwYwdc49M8Tip_Q5HmjRqGoXJNad0776g4k4xB27qMd7FLleWQSH8N1gke6Z6TiIPEBkLv5roSTK4A6M7VQVJn70_OxUWPXBdbShZifG7LpCjVfBESpHZfmsCtWATl6JUy9Cb8LbwBsahotAx-TO6rXW0uyxuskJecoWJnTymG38_sBZTSACEQveLAkKoJEZPJw6e53HokMROjScOdO-c3-2BwWuW7f05y-2ZPXthdv6ZcmR3ViwtYPiPbARRzL_nY5udIyoXvZA"/>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 pt-[72px] p-page-padding">
|
||||
<!-- Page Header -->
|
||||
<div class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-1">Device Registry</h2>
|
||||
<p class="text-body-md text-on-surface-variant">Manage and monitor all IoT soundbox units across the network.</p>
|
||||
</div>
|
||||
<button class="bg-primary hover:bg-primary-container text-on-primary px-6 py-2.5 rounded-xl font-bold flex items-center gap-2 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="add">add</span>
|
||||
Register New Device
|
||||
</button>
|
||||
</div>
|
||||
<!-- Summary KPI Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter mb-8">
|
||||
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-icon="devices">devices</span>
|
||||
</div>
|
||||
<span class="text-success text-metric-sm font-metric-sm flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
||||
+24
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="text-label-md font-label-md text-slate-500 uppercase tracking-wider">Total Registered</h3>
|
||||
<p class="text-metric-lg font-metric-lg text-on-surface">1,200</p>
|
||||
<div class="mt-4 w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-success/10 text-success rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-icon="router">router</span>
|
||||
</div>
|
||||
<span class="text-success text-metric-sm font-metric-sm flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
||||
75% Rate
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="text-label-md font-label-md text-slate-500 uppercase tracking-wider">Active Units</h3>
|
||||
<p class="text-metric-lg font-metric-lg text-on-surface">900</p>
|
||||
<div class="mt-4 w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-success h-full w-3/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-warning/10 text-warning rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
</div>
|
||||
<span class="text-slate-500 text-metric-sm font-metric-sm">Unassigned</span>
|
||||
</div>
|
||||
<h3 class="text-label-md font-label-md text-slate-500 uppercase tracking-wider">Stock Available</h3>
|
||||
<p class="text-metric-lg font-metric-lg text-on-surface">300</p>
|
||||
<div class="mt-4 w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-warning h-full w-1/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Bar & Data Table -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl shadow-sm overflow-hidden">
|
||||
<!-- Filters -->
|
||||
<div class="p-4 border-b border-slate-200 flex flex-wrap items-center gap-4 bg-slate-50/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-slate-400" data-icon="filter_list">filter_list</span>
|
||||
<span class="font-bold text-body-md">Filters</span>
|
||||
</div>
|
||||
<div class="h-6 w-[1px] bg-slate-300 mx-2"></div>
|
||||
<select class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
||||
<option>All Models</option>
|
||||
<option>Soundbox V2</option>
|
||||
<option>Soundbox V2 Pro</option>
|
||||
<option>Soundbox Mini</option>
|
||||
</select>
|
||||
<select class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
||||
<option>All Merchants</option>
|
||||
<option>Bakery A</option>
|
||||
<option>Supermarket X</option>
|
||||
<option>Coffee Shop B</option>
|
||||
</select>
|
||||
<select class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
||||
<option>All Connections</option>
|
||||
<option>4G LTE</option>
|
||||
<option>WiFi</option>
|
||||
</select>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button class="text-primary font-bold text-body-md hover:underline">Clear All</button>
|
||||
<button class="bg-white border border-slate-200 px-3 py-1.5 rounded-lg text-body-md flex items-center gap-2 hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
|
||||
Export List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Container -->
|
||||
<div class="overflow-x-auto data-table-container">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-slate-200">
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Device ID</th>
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Model</th>
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Merchant Binding</th>
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Connection</th>
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider">Health</th>
|
||||
<th class="px-6 py-4 font-bold text-label-md text-slate-500 uppercase tracking-wider text-right">Last Seen</th>
|
||||
<th class="px-6 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="font-mono text-primary font-bold">SND-10293</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">Soundbox V2</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[16px]">store</span>
|
||||
</div>
|
||||
<span>Bakery A</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1.5 text-slate-600">
|
||||
<span class="material-symbols-outlined text-[18px]">cell_tower</span>
|
||||
4G
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-success/10 text-success border border-success/20">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-success mr-1.5"></span>
|
||||
Online
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1 text-success">
|
||||
<span class="material-symbols-outlined text-[18px]">favorite</span>
|
||||
Excellent
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height text-right font-mono text-slate-500">2 min ago</td>
|
||||
<td class="px-6 py-row-height text-right">
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 rounded-lg">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="font-mono text-primary font-bold">SND-10294</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">Soundbox V2</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<div class="flex items-center gap-2 text-slate-400 italic">
|
||||
<span>Unassigned</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1.5 text-slate-600">
|
||||
<span class="material-symbols-outlined text-[18px]">wifi</span>
|
||||
WiFi
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-500 border border-slate-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-slate-400 mr-1.5"></span>
|
||||
Offline
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1 text-slate-400">
|
||||
<span class="material-symbols-outlined text-[18px]">heart_broken</span>
|
||||
N/A
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height text-right font-mono text-slate-500">14 hours ago</td>
|
||||
<td class="px-6 py-row-height text-right">
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 rounded-lg">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="font-mono text-primary font-bold">SND-10301</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">Soundbox V2 Pro</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[16px]">local_cafe</span>
|
||||
</div>
|
||||
<span>Coffee Shop B</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1.5 text-slate-600">
|
||||
<span class="material-symbols-outlined text-[18px]">cell_tower</span>
|
||||
4G
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-success/10 text-success border border-success/20">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-success mr-1.5"></span>
|
||||
Online
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1 text-warning">
|
||||
<span class="material-symbols-outlined text-[18px]">heart_minus</span>
|
||||
Good
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height text-right font-mono text-slate-500">Just now</td>
|
||||
<td class="px-6 py-row-height text-right">
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 rounded-lg">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="font-mono text-primary font-bold">SND-10315</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">Soundbox V2</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[16px]">shopping_basket</span>
|
||||
</div>
|
||||
<span>Supermarket X</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1.5 text-slate-600">
|
||||
<span class="material-symbols-outlined text-[18px]">wifi</span>
|
||||
WiFi
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-danger/10 text-danger border border-danger/20">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-danger mr-1.5"></span>
|
||||
Offline
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height">
|
||||
<span class="flex items-center gap-1 text-danger">
|
||||
<span class="material-symbols-outlined text-[18px]">heart_broken</span>
|
||||
Poor
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-row-height text-right font-mono text-slate-500">45 min ago</td>
|
||||
<td class="px-6 py-row-height text-right">
|
||||
<button class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 rounded-lg">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="p-4 border-t border-slate-200 flex items-center justify-between bg-white">
|
||||
<span class="text-body-md text-slate-500">Showing <span class="font-bold text-on-surface">1-4</span> of <span class="font-bold text-on-surface">1,200</span> devices</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary text-on-primary font-bold">1</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-slate-50 text-on-surface">2</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-slate-50 text-on-surface">3</button>
|
||||
<span class="px-2">...</span>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-slate-50 text-on-surface">300</button>
|
||||
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- System Maintenance Warning (Low-depth atmospheric card) -->
|
||||
<div class="mt-8 p-4 bg-tertiary-container/5 border border-tertiary-container/20 rounded-xl flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-tertiary-container/10 flex items-center justify-center text-tertiary">
|
||||
<span class="material-symbols-outlined">build</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-tertiary-fixed-variant">Scheduled Maintenance</h4>
|
||||
<p class="text-body-md text-on-tertiary-fixed-variant opacity-80">Device Heartbeat service will be offline for 15 minutes today at 02:00 UTC for firmware indexing updates.</p>
|
||||
</div>
|
||||
<button class="ml-auto text-on-tertiary-fixed-variant font-bold hover:underline">Dismiss</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Side Inspection Drawer (Initially hidden, triggered by row interaction) -->
|
||||
<div class="fixed inset-y-0 right-0 w-[450px] bg-white shadow-2xl z-[60] transform translate-x-full transition-transform duration-300 ease-in-out border-l border-slate-200" id="detailDrawer">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="p-6 border-b border-slate-200 flex justify-between items-center">
|
||||
<h3 class="font-headline-md text-headline-md">Device Detail</h3>
|
||||
<button class="p-2 hover:bg-slate-100 rounded-full" onclick="closeDrawer()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 overflow-y-auto flex-1">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<img alt="Soundbox V2 Product" class="w-20 h-20 rounded-xl bg-slate-100" data-alt="A clean professional studio product shot of a minimalist electronic soundbox speaker device with a small LCD screen and premium matte plastic finish. The lighting is soft and corporate with subtle blue reflections on the surface consistent with a high-end fintech hardware brand. The background is a clean neutral white studio setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-CSPTCnxQuDTN1XM0atRPM9hIcVzf3zpbuxEUGTIlC-c1BivDqPa9osmBscvoiUcJeMBwUaXbZ6Ut5FuG2a91sVtZjzWRTgLck34kJJJy3N2E9O3uVtZw6InOpX9Gkph2OJxu_Z-PkR_t3F56EVZY3u8o2iZO3iH8hj9_ajrku7g1r_l54uobcRoN3dRH3k_at6GTuGbMtSSD4ew24sX8nePUsVvILKJauQLcMKD14J6mtAGm0x5PfViQQKdJzf_pYMqKswr3Yz4"/>
|
||||
<div>
|
||||
<h4 class="font-bold text-headline-md mb-1">SND-10293</h4>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-success/10 text-success">Soundbox V2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<section>
|
||||
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Binding Info</h5>
|
||||
<div class="bg-slate-50 p-4 rounded-xl border border-slate-100">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-on-surface-variant">Merchant Name</span>
|
||||
<span class="font-bold">Bakery A</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-on-surface-variant">MID</span>
|
||||
<span class="font-mono">MID-882910</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface-variant">Activated On</span>
|
||||
<span>12 Oct 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Live Payload (Audit Control)</h5>
|
||||
<div class="bg-slate-900 text-slate-300 p-4 rounded-xl font-mono text-[12px] relative group">
|
||||
<button class="absolute top-2 right-2 p-1.5 bg-slate-800 rounded opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
||||
</button>
|
||||
<pre>{
|
||||
"device_id": "SND-10293",
|
||||
"hb_state": "ACTIVE",
|
||||
"battery": "94%",
|
||||
"rssi": "-62dBm",
|
||||
"fw_ver": "2.4.1-stable",
|
||||
"last_event": "TXN_NOTIFY"
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h5 class="text-label-md font-label-md text-slate-500 uppercase mb-3">Connectivity Health</h5>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[85%]"></div>
|
||||
</div>
|
||||
<span class="text-body-md font-bold whitespace-nowrap">85% Uptime</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 border-t border-slate-200 grid grid-cols-2 gap-4">
|
||||
<button class="w-full py-2.5 border border-slate-200 rounded-xl font-bold hover:bg-slate-50 transition-colors">Reboot Device</button>
|
||||
<button class="w-full py-2.5 bg-danger/10 text-danger rounded-xl font-bold hover:bg-danger/20 transition-colors">Unbind Merchant</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Simple micro-interaction for the detail drawer
|
||||
function openDrawer() {
|
||||
document.getElementById('detailDrawer').classList.remove('translate-x-full');
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
document.getElementById('detailDrawer').classList.add('translate-x-full');
|
||||
}
|
||||
|
||||
// Apply click event to all table rows (excluding the last column)
|
||||
document.querySelectorAll('tbody tr').forEach(row => {
|
||||
row.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('button')) {
|
||||
openDrawer();
|
||||
}
|
||||
});
|
||||
row.style.cursor = 'pointer';
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user