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:
258
design/settings_1/code.html
Normal file
258
design/settings_1/code.html
Normal file
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo - Settings</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&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": {
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"on-background": "#191c1e",
|
||||
"surface": "#f7f9fb",
|
||||
"surface-container": "#eceef0",
|
||||
"secondary": "#505f76",
|
||||
"tertiary": "#7d000f",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-container": "#333b50",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"surface-tint": "#565e74",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-primary": "#dae2fd",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-surface": "#191c1e",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"background": "#f7f9fb",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"primary": "#000000",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#410002",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"outline": "#777777",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"surface-dim": "#d8dadc",
|
||||
"outline-variant": "#c6c6c6"
|
||||
},
|
||||
"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;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased">
|
||||
<!-- Predicted SideNavBar Component -->
|
||||
<nav class="bg-slate-100 dark:bg-slate-900 h-full w-64 fixed left-0 top-0 flex flex-col justify-between p-6 z-20">
|
||||
<div>
|
||||
<!-- Header Section -->
|
||||
<div class="mb-10">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Household</h1>
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-500 mt-1">Collaborative Space</p>
|
||||
</div>
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Notes</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Search</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
<div class="space-y-1">
|
||||
<a class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md flex items-center gap-3 px-3 py-2 transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Area -->
|
||||
<div class="ml-64 min-h-screen">
|
||||
<!-- Predicted TopAppBar Component -->
|
||||
<header class="bg-slate-50 dark:bg-slate-950 sticky top-0 z-10 flex justify-between items-center px-8 py-4 ml-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center justify-center w-10 h-10 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-50">arrow_back</span>
|
||||
</button>
|
||||
<h2 class="text-[20px] font-semibold text-slate-900 dark:text-slate-50">Settings</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:opacity-80"><span class="material-symbols-outlined">notifications</span></button>
|
||||
<button class="p-2 text-slate-500 hover:opacity-80"><span class="material-symbols-outlined">help_outline</span></button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Settings Canvas -->
|
||||
<main class="max-w-3xl mx-auto px-8 py-16">
|
||||
<div class="flex flex-col space-y-16">
|
||||
<!-- Avatar Section -->
|
||||
<section class="space-y-8">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-16 h-16 rounded-full bg-slate-700 flex items-center justify-center text-white font-semibold text-lg">
|
||||
AG
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<button class="text-slate-900 font-semibold text-sm hover:underline text-left">Change avatar</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Avatar Picker Segmented Control -->
|
||||
<div class="bg-surface-container-low p-1 rounded-md inline-flex w-full max-w-md">
|
||||
<button class="flex-1 py-2 text-[13px] font-semibold rounded-md bg-white text-slate-900 shadow-sm">Initials</button>
|
||||
<button class="flex-1 py-2 text-[13px] font-semibold text-slate-500 hover:text-slate-900 transition-colors">Emoji</button>
|
||||
<button class="flex-1 py-2 text-[13px] font-semibold text-slate-500 hover:text-slate-900 transition-colors">Photo</button>
|
||||
</div>
|
||||
<!-- Emoji Grid -->
|
||||
<div class="bg-surface-container-low p-6 rounded-md">
|
||||
<div class="grid grid-cols-8 gap-4">
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 bg-white rounded-md shadow-sm">🐸</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐼</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🦊</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐨</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🦁</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐯</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐻</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🦋</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌵</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌻</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍀</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌈</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">⭐</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🔥</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">💎</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎯</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎸</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎹</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎨</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">📚</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">✈️</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🏔️</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌊</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎭</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍕</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍜</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍣</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">☕</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍎</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🥑</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍓</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎂</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🏠</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🚲</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🛹</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">⚽</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🏄</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🧘</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎮</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🤿</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Display Name Section -->
|
||||
<section class="space-y-4">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-slate-500 block uppercase">DISPLAY NAME</label>
|
||||
<div class="space-y-2">
|
||||
<input class="w-full bg-surface-container-low border-none rounded-md px-4 py-3 text-slate-900 focus:ring-2 focus:ring-slate-900 transition-all outline-none text-base" type="text" value="Ana García"/>
|
||||
<p class="text-[13px] text-slate-400">Changes saved automatically</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Language Section -->
|
||||
<section class="space-y-4">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-slate-500 block uppercase">LANGUAGE</label>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-6 py-2 bg-slate-900 text-slate-50 rounded-md text-sm font-semibold">English</button>
|
||||
<button class="px-6 py-2 bg-transparent text-slate-500 hover:bg-surface-container-low rounded-md text-sm font-semibold transition-colors">Español</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Account Section -->
|
||||
<section class="space-y-4">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-slate-500 block uppercase">ACCOUNT</label>
|
||||
<a class="group block p-5 bg-surface-container-low rounded-md hover:bg-surface-container transition-colors" href="#">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-slate-900 font-semibold flex items-center gap-1">
|
||||
Email & password
|
||||
<span class="material-symbols-outlined text-base">arrow_forward</span>
|
||||
</p>
|
||||
<p class="text-[13px] text-slate-500 mt-1">Managed in Keycloak</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-slate-900 transition-colors">open_in_new</span>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<!-- Danger Zone -->
|
||||
<section class="space-y-4 pt-8">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-red-500 block uppercase">DANGER ZONE</label>
|
||||
<button class="px-6 py-3 border border-red-500/20 text-red-500 hover:bg-red-500/5 rounded-md text-sm font-semibold transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm">delete</span>
|
||||
Delete account
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user