Initial commit
This commit is contained in:
476
design/merchant_dashboard_portal/code.html
Normal file
476
design/merchant_dashboard_portal/code.html
Normal file
@ -0,0 +1,476 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Soundbox Ops | Merchant Portal</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@300;400;500;600;700&family=JetBrains+Mono&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;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.font-display { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
.mono { font-family: 'JetBrains Mono', monospace; }
|
||||
|
||||
/* Custom scrollbar for data-centric feel */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"slate-200": "#E2E8F0",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container": "#ededf9",
|
||||
"on-background": "#191b23",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-primary": "#ffffff",
|
||||
"background": "#F8FAFC",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"info": "#0EA5E9",
|
||||
"on-surface-variant": "#434655",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"on-primary-container": "#eeefff",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface": "#191b23",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"slate-900": "#0F172A",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"secondary": "#505f76",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"danger": "#DC2626",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"slate-100": "#F1F5F9",
|
||||
"surface-bright": "#faf8ff",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"success": "#16A34A",
|
||||
"primary-container": "#2563eb",
|
||||
"surface-tint": "#0053db",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"slate-700": "#334155",
|
||||
"inverse-surface": "#2e3039",
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"warning": "#F59E0B",
|
||||
"outline": "#737686",
|
||||
"slate-500": "#64748B"
|
||||
},
|
||||
"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": {
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"label-md": ["Inter"],
|
||||
"metric-lg": ["Inter"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"body-lg": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"metric-sm": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
||||
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
||||
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface">
|
||||
<!-- Sidebar (Shared Components Anchor) -->
|
||||
<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="px-4 mb-8">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</h1>
|
||||
<p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">Merchant Console</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Navigation links based on JSON mapping and Merchant Priority -->
|
||||
<a class="bg-secondary-container text-on-secondary-container font-bold rounded-lg flex items-center gap-3 px-4 py-3 font-body-md text-body-md transition-all active:opacity-90 active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Overview</span>
|
||||
</a>
|
||||
<a class="text-on-surface-variant hover:bg-slate-100 transition-colors flex items-center gap-3 px-4 py-3 font-body-md text-body-md rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span>Transactions</span>
|
||||
</a>
|
||||
<a class="text-on-surface-variant hover:bg-slate-100 transition-colors flex items-center gap-3 px-4 py-3 font-body-md text-body-md rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
|
||||
<span>Ledger & Settlement</span>
|
||||
</a>
|
||||
<a class="text-on-surface-variant hover:bg-slate-100 transition-colors flex items-center gap-3 px-4 py-3 font-body-md text-body-md rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="speaker_group">speaker_group</span>
|
||||
<span>Device Registry</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto border-t border-slate-100 pt-4 space-y-1">
|
||||
<a class="text-on-surface-variant hover:bg-slate-100 transition-colors flex items-center gap-3 px-4 py-3 font-body-md text-body-md rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a class="text-on-surface-variant hover:bg-slate-100 transition-colors flex items-center gap-3 px-4 py-3 font-body-md text-body-md rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<div class="mt-4 flex items-center gap-3 px-4 py-3">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center text-on-primary-fixed font-bold text-xs">JD</div>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-body-md font-bold truncate">John's Coffee</p>
|
||||
<p class="text-[10px] text-slate-500 truncate">MID: 98234102</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 right-0 h-[72px] bg-surface-container-lowest border-b border-slate-200 flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding z-40">
|
||||
<div class="flex items-center gap-6 flex-1">
|
||||
<div class="relative w-full max-w-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
||||
<input class="w-full bg-slate-50 border-none rounded-xl pl-10 pr-4 py-2 text-body-md focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search transactions, devices..." type="text"/>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="text-primary border-b-2 border-primary font-bold py-6 text-body-md" href="#">Dashboard</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors py-6 text-body-md" href="#">System Health</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-slate-100 rounded-full transition-colors relative">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-slate-100 rounded-full transition-colors">
|
||||
<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 class="w-10 h-10 rounded-full object-cover border-2 border-slate-100" data-alt="A professional headshot of a modern retail merchant in a high-key studio setting. The person is smiling confidently, wearing a clean, smart-casual outfit that reflects a contemporary business aesthetic. The background is a soft, neutral grey, ensuring the focus remains on the individual. The overall mood is approachable, professional, and reliable." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCBijoDwTMABf-Wk9DW7yUPFmhwoQfHS2HZ_4VFWZB3SgjvUR7YX07T0TFbG_ioe_-N-U3FL0zIUMbeiJij_YFx-StBbrnimmm2mvzRUPz3uPEfYoDuoIyJHcMxrj1MJRXN-QYsWB9Rsmfrb4VKGJ3qswyLQlvnTcV0sME6f0PfivL90VtJht40jQIq6HNLgKluzWqCaQsPspsig-A7Wp_tUlVOvAGkMF9vNy7rrsMqoojKIUt9rjJSK9Ai28UUs7pzuHwwdvfX2XQ"/>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 pt-[72px] p-page-padding min-h-screen">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8 flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-primary font-bold text-label-md uppercase tracking-wider mb-1">Merchant Portal</p>
|
||||
<h2 class="font-headline-lg text-headline-lg">Good morning, John's Coffee</h2>
|
||||
</div>
|
||||
<button class="bg-primary text-white px-6 py-2.5 rounded-xl font-bold flex items-center gap-2 hover:bg-primary-container transition-all active:scale-95 shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="add">add</span>
|
||||
Register New Device
|
||||
</button>
|
||||
</div>
|
||||
<!-- KPI Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
|
||||
<!-- GMV Card -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding group hover:border-primary/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-primary/5 rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
</div>
|
||||
<span class="text-success font-metric-sm text-metric-sm flex items-center">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span>
|
||||
12.4%
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-tight">Today's GMV</p>
|
||||
<h3 class="font-metric-lg text-metric-lg mt-1">₹42,850.50</h3>
|
||||
<p class="text-[11px] text-slate-400 mt-2">vs. ₹38,120.00 yesterday</p>
|
||||
</div>
|
||||
<!-- Transaction Count -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding group hover:border-primary/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-info/5 rounded-lg flex items-center justify-center text-info">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
</div>
|
||||
<span class="text-success font-metric-sm text-metric-sm flex items-center">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span>
|
||||
8%
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-tight">Transaction Count</p>
|
||||
<h3 class="font-metric-lg text-metric-lg mt-1">184</h3>
|
||||
<p class="text-[11px] text-slate-400 mt-2">Avg. Ticket: ₹232.88</p>
|
||||
</div>
|
||||
<!-- Active Soundboxes -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding group hover:border-primary/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-warning/5 rounded-lg flex items-center justify-center text-warning">
|
||||
<span class="material-symbols-outlined" data-icon="speaker_group">speaker_group</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 bg-warning/10 px-2 py-0.5 rounded text-[10px] font-bold text-warning uppercase">
|
||||
<span class="w-1 h-1 rounded-full bg-warning animate-pulse"></span>
|
||||
Live
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-tight">Active Soundboxes</p>
|
||||
<h3 class="font-metric-lg text-metric-lg mt-1">04 <span class="text-slate-300 font-normal">/ 05</span></h3>
|
||||
<p class="text-[11px] text-danger mt-2 flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="error">error</span>
|
||||
1 Device Offline (Main Exit)
|
||||
</p>
|
||||
</div>
|
||||
<!-- Next Settlement -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding group hover:border-primary/30 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-10 h-10 bg-success/5 rounded-lg flex items-center justify-center text-success">
|
||||
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
|
||||
</div>
|
||||
<span class="text-slate-400 font-label-md text-label-md uppercase">Pending</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-tight">Next Settlement</p>
|
||||
<h3 class="font-metric-lg text-metric-lg mt-1">₹38,200</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-2 font-bold italic">Scheduled: Oct 24, 06:00 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Section: Transactions and Devices -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
|
||||
<!-- Recent Transactions Table -->
|
||||
<div class="lg:col-span-8 bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="px-6 py-5 border-b border-slate-200 flex justify-between items-center">
|
||||
<h4 class="font-headline-md text-headline-md">Recent Transactions</h4>
|
||||
<a class="text-primary font-bold text-body-md hover:underline" href="#">View All</a>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-slate-50 sticky top-0 border-b border-slate-200">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase">Transaction ID</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase">Time</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase">Amount</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase">Status</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-slate-50 transition-colors group h-[52px]">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-md font-bold text-slate-900">#TXN-88421</p>
|
||||
<p class="text-[10px] text-slate-400 uppercase tracking-tighter">UPI • GPay</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-body-md text-slate-500">10:24:12 AM</td>
|
||||
<td class="px-6 py-4 text-body-md font-bold text-slate-900 text-right tabular-nums">₹450.00</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-success/10 text-success text-[11px] font-bold">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
||||
Settled
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors group h-[52px]">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-md font-bold text-slate-900">#TXN-88419</p>
|
||||
<p class="text-[10px] text-slate-400 uppercase tracking-tighter">UPI • PhonePe</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-body-md text-slate-500">10:22:05 AM</td>
|
||||
<td class="px-6 py-4 text-body-md font-bold text-slate-900 text-right tabular-nums">₹1,200.00</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-success/10 text-success text-[11px] font-bold">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
||||
Settled
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors group h-[52px]">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-md font-bold text-slate-900">#TXN-88418</p>
|
||||
<p class="text-[10px] text-slate-400 uppercase tracking-tighter">UPI • Paytm</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-body-md text-slate-500">10:18:44 AM</td>
|
||||
<td class="px-6 py-4 text-body-md font-bold text-slate-900 text-right tabular-nums">₹85.50</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-warning/10 text-warning text-[11px] font-bold">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span>
|
||||
Pending
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors group h-[52px]">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-md font-bold text-slate-900">#TXN-88415</p>
|
||||
<p class="text-[10px] text-slate-400 uppercase tracking-tighter">UPI • BHIM</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-body-md text-slate-500">09:55:12 AM</td>
|
||||
<td class="px-6 py-4 text-body-md font-bold text-slate-900 text-right tabular-nums">₹210.00</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-danger/10 text-danger text-[11px] font-bold">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-danger"></span>
|
||||
Failed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Device Status Widget -->
|
||||
<div class="lg:col-span-4 flex flex-col gap-gutter">
|
||||
<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 Health</h4>
|
||||
<div class="space-y-4">
|
||||
<!-- Device 1 -->
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-slate-100 hover:border-primary/20 transition-all">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-success/10 flex items-center justify-center text-success">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="speaker">speaker</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-body-md font-bold">Main Counter</p>
|
||||
<p class="text-[10px] text-slate-500">SN: SB-2091-AX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[10px] font-bold text-success uppercase">Online</p>
|
||||
<p class="text-[10px] text-slate-400">88% Batt</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Device 2 -->
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-slate-100 hover:border-primary/20 transition-all">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-success/10 flex items-center justify-center text-success">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="speaker">speaker</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-body-md font-bold">Patio Station</p>
|
||||
<p class="text-[10px] text-slate-500">SN: SB-2092-AX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[10px] font-bold text-success uppercase">Online</p>
|
||||
<p class="text-[10px] text-slate-400">42% Batt</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Device 3 (Offline) -->
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-danger/10 bg-danger/5 transition-all">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-danger/10 flex items-center justify-center text-danger">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="speaker_group">speaker_group</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-body-md font-bold">Main Exit</p>
|
||||
<p class="text-[10px] text-slate-500">SN: SB-2104-CZ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[10px] font-bold text-danger uppercase">Offline</p>
|
||||
<p class="text-[10px] text-slate-400">Low Signal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-6 py-2 border border-slate-200 rounded-lg text-body-md font-bold text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
Run Diagnostics
|
||||
</button>
|
||||
</div>
|
||||
<!-- Banner/Promotion Area -->
|
||||
<div class="relative bg-slate-900 rounded-xl p-card-padding overflow-hidden group">
|
||||
<div class="relative z-10">
|
||||
<span class="bg-primary/20 text-primary-fixed-dim text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded">Special Offer</span>
|
||||
<h5 class="text-white font-headline-md mt-2">Upgrade to Gen-2 Soundboxes</h5>
|
||||
<p class="text-slate-400 text-body-md mt-2 mb-4">Get 20% off and 5G connectivity for better reliability.</p>
|
||||
<button class="bg-white text-slate-900 px-4 py-2 rounded-lg font-bold text-body-md hover:bg-primary-fixed transition-colors">Learn More</button>
|
||||
</div>
|
||||
<!-- Decorative background element -->
|
||||
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-primary/20 rounded-full blur-3xl group-hover:bg-primary/40 transition-all duration-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Audit/Settlement Micro-widget (Optional Professional Detail) -->
|
||||
<div class="mt-8 bg-surface-container border border-slate-200 rounded-xl p-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-2 bg-white rounded border border-slate-200">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="history_edu">history_edu</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-body-md font-bold text-on-surface">Compliance Status</p>
|
||||
<p class="text-[11px] text-slate-500">Your KYC verification is active and valid until Dec 2025.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-3 py-1 bg-success/20 text-success text-[11px] font-bold rounded uppercase">Verified</span>
|
||||
<span class="material-symbols-outlined text-slate-400 cursor-pointer hover:text-on-surface transition-colors" data-icon="more_vert">more_vert</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
// Simple micro-interactions for the merchant portal
|
||||
document.querySelectorAll('button, a').forEach(elem => {
|
||||
elem.addEventListener('mousedown', () => {
|
||||
elem.style.transform = 'scale(0.97)';
|
||||
});
|
||||
elem.addEventListener('mouseup', () => {
|
||||
elem.style.transform = 'scale(1)';
|
||||
});
|
||||
elem.addEventListener('mouseleave', () => {
|
||||
elem.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Search Bar Focus Effect
|
||||
const searchInput = document.querySelector('input[type="text"]');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('focus', () => {
|
||||
searchInput.parentElement.classList.add('ring-2', 'ring-primary/20');
|
||||
});
|
||||
searchInput.addEventListener('blur', () => {
|
||||
searchInput.parentElement.classList.remove('ring-2', 'ring-primary/20');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user