style: 改造 Dashboard 為復古工業風 - 導入擬物化面板與 CRT 數據監控區域
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 42s
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 42s
This commit is contained in:
@@ -5,151 +5,109 @@
|
||||
<!-- Grid -->
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
<!-- Card -->
|
||||
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex flex-col retro-panel p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
總銷售額
|
||||
<p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
|
||||
TOTAL_REVENUE
|
||||
</p>
|
||||
<div class="hs-tooltip">
|
||||
<div class="hs-tooltip-toggle">
|
||||
<svg class="flex-shrink-0 w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
|
||||
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
|
||||
本月累計銷售總額
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-x-2">
|
||||
<h3 class="text-2xl font-bold dark:text-gray-200">$72,540.00</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 flex items-center gap-x-2">
|
||||
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
|
||||
$72,540
|
||||
</h3>
|
||||
<span class="flex items-center gap-x-1 text-green-600">
|
||||
<svg class="inline-block w-4 h-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
|
||||
<span class="inline-block text-sm">
|
||||
1.7%
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
|
||||
<!-- Card -->
|
||||
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex flex-col retro-panel p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
活躍機台
|
||||
<p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
|
||||
ACTIVE_MACHINES
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 flex items-center gap-x-2">
|
||||
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
|
||||
124
|
||||
</h3>
|
||||
<span class="flex items-center gap-x-1 text-red-600">
|
||||
<svg class="inline-block w-4 h-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
|
||||
<span class="inline-block text-sm">
|
||||
0.3%
|
||||
</span>
|
||||
</span>
|
||||
<div class="mt-3 flex items-center gap-x-2">
|
||||
<h3 class="text-2xl font-bold dark:text-gray-200">124_UNIT</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
|
||||
<!-- Card -->
|
||||
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex flex-col retro-panel p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
庫存警告
|
||||
<p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
|
||||
ALERTS_PENDING
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 flex items-center gap-x-2">
|
||||
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
|
||||
12
|
||||
</h3>
|
||||
<div class="mt-3 flex items-center gap-x-2">
|
||||
<h3 class="text-2xl font-bold text-red-600 animate-pulse">12_SIGNAL</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
|
||||
<!-- Card -->
|
||||
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex flex-col retro-panel p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
本月新增會員
|
||||
<p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
|
||||
NEW_MEMBERS
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 flex items-center gap-x-2">
|
||||
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
|
||||
28
|
||||
</h3>
|
||||
<div class="mt-3 flex items-center gap-x-2">
|
||||
<h3 class="text-2xl font-bold dark:text-gray-200">28_NODES</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-4 sm:gap-6">
|
||||
<!-- Card -->
|
||||
<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="text-sm text-gray-500 dark:text-gray-400">
|
||||
營收趨勢
|
||||
<!-- Monitor Section -->
|
||||
<div class="retro-panel p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-lg font-bold flex items-center gap-3">
|
||||
<span class="w-2.5 h-2.5 bg-red-600 rounded-full animate-pulse shadow-[0_0_8px_rgba(220,38,38,0.8)]"></span>
|
||||
SYS_LIVE_MONITORING
|
||||
</h2>
|
||||
<p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
|
||||
$123,450
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<span class="text-xs font-bold text-gray-500">SECTOR_B6</span>
|
||||
<span class="text-xs font-bold text-gray-500">UID: SCL-99</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crt-screen">
|
||||
<div class="flex justify-between items-center mb-4 border-b border-amber-900/40 pb-2">
|
||||
<span class="text-amber-glow tracking-widest text-[10px] opacity-80 uppercase">Primary Data Channel: Inbound_Telemetry_v1.02</span>
|
||||
<div class="flex gap-4 items-center">
|
||||
<span class="text-[10px] text-amber-glow/60">SCAN_FREQ: 60Hz</span>
|
||||
<span class="text-amber-glow animate-retro-blink font-bold text-xs">ONLINE_</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1 h-[300px] overflow-y-auto scrollbar-hide">
|
||||
<div class="text-[11px] font-mono opacity-80 text-amber-glow/40 border-b border-amber-900/20 mb-2">
|
||||
>> BOOTING SESSION... OK<br>
|
||||
>> KERNEL LOADED... OK<br>
|
||||
>> CONNECTING TO SATELLITE... LINK ESTABLISHED
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="py-[5px] px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-md bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500">
|
||||
<svg class="inline-block w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
|
||||
25%
|
||||
</span>
|
||||
<div class="flex gap-4 text-xs font-mono">
|
||||
<span class="text-gray-600">[10:05:12]</span>
|
||||
<span class="text-blue-500/80">#MAC-402</span>
|
||||
<span class="text-amber-glow/80">INFO: TEMPERATURE_NOMINAL (23.5C)</span>
|
||||
</div>
|
||||
<div class="flex gap-4 text-xs font-mono">
|
||||
<span class="text-gray-600">[10:06:45]</span>
|
||||
<span class="text-blue-500/80">#MAC-115</span>
|
||||
<span class="text-yellow-500 font-bold">WARN: COIN_RECEPTER_NEAR_FULL</span>
|
||||
</div>
|
||||
<div class="flex gap-4 text-xs font-mono">
|
||||
<span class="text-gray-600">[10:07:33]</span>
|
||||
<span class="text-blue-500/80">#MAC-882</span>
|
||||
<span class="text-red-600 font-bold animate-pulse">ERR: MOTOR_STALL_SECTOR_A1</span>
|
||||
</div>
|
||||
<div class="flex gap-4 text-xs font-mono">
|
||||
<span class="text-gray-600">[10:08:21]</span>
|
||||
<span class="text-blue-500/80">#MAC-402</span>
|
||||
<span class="text-amber-glow/80">INFO: HEARTBEAT_ACK_SUCCESS</span>
|
||||
</div>
|
||||
<div class="flex gap-4 text-xs font-mono">
|
||||
<span class="text-gray-600">[10:09:12]</span>
|
||||
<span class="text-amber-glow animate-retro-blink text-lg leading-none">█</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Header -->
|
||||
|
||||
<div id="hs-multiple-bar-charts"></div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
|
||||
<!-- Card -->
|
||||
<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="text-sm text-gray-500 dark:text-gray-400">
|
||||
訪客分析
|
||||
</h2>
|
||||
<p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
|
||||
92,913
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="py-[5px] px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-md bg-red-100 text-red-800 dark:bg-red-500/10 dark:text-red-500">
|
||||
<svg class="inline-block w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
|
||||
11%
|
||||
</span>
|
||||
<div class="mt-6 border-t border-amber-900/40 pt-3 flex justify-between text-[9px] tracking-[0.3em] text-[#ffb000]/40 uppercase font-bold">
|
||||
<span>Terminal: TTY-1 / StarCloudOS v12.53</span>
|
||||
<span>Uptime: 14:22:11:05</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Header -->
|
||||
|
||||
<div id="hs-single-area-chart"></div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user