267 lines
16 KiB
HTML
267 lines
16 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 - Daily Plan</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;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>
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.tonal-layering-top {
|
|
background: linear-gradient(to bottom, rgba(241, 244, 243, 0.8), rgba(248, 250, 249, 0));
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface min-h-screen">
|
|
<!-- TopAppBar -->
|
|
<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 flat no shadows">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="portrait of a calm professional woman in soft natural lighting with a clean minimal background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD49eKVuQZyJyYBJcOmRRo39IaSMMjWKxi2ZPiDnfuKD_xnuNSc0pphkXzgRSltlM50Wo9bnXaIO5nhBWtx8tK8wi7TOm7a_4VTcHKEpjoMXPyJ0jayRV6uJgv5FVBdjxKuGqXRxMbr1jiZK4yKxjKlPJbZqwy1ODOShkyUi5MBJpz-pG9fLdGBO91RwkLxV_0dXiVXGY-IG32s1MTF5OxH2AePThaKuOgFQR81fRjTssWXg4g0KpoXrylm0q-QtXZ5YrNa0JBc2wLJ"/>
|
|
</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">settings</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-5xl mx-auto px-6 pt-6 pb-32">
|
|
<!-- View Toggle & Date Header -->
|
|
<section class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
|
|
<div>
|
|
<p class="font-label text-sm text-secondary font-semibold uppercase tracking-[0.15em] mb-2">Tuesday</p>
|
|
<h2 class="font-headline text-5xl font-extrabold tracking-tight text-on-surface">Oct 24</h2>
|
|
</div>
|
|
<div class="flex bg-surface-container-low p-1.5 rounded-full items-center">
|
|
<button class="px-6 py-2.5 rounded-full bg-surface-container-lowest shadow-sm font-label text-sm font-bold text-primary transition-all">Day</button>
|
|
<button class="px-6 py-2.5 rounded-full text-outline font-label text-sm font-medium hover:text-on-surface transition-all">Week</button>
|
|
</div>
|
|
</section>
|
|
<!-- Timeline Grid -->
|
|
<div class="relative grid grid-cols-[80px_1fr] gap-x-8">
|
|
<!-- Time Markers -->
|
|
<div class="space-y-[80px] pt-4">
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">08:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">09:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">10:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">11:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">12:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">13:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">14:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">15:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">16:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">17:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">18:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">19:00</div>
|
|
<div class="font-label text-xs font-bold text-outline-variant text-right pr-4">20:00</div>
|
|
</div>
|
|
<!-- Content Area -->
|
|
<div class="relative bg-surface-container-low/30 rounded-3xl min-h-[1040px] border border-surface-container-high/50">
|
|
<!-- Grid Horizontal Lines -->
|
|
<div class="absolute inset-0 flex flex-col pointer-events-none">
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
<div class="h-[92px] border-b border-surface-container-high/40"></div>
|
|
</div>
|
|
<!-- Task Blocks -->
|
|
<!-- Sleep Data (Apple Health Integration) -->
|
|
<div class="absolute top-0 left-4 right-4 h-[120px] bg-tertiary-container/30 backdrop-blur-md rounded-2xl p-4 flex flex-col justify-between border-l-4 border-tertiary shadow-sm">
|
|
<div class="flex justify-between items-start">
|
|
<h3 class="font-headline font-bold text-tertiary">Sleep Cycle</h3>
|
|
<span class="material-symbols-outlined text-tertiary text-lg" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-label text-xs font-bold text-on-tertiary-container uppercase tracking-wider">Health Data • 7h 20m</span>
|
|
</div>
|
|
</div>
|
|
<!-- Morning Routine -->
|
|
<div class="absolute top-[140px] left-4 right-4 h-[80px] bg-primary-container rounded-2xl p-4 flex items-center justify-between shadow-sm">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-on-primary-container/10 rounded-full flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-primary-container">light_mode</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-on-primary-container">Morning Routine</h3>
|
|
<p class="font-label text-xs text-on-primary-container/70">Meditation & Journaling</p>
|
|
</div>
|
|
</div>
|
|
<span class="font-label text-xs font-bold text-on-primary-container/60">09:30 - 10:15</span>
|
|
</div>
|
|
<!-- Deep Work Block -->
|
|
<div class="absolute top-[240px] left-4 right-4 h-[220px] bg-primary rounded-2xl p-6 shadow-xl flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex justify-between items-start mb-2">
|
|
<h3 class="font-headline text-2xl font-bold text-on-primary">Deep Work</h3>
|
|
<button class="w-8 h-8 rounded-full bg-on-primary/10 flex items-center justify-center text-on-primary">
|
|
<span class="material-symbols-outlined text-sm">more_horiz</span>
|
|
</button>
|
|
</div>
|
|
<p class="font-body text-on-primary/80 max-w-sm">Focusing on the Product Strategy Deck and Quarter 4 planning. Phone in DND mode.</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="px-3 py-1 bg-on-primary/10 rounded-full font-label text-[10px] font-bold text-on-primary uppercase tracking-widest">Focus Mode</span>
|
|
<div class="h-1 w-1 rounded-full bg-on-primary/30"></div>
|
|
<span class="font-label text-xs font-medium text-on-primary/70">10:45 - 12:45</span>
|
|
</div>
|
|
</div>
|
|
<!-- Lunch Break -->
|
|
<div class="absolute top-[480px] left-4 right-4 h-[70px] bg-surface-container-high rounded-2xl px-6 flex items-center justify-between border-dashed border-2 border-outline-variant/30">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary">restaurant</span>
|
|
<h3 class="font-headline font-bold text-on-surface-variant">Lunch Break</h3>
|
|
</div>
|
|
<span class="font-label text-xs font-medium text-outline">13:00 - 13:45</span>
|
|
</div>
|
|
<!-- Client Meeting -->
|
|
<div class="absolute top-[570px] left-4 right-4 h-[90px] bg-secondary-container rounded-2xl p-4 flex items-center justify-between shadow-sm">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex -space-x-2">
|
|
<img class="w-8 h-8 rounded-full border-2 border-secondary-container object-cover" data-alt="headshot of a smiling man with glasses" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz7ESSe-84qXiBDvD4uadJMFf9550mrVSy0fTyFvnsBteXsKz_0dhRXy3PXY3emgvqKUhp4BL1ma3ttDbU8YaDUOaAprKhuWHK3P-J9w0OMu4cNy1jXB-O0SZUCzDcHW07VqM1d7UpUdfAUfyUEzYgotxvw2lOJpNl84rJiqgiTSEehqmZefB52e0oaPiDKrCof7FzSvvdTHsI5RwWAobb_iupZqghGgyaENH4GY5ghsbRjPztlJocL3N--zFd2iopmyOT_RRnDs97"/>
|
|
<img class="w-8 h-8 rounded-full border-2 border-secondary-container object-cover" data-alt="headshot of a confident woman in a blazer" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqrlyGgX_5i_lRONU78TaViRxqEky5ORJslxtzjoKmQEvhQwUe3QJbNzfwAai-moc6IaD5fkTwcLBDBOOa8PiXqUO49dV3ViRpJX1eGp_rX0PAXrzPXmwCCgTsRbd-Uowb1BxhW25VYWVIRveFP1VWfobcRQJYoMJxrGb9t3P6SwfMF2aRzmLI4kxLpWQMHpUi5bObYCGCcd1ZbLOTHve7fHicEc99qXbuvAKmLG1AVTS0etWXgVYEnu8QcYhi-ldGRlrY7F7xHFbx"/>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-on-secondary-container">Creative Review</h3>
|
|
<p class="font-label text-xs text-on-secondary-container/70">With Design Team</p>
|
|
</div>
|
|
</div>
|
|
<span class="font-label text-xs font-bold text-on-secondary-container/60">14:00 - 15:00</span>
|
|
</div>
|
|
<!-- Afternoon Walk -->
|
|
<div class="absolute top-[750px] left-4 right-4 h-[60px] bg-tertiary-fixed-dim/40 rounded-2xl px-6 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-tertiary">directions_walk</span>
|
|
<h3 class="font-headline font-bold text-on-tertiary-container">Mindful Walk</h3>
|
|
</div>
|
|
<span class="font-label text-xs font-medium text-on-tertiary-fixed-variant">16:30 - 17:15</span>
|
|
</div>
|
|
<!-- FAB Trigger Line (Visual Current Time Indicator) -->
|
|
<div class="absolute top-[680px] left-0 right-0 h-0.5 bg-error/40 flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-error ml-[-6px] shadow-sm shadow-error/40"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Floating Action Button -->
|
|
<button class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-on-primary rounded-full shadow-[0_10px_30px_rgba(74,101,90,0.3)] flex items-center justify-center scale-100 hover:scale-105 active:scale-95 transition-all z-40">
|
|
<span class="material-symbols-outlined text-3xl">add</span>
|
|
</button>
|
|
<!-- BottomNavBar -->
|
|
<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">
|
|
<div 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]">
|
|
<span class="material-symbols-outlined mb-1">dashboard</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Focus</span>
|
|
</div>
|
|
<div 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 scale-90">
|
|
<span class="material-symbols-outlined mb-1">calendar_today</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Plan</span>
|
|
</div>
|
|
<div 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]">
|
|
<span class="material-symbols-outlined mb-1">smart_toy</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">AI</span>
|
|
</div>
|
|
<div 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]">
|
|
<span class="material-symbols-outlined mb-1">auto_graph</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Habits</span>
|
|
</div>
|
|
<div 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]">
|
|
<span class="material-symbols-outlined mb-1">menu_book</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-[10px] font-semibold uppercase tracking-wider">Library</span>
|
|
</div>
|
|
</nav>
|
|
</body></html> |