From 80436caee728941571422ea563ad4445030d2b64 Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Mon, 9 Mar 2026 10:20:58 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=88=87=E6=8F=9B=E7=82=BA=E6=A5=B5?=
 =?UTF-8?q?=E7=B0=A1=E5=A5=A2=E8=8F=AF=E9=A2=A8=20(Minimal=20Luxury)=20-?=
 =?UTF-8?q?=20=E7=A7=BB=E9=99=A4=E5=BE=A9=E5=8F=A4=E9=A2=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=B0=8E=E5=85=A5=20Outfit/Jakarta=20=E8=88=87=E8=BB=9F?=
 =?UTF-8?q?=E9=99=B0=E5=BD=B1=E8=A8=AD=E8=A8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/admin/dashboard.blade.php | 130 ++++++++++------------
 resources/views/layouts/admin.blade.php   |   6 +-
 2 files changed, 59 insertions(+), 77 deletions(-)

diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 1337510..590db62 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -5,108 +5,92 @@
   <!-- Grid -->
   <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
     <!-- Card -->
-    <div class="flex flex-col retro-panel p-4 md:p-5">
+    <div class="luxury-card rounded-2xl p-5 animate-luxury-in">
       <div class="flex items-center gap-x-2">
-        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
-          TOTAL_REVENUE
+        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
+          Total Revenue
         </p>
       </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 class="mt-2 flex items-baseline gap-x-2">
+        <h3 class="text-3xl font-bold text-slate-800 dark:text-white">$72,540.00</h3>
+        <span class="text-xs font-medium text-cyan-500 bg-cyan-500/10 px-1.5 py-0.5 rounded">+2.5%</span>
       </div>
     </div>
     <!-- Card -->
-    <div class="flex flex-col retro-panel p-4 md:p-5">
+    <div class="luxury-card rounded-2xl p-5 animate-luxury-in" style="animation-delay: 100ms">
       <div class="flex items-center gap-x-2">
-        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
-          ACTIVE_MACHINES
+        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
+          Active Machines
         </p>
       </div>
-      <div class="mt-3 flex items-center gap-x-2">
-        <h3 class="text-2xl font-bold dark:text-gray-200">124_UNIT</h3>
+      <div class="mt-2">
+        <h3 class="text-3xl font-bold text-slate-800 dark:text-white">124 Units</h3>
       </div>
     </div>
     <!-- Card -->
-    <div class="flex flex-col retro-panel p-4 md:p-5">
+    <div class="luxury-card rounded-2xl p-5 animate-luxury-in" style="animation-delay: 200ms">
       <div class="flex items-center gap-x-2">
-        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
-          ALERTS_PENDING
+        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
+          Alerts Pending
         </p>
       </div>
-      <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 class="mt-2">
+        <h3 class="text-3xl font-bold text-rose-500">12 Signals</h3>
       </div>
     </div>
     <!-- Card -->
-    <div class="flex flex-col retro-panel p-4 md:p-5">
+    <div class="luxury-card rounded-2xl p-5 animate-luxury-in" style="animation-delay: 300ms">
       <div class="flex items-center gap-x-2">
-        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
-          NEW_MEMBERS
+        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
+          Member Growth
         </p>
       </div>
-      <div class="mt-3 flex items-center gap-x-2">
-        <h3 class="text-2xl font-bold dark:text-gray-200">28_NODES</h3>
+      <div class="mt-2 flex items-baseline gap-x-2">
+        <h3 class="text-3xl font-bold text-slate-800 dark:text-white">2,840</h3>
+        <span class="text-xs font-medium text-emerald-500">↑ 12%</span>
       </div>
     </div>
   </div>
-  <!-- End Grid -->
 
