145 lines
6.7 KiB
PHP
145 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>@yield('title', config('app.name', 'Dewemoji'))</title>
|
|
|
|
<link rel="icon" href="/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo/logo-mark-128.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/assets/logo/logo-mark-512.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logo/logo-mark-512.png">
|
|
|
|
<script>
|
|
(() => {
|
|
const stored = localStorage.getItem('dewemoji_theme');
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const mode = stored || (prefersDark ? 'dark' : 'light');
|
|
const root = document.documentElement;
|
|
root.classList.toggle('dark', mode === 'dark');
|
|
root.classList.toggle('theme-light', mode !== 'dark');
|
|
})();
|
|
</script>
|
|
|
|
<link rel="preload" href="/assets/fonts/PlusJakartaSans-Regular.ttf" as="font" type="font/ttf" crossorigin>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
|
|
display: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
sun: '#fcb735',
|
|
sunSoft: '#ffda9c',
|
|
ocean: '#2053ff',
|
|
oceanSoft: '#356cf0',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- Scripts -->
|
|
@vite(['resources/js/app.js'])
|
|
<style>
|
|
@font-face {
|
|
font-family: "Plus Jakarta Sans";
|
|
src: url("/assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Plus Jakarta Sans";
|
|
src: url("/assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Plus Jakarta Sans";
|
|
src: url("/assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Plus Jakarta Sans";
|
|
src: url("/assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 antialiased" style="font-family: 'Plus Jakarta Sans', system-ui, sans-serif;">
|
|
<div class="fixed inset-0 -z-10 pointer-events-none">
|
|
<div class="absolute top-[-15%] right-[-10%] w-[360px] h-[360px] bg-blue-500/10 blur-[120px]"></div>
|
|
<div class="absolute bottom-[-15%] left-[-10%] w-[420px] h-[420px] bg-amber-500/10 blur-[140px]"></div>
|
|
</div>
|
|
|
|
<div class="min-h-screen flex flex-col items-center justify-center px-6 py-12">
|
|
<div class="w-full max-w-md">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<a href="/" class="inline-flex items-center gap-3">
|
|
<span class="w-12 h-12 rounded-2xl bg-gradient-to-br from-white to-gray-200 dark:from-white/20 dark:to-white/5 flex items-center justify-center shadow-lg">
|
|
<img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
|
|
</span>
|
|
<span class="font-semibold text-lg">Dewemoji</span>
|
|
</a>
|
|
<button id="theme-toggle" class="w-10 h-10 rounded-full border border-slate-200 dark:border-white/10 bg-white/70 dark:bg-white/5 flex items-center justify-center text-slate-500 dark:text-slate-200 hover:text-slate-900 dark:hover:text-white transition-colors">
|
|
<span class="sr-only">Toggle theme</span>
|
|
<i data-lucide="moon" class="w-4 h-4" data-theme-icon="dark"></i>
|
|
<i data-lucide="sun" class="w-4 h-4 hidden" data-theme-icon="light"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full rounded-2xl border border-slate-200/70 dark:border-white/10 bg-white/90 dark:bg-slate-900/70 shadow-xl backdrop-blur px-6 py-6">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>lucide.createIcons();</script>
|
|
<script>
|
|
(() => {
|
|
const root = document.documentElement;
|
|
const toggle = document.getElementById('theme-toggle');
|
|
const iconDark = document.querySelector('[data-theme-icon="dark"]');
|
|
const iconLight = document.querySelector('[data-theme-icon="light"]');
|
|
|
|
const setTheme = (mode) => {
|
|
root.classList.toggle('dark', mode === 'dark');
|
|
root.classList.toggle('theme-light', mode !== 'dark');
|
|
if (iconDark && iconLight) {
|
|
iconDark.classList.toggle('hidden', mode !== 'dark');
|
|
iconLight.classList.toggle('hidden', mode === 'dark');
|
|
}
|
|
localStorage.setItem('dewemoji_theme', mode);
|
|
};
|
|
|
|
const stored = localStorage.getItem('dewemoji_theme');
|
|
if (stored) {
|
|
setTheme(stored);
|
|
} else {
|
|
setTheme(root.classList.contains('dark') ? 'dark' : 'light');
|
|
}
|
|
|
|
toggle?.addEventListener('click', () => {
|
|
const next = root.classList.contains('dark') ? 'light' : 'dark';
|
|
setTheme(next);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|