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>
240 lines
13 KiB
HTML
240 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"/>
|
|
<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": {
|
|
"secondary": "#505f76",
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary-fixed": "#565e74",
|
|
"primary": "#000000",
|
|
"secondary-fixed": "#b7c8e1",
|
|
"on-primary-fixed-variant": "#dae2fd",
|
|
"primary-fixed-dim": "#3f465c",
|
|
"on-surface": "#191c1e",
|
|
"tertiary-fixed": "#b91a24",
|
|
"surface-bright": "#f7f9fb",
|
|
"on-primary": "#dae2fd",
|
|
"on-tertiary-fixed": "#ffffff",
|
|
"inverse-surface": "#2d3133",
|
|
"on-tertiary-fixed-variant": "#ffdad7",
|
|
"inverse-primary": "#bec6e0",
|
|
"on-error": "#ffffff",
|
|
"primary-container": "#333b50",
|
|
"on-error-container": "#410002",
|
|
"background": "#f7f9fb",
|
|
"error": "#ba1a1a",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"surface-container": "#eceef0",
|
|
"surface-dim": "#d8dadc",
|
|
"surface-container-low": "#f2f4f6",
|
|
"on-secondary-container": "#0b1c30",
|
|
"secondary-container": "#c5d6f0",
|
|
"outline": "#777777",
|
|
"surface": "#f7f9fb",
|
|
"on-tertiary": "#ffdad7",
|
|
"outline-variant": "#c6c6c6",
|
|
"on-surface-variant": "#474747",
|
|
"error-container": "#ffdad6",
|
|
"on-primary-fixed": "#ffffff",
|
|
"secondary-fixed-dim": "#9cacc5",
|
|
"on-primary-container": "#ffffff",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"tertiary-container": "#da3437",
|
|
"on-tertiary-container": "#ffffff",
|
|
"surface-variant": "#e0e3e5",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-secondary-fixed-variant": "#2d3c51",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary": "#7d000f",
|
|
"tertiary-fixed-dim": "#930013",
|
|
"surface-tint": "#565e74",
|
|
"surface-container-high": "#e6e8ea",
|
|
"on-background": "#191c1e"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.editorial-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface min-h-screen flex overflow-hidden">
|
|
<!-- SideNavBar (Desktop Only) -->
|
|
<aside class="hidden lg:flex flex-col border-r-0 h-full w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-950 z-40">
|
|
<div class="px-6 py-8">
|
|
<div class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50 mb-8">Colectivo</div>
|
|
<nav class="space-y-1">
|
|
<!-- Lists - ACTIVE -->
|
|
<a class="flex items-center px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="shopping_cart">shopping_cart</span>
|
|
<span class="text-[13px]">Lists</span>
|
|
</a>
|
|
<!-- Tasks - INACTIVE -->
|
|
<a class="flex items-center px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="check_box">check_box</span>
|
|
<span class="text-[13px]">Tasks</span>
|
|
</a>
|
|
<!-- Notes - INACTIVE -->
|
|
<a class="flex items-center px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="description">description</span>
|
|
<span class="text-[13px]">Notes</span>
|
|
</a>
|
|
<!-- Search - INACTIVE -->
|
|
<a class="flex items-center px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="search">search</span>
|
|
<span class="text-[13px]">Search</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<div class="mt-auto p-6 flex items-center gap-3 bg-slate-100 dark:bg-slate-900">
|
|
<div class="w-8 h-8 rounded-full bg-slate-300 overflow-hidden">
|
|
<img alt="User Profile" data-alt="minimalist close-up profile portrait of a woman in soft natural lighting against a neutral grey wall" src="https://lh3.googleusercontent.com/aida-public/AB6AXuByd5zweph9EJziITl_1tkAUJf1B6EkJkbfUIwptDicZGUB8ljjLeTxh1dvd42NoEvGm96gX-U2KgXGKP_5LYLlamM9vQdxprgVcSwLmOahr5_YOspVhJAhtRtKoHwBlTvisyxERNLKRW55XiDp3Sg_FwUzQxXTNiy0X0KtxXROgj2SnZjdebH7lmLmbrMd3tmYp9M4FEUegwTQBdR29qFaZ2KWsvzJW-b3xai1NKJibEsaHDjKZaviisnjFmGgl56goM_Wsgos4X_P"/>
|
|
</div>
|
|
<div>
|
|
<div class="text-[13px] font-semibold text-slate-900 dark:text-slate-50">Shared Workspace</div>
|
|
<div class="text-[11px] text-slate-500">Colectivo</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 lg:ml-64 relative flex flex-col h-screen">
|
|
<!-- TopAppBar -->
|
|
<header class="flex justify-between items-center h-14 px-4 lg:px-8 w-full sticky top-0 bg-slate-50 dark:bg-slate-950 z-30">
|
|
<div class="lg:hidden text-xl font-semibold text-slate-900 dark:text-slate-50">Colectivo</div>
|
|
<div class="hidden lg:block"></div> <!-- Spacer for center alignment logic -->
|
|
<div class="text-[20px] font-semibold tracking-tight text-slate-900 dark:text-slate-50">Lists</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 opacity-80 active:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined text-slate-900 dark:text-slate-50" data-icon="more_vert">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Content Canvas -->
|
|
<div class="flex-1 overflow-y-auto bg-surface px-4 lg:px-12 py-10 pb-32">
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="editorial-label text-slate-500 mb-2">Workspace Overview</div>
|
|
<h1 class="text-[3.5rem] font-semibold tracking-[-0.02em] leading-tight mb-12 text-slate-900">Shared Lists</h1>
|
|
<!-- Asymmetric Bento-style Layout for Lists -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Home List Card -->
|
|
<div class="col-span-1 md:col-span-2 group cursor-pointer bg-surface-container-lowest p-8 rounded-md hover:bg-slate-100 transition-colors">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-2xl font-semibold mb-1 text-slate-900">Home</h3>
|
|
<p class="text-slate-500 text-sm">12 items · Updated 2h ago</p>
|
|
</div>
|
|
<div class="flex -space-x-2">
|
|
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
|
<img alt="User" data-alt="professional headshot of a man with soft lighting and neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnYadmJQpD5pfp9ByeZsXE-3GEuEPn4f43l7T91ohUGlijBM-YVjwDZg23Qe-1v0xxUNgGKuZaUlwS0RyycCzjfFVncz5mNua6CBgjH4LgnnJMDStjigTgOgkpvJA1ohqZ7AeGJU-XQ75U7MwflX3A9_S8bPC8gHkw-g_CU9_FZg8-ciFoZSF7p9wWHANYBButTdVozInh82fhkhFlOfY4pfv4EFvTpocEcubea1GB6yq4xm6CIAR8yRV1sNroDDSNvFUorUPI75Aw"/>
|
|
</div>
|
|
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
|
<img alt="User" data-alt="minimalist profile portrait of a woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDLsyt4yPDiQkevQp8h_SthOcgknQPIWd32ubNK-PWFdVMsnhxc0BcmTzoaMrDiFzMX1U_IU-zYNSW4uqEvJVpJbRtcfQtwxEA2dky2AxnQZP6wiIiTOljTxlYYNj05s0ZlbUA202TxEjaAsLnloWKrDvlFPMlPmPzz_VFm_h5busuy_2mCkwCDZlpqk77rwlAQ0LYvVk66deJmKL-yLHcn8M7vftXbpAw5JazsT5y1MD6-ygVTIc1sWR1r1O6DKZPvZkOEoYL4DhNd"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 flex gap-2">
|
|
<span class="rounded-full bg-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700">GROCERIES</span>
|
|
<span class="rounded-full bg-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700">HOUSEHOLD</span>
|
|
</div>
|
|
</div>
|
|
<!-- Office List Card -->
|
|
<div class="group cursor-pointer bg-surface-container-low p-8 rounded-md hover:bg-slate-100 transition-colors">
|
|
<div class="flex flex-col h-full justify-between">
|
|
<div>
|
|
<h3 class="text-2xl font-semibold mb-1 text-slate-900">Office</h3>
|
|
<p class="text-slate-500 text-sm">8 items</p>
|
|
</div>
|
|
<div class="mt-12">
|
|
<div class="w-10 h-10 rounded-full bg-slate-900 text-white flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="work">work</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Party List Card -->
|
|
<div class="group cursor-pointer bg-surface-container-low p-8 rounded-md hover:bg-slate-100 transition-colors">
|
|
<div class="flex flex-col h-full justify-between">
|
|
<div>
|
|
<h3 class="text-2xl font-semibold mb-1 text-slate-900">Party</h3>
|
|
<p class="text-slate-500 text-sm">24 items</p>
|
|
</div>
|
|
<div class="mt-12 flex items-center justify-between">
|
|
<div class="w-10 h-10 rounded-full bg-slate-200 text-slate-900 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="celebration">celebration</span>
|
|
</div>
|
|
<span class="text-error font-semibold text-xs tracking-widest uppercase">High Priority</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Travel List Card (Small Content) -->
|
|
<div class="col-span-1 md:col-span-2 group cursor-pointer bg-surface-container-lowest p-6 rounded-md hover:bg-slate-100 transition-colors flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-slate-100 rounded-md flex items-center justify-center text-slate-400">
|
|
<span class="material-symbols-outlined" data-icon="flight_takeoff">flight_takeoff</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-slate-900">Travel</h3>
|
|
<p class="text-slate-500 text-xs">5 items · Draft</p>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="arrow_forward">arrow_forward</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sticky Add List Input (Monolith Design) -->
|
|
<div class="fixed bottom-0 left-0 lg:left-64 right-0 p-4 lg:p-8 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl z-50 border-t border-slate-200/20">
|
|
<div class="max-w-3xl mx-auto flex items-center gap-4 bg-surface-container-low px-6 py-4 rounded-md">
|
|
<span class="material-symbols-outlined text-slate-400" data-icon="add">add</span>
|
|
<input class="bg-transparent border-none focus:ring-0 w-full text-slate-900 placeholder-slate-400 font-medium" placeholder="Create a new shared list..." type="text"/>
|
|
<button class="bg-slate-900 text-slate-50 px-5 py-2 rounded-md font-semibold text-sm hover:scale-[0.98] transition-transform">Create</button>
|
|
</div>
|
|
</div>
|
|
<!-- BottomNavBar (Mobile Only) -->
|
|
<nav class="lg:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-16 px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-t border-slate-200/20">
|
|
<button class="flex flex-col items-center text-slate-900 active:scale-90 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
|
|
</button>
|
|
<button class="flex flex-col items-center text-slate-400 active:scale-90 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="check_box">check_box</span>
|
|
</button>
|
|
<button class="flex flex-col items-center text-slate-400 active:scale-90 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
</button>
|
|
<button class="flex flex-col items-center text-slate-400 active:scale-90 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="search">search</span>
|
|
</button>
|
|
</nav>
|
|
</main>
|
|
</body></html> |