-  <!-- 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>
-        <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 class="grid lg:grid-cols-3 gap-6">
+    <!-- Chart Column -->
+    <div class="lg:col-span-2 luxury-card rounded-3xl p-6 animate-luxury-in" style="animation-delay: 400ms">
+        <div class="flex justify-between items-center mb-8">
+            <div>
+                <h2 class="text-lg font-bold text-slate-800 dark:text-white">Revenue Performance</h2>
+                <p class="text-sm text-slate-400">Daily revenue insights across all regions</p>
+            </div>
+            <select class="bg-slate-50 dark:bg-slate-800/50 border-0 text-sm font-medium rounded-lg focus:ring-0">
+                <option>Last 7 Days</option>
+                <option>Last 30 Days</option>
+            </select>
+        </div>
+        <div class="h-[300px] flex items-center justify-center border-2 border-dashed border-slate-100 dark:border-slate-800 rounded-2xl">
+            <span class="text-slate-300 dark:text-slate-700 font-medium">Chart Visualization Placeholder</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>
+
+    <!-- Live Activity -->
+    <div class="luxury-card rounded-3xl p-6 animate-luxury-in" style="animation-delay: 500ms">
+        <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6">Live Activity</h2>
+        <div class="space-y-6">
+            <div class="relative pl-6 before:absolute before:left-0 before:top-1 before:bottom-0 before:w-0.5 before:bg-slate-100 dark:before:bg-slate-800">
+                <div class="absolute left-[-4px] top-0 w-2.5 h-2.5 rounded-full bg-cyan-500 border-2 border-white dark:border-[#1e293b]"></div>
+                <p class="text-sm font-bold text-slate-700 dark:text-slate-200">#MAC-402 Transaction Successful</p>
+                <p class="text-xs text-slate-400">Just now • Taipei Sector</p>
+            </div>
+            <div class="relative pl-6 before:absolute before:left-0 before:top-1 before:bottom-0 before:w-0.5 before:bg-slate-100 dark:before:bg-slate-800">
+                <div class="absolute left-[-4px] top-0 w-2.5 h-2.5 rounded-full bg-rose-500 border-2 border-white dark:border-[#1e293b]"></div>
+                <p class="text-sm font-bold text-slate-700 dark:text-slate-200">#MAC-882 Motor Error Detail</p>
+                <p class="text-xs text-slate-400">2 mins ago • Taichung Sector</p>
+            </div>
+            <div class="relative pl-6">
+                <div class="absolute left-[-4px] top-0 w-2.5 h-2.5 rounded-full bg-slate-300 border-2 border-white dark:border-[#1e293b]"></div>
+                <p class="text-sm font-bold text-slate-700 dark:text-slate-200">Maintenance Schedule Updated</p>
+                <p class="text-xs text-slate-400">15 mins ago • System System</p>
             </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">
-                &gt;&gt; BOOTING SESSION... OK<br>
-                &gt;&gt; KERNEL LOADED... OK<br>
-                &gt;&gt; CONNECTING TO SATELLITE... LINK ESTABLISHED
-            </div>
-            
-            <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>
-        <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>
+        <button class="w-full mt-8 py-3 text-sm font-bold text-slate-500 hover:text-cyan-500 transition-colors">VIEW ALL LOGS →</button>
     </div>
   </div>
 </div>
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 1bf1303..6c67445 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -10,7 +10,7 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <!-- Scripts -->
     <script>
@@ -24,9 +24,7 @@
     </script>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="bg-[#d1d5db] dark:bg-[#1f2937] antialiased font-sans h-full selection:bg-amber-100 dark:selection:bg-amber-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
-    <!-- Retro Scanlines Effect -->
-    <div class="fixed inset-0 pointer-events-none z-[100] overflow-hidden opacity-[0.03] dark:opacity-[0.05] pointer-events-none bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div>
+<body class="bg-gray-50 dark:bg-[#0f172a] antialiased font-sans h-full selection:bg-indigo-100 dark:selection:bg-indigo-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
 
     <!-- Sidebar Overlay (Mobile) -->
     <div x-show="sidebarOpen"