sepehr
ddb67ba9e5
- Unified localStorage key to 'theme-preference' across all components
- Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference')
- Added localStorage hybrid persistence for instant theme changes
- Removed router.refresh() which was causing stale data revert
- Replaced Blue theme with Sepia
- Consolidated auth() calls to prevent race conditions
- Updated UserSettingsData types to include all themes
264 lines
15 KiB
HTML
264 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Travel Notebook View</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#249da8",
|
|
"background-light": "#fafafa",
|
|
"background-dark": "#16181d",
|
|
"surface-light": "#ffffff",
|
|
"surface-dark": "#23262d",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Manrope", "sans-serif"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-[#0f191a] dark:text-white font-display transition-colors duration-200">
|
|
<div class="relative flex flex-col h-screen overflow-hidden max-w-md mx-auto bg-background-light dark:bg-background-dark shadow-2xl border-x dark:border-white/5">
|
|
<!-- Navigation Drawer (Implemented as an overlay for mobile context) -->
|
|
<!-- This is conceptually the "Sidebar" mentioned, accessible via the menu button -->
|
|
<div class="absolute inset-0 z-50 w-full h-full pointer-events-none" id="nav-drawer">
|
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-[2px] opacity-0 transition-opacity"></div>
|
|
<!-- Drawer Content Panel -->
|
|
<div class="absolute left-0 top-0 h-full w-[85%] max-w-[320px] bg-background-light dark:bg-background-dark transform -translate-x-full transition-transform shadow-2xl flex flex-col pointer-events-auto">
|
|
<div class="p-6 pt-12">
|
|
<h2 class="text-2xl font-extrabold mb-8 text-primary">Notebooks</h2>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer text-slate-500 dark:text-slate-400">
|
|
<span class="material-symbols-outlined">person</span>
|
|
<span class="font-bold">Personal</span>
|
|
</li>
|
|
<li class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer text-slate-500 dark:text-slate-400">
|
|
<span class="material-symbols-outlined">work</span>
|
|
<span class="font-bold">Work</span>
|
|
</li>
|
|
<!-- Active State -->
|
|
<li class="flex flex-col gap-3 px-4 py-3 rounded-xl bg-primary/10 text-primary cursor-pointer border-l-4 border-primary">
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined font-variation-fill">flight</span>
|
|
<span class="font-bold">Travel</span>
|
|
</div>
|
|
<!-- Nested Labels specific to Travel -->
|
|
<div class="pl-10 flex flex-col gap-2">
|
|
<span class="text-xs font-semibold text-primary/80">#Hotels</span>
|
|
<span class="text-xs font-semibold text-primary/80">#Flights</span>
|
|
<span class="text-xs font-semibold text-primary/80">#Restaurants</span>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer text-slate-500 dark:text-slate-400">
|
|
<span class="material-symbols-outlined">lightbulb</span>
|
|
<span class="font-bold">Ideas</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Top App Bar -->
|
|
<header class="flex items-center justify-between px-4 pt-4 pb-2 bg-background-light dark:bg-background-dark sticky top-0 z-20">
|
|
<button class="p-2 -ml-2 rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors text-[#0f191a] dark:text-white">
|
|
<span class="material-symbols-outlined text-[28px]">menu</span>
|
|
</button>
|
|
<h1 class="text-xl font-extrabold tracking-tight">Travel</h1>
|
|
<div class="flex items-center gap-1">
|
|
<button class="p-2 rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors text-[#0f191a] dark:text-white">
|
|
<span class="material-symbols-outlined text-[24px]">search</span>
|
|
</button>
|
|
<button class="p-2 -mr-2 rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors text-[#0f191a] dark:text-white">
|
|
<span class="material-symbols-outlined text-[24px]">more_horiz</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Horizontal Filter Chips (Contextual Labels) -->
|
|
<div class="w-full overflow-x-auto hide-scrollbar pl-4 pb-4 pt-1 bg-background-light dark:bg-background-dark sticky top-[60px] z-10 border-b border-transparent dark:border-white/5">
|
|
<div class="flex gap-2 pr-4">
|
|
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-primary px-5 shadow-lg shadow-primary/25 transition-transform active:scale-95">
|
|
<span class="material-symbols-outlined text-white text-[18px]">check</span>
|
|
<p class="text-white text-sm font-bold">All</p>
|
|
</button>
|
|
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 px-4 hover:border-primary/50 transition-colors">
|
|
<p class="text-[#0f191a] dark:text-slate-300 text-sm font-medium">#Hotels</p>
|
|
</button>
|
|
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 px-4 hover:border-primary/50 transition-colors">
|
|
<p class="text-[#0f191a] dark:text-slate-300 text-sm font-medium">#Flights</p>
|
|
</button>
|
|
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 px-4 hover:border-primary/50 transition-colors">
|
|
<p class="text-[#0f191a] dark:text-slate-300 text-sm font-medium">#Restaurants</p>
|
|
</button>
|
|
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 px-4 hover:border-primary/50 transition-colors">
|
|
<p class="text-[#0f191a] dark:text-slate-300 text-sm font-medium">#Sightseeing</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Main Scrollable Content -->
|
|
<main class="flex-1 overflow-y-auto p-4 hide-scrollbar pb-24">
|
|
<!-- Contextual AI Suggestion -->
|
|
<div class="mb-6 rounded-2xl bg-gradient-to-br from-primary/5 to-transparent border border-primary/10 p-4 relative overflow-hidden group/ai">
|
|
<div class="absolute top-0 right-0 p-3 opacity-20 group-hover/ai:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined text-primary text-4xl">auto_awesome</span>
|
|
</div>
|
|
<div class="flex gap-3 relative z-10">
|
|
<div class="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center text-primary shrink-0">
|
|
<span class="material-symbols-outlined">auto_awesome</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-800 dark:text-white">Smart Context</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed pr-8">
|
|
Based on your recent emails, I found a flight confirmation for Tokyo. <button class="text-primary font-bold hover:underline">Create note?</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Notes Grid (Masonry-ish Layout) -->
|
|
<div class="flex flex-col gap-4">
|
|
<!-- Hero Note Card (Image based) -->
|
|
<div class="w-full relative rounded-2xl overflow-hidden shadow-sm group cursor-pointer h-[240px]">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10"></div>
|
|
<img alt="Tokyo" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Tokyo street at night with neon lights and rain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1UqBzYauQA-Rppews9zO72GChVBUZkkk06jik42_hfx6uuc5ut5fWB_Jo4eKUG0zCaimjVSxAun9_Qx3jmDcs76WmlF1V4ByHDrLr99R5Cosw-BwAhH1CF_RN4fb9A_m28buc-shKEalKFfTdhq2QIeztdMwKR1eDe3DlS_cYO4p8mXvrIsB8-nwKH4bxEnRbO0-2V6_Q8bhOyJHuOr4dWd7fLzG2QXZFBJpz9HFJHTJvZhftSqmmbWPDDHCMKZ8FFTA-IsyJHvs"/>
|
|
<div class="absolute bottom-0 left-0 right-0 p-5 z-20 flex flex-col gap-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold bg-primary text-white backdrop-blur-md">#Flights</span>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold bg-white/20 text-white backdrop-blur-md">Next Up</span>
|
|
</div>
|
|
<h2 class="text-white text-2xl font-bold leading-tight">Tokyo Trip Planning</h2>
|
|
<p class="text-white/80 text-sm font-medium line-clamp-1">Flight JL005 departs at 11:00 AM from Terminal 3.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<!-- Left Column -->
|
|
<div class="flex-1 flex flex-col gap-4">
|
|
<!-- Hotel Note Card -->
|
|
<div class="bg-surface-light dark:bg-surface-dark p-4 rounded-2xl shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none border border-slate-100 dark:border-white/5 flex flex-col h-auto cursor-pointer hover:border-primary/30 transition-colors">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<span class="text-[10px] font-bold text-amber-600 bg-amber-50 dark:bg-amber-500/10 dark:text-amber-400 px-2 py-1 rounded-md">#HOTELS</span>
|
|
</div>
|
|
<h3 class="text-base font-bold text-slate-800 dark:text-white leading-tight mb-2">Kyoto Ryokan Reservation</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 line-clamp-3">
|
|
Booking ref: #88219. Remember to check in before 6 PM for the Kaiseki dinner service.
|
|
</p>
|
|
<div class="mt-3 flex items-center gap-1 text-[10px] text-slate-400">
|
|
<span class="material-symbols-outlined text-[12px]">calendar_today</span>
|
|
<span>Oct 14 - Oct 17</span>
|
|
</div>
|
|
</div>
|
|
<!-- Quick List Note -->
|
|
<div class="bg-surface-light dark:bg-surface-dark p-4 rounded-2xl shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none border border-slate-100 dark:border-white/5 flex flex-col h-auto cursor-pointer hover:border-primary/30 transition-colors">
|
|
<h3 class="text-sm font-bold text-slate-800 dark:text-white mb-2">Essential Packing</h3>
|
|
<ul class="space-y-1.5">
|
|
<li class="flex items-center gap-2">
|
|
<div class="w-4 h-4 rounded-full border-2 border-slate-200 dark:border-slate-600"></div>
|
|
<span class="text-xs text-slate-600 dark:text-slate-300">Power Adapter</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white text-[10px]">check</span>
|
|
</div>
|
|
<span class="text-xs text-slate-400 line-through">Passport</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="w-4 h-4 rounded-full border-2 border-slate-200 dark:border-slate-600"></div>
|
|
<span class="text-xs text-slate-600 dark:text-slate-300">JR Pass Voucher</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column -->
|
|
<div class="flex-1 flex flex-col gap-4">
|
|
<!-- Restaurant Note with Image -->
|
|
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none border border-slate-100 dark:border-white/5 overflow-hidden cursor-pointer group hover:border-primary/30 transition-colors">
|
|
<div class="h-28 overflow-hidden relative">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" data-alt="Close up of delicious ramen bowl" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC0UGq9F4cXnmev9XvRA7CYlNnPetKscWLnA0o_aljkz0XVIgMJN-Ri2Ay1s2rsgVW5N5-6jztjN3EtC0XCtGBlpowBxvH2iufiT6fXuw3r9M4SYqifXXxh5Dpnz-6nh_ogYUKCwo8FfIoarDOf_osCoMZV60lj1x1LSUEl0bDaJlalo-h0o7kXee3cS7-BuyE7lGvSO6x8gOnkT9PEBYN_HFmQsS5PTEZ5ECSDBB5EofCT2rd6xMYaeaU-NSWjT-6EIxeX789rxOQ"/>
|
|
<div class="absolute top-2 right-2 bg-white/90 dark:bg-black/60 p-1 rounded-full backdrop-blur-sm shadow-sm">
|
|
<span class="material-symbols-outlined text-[14px] text-orange-400 block font-variation-fill">star</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<span class="text-[10px] font-bold text-rose-500 bg-rose-50 dark:bg-rose-500/10 px-2 py-1 rounded-md mb-2 inline-block">#FOOD</span>
|
|
<h3 class="text-sm font-bold text-slate-800 dark:text-white leading-tight mb-1">Ramen Spots</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400">Ichiran, Afuri & Fuunji...</p>
|
|
</div>
|
|
</div>
|
|
<!-- Idea Note -->
|
|
<div class="bg-[#e9f1f2] dark:bg-primary/5 p-4 rounded-2xl border border-primary/10 flex flex-col h-auto cursor-pointer">
|
|
<span class="material-symbols-outlined text-primary mb-2">lightbulb</span>
|
|
<h3 class="text-sm font-bold text-slate-800 dark:text-white mb-1">Souvenir Ideas</h3>
|
|
<p class="text-xs text-slate-600 dark:text-slate-400">
|
|
Matcha Kit, Ceramics, KitKats.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Spacer -->
|
|
<div class="h-8"></div>
|
|
</main>
|
|
<!-- Floating Action Button (New Note) -->
|
|
<div class="absolute bottom-[90px] right-5 z-30">
|
|
<button class="flex items-center justify-center w-14 h-14 bg-primary text-white rounded-2xl shadow-lg shadow-primary/30 hover:scale-105 active:scale-95 transition-all group">
|
|
<span class="material-symbols-outlined text-[32px] group-hover:rotate-90 transition-transform duration-300">add</span>
|
|
</button>
|
|
</div>
|
|
<!-- Bottom Tab Navigation -->
|
|
<nav class="bg-surface-light/90 dark:bg-surface-dark/90 backdrop-blur-lg border-t border-slate-200 dark:border-white/5 absolute bottom-0 w-full z-40 pb-safe">
|
|
<div class="flex justify-around items-center h-[72px] pb-2">
|
|
<button class="flex flex-col items-center justify-center w-16 gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
|
<span class="material-symbols-outlined text-[26px]">home</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center w-16 gap-1 text-primary">
|
|
<span class="material-symbols-outlined text-[26px] font-variation-fill">folder</span>
|
|
<span class="text-[10px] font-bold">Notebooks</span>
|
|
</button>
|
|
<div class="w-8"></div> <!-- Spacer for visual balance near FAB if needed, strictly not needed here but helps spacing -->
|
|
<button class="flex flex-col items-center justify-center w-16 gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
|
<span class="material-symbols-outlined text-[26px]">search</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center w-16 gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
|
<span class="material-symbols-outlined text-[26px]">settings</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- Safe Area Spacer for iPhone Bottom Bar -->
|
|
<div class="bg-transparent h-[env(safe-area-inset-bottom)] w-full"></div>
|
|
</div>
|
|
<style>
|
|
/* Custom Utility for filled icons */
|
|
.font-variation-fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
/* Safe area support */
|
|
.pb-safe {
|
|
padding-bottom: env(safe-area-inset-bottom, 20px);
|
|
}
|
|
</style>
|
|
</body></html> |