Oier Bravo Urtasun
ee962991e1
- Add plan/fase-5-mobile-ux.md with 7-chunk breakdown:
5.0 mobile tests (Playwright mobile-shell/masthead/swipe-delete + Vitest helpers)
5.1 responsive shell (MobileTopBar + BottomTabBar + MobileDrawer)
5.2 ScreenMasthead + px-4/md:px-6 pass
5.3 /lists mobile cards
5.4 /lists/[id] rows + red-zone swipe-delete
5.5 undoQueue store + UndoToast
5.6 scrollable frequency chips
5.7 tasks/notes/search shell + masthead
5.Z verify 211 + new M-series green
- Explicit gap analysis vs. current app + deliberate exclusions
(no priority badges, no voice search, no fake meta like "Dairy · Weekly")
- Index design/ directory: Stitch mockups per screen (mobile + desktop variants),
plus the "Monolith Editorial" DESIGN.md directing tonal shifts, masthead
typography, glassmorphism, and the no-line rule
- Relocate DESIGN.md under design/slate_collective/DESIGN.md (old entry point) —
the current design direction lives at design/DESIGN.md
- Reference design/ from CLAUDE.md + add Fase 5 to README phase index
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
219 lines
13 KiB
HTML
219 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>Monolith Editorial - Notes</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;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": {
|
|
"surface-bright": "#f7f9fb",
|
|
"on-tertiary-container": "#ffffff",
|
|
"tertiary-fixed-dim": "#930013",
|
|
"tertiary-fixed": "#b91a24",
|
|
"surface-container": "#eceef0",
|
|
"on-tertiary-fixed": "#ffffff",
|
|
"inverse-primary": "#bec6e0",
|
|
"surface": "#f7f9fb",
|
|
"primary-container": "#333b50",
|
|
"surface-variant": "#e0e3e5",
|
|
"on-tertiary": "#ffdad7",
|
|
"surface-dim": "#d8dadc",
|
|
"on-secondary-container": "#0b1c30",
|
|
"inverse-surface": "#2d3133",
|
|
"secondary-fixed": "#b7c8e1",
|
|
"background": "#f7f9fb",
|
|
"on-primary-fixed": "#ffffff",
|
|
"outline-variant": "#c6c6c6",
|
|
"primary": "#000000",
|
|
"on-secondary-fixed-variant": "#2d3c51",
|
|
"on-error": "#ffffff",
|
|
"primary-fixed-dim": "#3f465c",
|
|
"on-primary-fixed-variant": "#dae2fd",
|
|
"surface-container-high": "#e6e8ea",
|
|
"secondary": "#505f76",
|
|
"on-surface": "#191c1e",
|
|
"secondary-container": "#c5d6f0",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary": "#ffffff",
|
|
"surface-tint": "#565e74",
|
|
"on-tertiary-fixed-variant": "#ffdad7",
|
|
"on-surface-variant": "#474747",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-primary": "#dae2fd",
|
|
"surface-container-low": "#f2f4f6",
|
|
"tertiary": "#7d000f",
|
|
"outline": "#777777",
|
|
"error": "#ba1a1a",
|
|
"on-background": "#191c1e",
|
|
"tertiary-container": "#da3437",
|
|
"on-primary-container": "#ffffff",
|
|
"on-error-container": "#410002",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"primary-fixed": "#565e74",
|
|
"secondary-fixed-dim": "#9cacc5"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.375rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.ease-monolith { transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
|
|
body { background-color: #f7f9fb; font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-on-surface selection:bg-slate-200">
|
|
<!-- Top Navigation Bar (Shared Component - Monolith TopAppBar) -->
|
|
<header class="bg-[#f7f9fb] dark:bg-[#020617] w-full sticky top-0 z-50">
|
|
<div class="flex items-center justify-between px-6 py-4 w-full">
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-slate-900 dark:text-slate-50 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-1 rounded-md">
|
|
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
|
</button>
|
|
<h1 class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-['Inter'] font-semibold tracking-[-0.01em] uppercase text-[13px] text-slate-500">NOTES</span>
|
|
<div class="h-8 w-8 rounded-full bg-slate-200 overflow-hidden">
|
|
<img alt="User Profile" data-alt="portrait of a professional male editor in a minimal studio setting with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFcr-63ujo_eQEgTXPCMmEbNLqV0HD58FbvZvhkv9KO4yAo0EhxmepiHMWHA7l5rMvXc-5WTQYYADEBk0ziFbv1wB8oegChYIgJ569YRpE61JdnEdSxGkPqva0lcCpyfUpcKSxqvt7fI7FyF1LW2sYrHnh2TQxmn5q8mf4-1UXpHAxhOEpdT2xJGgvru6eDbtcuwS_mD61jAdGmfk02TkpS8nn8F25FI5E2RpK4OZtOyoUPi8bngiwO6o6OzpqrnVFlL8eOSEpkwEl"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="max-w-2xl mx-auto px-6 pt-8 pb-32">
|
|
<!-- Editorial Masthead Section -->
|
|
<section class="mb-12">
|
|
<p class="font-['Inter'] font-semibold tracking-widest uppercase text-[13px] text-slate-500 mb-1">REPOSITORY</p>
|
|
<h2 class="text-[32px] font-semibold tracking-tight text-slate-900 leading-tight">Project Intelligence</h2>
|
|
</section>
|
|
<!-- Meeting Notes Section -->
|
|
<section class="space-y-10 mb-16">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-900">Meeting Notes</span>
|
|
<span class="text-[13px] text-slate-500">4 ENTRIES</span>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<!-- Card 1 -->
|
|
<article class="bg-surface-container-lowest p-6 rounded-md group transition-all duration-200 active:scale-[0.98]">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<h3 class="text-lg font-semibold text-slate-900 leading-snug">Quarterly Content Strategy Alignment</h3>
|
|
<span class="material-symbols-outlined text-slate-400 text-[20px]" data-icon="more_horiz">more_horiz</span>
|
|
</div>
|
|
<p class="text-slate-600 text-sm leading-relaxed mb-4">Discussed the shift towards high-fidelity editorial pieces for Q4. Focus on long-form interviews and architectural photography...</p>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[12px] font-medium text-slate-400">OCT 12, 2023</span>
|
|
<div class="flex -space-x-2">
|
|
<div class="h-5 w-5 rounded-full border-2 border-white overflow-hidden bg-slate-100">
|
|
<img alt="avatar" data-alt="professional woman portrait with natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXVjk5Aa3BTzUYi9pYMf9l_1sINxb38eYzWPuU_Ksniim-BNro_2op7Tt9FsPz2bpgsGr4XE45mKrTCUJ9qIeCdp9gfhN6Ga9hUePDaW9rDm0dIu-5qIwtHx0-wINivDLDC2UJScBDsEZ2v5Bgcc2ZcQzkLLGlGGc_pp_LwlYjRe4Z8AoC66aaD_pmFffiOP35mmOkLVrgnydv_uhNeoikT0TawvhwsfSRqGF1c0QDYwqgbveq4NBPbli0z5SXzHZ149Ef-xTbaEEb"/>
|
|
</div>
|
|
<div class="h-5 w-5 rounded-full border-2 border-white overflow-hidden bg-slate-100">
|
|
<img alt="avatar" data-alt="man smiling portrait soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdsQZdbUliOJhALtO43b1E2Li6xioL6sTu3MNPoa0QRZ8-vEL1c1bgLmx-3QXXrm4E29UF0uAGOD3ZKVZUf23b8_pfA8KlwjefTZEXPDtc2BnSvzIQzkaZowj7MUTjTPZPrw81AlFVVYd9x7I53UXfYJ-gTHfmCWGksal_-evoN9J7iku42f33-OF76vm4Y1ItrGElaPs7W0z3XGykcICS5Kp8CmPOx5G__l7_M_JUIjQL8Lm99NkcQM3OoHKa1NSdLB4P-xcBpzaj"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Card 2 -->
|
|
<article class="bg-surface-container-lowest p-6 rounded-md group transition-all duration-200 active:scale-[0.98]">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<h3 class="text-lg font-semibold text-slate-900 leading-snug">Client Feedback: Horizon Project</h3>
|
|
<span class="material-symbols-outlined text-slate-400 text-[20px]" data-icon="more_horiz">more_horiz</span>
|
|
</div>
|
|
<p class="text-slate-600 text-sm leading-relaxed mb-4">Client prefers the monochrome direction but requested more emphasis on white space in the mobile viewport. Typography is approved.</p>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[12px] font-medium text-slate-400">OCT 10, 2023</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<!-- Project Ideas Section (Asymmetric Bento Variation) -->
|
|
<section class="space-y-10">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-900">Project Ideas</span>
|
|
<span class="material-symbols-outlined text-slate-400" data-icon="add">add</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<div class="bg-slate-900 text-slate-50 p-6 rounded-md">
|
|
<span class="font-['Inter'] font-semibold uppercase text-[10px] tracking-widest text-slate-400 block mb-2">PRIORITY</span>
|
|
<h3 class="text-xl font-semibold mb-3 tracking-tight">The Brutalist Collection</h3>
|
|
<p class="text-slate-300 text-sm leading-relaxed">A digital archive of 1970s concrete architecture transformed into a high-contrast photography book.</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-6 rounded-md">
|
|
<h3 class="text-lg font-semibold text-slate-900 mb-2">Sustainable Print Media</h3>
|
|
<p class="text-slate-600 text-sm leading-relaxed">Exploring recycled paper stocks that maintain tactile luxury for the Monolith print edition.</p>
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
<span class="bg-slate-100 text-slate-500 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Research</span>
|
|
<span class="bg-slate-100 text-slate-500 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Supply Chain</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Sticky Monolith Input (Glassmorphism) -->
|
|
<div class="fixed bottom-0 left-0 w-full p-4 z-40">
|
|
<div class="max-w-2xl mx-auto backdrop-blur-xl bg-white/80 dark:bg-[#020617]/80 rounded-full shadow-[0px_20px_40px_rgba(15,23,42,0.06)] flex items-center px-2 py-2">
|
|
<button class="h-10 w-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="attach_file">attach_file</span>
|
|
</button>
|
|
<input class="flex-1 bg-transparent border-none focus:ring-0 text-slate-900 placeholder:text-slate-400 text-sm px-2" placeholder="Capture a new thought..." type="text"/>
|
|
<button class="bg-slate-900 text-slate-50 h-10 px-6 rounded-full text-xs font-bold uppercase tracking-widest transition-transform active:scale-95">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Hidden Sidebar (Reference logic for future interaction) -->
|
|
<nav class="hidden fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
|
|
<div class="px-8 mb-12">
|
|
<div class="h-12 w-12 rounded-full overflow-hidden mb-4">
|
|
<img alt="User Profile" data-alt="professional male portrait studio setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAWGvlCjZrzp4_VFSWBT-9QY0bxQrEDB0n0z9swI60-KqaYjefpKT3bxewCI1Ve2wrn4TmdXcyLj7_ulJWn8Tm6xuKo69Vd2SZ0ehHVatzUQN2XxXlbB5YeYbLQdVGeU_3_vVN67bcBQh0Dl_ls0Lp98IGFigdxec5T9susUyVIhi6G8Xxoy1t_l57IJTX5DayNLOz2XoUjqQuamk0mPPbjDP175k_I67ean7uLlC-6D5d-ZAhUniyKV-J67mbAO6nZyFYfxqh19UkZ"/>
|
|
</div>
|
|
<h4 class="font-bold text-slate-900">Editorial Lead</h4>
|
|
<p class="text-sm text-slate-500">monolith.editorial@app.com</p>
|
|
</div>
|
|
<ul class="flex-1 space-y-1">
|
|
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span> Lists</a>
|
|
</li>
|
|
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span> Tasks</a>
|
|
</li>
|
|
<li><a class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-4 transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span> Notes</a>
|
|
</li>
|
|
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="search">search</span> Search</a>
|
|
</li>
|
|
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span> User Settings</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</body></html> |