9eb314f0e2
1. 使用 Pillow 將新品牌 Logo 自適應裁切並生成 512x512 PNG 格式的 starcloud_icon.png。 2. 生成包含多種主流尺寸（16x16 至 256x256）的全新 favicon.ico。 3. 於後台管理主模板 (admin.blade.php) 與登入視圖 (login.blade.php) 中加入 Favicon 宣告。 4. 替換後台主模板 (admin.blade.php)、全螢幕載入畫面 (loading-screen.blade.php) 以及 Logo 元件 (application-logo.blade.php) 中所有舊的 S1_cropped_transparent.png 為全新星雲品牌 icon。
54 lines
2.8 KiB
PHP
54 lines
2.8 KiB
PHP
<div x-data="{
|
|
loading: true
|
|
}"
|
|
x-on:show-global-loading.window="loading = true"
|
|
x-on:hide-global-loading.window="loading = false"
|
|
x-init="
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const simulateDelay = urlParams.get('simulate_loading');
|
|
const delay = simulateDelay ? parseInt(simulateDelay) : 300;
|
|
|
|
const hideLoading = () => setTimeout(() => loading = false, delay);
|
|
|
|
if (document.readyState === 'complete') {
|
|
hideLoading();
|
|
} else {
|
|
window.addEventListener('load', hideLoading);
|
|
// 安全保險：模擬模式下為 30 秒，正常模式下為 5 秒
|
|
const safetyTimeout = simulateDelay ? 30000 : 5000;
|
|
setTimeout(hideLoading, safetyTimeout);
|
|
}
|
|
"
|
|
x-show="loading"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/60 backdrop-blur-md"
|
|
style="display: none;"
|
|
x-cloak>
|
|
<div class="relative flex flex-col items-center animate-luxury-in">
|
|
<!-- Logo with Spinner Animation -->
|
|
<div class="relative w-28 h-28 mb-10 flex items-center justify-center">
|
|
<!-- Luxury Rotating Ring -->
|
|
<div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin" style="animation-duration: 1.5s;"></div>
|
|
<div class="absolute inset-2 rounded-full border border-white/5 animate-spin" style="animation-duration: 3s; direction: reverse;"></div>
|
|
|
|
<!-- Glow Effect -->
|
|
<div class="absolute inset-0 rounded-full bg-cyan-500/10 blur-xl animate-pulse"></div>
|
|
|
|
<!-- Central Logo -->
|
|
<div class="relative w-20 h-20 rounded-full bg-slate-900/80 backdrop-blur-xl border border-white/20 flex items-center justify-center shadow-2xl overflow-hidden p-1">
|
|
<img src="{{ asset('starcloud_icon.png') }}" alt="Logo" class="w-full h-full object-contain">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Animation -->
|
|
<div class="flex items-center gap-x-3 text-3xl font-bold text-white font-display tracking-tightest overflow-hidden mb-4">
|
|
<span class="animate-fade-in-right opacity-0" style="animation-delay: 100ms; animation-fill-mode: forwards;">Star</span>
|
|
<span class="text-cyan-400 animate-fade-in-right opacity-0" style="animation-delay: 300ms; animation-fill-mode: forwards;">Cloud</span>
|
|
</div>
|
|
|
|
<p class="text-[10px] font-black text-white/30 uppercase tracking-[0.6em] animate-pulse">{{ __('Systems Initializing') }}</p>
|
|
</div>
|
|
</div>
|