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>
251 lines
13 KiB
HTML
251 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"/>
|
|
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<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.4, 0, 0.2, 1); }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface">
|
|
<!-- Top Navigation Anchor (from JSON) -->
|
|
<header class="w-full sticky top-0 bg-[#f7f9fb] z-50">
|
|
<div class="flex items-center justify-between px-6 py-4 w-full">
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-slate-900 cursor-pointer">menu</span>
|
|
<h1 class="text-xl font-bold tracking-tighter text-slate-900">MONOLITH</h1>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full overflow-hidden bg-slate-200">
|
|
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Professional editorial headshot of a woman with minimalist style, clean lighting, and neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuALTh2K4V88FdGjNLi_k6yPmkhh61jneZKuhk_arotiUd_qmGlnJt5Rk6kAaA_sRGwfEAy4JY5PG87AReDv0cA3edJ_Sa7RWX8COwfOuOwC42LqTP9dShb8DVc4bUq6dbyLYDssp8Cg-5PiVi5GdejrCvBdrTjxBHXpX7whcx51eQxgdXZudo8o4BrcwcWltFU_EaoxRgzMj-edSwzRuUqyI6GpE0uNeEeL4HAXckLSlDPkchAY6nSWTE1m5-5xYXZq24ApuwLr8oJS"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-screen-md mx-auto px-6 pb-24">
|
|
<!-- Search Header Section -->
|
|
<section class="mt-8 mb-12">
|
|
<p class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 mb-2">Omni-Search</p>
|
|
<h2 class="text-[32px] font-bold tracking-tight text-slate-900 leading-none">Find Anything.</h2>
|
|
<!-- Monolith Input Field -->
|
|
<div class="mt-8 relative group">
|
|
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-slate-400">search</span>
|
|
</div>
|
|
<input class="w-full h-16 pl-14 pr-6 bg-surface-container-low border-none rounded-md focus:ring-2 focus:ring-slate-900 text-[16px] transition-all duration-200 placeholder:text-slate-400" placeholder="Search through records..." type="text" value="Project Q4"/>
|
|
</div>
|
|
</section>
|
|
<!-- Search Results: Categorized -->
|
|
<div class="space-y-12">
|
|
<!-- Category: Lists -->
|
|
<div class="space-y-4">
|
|
<h3 class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 flex justify-between items-center">
|
|
Lists
|
|
<span class="text-[11px] bg-slate-200 px-2 py-0.5 rounded-full text-slate-700">2 Matches</span>
|
|
</h3>
|
|
<div class="space-y-1">
|
|
<!-- Result Card -->
|
|
<div class="group flex items-center p-4 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-md mr-4 text-slate-600">
|
|
<span class="material-symbols-outlined">format_list_bulleted</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-[16px] font-semibold text-slate-900">Project Q4 - Strategy</h4>
|
|
<p class="text-[13px] text-slate-500">Last updated 2 days ago • Editorial Team</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</div>
|
|
<div class="group flex items-center p-4 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-md mr-4 text-slate-600">
|
|
<span class="material-symbols-outlined">format_list_bulleted</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-[16px] font-semibold text-slate-900">Project Q4 - Budget Allocations</h4>
|
|
<p class="text-[13px] text-slate-500">Last updated yesterday • Finance</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Category: Tasks -->
|
|
<div class="space-y-4">
|
|
<h3 class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 flex justify-between items-center">
|
|
Tasks
|
|
<span class="text-[11px] bg-slate-200 px-2 py-0.5 rounded-full text-slate-700">1 Match</span>
|
|
</h3>
|
|
<div class="group flex items-center p-4 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-md mr-4 text-slate-600">
|
|
<span class="material-symbols-outlined">check_circle</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="text-[16px] font-semibold text-slate-900">Approve Project Q4 wireframes</h4>
|
|
<p class="text-[13px] text-slate-500">Due tomorrow • High Priority</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
<!-- Category: Notes -->
|
|
<div class="space-y-4">
|
|
<h3 class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 flex justify-between items-center">
|
|
Notes
|
|
<span class="text-[11px] bg-slate-200 px-2 py-0.5 rounded-full text-slate-700">3 Matches</span>
|
|
</h3>
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<!-- Bento-style Card -->
|
|
<div class="p-6 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer group">
|
|
<div class="flex justify-between mb-4">
|
|
<span class="material-symbols-outlined text-slate-400">description</span>
|
|
<span class="text-[12px] font-medium text-slate-400">Oct 12, 2023</span>
|
|
</div>
|
|
<h4 class="text-[18px] font-bold text-slate-900 mb-2">Project Q4: Kickoff Meeting</h4>
|
|
<p class="text-[14px] text-slate-600 line-clamp-2">Discussion regarding the new visual hierarchy and editorial-first approach for the monolith system...</p>
|
|
</div>
|
|
<div class="p-6 bg-surface-container-low rounded-md hover:bg-slate-200/50 transition-colors cursor-pointer group">
|
|
<div class="flex justify-between mb-4">
|
|
<span class="material-symbols-outlined text-slate-400">description</span>
|
|
<span class="text-[12px] font-medium text-slate-400">Sep 28, 2023</span>
|
|
</div>
|
|
<h4 class="text-[18px] font-bold text-slate-900 mb-2">Stakeholder Feedback - Q4</h4>
|
|
<p class="text-[14px] text-slate-600 line-clamp-2">Initial feedback focuses on the elimination of borders and reliance on tonal shifts for sectioning...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Glassmorphism Bottom Navigation (Responsive Pivot) -->
|
|
<nav class="fixed bottom-0 left-0 right-0 h-20 bg-surface/80 backdrop-blur-xl md:hidden z-50 flex items-center justify-around px-8">
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined">format_list_bulleted</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined">check_circle</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-900 transition-colors scale-110" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">search</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined">description</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</a>
|
|
</nav>
|
|
<!-- Sidebar Navigation Shell (Hidden as per request, visible on large screens) -->
|
|
<aside class="hidden md:flex fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] w-80 shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
|
|
<div class="px-8 mb-10 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-md bg-slate-900 flex items-center justify-center">
|
|
<span class="text-white font-bold text-xl">M</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-bold text-slate-900 leading-tight">Editorial Lead</span>
|
|
<span class="text-[12px] text-slate-500">monolith.editorial@app.com</span>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
|
<span class="material-symbols-outlined mr-4">format_list_bulleted</span> Lists
|
|
</a>
|
|
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
|
<span class="material-symbols-outlined mr-4">check_circle</span> Tasks
|
|
</a>
|
|
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
|
<span class="material-symbols-outlined mr-4">description</span> Notes
|
|
</a>
|
|
<!-- Active State -->
|
|
<a class="flex items-center bg-slate-900 text-slate-50 mx-4 my-1 px-4 py-3 rounded-md transition-all ease-monolith font-['Inter'] text-[16px]" href="#">
|
|
<span class="material-symbols-outlined mr-4" style="font-variation-settings: 'FILL' 1;">search</span> Search
|
|
</a>
|
|
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
|
<span class="material-symbols-outlined mr-4">settings</span> User Settings
|
|
</a>
|
|
</nav>
|
|
<div class="px-8 mt-auto">
|
|
<div class="p-4 bg-slate-100 rounded-md">
|
|
<p class="text-[12px] text-slate-500 font-medium uppercase tracking-wider mb-2">Storage Usage</p>
|
|
<div class="w-full bg-slate-200 h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-slate-900 h-full w-[65%]"></div>
|
|
</div>
|
|
<p class="mt-2 text-[11px] text-slate-400">8.2 GB of 12 GB used</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</body></html> |