287 lines
18 KiB
HTML
287 lines
18 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 - Library</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Plus_Jakarta_Sans:wght@500;600;700&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); }
|
|
.tonal-layering-top { box-shadow: 0 -1px 0 0 rgba(0,0,0,0.02); }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface antialiased">
|
|
<!-- TopAppBar -->
|
|
<header class="bg-[#f8faf9] dark:bg-slate-950 docked full-width top-0 sticky z-50 flex justify-between items-center w-full px-6 py-4 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="softly lit portrait of a calm woman with a neutral background, high-end editorial photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDU25RSnEY9tY1-qYqlM11PIxf7jEh2sXopp1_idFCTCkKrRigPSMDoS39foFoEPDAO6pFMF1HiWceeP7jmtcsEBagEfh2bJfnP4Sbm7ZeKi4IcaEXzTCs_d14hftSuBjjBlIZMNd8AutmAVMpRujwqrFiHBqSUe0cJZgwg54QWAdxD4uoS4mKqrasws6E1dWIo8JgYtD0odEL8pj0qCtELbtrxaL-AiHRg_moyvFXMGyPFRIztJtubtuqblMp1dHIDEt0lq9hXtOeC"/>
|
|
</div>
|
|
<span class="text-xl font-bold text-[#4a655a] dark:text-[#cbe9db] font-['Manrope'] tracking-tight">Serene Path</span>
|
|
</div>
|
|
<button class="text-[#4a655a] dark:text-[#cbe9db] hover:opacity-80 transition-opacity duration-300 transform active:scale-95">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
</header>
|
|
<main class="max-w-5xl mx-auto px-6 pt-8 pb-32">
|
|
<!-- Hero Section: Daily Goal -->
|
|
<section class="mb-12">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-end">
|
|
<div class="md:col-span-8">
|
|
<h1 class="text-4xl md:text-5xl font-headline font-extrabold tracking-tight text-on-surface mb-2">Library</h1>
|
|
<p class="text-on-surface-variant font-label text-sm tracking-wide uppercase">Curate your mind's expansion</p>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
<div class="bg-surface-container-low p-6 rounded-xl relative overflow-hidden">
|
|
<div class="relative z-10">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="font-label text-xs font-bold text-primary tracking-widest uppercase">Daily Goal</span>
|
|
<span class="font-label text-xs font-bold text-on-surface">45 / 60 min</span>
|
|
</div>
|
|
<div class="w-full h-3 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-gradient-to-r from-primary to-primary-fixed-dim rounded-full w-3/4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Continue Reading Widget (Asymmetric Layout) -->
|
|
<section class="mb-16">
|
|
<div class="bg-primary text-on-primary rounded-xl overflow-hidden flex flex-col md:flex-row shadow-2xl shadow-primary/10">
|
|
<div class="md:w-1/3 h-64 md:h-auto overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="abstract minimalist book cover with muted sage and cream organic shapes, soft paper texture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuALRJjEAYLwO1uKsH4jwYuenBVv3BvFF52ZW-vJsBjHgn-GS1nGUK1Kznxt6ArYAQumRl0zYWB2gdmaUCGSrT7ziB6662hVhW0K8tw5wJw80T6U-Cz3VecK9XGa0GYO0dCHEFc0XeT5UiqP6MCb90hpBQMX56HWmtYhb966RULfbQ7J7m5lDWYpRPbpE8Zo1kgB5DdVjuPVg_qOOe6gWv2QKTTk89xrzmNRMiKNTgdMTV8ErisxMsABf9h5NQIFO4A1yvOwmkBzb6Vv"/>
|
|
</div>
|
|
<div class="md:w-2/3 p-8 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="material-symbols-outlined text-sm" data-icon="auto_stories">auto_stories</span>
|
|
<span class="font-label text-[10px] font-bold uppercase tracking-[0.2em]">Continue Reading</span>
|
|
</div>
|
|
<h2 class="text-3xl font-headline font-bold mb-2">The Architecture of Stillness</h2>
|
|
<p class="text-on-primary/70 text-sm mb-8 leading-relaxed max-w-md">Discover the profound impact of intentional physical environments on mental clarity and spiritual peace.</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row sm:items-center gap-6">
|
|
<button class="bg-on-primary text-primary px-8 py-3 rounded-full font-label text-xs font-bold tracking-wider hover:opacity-90 transition-opacity">
|
|
RESUME (65%)
|
|
</button>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-on-primary/10 flex items-center justify-center cursor-pointer hover:bg-on-primary/20 transition-colors">
|
|
<span class="material-symbols-outlined text-xl" data-icon="bookmark">bookmark</span>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-on-primary/10 flex items-center justify-center cursor-pointer hover:bg-on-primary/20 transition-colors">
|
|
<img class="w-5 h-5 opacity-80" data-alt="Apple Books app icon on a white square background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKakrxK95LkAvHeedsPl4oou9-M5jn1SgDuYpf0MFlddJiNiVpSro_hVxjhqVxmge6P_jzQBoW_sRikxylyKR9QWfhUF5rNY4If3Z1RD_JMUCA2FhhBl2DCk0YpUSHHrgGYcswi7MXiC1CO8g23zXhASHHBHgdaTn8a8BsdPfPUGW2z-fshnFRGTZX7sh6_gbwpd1ebq3nCu9yKr_dCFwK1sy_kb7ySVtarDpc7hUio4-MLahyM8wRJCrFwKYryXllRv3oEmt_0gG2"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- The Shelf (Bento Grid) -->
|
|
<section class="mb-16">
|
|
<div class="flex justify-between items-baseline mb-8">
|
|
<h3 class="text-2xl font-headline font-bold text-on-surface">Your Collection</h3>
|
|
<button class="text-primary font-label text-xs font-bold tracking-widest uppercase hover:underline">View All</button>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<!-- Book 1 -->
|
|
<div class="group cursor-pointer">
|
|
<div class="relative aspect-[3/4] rounded-xl overflow-hidden bg-surface-container-high mb-4 transition-transform duration-500 group-hover:scale-[1.02]">
|
|
<img class="w-full h-full object-cover" data-alt="aesthetic hardback book cover with simple typography and natural linen texture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAkMDYviMy3jBSuSlwLl39b84QGALZJh1oU3qPe1sxyVj0Io3uS1m8z9FObax_LXbABst3EvYPAe-UqjS4y_-Gfs3TWh-bA4rqccIhsAyIwFr68Gl0fn_CRQtHB2jSgKZLvgP3RVqBnXtXbqr1VTS17KGL4fjn9FOxsd0_u0rK0KmzUCgfbnWAshsjOb9bskPvbinnhqeDepBBIcexi_f54gzgDM_xZfJwoc9mKc34Av2MyCVkzGHZ99R68ph2607fFP5ddj5qw1Juf"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
|
|
<span class="text-white text-xs font-label font-bold uppercase tracking-widest">Open PDF</span>
|
|
</div>
|
|
</div>
|
|
<h4 class="font-headline font-bold text-sm mb-1 line-clamp-1">Mindful Breathing</h4>
|
|
<p class="text-[10px] font-label font-semibold text-on-surface-variant uppercase tracking-wider mb-3">Dr. Aris Thorne</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex-1 h-1 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full w-[82%]"></div>
|
|
</div>
|
|
<span class="text-[9px] font-label font-bold text-primary">82%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Book 2 -->
|
|
<div class="group cursor-pointer">
|
|
<div class="relative aspect-[3/4] rounded-xl overflow-hidden bg-surface-container-high mb-4 transition-transform duration-500 group-hover:scale-[1.02]">
|
|
<img class="w-full h-full object-cover" data-alt="red book cover with gold foil accents, scholarly and elegant visual style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgNxP_SYl7o4L0gL6iaFDlW4K1_qwrnX-gsKyOzi1rAebIY7UUUjnt-NyZ94LlcGHAxFBLM0ZP_ru6guRzopt-TulwwqcbWdXJTqgJSJcYrQzy1v3N2IZX8eaoDV8V9c1pUXgTyHAttpoLYObLXh--NvvpHd4f11nJWUyWV616isPNDLj0YWhLLiKPLvdgEcpFuBcImRVz-31e7aLqjYhlkkx3xUYRv0DRmG2XFPNaoccrehn_ICWZ_ct-p16INBzr_I7Z9_dAh1rk"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
|
|
<span class="text-white text-xs font-label font-bold uppercase tracking-widest">Open PDF</span>
|
|
</div>
|
|
</div>
|
|
<h4 class="font-headline font-bold text-sm mb-1 line-clamp-1">Quietude</h4>
|
|
<p class="text-[10px] font-label font-semibold text-on-surface-variant uppercase tracking-wider mb-3">Elena Vance</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex-1 h-1 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full w-[24%]"></div>
|
|
</div>
|
|
<span class="text-[9px] font-label font-bold text-primary">24%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Book 3 -->
|
|
<div class="group cursor-pointer">
|
|
<div class="relative aspect-[3/4] rounded-xl overflow-hidden bg-surface-container-high mb-4 transition-transform duration-500 group-hover:scale-[1.02]">
|
|
<img class="w-full h-full object-cover" data-alt="illustrated book cover showing stars and mountains in a minimalist woodcut style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAk1adUlUMova9E31Mv0wNIMuNic-DgJ19IfldCDNG7Iek6SYtga6uiIl3HWZg2UYVu0Jf9tFp6G22Ie7oCoCX5mCdPilvqySx80OHHlWr0luTN7H8ybLeNcAZykr_leSwnFGWiNBZiS9XdI-QOSq2lws7oSjTzzDMtj6aJe2O9mvYUMHhYEDIITQJmMxjYmG5Lr-j9xu0DTtbnB2FpcggcU-PNwwje-FYsfvwVKj1YtJG4IgB3-Ex-8zD48Z31S_VK47VgLiWBwe3s"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
|
|
<span class="text-white text-xs font-label font-bold uppercase tracking-widest">Open PDF</span>
|
|
</div>
|
|
</div>
|
|
<h4 class="font-headline font-bold text-sm mb-1 line-clamp-1">Nature's Rythm</h4>
|
|
<p class="text-[10px] font-label font-semibold text-on-surface-variant uppercase tracking-wider mb-3">Marcus Sol</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex-1 h-1 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full w-[45%]"></div>
|
|
</div>
|
|
<span class="text-[9px] font-label font-bold text-primary">45%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Add New -->
|
|
<div class="group cursor-pointer">
|
|
<div class="relative aspect-[3/4] rounded-xl border-2 border-dashed border-outline-variant/30 flex flex-col items-center justify-center gap-3 hover:bg-surface-container-low transition-colors duration-300">
|
|
<span class="material-symbols-outlined text-4xl text-outline-variant" data-icon="add_circle">add_circle</span>
|
|
<span class="font-label text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Upload PDF</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Secondary Collection (Asymmetric List) -->
|
|
<section class="mb-16">
|
|
<h3 class="text-2xl font-headline font-bold text-on-surface mb-8">Recent Articles</h3>
|
|
<div class="space-y-4">
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl flex items-center gap-6 hover:shadow-sm transition-shadow cursor-pointer">
|
|
<div class="w-16 h-16 rounded-lg bg-surface-container-high flex-shrink-0 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary text-3xl" data-icon="description">description</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h5 class="font-headline font-bold text-base mb-1">Journal of Cognitive Rest</h5>
|
|
<p class="text-xs text-on-surface-variant line-clamp-1">Exploring the synaptic benefits of 15-minute digital detoxes.</p>
|
|
</div>
|
|
<div class="text-right hidden sm:block">
|
|
<p class="text-[10px] font-label font-bold uppercase tracking-widest text-primary mb-1">Completed</p>
|
|
<p class="text-[10px] font-label text-on-surface-variant">2 days ago</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl flex items-center gap-6 hover:shadow-sm transition-shadow cursor-pointer">
|
|
<div class="w-16 h-16 rounded-lg bg-surface-container-high flex-shrink-0 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary text-3xl" data-icon="article">article</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h5 class="font-headline font-bold text-base mb-1">The Art of Soft Focus</h5>
|
|
<p class="text-xs text-on-surface-variant line-clamp-1">Balancing deep work with peripheral awareness for creativity.</p>
|
|
</div>
|
|
<div class="text-right hidden sm:block">
|
|
<p class="text-[10px] font-label font-bold uppercase tracking-widest text-secondary mb-1">12 min left</p>
|
|
<p class="text-[10px] font-label text-on-surface-variant">Today</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- 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] cursor-pointer transform hover:scale-90 active:scale-90">
|
|
<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>
|
|
</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] cursor-pointer transform hover:scale-90 active:scale-90">
|
|
<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>
|
|
</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] cursor-pointer transform hover:scale-90 active:scale-90">
|
|
<span class="material-symbols-outlined mb-1" data-icon="smart_toy">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] cursor-pointer transform hover:scale-90 active:scale-90">
|
|
<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>
|
|
</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 transform scale-90">
|
|
<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>
|
|
</div>
|
|
</nav>
|
|
</body></html> |