style: 依據 frontend-design 規範進行視覺重構 (字體, 紋理, 玻璃質感, 動態)
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 40s

This commit is contained in:
2026-03-09 10:08:14 +08:00
parent fba4f26575
commit 1c9edf8e46
2 changed files with 76 additions and 7 deletions

View File

@@ -8,8 +8,9 @@
<title>{{ config('app.name', 'Star Cloud') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />
<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=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- Scripts -->
<script>
@@ -23,7 +24,13 @@
</script>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-50 dark:bg-slate-900 antialiased font-sans h-full" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
<body class="bg-gray-50 dark:bg-slate-950 antialiased font-sans h-full selection:bg-blue-100 dark:selection:bg-blue-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
<!-- Design Elements -->
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden opacity-30 dark:opacity-40">
<div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-blue-500/10 dark:bg-blue-600/5 blur-[120px] rounded-full"></div>
<div class="absolute top-[20%] -right-[10%] w-[35%] h-[35%] bg-purple-500/10 dark:bg-purple-600/5 blur-[120px] rounded-full"></div>
</div>
<div class="noise-overlay fixed inset-0 pointer-events-none z-[9999] opacity-[0.03] dark:opacity-[0.05]"></div>
<!-- Sidebar Overlay (Mobile) -->
<div x-show="sidebarOpen"
@@ -38,7 +45,7 @@
x-cloak></div>
<!-- ========== HEADER ========== -->
<header class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 sm:py-4 lg:pl-64 dark:bg-gray-800 dark:border-gray-700">
<header class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white/80 backdrop-blur-md border-b border-gray-200/50 text-sm py-2.5 sm:py-4 lg:pl-64 dark:bg-slate-900/80 dark:border-gray-800/50">
<nav class="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8" aria-label="Global">
<div class="mr-5 lg:mr-0 lg:hidden">
<a class="flex-none text-xl font-semibold dark:text-white" href="#" aria-label="Brand">Star Cloud</a>
@@ -144,7 +151,7 @@
<!-- Sidebar -->
<div id="application-sidebar"
class="fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-gray-200 pt-7 pb-10 overflow-y-auto transition-transform duration-300 transform lg:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
class="fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white/80 backdrop-blur-xl border-r border-gray-200/50 pt-7 pb-10 overflow-y-auto transition-transform duration-300 transform lg:translate-x-0 dark:bg-slate-900/80 dark:border-gray-800/50 shadow-sm"
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'">
<!-- Close Button (Mobile) -->
<button type="button" @click="sidebarOpen = false" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 lg:hidden dark:text-gray-400 dark:hover:text-gray-200">
@@ -168,7 +175,7 @@
<!-- Content -->
<div class="w-full pt-10 px-4 sm:px-6 md:px-8 lg:pl-72">
<main>
<main class="animate-fade-up">
@yield('content')
</main>
</div>