docs(fase-5): plan mobile UX rewrite ("Monolith Editorial")
- 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>
This commit is contained in:
213
design/shopping_session_mobile/code.html
Normal file
213
design/shopping_session_mobile/code.html
Normal file
@@ -0,0 +1,213 @@
|
||||
<!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.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.presence-overlap > *:not(:first-child) {
|
||||
margin-left: -8px;
|
||||
}
|
||||
.editorial-shadow {
|
||||
box-shadow: 0px 20px 40px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<main class="min-h-screen flex flex-col max-w-2xl mx-auto bg-surface">
|
||||
<header class="sticky top-0 z-50 bg-surface flex items-center justify-between px-6 py-6 h-20">
|
||||
<button aria-label="Close Shopping Session" class="w-12 h-12 flex items-center justify-center rounded-md hover:bg-surface-container-low transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface" data-icon="close">close</span>
|
||||
</button>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[11px] font-semibold tracking-[0.1em] uppercase text-on-surface-variant mb-0.5">Shopping Session</span>
|
||||
<div class="flex presence-overlap">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Portrait of a young woman with a focused expression, clean studio lighting, high-end editorial style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDywoIZ0BD8js1PTqR6BT0E8n9z2wRbyKJQf9c9lmwL1J7tKg5ta58g6m9PbkHteeBGybbyXDmRHbVplgAEps7Yagkmb1mhsuGWvHYZuzYxeUAQV-5flfSf91GApzmsCZhByIXZnDJwvbCgUEXn0KLAfo6bvUaFKNneDkv0cJ4CO7JREAaozTENLhqGaWnkEz64Mj86EDn4SutuSX_DaDnrXnneqrraFeKBNYkeI4tIeb5nuz62rLk7HIfERQo-B4R4wsrM8PE70sLj"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Portrait of a man with short hair, soft natural window light, minimalist background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-jKDcc2wTPWfQPgLEzUKlXqQLM7lMRpOV25sGUue7P2NT8kfO4QTub28OmQck1oT-XrHTrCvJFEm30CXHctDgkGQ0KOg4SFLCqmbAnONfeYtX879sI3a6GVRwzbVe183lnd9NUHdYgV6-XJxflUDvhMBj1KbpObCD50D8t8VEK6cnzSGJgDFMExfr8IMZpH8244UnfpkS4F-0-NdbalioBtl7EhkCYUeJNSjSZKXvSPkSxtB27pWFGRu2DvRvvdZr_2Mba6nOhBha"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-200 flex items-center justify-center text-[10px] font-bold text-slate-600">
|
||||
+2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="shopping_bag">shopping_bag</span>
|
||||
</div>
|
||||
</header>
|
||||
<section class="flex-1 px-6 pt-4 pb-32">
|
||||
<div class="mb-10">
|
||||
<span class="block text-[13px] font-semibold tracking-[0.05em] uppercase text-on-surface-variant mb-1">Active List</span>
|
||||
<h1 class="text-3xl font-semibold tracking-[-0.02em] text-primary">WEEKLY PROVISIONS</h1>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow border border-transparent hover:border-slate-200 transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300 group-active:scale-95 transition-transform"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Organic Heirloom Tomatoes</span>
|
||||
<span class="text-[13px] text-slate-500">2.5 lbs • Produce</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Artisan Sourdough Batard</span>
|
||||
<span class="text-[13px] text-slate-500">1 unit • Bakery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Cold Pressed Olive Oil</span>
|
||||
<span class="text-[13px] text-slate-500">500ml • Pantry</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Maldon Sea Salt Flakes</span>
|
||||
<span class="text-[13px] text-slate-500">250g • Pantry</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 mb-6">
|
||||
<div class="flex items-center gap-4 opacity-50">
|
||||
<span class="text-[13px] font-semibold tracking-[0.05em] uppercase text-on-surface-variant shrink-0">Checked</span>
|
||||
<div class="h-[1px] w-full bg-slate-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 opacity-60 grayscale">
|
||||
<div class="flex items-center min-h-[72px] bg-surface-container-low rounded-md px-4">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded bg-slate-900 text-white">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="check">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight line-through">Sparkling Mineral Water</span>
|
||||
<span class="text-[13px] text-slate-500">Case of 12 • Beverages</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center min-h-[72px] bg-surface-container-low rounded-md px-4">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded bg-slate-900 text-white">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="check">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight line-through">Fresh Sweet Basil</span>
|
||||
<span class="text-[13px] text-slate-500">1 Bunch • Produce</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="fixed bottom-0 left-0 right-0 max-w-2xl mx-auto p-6 bg-surface/80 backdrop-blur-xl">
|
||||
<button class="w-full h-16 bg-slate-900 text-slate-50 rounded-md flex items-center justify-center gap-3 active:scale-[0.98] transition-transform">
|
||||
<span class="text-[16px] font-semibold tracking-wide">Finish shopping</span>
|
||||
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</footer>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/shopping_session_mobile/screen.png
Normal file
BIN
design/shopping_session_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Reference in New Issue
Block a user