style: 依據 frontend-design 規範進行視覺重構 (字體, 紋理, 玻璃質感, 動態)

2026-03-09 10:08:14 +08:00
parent fba4f26575
commit 1c9edf8e46
2 changed files with 76 additions and 7 deletions
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -3,6 +3,68 @@
@tailwind utilities;

@layer base {
+    :root {
+        --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        --font-display: 'Outfit', var(--font-sans);
+    }
+
+    html {
+        font-family: var(--font-sans);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .font-display {
+        font-family: var(--font-display);
+        letter-spacing: -0.02em;
+    }
+
+    /* Noise Texture */
+    .noise-overlay {
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+    }
+
+    /* Animations */
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .animate-fade-up {
+        animation: fadeUp 0.5s ease-out forwards;
+    }
+
+    .delay-100 {
+        animation-delay: 100ms;
+    }
+
+    .delay-200 {
+        animation-delay: 200ms;
+    }
+
+    .delay-300 {
+        animation-delay: 300ms;
+    }
+
+    .delay-400 {
+        animation-delay: 400ms;
+    }
+
+    .delay-500 {
+        animation-delay: 500ms;
+    }
+
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
@@ -47,4 +109,4 @@
    [x-cloak] {
        display: none !important;
    }
-}
+}
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -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>