213 lines
14 KiB
PHP
213 lines
14 KiB
PHP
|
@php
|
||
|
|
$theme = request()->cookie('theme', 'dark-blue');
|
||
|
|
|
||
|
|
// 主題配置
|
||
|
|
$themes = [
|
||
|
|
'dark-blue' => [
|
||
|
|
'name' => '深色藍',
|
||
|
|
'body' => 'bg-gray-900 text-gray-100',
|
||
|
|
'sidebar' => 'bg-gray-800 border-gray-700',
|
||
|
|
'header' => 'bg-gray-800 border-gray-700',
|
||
|
|
'card' => 'bg-gray-800',
|
||
|
|
'accent' => 'indigo',
|
||
|
|
],
|
||
|
|
'dark-purple' => [
|
||
|
|
'name' => '深色紫',
|
||
|
|
'body' => 'bg-slate-900 text-slate-100',
|
||
|
|
'sidebar' => 'bg-slate-800 border-slate-700',
|
||
|
|
'header' => 'bg-slate-800 border-slate-700',
|
||
|
|
'card' => 'bg-slate-800',
|
||
|
|
'accent' => 'purple',
|
||
|
|
],
|
||
|
|
'dark-green' => [
|
||
|
|
'name' => '深色綠',
|
||
|
|
'body' => 'bg-zinc-900 text-zinc-100',
|
||
|
|
'sidebar' => 'bg-zinc-800 border-zinc-700',
|
||
|
|
'header' => 'bg-zinc-800 border-zinc-700',
|
||
|
|
'card' => 'bg-zinc-800',
|
||
|
|
'accent' => 'emerald',
|
||
|
|
],
|
||
|
|
'light-blue' => [
|
||
|
|
'name' => '亮色藍',
|
||
|
|
'body' => 'bg-gray-50 text-gray-900',
|
||
|
|
'sidebar' => 'bg-white border-gray-200',
|
||
|
|
'header' => 'bg-white border-gray-200',
|
||
|
|
'card' => 'bg-white',
|
||
|
|
'accent' => 'blue',
|
||
|
|
],
|
||
|
|
'light-green' => [
|
||
|
|
'name' => '亮色綠',
|
||
|
|
'body' => 'bg-green-50 text-gray-900',
|
||
|
|
'sidebar' => 'bg-white border-green-200',
|
||
|
|
'header' => 'bg-white border-green-200',
|
||
|
|
'card' => 'bg-white',
|
||
|
|
'accent' => 'green',
|
||
|
|
],
|
||
|
|
];
|
||
|
|
|
||
|
|
$currentTheme = $themes[$theme] ?? $themes['dark-blue'];
|
||
|
|
$isLight = in_array($theme, ['light-blue', 'light-green']);
|
||
|
|
@endphp
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="{{ $isLight ? '' : 'dark' }}">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||
|
|
|
||
|
|
<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" />
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||
|
|
</head>
|
||
|
|
<body class="font-sans antialiased {{ $currentTheme['body'] }}" x-data="{ sidebarOpen: false, themeOpen: false, dropdownOpen: false }" x-cloak>
|
||
|
|
<div class="min-h-screen flex">
|
||
|
|
<!-- Mobile Sidebar Backdrop -->
|
||
|
|
<div x-show="sidebarOpen"
|
||
|
|
x-cloak
|
||
|
|
@click="sidebarOpen = false"
|
||
|
|
x-transition:enter="transition-opacity ease-linear duration-300"
|
||
|
|
x-transition:enter-start="opacity-0"
|
||
|
|
x-transition:enter-end="opacity-100"
|
||
|
|
x-transition:leave="transition-opacity ease-linear duration-300"
|
||
|
|
x-transition:leave-start="opacity-100"
|
||
|
|
x-transition:leave-end="opacity-0"
|
||
|
|
class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<aside class="fixed inset-y-0 left-0 z-50 w-64 {{ $currentTheme['sidebar'] }} border-r lg:translate-x-0 lg:static lg:inset-0"
|
||
|
|
:class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}"
|
||
|
|
x-transition:enter="transition-transform ease-in-out duration-300"
|
||
|
|
x-transition:enter-start="-translate-x-full"
|
||
|
|
x-transition:enter-end="translate-x-0"
|
||
|
|
x-transition:leave="transition-transform ease-in-out duration-300"
|
||
|
|
x-transition:leave-start="translate-x-0"
|
||
|
|
x-transition:leave-end="-translate-x-full">
|
||
|
|
<div class="flex items-center justify-center h-16 {{ $currentTheme['header'] }} border-b">
|
||
|
|
<span class="text-2xl font-bold text-{{ $currentTheme['accent'] }}-500">Star Cloud</span>
|
||
|
|
</div>
|
||
|
|
<nav class="mt-5 px-2 space-y-1">
|
||
|
|
<a href="{{ route('admin.dashboard') }}"
|
||
|
|
@click="if (window.innerWidth < 1024) sidebarOpen = false"
|
||
|
|
class="group flex items-center px-2 py-2 text-base font-medium rounded-md {{ request()->routeIs('admin.dashboard') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}">
|
||
|
|
<svg class="mr-4 h-6 w-6 {{ request()->routeIs('admin.dashboard') ? 'text-white' : ($isLight ? 'text-gray-400 group-hover:text-gray-500' : 'text-gray-400 group-hover:text-gray-300') }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||
|
|
</svg>
|
||
|
|
儀表板
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- 應用程式管理 -->
|
||
|
|
<div class="mt-8">
|
||
|
|
<h3 class="px-3 text-xs font-semibold {{ $isLight ? 'text-gray-500' : 'text-gray-500' }} uppercase tracking-wider">
|
||
|
|
應用程式管理
|
||
|
|
</h3>
|
||
|
|
<div class="mt-1 space-y-1">
|
||
|
|
<a href="{{ route('profile.edit') }}"
|
||
|
|
@click="if (window.innerWidth < 1024) sidebarOpen = false"
|
||
|
|
class="group flex items-center px-2 py-2 text-base font-medium rounded-md {{ request()->routeIs('profile.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}">
|
||
|
|
<svg class="mr-4 h-6 w-6 {{ request()->routeIs('profile.*') ? 'text-white' : ($isLight ? 'text-gray-400 group-hover:text-gray-500' : 'text-gray-400 group-hover:text-gray-300') }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
|
|
</svg>
|
||
|
|
個人檔案
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 機台管理 -->
|
||
|
|
<div class="mt-8">
|
||
|
|
<h3 class="px-3 text-xs font-semibold {{ $isLight ? 'text-gray-500' : 'text-gray-500' }} uppercase tracking-wider">
|
||
|
|
機台管理
|
||
|
|
</h3>
|
||
|
|
<div class="mt-1 space-y-1">
|
||
|
|
<a href="{{ route('admin.machines.index') }}"
|
||
|
|
@click="if (window.innerWidth < 1024) sidebarOpen = false"
|
||
|
|
class="group flex items-center px-2 py-2 text-base font-medium rounded-md {{ request()->routeIs('admin.machines.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}">
|
||
|
|
<svg class="mr-4 h-6 w-6 {{ request()->routeIs('admin.machines.*') ? 'text-white' : ($isLight ? 'text-gray-400 group-hover:text-gray-500' : 'text-gray-400 group-hover:text-gray-300') }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 01-2 2v4a2 2 0 012 2h14a2 2 0 012-2v-4a2 2 0 01-2-2m-2-4h.01M17 16h.01" />
|
||
|
|
</svg>
|
||
|
|
機台列表
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- APP 管理 -->
|
||
|
|
<div class="mt-8">
|
||
|
|
<h3 class="px-3 text-xs font-semibold {{ $isLight ? 'text-gray-500' : 'text-gray-500' }} uppercase tracking-wider">
|
||
|
|
APP 管理
|
||
|
|
</h3>
|
||
|
|
<div class="mt-1 space-y-1">
|
||
|
|
<a href="{{ route('admin.app-configs.index') }}"
|
||
|
|
@click="if (window.innerWidth < 1024) sidebarOpen = false"
|
||
|
|
class="group flex items-center px-2 py-2 text-base font-medium rounded-md {{ request()->routeIs('admin.app-configs.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}">
|
||
|
|
<svg class="mr-4 h-6 w-6 {{ request()->routeIs('admin.app-configs.*') ? 'text-white' : ($isLight ? 'text-gray-400 group-hover:text-gray-500' : 'text-gray-400 group-hover:text-gray-300') }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||
|
|
</svg>
|
||
|
|
設定
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- Content -->
|
||
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
||
|
|
<!-- Topbar -->
|
||
|
|
<header class="flex items-center justify-between h-16 {{ $currentTheme['header'] }} border-b px-6">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<button @click="sidebarOpen = !sidebarOpen" class="{{ $isLight ? 'text-gray-600' : 'text-gray-400' }} focus:outline-none lg:hidden">
|
||
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<!-- Theme Selector -->
|
||
|
|
<div class="relative">
|
||
|
|
<button @click="themeOpen = !themeOpen" class="relative block h-8 w-8 rounded-full overflow-hidden shadow focus:outline-none {{ $isLight ? 'bg-gray-200' : 'bg-gray-700' }}">
|
||
|
|
<svg class="h-5 w-5 m-auto mt-1.5 {{ $isLight ? 'text-gray-600' : 'text-gray-300' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div x-show="themeOpen" x-cloak @click.away="themeOpen = false" class="absolute right-0 w-48 mt-2 {{ $currentTheme['card'] }} rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 z-50">
|
||
|
|
@foreach($themes as $key => $themeData)
|
||
|
|
<form method="POST" action="{{ route('admin.theme.update') }}">
|
||
|
|
@csrf
|
||
|
|
<input type="hidden" name="theme" value="{{ $key }}">
|
||
|
|
<button type="submit" class="block w-full text-left px-4 py-2 text-sm {{ $isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700' }} {{ $theme === $key ? 'font-bold' : '' }}">
|
||
|
|
{{ $themeData['name'] }} {{ $theme === $key ? '✓' : '' }}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- User Menu -->
|
||
|
|
<div class="ml-3 relative">
|
||
|
|
<button @click="dropdownOpen = !dropdownOpen" class="relative block h-8 w-8 rounded-full overflow-hidden shadow focus:outline-none">
|
||
|
|
<img class="h-full w-full object-cover" src="https://ui-avatars.com/api/?name={{ Auth::user()->name }}&background=random" alt="Avatar">
|
||
|
|
</button>
|
||
|
|
<div x-show="dropdownOpen" x-cloak @click.away="dropdownOpen = false" class="absolute right-0 w-48 mt-2 {{ $currentTheme['card'] }} rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 z-50">
|
||
|
|
<a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm {{ $isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700' }}">個人檔案</a>
|
||
|
|
<form method="POST" action="{{ route('logout') }}">
|
||
|
|
@csrf
|
||
|
|
<button type="submit" class="block w-full text-left px-4 py-2 text-sm {{ $isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700' }}">登出</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="flex-1 overflow-x-hidden overflow-y-auto {{ $currentTheme['body'] }} p-6">
|
||
|
|
@yield('content')
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|