460 lines
25 KiB
HTML
460 lines
25 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>Device Detail | 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;700&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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"on-primary": "#ffffff",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"error-container": "#ffdad6",
|
|
"warning": "#F59E0B",
|
|
"slate-200": "#E2E8F0",
|
|
"outline-variant": "#c3c6d7",
|
|
"surface-dim": "#d9d9e5",
|
|
"on-tertiary-container": "#ffede6",
|
|
"inverse-surface": "#2e3039",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"slate-100": "#F1F5F9",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"on-surface": "#191b23",
|
|
"on-error-container": "#93000a",
|
|
"surface-tint": "#0053db",
|
|
"inverse-primary": "#b4c5ff",
|
|
"outline": "#737686",
|
|
"slate-500": "#64748B",
|
|
"secondary": "#505f76",
|
|
"on-primary-container": "#eeefff",
|
|
"surface-variant": "#e1e2ed",
|
|
"surface-container": "#ededf9",
|
|
"success": "#16A34A",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"secondary-container": "#d0e1fb",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"surface": "#faf8ff",
|
|
"slate-900": "#0F172A",
|
|
"primary-fixed": "#dbe1ff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"on-error": "#ffffff",
|
|
"on-secondary-container": "#54647a",
|
|
"background": "#F8FAFC",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface-variant": "#434655",
|
|
"surface-container-low": "#f3f3fe",
|
|
"on-background": "#191b23",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"info": "#0EA5E9",
|
|
"danger": "#DC2626",
|
|
"surface-bright": "#faf8ff",
|
|
"error": "#ba1a1a",
|
|
"primary-container": "#2563eb",
|
|
"primary": "#004ac6",
|
|
"tertiary": "#943700",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"tertiary-container": "#bc4800",
|
|
"surface-container-high": "#e7e7f3",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed": "#00174b",
|
|
"slate-700": "#334155"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"page-padding": "24px",
|
|
"topbar-height": "72px",
|
|
"row-height": "52px",
|
|
"gutter": "24px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"metric-sm": ["Inter"],
|
|
"metric-lg": ["Inter"],
|
|
"label-md": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"body-lg": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
|
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.code-font { font-family: 'JetBrains Mono', monospace; }
|
|
.custom-scroll::-webkit-scrollbar { width: 4px; }
|
|
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md antialiased">
|
|
<!-- Side Navigation Shell -->
|
|
<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 text-on-surface-variant">Admin Console</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
|
<span class="font-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 group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">storefront</span>
|
|
<span class="font-body-md">Merchant Management</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 bg-secondary-container text-on-secondary-container font-bold rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">speaker_group</span>
|
|
<span class="font-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 group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">receipt_long</span>
|
|
<span class="font-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 group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">account_balance</span>
|
|
<span class="font-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 group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">history_edu</span>
|
|
<span class="font-body-md">Audit Control</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-slate-100 pt-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
|
<span class="font-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 group" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">help</span>
|
|
<span class="font-body-md">Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation Shell -->
|
|
<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 border-b border-slate-200 z-40">
|
|
<div class="flex items-center gap-4 bg-surface-container-low px-3 py-1.5 rounded-full w-96 border border-slate-200">
|
|
<span class="material-symbols-outlined text-slate-500">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-body-md w-full" placeholder="Search devices, merchants, or serials..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-4 text-on-surface-variant">
|
|
<button class="hover:text-primary transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="hover:text-primary transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined">calendar_today</span>
|
|
</button>
|
|
</div>
|
|
<div class="h-8 w-px bg-slate-200"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<p class="text-label-md font-bold text-on-surface">Admin_User</p>
|
|
<p class="text-[10px] text-slate-500 uppercase tracking-wider">Super Admin</p>
|
|
</div>
|
|
<img alt="Admin Avatar" class="w-10 h-10 rounded-full border-2 border-slate-100" data-alt="A professional headshot of a corporate technology administrator in a bright, modern office setting. The person has a friendly but authoritative expression. The lighting is crisp and natural, with a soft-focus background of a contemporary workstation and glass partitions, emphasizing a clean and efficient workspace." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBK5Bznv_N0fDPHYNOfdTITCcx2J24NhdTXOayYDW1Ve1g8JyTVuXORa1X-hvMSGk8VneyDK8kxQXLikdOs44c4a3-DanQUdKM7BqiizwA_m3MnULvWUBXydth4D6uac3UFSwU5Qx8ckVSYTrpoG0AvnxANAbvSv0CD2yCs21O8lpHokxv-vVCCaheQRGC5Wyw0TYY5o1V_D87PhtYXIVRL0yCMUz1e0pMoGhGY5g5BjNrQSg2gCTBVSJc9SHvTB9r_7EQPnBMV-0E"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 pt-[72px] min-h-screen">
|
|
<div class="p-page-padding">
|
|
<!-- Breadcrumb & Back Action -->
|
|
<div class="flex items-center gap-2 mb-6 text-on-surface-variant">
|
|
<a class="flex items-center hover:text-primary transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-sm mr-1">arrow_back</span>
|
|
<span class="text-label-md">Back to Registry</span>
|
|
</a>
|
|
<span class="text-slate-300">/</span>
|
|
<span class="text-label-md">SND-10293</span>
|
|
</div>
|
|
<!-- Device Header Summary -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding mb-gutter flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
|
<div class="flex items-start gap-5">
|
|
<div class="w-16 h-16 bg-primary-fixed rounded-xl flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-[40px]">speaker_group</span>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">SND-10293</h2>
|
|
<span class="bg-success/10 text-success text-[10px] font-bold px-2 py-0.5 rounded-full border border-success/20 uppercase tracking-wider flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-6 gap-y-1">
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">settings_input_component</span>
|
|
Soundbox V2 Pro
|
|
</p>
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">schedule</span>
|
|
Last seen 2 mins ago
|
|
</p>
|
|
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-sm">location_on</span>
|
|
Mumbai, Central Region
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-4 py-2 border border-slate-200 text-on-surface-variant font-bold text-body-md rounded-lg hover:bg-slate-50 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
Export Logs
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary text-on-primary font-bold text-body-md rounded-lg hover:opacity-90 active:scale-95 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">sync</span>
|
|
Refresh State
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-slate-200 mb-8 flex gap-8">
|
|
<button class="pb-4 text-body-md font-bold text-primary border-b-2 border-primary">Overview</button>
|
|
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors">Heartbeat</button>
|
|
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors">Configuration</button>
|
|
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors">Binding History</button>
|
|
</div>
|
|
<!-- Grid Layout -->
|
|
<div class="grid grid-cols-12 gap-gutter">
|
|
<!-- Left Column: Primary Content -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-gutter">
|
|
<!-- KPI Metrics Bento Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="text-label-md text-on-surface-variant mb-2">Signal Strength (4G)</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">-78 dBm</h3>
|
|
<span class="material-symbols-outlined text-success">signal_cellular_4_bar</span>
|
|
</div>
|
|
<p class="text-metric-sm text-success mt-2 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
|
Excellent
|
|
</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="text-label-md text-on-surface-variant mb-2">Battery Health</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">92%</h3>
|
|
<span class="material-symbols-outlined text-primary">battery_5_bar</span>
|
|
</div>
|
|
<p class="text-metric-sm text-on-surface-variant mt-2 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]">bolt</span>
|
|
Discharging (External OFF)
|
|
</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="text-label-md text-on-surface-variant mb-2">Firmware Version</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">v2.4.1</h3>
|
|
<span class="material-symbols-outlined text-slate-400">verified</span>
|
|
</div>
|
|
<p class="text-metric-sm text-info mt-2 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]">info</span>
|
|
Latest version available
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Merchant Binding Info -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden">
|
|
<div class="px-card-padding py-4 border-b border-slate-100 flex justify-between items-center bg-surface-container-low">
|
|
<h4 class="font-headline-md text-headline-md">Current Merchant Binding</h4>
|
|
<button class="text-primary text-label-md font-bold hover:underline">Change Merchant</button>
|
|
</div>
|
|
<div class="p-card-padding flex items-center gap-6">
|
|
<div class="w-14 h-14 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center overflow-hidden">
|
|
<img alt="Bakery A Logo" data-alt="A macro photograph of fresh, golden-brown sourdough bread and artisan pastries in a boutique bakery window. The lighting is warm and inviting, highlighting textures and powdered sugar. The overall aesthetic is rustic yet clean, using a natural color palette of ambers and creams to convey quality and craft." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLL97IiG98RevWkfNoNu5bn4vTZ2kcq5CEVVFZhDo7FSSiL-KDp4dkGB2euEyy3qjWqJZcyEnIvEUF-zIgZAQb_fcnVzjHHCpHXhk3_iLjEuviUvlCULxDy3FSwdqNYnVWQI8hJlttUDVMHQWjGvmF5J-DU-1UpRll2tilFoGJsiRPOY9w077s67RaPXE2AQUDPnJqcUcXN-C8Vs-FndxWkqGGTnLLjPbGLJIVy4mQHd9PAT2uhjppmienzUToJxGVMX84pTk53WI"/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-headline-md font-bold text-on-surface">Bakery A - Mumbai Outlet</p>
|
|
<p class="text-body-md text-on-surface-variant">Merchant ID: MID-99201-B02</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-label-md text-slate-500">Bound Since</p>
|
|
<p class="text-body-md font-bold">12 Oct 2023, 11:45 AM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Live Payload Viewer -->
|
|
<div class="bg-slate-900 rounded-xl overflow-hidden flex flex-col h-[400px]">
|
|
<div class="px-4 py-3 bg-slate-800 flex justify-between items-center border-b border-slate-700">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
|
|
<span class="text-label-md text-slate-100 font-bold uppercase tracking-widest">Live Payload Stream</span>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="text-slate-400 hover:text-white transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">content_copy</span>
|
|
</button>
|
|
<button class="text-slate-400 hover:text-white transition-colors" id="clearConsole">
|
|
<span class="material-symbols-outlined text-[18px]">block</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 flex-1 overflow-y-auto code-font text-[13px] text-green-400 space-y-1 custom-scroll" id="payload-stream">
|
|
<p class="text-slate-500">[14:02:11] INITIALIZING WEBSOCKET CONNECTION...</p>
|
|
<p class="text-slate-500">[14:02:12] CONNECTED TO SND-10293_GATEWAY_V4</p>
|
|
<p class="text-success">[14:02:15] RECV: {"event": "heartbeat", "status": "online", "v_batt": 4.12, "rssi": -78, "ts": 1715421255}</p>
|
|
<p class="text-blue-400">[14:03:01] SEND: {"cmd": "ack_config", "token": "fx-2291"}</p>
|
|
<p class="text-success">[14:03:02] RECV: {"event": "tx_confirm", "tx_id": "QR-90112", "amount": 12.50, "currency": "INR"}</p>
|
|
<p class="text-slate-500">[14:04:15] IDLE: STANDBY MODE ACTIVE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Sidebar Panels -->
|
|
<div class="col-span-12 lg:col-span-4 space-y-gutter">
|
|
<!-- Remote Actions Panel -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
|
<div class="p-card-padding border-b border-slate-100">
|
|
<h4 class="font-headline-md text-headline-md">Remote Actions</h4>
|
|
</div>
|
|
<div class="p-card-padding space-y-3">
|
|
<button class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">restart_alt</span>
|
|
<span class="font-body-md font-bold">Reboot Device</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">system_update</span>
|
|
<span class="font-body-md font-bold">Update Firmware</span>
|
|
</div>
|
|
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-0.5 rounded-full">OTA Ready</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">lock_open</span>
|
|
<span class="font-body-md font-bold">Unbind Merchant</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
|
</button>
|
|
<div class="pt-2">
|
|
<button class="w-full py-2.5 bg-danger/10 text-danger border border-danger/20 font-bold text-body-md rounded-lg hover:bg-danger/20 transition-all flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">delete_forever</span>
|
|
Decommission Device
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Device Health Timeline -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding shadow-sm">
|
|
<h4 class="font-headline-md text-headline-md mb-6">Device Events</h4>
|
|
<div class="space-y-6 relative before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
|
|
<!-- Event 1 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-success border-4 border-white shadow-sm flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[12px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<p class="text-label-md font-bold">Successful Transaction</p>
|
|
<p class="text-[12px] text-on-surface-variant">QR payment processed (₹45.00)</p>
|
|
<p class="text-[10px] text-slate-400 mt-1">Today, 02:03 PM</p>
|
|
</div>
|
|
<!-- Event 2 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-blue-500 border-4 border-white shadow-sm flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[12px] text-white" style="font-variation-settings: 'FILL' 1;">sync</span>
|
|
</div>
|
|
<p class="text-label-md font-bold">Config Synchronized</p>
|
|
<p class="text-[12px] text-on-surface-variant">Volume set to 80%</p>
|
|
<p class="text-[10px] text-slate-400 mt-1">Today, 11:20 AM</p>
|
|
</div>
|
|
<!-- Event 3 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-warning border-4 border-white shadow-sm flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[12px] text-white" style="font-variation-settings: 'FILL' 1;">power_off</span>
|
|
</div>
|
|
<p class="text-label-md font-bold">AC Power Disconnected</p>
|
|
<p class="text-[12px] text-on-surface-variant">Switched to battery backup</p>
|
|
<p class="text-[10px] text-slate-400 mt-1">Yesterday, 09:45 PM</p>
|
|
</div>
|
|
<!-- Event 4 -->
|
|
<div class="relative pl-8">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-slate-200 border-4 border-white shadow-sm flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[12px] text-slate-500" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
|
</div>
|
|
<p class="text-label-md font-bold text-slate-400">Firmware Update Scheduled</p>
|
|
<p class="text-[10px] text-slate-400 mt-1">Expected 15 May</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-6 text-primary text-label-md font-bold hover:bg-slate-50 py-2 rounded-lg transition-colors">View All Events</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- FAB for Quick Config (Suppressed on detail pages as per mandate but kept for utility context if needed, hidden here) -->
|
|
<div class="fixed bottom-6 right-6 z-50 hidden">
|
|
<button class="w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined">add</span>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
// Micro-interaction: Live Payload Simulator
|
|
const stream = document.getElementById('payload-stream');
|
|
const clearBtn = document.getElementById('clearConsole');
|
|
|
|
const logs = [
|
|
{ type: 'success', text: 'RECV: {"event": "heartbeat", "status": "online", "v_batt": 4.12, "rssi": -78}' },
|
|
{ type: 'info', text: 'SEND: {"cmd": "ping", "id": 102}' },
|
|
{ type: 'log', text: 'CONNECTION STABLE: latency 45ms' },
|
|
{ type: 'warning', text: 'WARN: Battery voltage dipping below 3.9v threshold' },
|
|
{ type: 'success', text: 'RECV: {"event": "audio_ack", "file_id": "notif_2"}' }
|
|
];
|
|
|
|
setInterval(() => {
|
|
const log = logs[Math.floor(Math.random() * logs.length)];
|
|
const p = document.createElement('p');
|
|
const time = new Date().toLocaleTimeString('en-GB', { hour12: false });
|
|
|
|
p.className = log.type === 'success' ? 'text-green-400' :
|
|
log.type === 'info' ? 'text-blue-400' :
|
|
log.type === 'warning' ? 'text-warning' : 'text-slate-500';
|
|
|
|
p.textContent = `[${time}] ${log.text}`;
|
|
stream.appendChild(p);
|
|
stream.scrollTop = stream.scrollHeight;
|
|
|
|
if (stream.children.length > 50) {
|
|
stream.removeChild(stream.firstChild);
|
|
}
|
|
}, 4000);
|
|
|
|
clearBtn.addEventListener('click', () => {
|
|
stream.innerHTML = '<p class="text-slate-500">--- CONSOLE CLEARED ---</p>';
|
|
});
|
|
</script>
|
|
</body></html> |