sepehr/Keep
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Keep/code.html
sepehr ddb67ba9e5 fix: unify theme system - fix theme switching persistence 
- 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
2026-01-18 22:33:41 +01:00

329 lines
19 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Keep - Voyage Notebook</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Theme Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#356ac0",
"background-light": "#f7f7f8",
"background-dark": "#1a1d23",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
},
},
}
</script>
<style>
/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb {
background: #475569;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white overflow-hidden h-screen flex flex-col">
<!-- Top Navigation -->
<header class="flex-none flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white dark:bg-[#1e2128] px-6 py-3 z-20">
<div class="flex items-center gap-8">
<div class="flex items-center gap-3 text-slate-900 dark:text-white cursor-pointer group">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white shadow-sm group-hover:shadow-md transition-all">
<span class="material-symbols-outlined text-[20px]">sticky_note_2</span>
</div>
<h2 class="text-xl font-bold leading-tight tracking-tight">KEEP</h2>
</div>
<label class="hidden md:flex flex-col min-w-40 w-96 !h-10">
<div class="flex w-full flex-1 items-stretch rounded-xl h-full bg-slate-100 dark:bg-slate-800 focus-within:ring-2 focus-within:ring-primary/20 transition-all">
<div class="text-slate-500 dark:text-slate-400 flex items-center justify-center pl-4">
<span class="material-symbols-outlined text-[20px]">search</span>
</div>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl bg-transparent border-none text-slate-900 dark:text-white placeholder:text-slate-500 dark:placeholder:text-slate-400 px-3 text-sm font-medium focus:ring-0" placeholder="Search notes, labels, and more..." value=""/>
</div>
</label>
</div>
<div class="flex flex-1 justify-end gap-4 items-center">
<button class="flex items-center justify-center size-10 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 ring-2 ring-white dark:ring-slate-700 cursor-pointer shadow-sm" data-alt="User profile picture showing a smiling professional" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAx5AWVvD2IbF2GRqhvykTAj9Dzgx83v2nT68hFLIvpiLu0Q0QBVHvnp0nSmvl9WcIIrLrHcSDp-eZUXB9Q8syhMZtAOKr5d52VkP8wzmV7Woj2Y2T5L5TtfDNkPQyl29GMAC_QXJcDOqcdvr0KlTVB6ebdUp4K6FVv9KpgiClWs45gRrz6mmGhBzkCtHtNzGgvl0ne8PAEiJG2jNaWf1_FrHfiicibaT8dDg3ZsuwEkPNY89CEKc12xAV4-pzcU3Ww1-bp1LA81IqO");'></div>
</div>
</header>
<!-- Main Layout -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar Navigation -->
<aside class="w-64 flex-none flex flex-col bg-white dark:bg-[#1e2128] border-r border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex">
<div class="p-4 flex flex-col gap-6">
<!-- Section: Notebooks -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between px-3 mb-2">
<h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Notebooks</h3>
<button class="text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-[18px]">add</span>
</button>
</div>
<!-- Inactive Item -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 group transition-colors" href="#">
<span class="material-symbols-outlined text-[20px] text-slate-400 group-hover:text-primary">book</span>
<span class="text-sm font-medium">Personal</span>
</a>
<!-- Active Item: Voyage -->
<div class="flex flex-col bg-primary/5 dark:bg-primary/10 rounded-lg overflow-hidden border-l-4 border-primary">
<div class="flex items-center justify-between px-3 py-2.5">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-[20px] text-primary">flight_takeoff</span>
<span class="text-sm font-bold text-primary">Voyage</span>
</div>
<span class="material-symbols-outlined text-[18px] text-primary/60">expand_more</span>
</div>
<!-- Contextual Labels Tree -->
<div class="flex flex-col pb-2">
<a class="flex items-center gap-3 pl-10 pr-3 py-1.5 hover:bg-primary/10 transition-colors" href="#">
<span class="material-symbols-outlined text-[16px] text-primary/70">label</span>
<span class="text-xs font-medium text-slate-600 dark:text-slate-300">#hôtels <span class="opacity-50 ml-1">(3)</span></span>
</a>
<a class="flex items-center gap-3 pl-10 pr-3 py-1.5 hover:bg-primary/10 transition-colors" href="#">
<span class="material-symbols-outlined text-[16px] text-primary/70">label</span>
<span class="text-xs font-medium text-slate-600 dark:text-slate-300">#vols</span>
</a>
<a class="flex items-center gap-3 pl-10 pr-3 py-1.5 hover:bg-primary/10 transition-colors" href="#">
<span class="material-symbols-outlined text-[16px] text-primary/70">label</span>
<span class="text-xs font-medium text-slate-600 dark:text-slate-300">#restos</span>
</a>
<button class="flex items-center gap-2 pl-10 pr-3 py-1.5 mt-1 text-primary hover:underline group">
<span class="material-symbols-outlined text-[16px] group-hover:scale-110 transition-transform">add_circle</span>
<span class="text-xs font-bold">Labels</span>
</button>
</div>
</div>
<!-- Inactive Item -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 group transition-colors" href="#">
<span class="material-symbols-outlined text-[20px] text-slate-400 group-hover:text-primary">work</span>
<span class="text-sm font-medium">Work Projects</span>
</a>
</div>
<!-- Section: Smart Lists -->
<div class="flex flex-col gap-2 mt-4">
<div class="flex items-center justify-between px-3 mb-1">
<h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Smart Views</h3>
</div>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined text-[20px] text-amber-500">star</span>
<span class="text-sm font-medium">Favorites</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined text-[20px] text-emerald-500">check_circle</span>
<span class="text-sm font-medium">Tasks</span>
</a>
</div>
</div>
<!-- Bottom Sidebar Footer -->
<div class="mt-auto p-4 border-t border-slate-200 dark:border-slate-800">
<div class="bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-slate-800 dark:to-slate-800 p-3 rounded-lg border border-blue-100 dark:border-slate-700">
<div class="flex gap-2 items-start">
<span class="material-symbols-outlined text-primary text-sm mt-0.5">auto_awesome</span>
<div>
<p class="text-xs font-semibold text-slate-800 dark:text-white mb-1">AI Suggestions</p>
<p class="text-[10px] leading-relaxed text-slate-500 dark:text-slate-400">2 new suggestions for "Voyage"</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6 md:p-10 scroll-smooth">
<div class="max-w-6xl mx-auto flex flex-col gap-8">
<!-- Page Header -->
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2 text-slate-400 text-sm font-medium mb-1">
<span>Notebooks</span>
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
<span class="text-primary">Voyage</span>
</div>
<h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight flex items-center gap-3">
<span class="bg-blue-100 dark:bg-blue-900/30 p-2 rounded-xl text-3xl shadow-sm">✈️</span>
Voyage
</h1>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-4 h-10 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 text-sm font-bold shadow-sm transition-all">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
Filter
</button>
<button class="flex items-center gap-2 px-5 h-10 rounded-xl bg-primary hover:bg-blue-700 text-white text-sm font-bold shadow-lg shadow-blue-200 dark:shadow-none transition-all">
<span class="material-symbols-outlined text-[20px]">add</span>
Add Note
</button>
</div>
</div>
<!-- Notes Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max">
<!-- Note 1: Hotel (Image Heavy) -->
<div class="group relative flex flex-col rounded-2xl overflow-hidden bg-white dark:bg-slate-800 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-700 h-[380px]">
<div class="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-white/90 dark:bg-black/50 backdrop-blur rounded-full p-2 text-slate-700 dark:text-white hover:text-primary">
<span class="material-symbols-outlined text-[20px]">more_horiz</span>
</button>
</div>
<!-- Image Area -->
<div class="h-3/5 w-full bg-cover bg-center relative" data-alt="Modern hotel room interior in Tokyo with city view" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCqhJ4ymvLpmq6GEpd028c8nHaBrwdD0Bpe3AKqczkRoukOKzwg3fAgjVkAIMbrBEWAkD6vPXLD0R7X7IoJNvxGUD4eH7ppAiBNHa6U2L-7Q7Uyw4u1qOLkEBCaOtMlrz88yHmj7f53gjJsEWlhVTkdY40FuHibMdQDSPDvJgR9uYJNsR1dviW485D0t8UzhvQ1JAhgguB2zigyjLczJuqAenwJAb6WueHNmc6_1VXrJlTCY8UZNhqcZco9m3pfyvN51JoklPQF-h7I");'>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-4 left-4 right-4">
<h3 class="text-white text-xl font-bold leading-tight drop-shadow-md">Hotel Tokyo Shibuya Excel</h3>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 p-5 flex flex-col justify-between">
<div class="flex flex-col gap-2">
<div class="flex items-start gap-2 text-slate-500 dark:text-slate-400 text-sm">
<span class="material-symbols-outlined text-[18px] mt-0.5">schedule</span>
<p class="leading-relaxed">Check-in 14:00. <br/>Reservation #882910-B confirmed.</p>
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mt-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 text-xs font-semibold">
<span class="material-symbols-outlined text-[14px]">label</span> #hôtels
</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-xs font-semibold">
<span class="material-symbols-outlined text-[14px]">confirmation_number</span> #réservations
</span>
</div>
</div>
</div>
<!-- Note 2: Flights (Image Heavy) -->
<div class="group relative flex flex-col rounded-2xl overflow-hidden bg-white dark:bg-slate-800 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-700 h-[380px]">
<div class="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-white/90 dark:bg-black/50 backdrop-blur rounded-full p-2 text-slate-700 dark:text-white hover:text-primary">
<span class="material-symbols-outlined text-[20px]">more_horiz</span>
</button>
</div>
<!-- Image Area -->
<div class="h-3/5 w-full bg-cover bg-center relative" data-alt="View of airplane wing through window above clouds" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCT-uqaSrSOa5CjSHztN-_c-nvYt4bXwiHm0pLx5kRUKIk6Urhy8FQBfIrUENkpDrZXP3nRoyVj8lnLSEGm7FgZqJ-4vGUn7GwEHa99GgYABxDPHiIbCP8Q3VfUarykAnRM9kM2jZHBHQllGBZ8FH8nLAgVQKek8lCMRxufKee8Tom089R4buYhVwgbJfvGLzZjMnbxryTVZfSNqRh1Xw3Nm2jW-xFzzfrnBkdlndQaLgNybZYcjHvX3u1Kj6xw-oi_ddY0i7kN2Zjo");'>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-4 left-4 right-4">
<h3 class="text-white text-xl font-bold leading-tight drop-shadow-md">Vols JAL Tokyo-Paris</h3>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 p-5 flex flex-col justify-between">
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-2 mb-1">
<div class="text-xs font-bold text-slate-400">JAL 045</div>
<div class="text-xs font-bold text-slate-400">12h 35m</div>
</div>
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="text-lg font-bold text-slate-800 dark:text-white">HND</span>
<span class="text-xs text-slate-500">10:35 AM</span>
</div>
<span class="material-symbols-outlined text-slate-300">flight_takeoff</span>
<div class="flex flex-col items-end">
<span class="text-lg font-bold text-slate-800 dark:text-white">CDG</span>
<span class="text-xs text-slate-500">04:15 PM</span>
</div>
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mt-3">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 text-xs font-semibold">
<span class="material-symbols-outlined text-[14px]">flight</span> #vols
</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-xs font-semibold">
<span class="material-symbols-outlined text-[14px]">confirmation_number</span> #réservations
</span>
</div>
</div>
</div>
<!-- Note 3: Restaurants (Text Focused Variant) -->
<div class="group relative flex flex-col rounded-2xl overflow-hidden bg-[#fffdf5] dark:bg-slate-800 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-700 h-[380px]">
<div class="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-white/50 backdrop-blur rounded-full p-2 text-slate-700 dark:text-white hover:text-primary">
<span class="material-symbols-outlined text-[20px]">more_horiz</span>
</button>
</div>
<!-- Header Image (Smaller) -->
<div class="h-32 w-full bg-cover bg-center relative" data-alt="Delicious bowl of ramen with chopsticks" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDZp6qIh1-mIH6L3yW3958JEctXWqNfkbWjswgVkH9JfiuWZ1sLS6MwUFbxi8Yr_xHowWmXJFBWmxpNoaZBHRKDzJdrgRxSXQdavkKNWU1V2c9fRopJle8FcrV9jD5PQmnbHmZc_l6gla58kKXym8Wn4rqlLsz99jFQzNZEzllWkGs8-Xrb0Tna0KIC2o6RE7NadPw1wmlZE6IzyXI7QfcwQB8E8dWiqwW3PtAlygq5fAqeWvjxCGUbBj3kDyeoUaPq5n9qeB6GTlBG");'>
<div class="absolute inset-0 bg-black/20"></div>
</div>
<!-- Content Area -->
<div class="flex-1 p-6 flex flex-col">
<h3 class="text-slate-900 dark:text-white text-xl font-bold mb-4">Restaurants à tester</h3>
<ul class="flex flex-col gap-3 flex-1 overflow-hidden">
<li class="flex items-start gap-3">
<div class="size-5 rounded border border-orange-300 bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center shrink-0 mt-0.5">
<span class="block size-2.5 rounded-sm bg-orange-400"></span>
</div>
<div class="flex flex-col">
<span class="text-sm font-semibold text-slate-800 dark:text-slate-200">Sushi Dai</span>
<span class="text-xs text-slate-500">Toyosu Market, 5am line!</span>
</div>
</li>
<li class="flex items-start gap-3">
<div class="size-5 rounded border border-orange-300 bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center shrink-0 mt-0.5">
<span class="block size-2.5 rounded-sm bg-white border border-orange-300"></span>
</div>
<div class="flex flex-col">
<span class="text-sm font-semibold text-slate-800 dark:text-slate-200">Rokurinsha</span>
<span class="text-xs text-slate-500">Ramen Street, Tokyo Station</span>
</div>
</li>
<li class="flex items-start gap-3 opacity-60">
<div class="size-5 rounded border border-slate-300 bg-slate-50 flex items-center justify-center shrink-0 mt-0.5">
<span class="material-symbols-outlined text-[14px] text-slate-400">check</span>
</div>
<span class="text-sm font-medium text-slate-500 line-through">Starbucks Reserve</span>
</li>
</ul>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-xs font-semibold">
<span class="material-symbols-outlined text-[14px]">restaurant</span> #restos
</span>
</div>
</div>
</div>
<!-- Placeholder for New Note -->
<div class="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-transparent p-6 hover:bg-slate-50 dark:hover:bg-slate-800/50 hover:border-primary/50 transition-all cursor-pointer h-[380px] group text-slate-400 dark:text-slate-500">
<div class="size-16 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-[32px] text-slate-400 group-hover:text-primary">add_a_photo</span>
</div>
<p class="font-medium">Drag images here</p>
<p class="text-xs mt-1">or click to create a note</p>
</div>
</div>
</div>
</main>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink