style: 切換為極簡奢華風 (Minimal Luxury) - 移除復古風，導入 Outfit/Jakarta 與軟陰影設計
Some checks failed
star-cloud-deploy-demo / deploy-demo (push) Has been cancelled
Some checks failed
star-cloud-deploy-demo / deploy-demo (push) Has been cancelled
This commit is contained in:
@@ -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">
|
||||
>> BOOTING SESSION... OK<br>
|
||||
>> KERNEL LOADED... OK<br>
|
||||
>> 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>
|
||||
|
||||
Reference in New Issue
Block a user