mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 切換為極簡奢華風 (Minimal Luxury) - 移除復古風，導入 Outfit/Jakarta 與軟陰影設計
Some checks failed
star-cloud-deploy-demo / deploy-demo (push) Has been cancelled
Details

Browse Source
This commit is contained in:
sky121113
2026-03-09 10:20:58 +08:00
parent c1b40185eb
commit 80436caee7
2 changed files with 59 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
resources/views/admin/dashboard.blade.php
View File

@@ -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>
</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>
<!-- 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="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 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="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 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="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>

6
resources/views/layouts/admin.blade.php
View File

@@ -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"