Update pricing UX, billing flows, and API rules
This commit is contained in:
Dwindi Ramadhana
144
app/resources/views/layouts/guest.blade.php
Normal file
144
app/resources/views/layouts/guest.blade.php
Normal file
@@ -0,0 +1,144 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user