230 lines
13 KiB
HTML
230 lines
13 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>Serene Path | AI Assistant</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus_Jakarta_Sans:wght@400;500;600;700&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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"inverse-surface": "#0b0f0f",
|
|
"primary-container": "#cbe9db",
|
|
"on-secondary-container": "#40536d",
|
|
"on-primary-fixed": "#2a443b",
|
|
"inverse-on-surface": "#9b9d9d",
|
|
"surface-container": "#eaefee",
|
|
"error-container": "#fa746f",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-variant": "#dde4e3",
|
|
"secondary-fixed": "#d3e3ff",
|
|
"tertiary-fixed-dim": "#e5d8f0",
|
|
"secondary-container": "#d3e3ff",
|
|
"on-primary-fixed-variant": "#466156",
|
|
"surface-bright": "#f8faf9",
|
|
"on-tertiary": "#fef6ff",
|
|
"on-secondary-fixed-variant": "#4a5d77",
|
|
"surface-container-highest": "#dde4e3",
|
|
"on-surface": "#2d3433",
|
|
"surface-tint": "#4a655a",
|
|
"tertiary": "#655b6f",
|
|
"error": "#a83836",
|
|
"tertiary-fixed": "#f4e6ff",
|
|
"surface-container-low": "#f1f4f3",
|
|
"on-background": "#2d3433",
|
|
"on-secondary": "#f8f8ff",
|
|
"secondary": "#4e607b",
|
|
"error-dim": "#67040d",
|
|
"surface": "#f8faf9",
|
|
"on-primary-container": "#3d574d",
|
|
"surface-dim": "#d4dbda",
|
|
"on-secondary-fixed": "#2e405a",
|
|
"on-error-container": "#6e0a12",
|
|
"outline": "#757c7b",
|
|
"on-tertiary-fixed": "#4a4154",
|
|
"secondary-dim": "#42546f",
|
|
"on-surface-variant": "#596060",
|
|
"primary": "#4a655a",
|
|
"on-error": "#fff7f6",
|
|
"surface-container-high": "#e4e9e8",
|
|
"secondary-fixed-dim": "#c2d6f5",
|
|
"tertiary-dim": "#594f63",
|
|
"primary-fixed-dim": "#bedbce",
|
|
"on-tertiary-fixed-variant": "#675d71",
|
|
"outline-variant": "#acb3b2",
|
|
"on-tertiary-container": "#5c5367",
|
|
"primary-dim": "#3e594e",
|
|
"tertiary-container": "#f4e6ff",
|
|
"inverse-primary": "#d7f5e7",
|
|
"on-primary": "#e5fff2",
|
|
"background": "#f8faf9",
|
|
"primary-fixed": "#cbe9db"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Manrope"],
|
|
"body": ["Manrope"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
|
|
.glass-panel {
|
|
background: rgba(248, 250, 249, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- Top Navigation -->
|
|
<header class="bg-[#f8faf9] dark:bg-slate-950 flex justify-between items-center w-full px-6 py-4 docked full-width top-0 sticky z-50 no-line-rule bg-[#f1f4f3] dark:bg-slate-900">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-highest">
|
|
<img alt="user profile picture" class="w-full h-full object-cover" data-alt="close-up portrait of a woman with a serene expression in natural morning light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB0QWWVOvRdrj_Vfv5qQoDF-mEaziKJXhCbqzC06NAQq0cpzmhkRJn1Ed4n_T_3QWCAnmigxZO4JzN9jrfrm_XSVAxXYyTUJezo-_y3z9mYRoNr0kJ4y08raLXinTZHGYzgUYq2SxUhQWNiZBz56x7EPeLpl-wUywiTEoLA0UjZgzjuFd8HLfyOjrsXS9lxWEwusrtPSZxIIH7O_sK1mC9COn1Gz_Ha-evCwLjMsr32-bYQxsGuERtyJyPuTEXAqvxDZLBQazO6yAWp"/>
|
|
</div>
|
|
<h1 class="text-xl font-bold text-[#4a655a] dark:text-[#cbe9db] font-['Manrope'] tracking-tight">Serene Path</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-[#acb3b2] dark:text-slate-500 hover:opacity-80 transition-opacity duration-300">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-4xl mx-auto px-6 pt-8 pb-48 min-h-screen">
|
|
<!-- Status Indicator -->
|
|
<div class="flex justify-center mb-8">
|
|
<div class="inline-flex items-center gap-3 px-4 py-2 bg-surface-container-low rounded-full">
|
|
<div class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
|
</div>
|
|
<span class="font-label text-label-sm text-primary font-medium tracking-wide">AI is syncing your plan...</span>
|
|
</div>
|
|
</div>
|
|
<!-- Chat History -->
|
|
<div class="space-y-8">
|
|
<!-- AI Message -->
|
|
<div class="flex flex-col items-start gap-3 max-w-[85%]">
|
|
<div class="flex items-center gap-2 px-1">
|
|
<span class="font-label text-label-sm font-bold text-primary uppercase tracking-widest">Serene AI</span>
|
|
<span class="font-label text-[10px] text-outline-variant">10:02 AM</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-6 rounded-2xl rounded-tl-none">
|
|
<p class="text-body-lg text-on-surface leading-relaxed">
|
|
Good morning. I've analyzed your sleep data and upcoming tasks. You seem to have a productive window between 10 AM and 12 PM. Would you like me to block this time for your deep work session?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- User Message -->
|
|
<div class="flex flex-col items-end gap-3 max-w-[85%] ml-auto">
|
|
<div class="flex items-center gap-2 px-1">
|
|
<span class="font-label text-[10px] text-outline-variant">10:05 AM</span>
|
|
<span class="font-label text-label-sm font-bold text-secondary uppercase tracking-widest">You</span>
|
|
</div>
|
|
<div class="bg-primary text-on-primary p-6 rounded-2xl rounded-tr-none shadow-sm">
|
|
<p class="text-body-lg leading-relaxed">
|
|
Yes, please. Also, can you check if I have any reading assignments for tonight's book club?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- AI Message -->
|
|
<div class="flex flex-col items-start gap-3 max-w-[85%]">
|
|
<div class="flex items-center gap-2 px-1">
|
|
<span class="font-label text-label-sm font-bold text-primary uppercase tracking-widest">Serene AI</span>
|
|
<span class="font-label text-[10px] text-outline-variant">10:05 AM</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-6 rounded-2xl rounded-tl-none">
|
|
<p class="text-body-lg text-on-surface leading-relaxed mb-4">
|
|
Of course. I've scheduled your deep work block. Regarding your book club: you have to finish Chapter 4 of "The Art of Stillness".
|
|
</p>
|
|
<div class="bg-surface-container-highest/50 p-4 rounded-xl flex items-center gap-4">
|
|
<div class="w-12 h-16 bg-surface-container rounded shadow-sm overflow-hidden flex-shrink-0">
|
|
<img alt="book cover" class="w-full h-full object-cover" data-alt="minimalist book cover with abstract blue shapes on a cream background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcWYI5cWHVTopKWhKJ7aSqKjnVBMPazwJ3XxcalI1000uiyX91i6Y42-JlBlkvq-VMh6SetBPeJMBGepDkoEqF-81CffQd3gkgsv5PCP7tEFoNL2HPvgr58fPUQW5BP7qNnfkgLi8cqJ9tnfGQAtqeipABtPM4Tqx8kIFlVYKxtH5rM5kwhxc7Y3qo0YjpET_9q2aAQAeww_gNQHC4Xyk_SfRVOkwZIb-6ktMF-mwjiCa79fvimJGzgi90EULOoYwahb3-dje6BtEP"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-headline font-bold text-sm">Chapter 4: The Inner Journey</p>
|
|
<p class="font-label text-xs text-on-surface-variant">12 pages remaining • 15 min read</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Empty space for layout rhythm -->
|
|
<div class="h-12"></div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Input & Controls Container -->
|
|
<div class="fixed bottom-0 left-0 w-full z-40 bg-surface/80 backdrop-blur-xl">
|
|
<div class="max-w-4xl mx-auto px-6 py-6">
|
|
<!-- Suggested Prompts -->
|
|
<div class="flex gap-3 mb-6 overflow-x-auto no-scrollbar pb-2">
|
|
<button class="whitespace-nowrap px-5 py-2.5 bg-surface-container-high rounded-full font-label text-sm font-semibold text-on-surface-variant hover:bg-primary-container hover:text-on-primary-container transition-all duration-300">
|
|
Update my schedule
|
|
</button>
|
|
<button class="whitespace-nowrap px-5 py-2.5 bg-surface-container-high rounded-full font-label text-sm font-semibold text-on-surface-variant hover:bg-primary-container hover:text-on-primary-container transition-all duration-300">
|
|
Set a reminder for reading
|
|
</button>
|
|
<button class="whitespace-nowrap px-5 py-2.5 bg-surface-container-high rounded-full font-label text-sm font-semibold text-on-surface-variant hover:bg-primary-container hover:text-on-primary-container transition-all duration-300">
|
|
Summarize my week
|
|
</button>
|
|
</div>
|
|
<!-- Chat Input Bar -->
|
|
<div class="relative group">
|
|
<div class="absolute inset-0 bg-primary/5 rounded-[2rem] blur-xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-500"></div>
|
|
<div class="relative flex items-center gap-2 bg-surface-container-low rounded-[2rem] p-2 pr-4 transition-all duration-300 focus-within:bg-surface-container-lowest focus-within:shadow-xl">
|
|
<button class="w-12 h-12 flex items-center justify-center text-primary rounded-full hover:bg-primary/10 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="mic">mic</span>
|
|
</button>
|
|
<input class="flex-1 bg-transparent border-none focus:ring-0 text-body-lg placeholder:text-outline-variant px-2" placeholder="Message Serene AI..." type="text"/>
|
|
<button class="w-12 h-12 flex items-center justify-center bg-primary text-on-primary rounded-full hover:scale-105 active:scale-95 transition-all duration-300 shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined" data-icon="send">send</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Global Bottom Nav -->
|
|
<nav class="bg-[#f8faf9]/80 dark:bg-slate-950/80 backdrop-blur-xl fixed bottom-0 w-full z-50 pb-safe no-line-rule tonal-layering-top shadow-[0_-10px_40px_rgba(45,52,51,0.05)] dark:shadow-none flex justify-around items-center w-full px-4 py-3">
|
|
<a class="flex flex-col items-center justify-center text-[#acb3b2] dark:text-slate-500 px-5 py-2.5 transition-all duration-500 hover:text-[#4a655a] dark:hover:text-[#cbe9db]" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="dashboard">dashboard</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Focus</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#acb3b2] dark:text-slate-500 px-5 py-2.5 transition-all duration-500 hover:text-[#4a655a] dark:hover:text-[#cbe9db]" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="calendar_today">calendar_today</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Plan</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center bg-[#cbe9db] dark:bg-[#4a655a]/30 text-[#4a655a] dark:text-[#cbe9db] rounded-[1.5rem] px-5 py-2.5 transition-all duration-500" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="smart_toy" style="font-variation-settings: 'FILL' 1;">smart_toy</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">AI</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#acb3b2] dark:text-slate-500 px-5 py-2.5 transition-all duration-500 hover:text-[#4a655a] dark:hover:text-[#cbe9db]" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="auto_graph">auto_graph</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Habits</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#acb3b2] dark:text-slate-500 px-5 py-2.5 transition-all duration-500 hover:text-[#4a655a] dark:hover:text-[#cbe9db]" href="#">
|
|
<span class="material-symbols-outlined mb-1" data-icon="menu_book">menu_book</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Library</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</body></html> |