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>
262 lines
14 KiB
HTML
262 lines
14 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>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;500;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": {
|
|
"inverse-primary": "#bec6e0",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-container": "#0b1c30",
|
|
"surface-bright": "#f7f9fb",
|
|
"on-tertiary-fixed-variant": "#ffdad7",
|
|
"surface-container": "#eceef0",
|
|
"on-secondary": "#ffffff",
|
|
"on-tertiary-fixed": "#ffffff",
|
|
"on-primary-fixed": "#ffffff",
|
|
"surface-tint": "#565e74",
|
|
"tertiary": "#7d000f",
|
|
"on-secondary-fixed-variant": "#2d3c51",
|
|
"tertiary-container": "#da3437",
|
|
"primary-fixed-dim": "#3f465c",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"secondary-container": "#c5d6f0",
|
|
"surface-container-high": "#e6e8ea",
|
|
"on-background": "#191c1e",
|
|
"outline-variant": "#c6c6c6",
|
|
"on-surface": "#191c1e",
|
|
"on-tertiary": "#ffdad7",
|
|
"tertiary-fixed-dim": "#930013",
|
|
"primary": "#000000",
|
|
"surface-dim": "#d8dadc",
|
|
"primary-fixed": "#565e74",
|
|
"on-surface-variant": "#474747",
|
|
"surface-container-low": "#f2f4f6",
|
|
"secondary-fixed": "#b7c8e1",
|
|
"secondary": "#505f76",
|
|
"on-error-container": "#410002",
|
|
"on-primary": "#dae2fd",
|
|
"inverse-surface": "#2d3133",
|
|
"surface-variant": "#e0e3e5",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"on-primary-fixed-variant": "#dae2fd",
|
|
"error": "#ba1a1a",
|
|
"on-tertiary-container": "#ffffff",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"on-primary-container": "#ffffff",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"secondary-fixed-dim": "#9cacc5",
|
|
"tertiary-fixed": "#b91a24",
|
|
"background": "#f7f9fb",
|
|
"primary-container": "#333b50",
|
|
"surface": "#f7f9fb",
|
|
"outline": "#777777"
|
|
},
|
|
"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;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface flex min-h-screen">
|
|
<!-- Shared SideNavBar -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-950 flex flex-col py-8 px-4 z-20">
|
|
<div class="mb-12 px-2">
|
|
<h1 class="text-xl font-semibold uppercase tracking-widest text-slate-900 dark:text-slate-50">The Monolith</h1>
|
|
<p class="text-xs text-slate-500 font-medium mt-1">Collaborative Space</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<!-- Inactive -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium 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>Lists</span>
|
|
</a>
|
|
<!-- Inactive -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium 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>Tasks</span>
|
|
</a>
|
|
<!-- Inactive -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium 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>Notes</span>
|
|
</a>
|
|
<!-- Inactive -->
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium 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>Search</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto px-2 flex items-center gap-3 pt-4">
|
|
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="minimalist household avatar icon with geometric shapes in monochromatic grey" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbWbkHnNMCQbWAobU-xC3H3mzv9lWEth-HWwdVtQ-WbM8oEA3Iuuou-Is4OdxVOshnjkR1gK_O8f4hfIrDWf4LmUDWWnBbbH7kI25e42GIDqJIsx3N-_OgkZv6vzyNyYyP0kC6SKuVu-F2kzoEXl68dumKKBb7wrHXs1CLTul6j82ZZrrAsqcgZHZqZTmnal7q0g5oD-0kEx-5Drn-9Z0yd8ix9-nkZQg0wyubNAwxeI42rylzFd85W9SupXTdcB44cT0u_DKbtgoa"/>
|
|
</div>
|
|
<div class="text-sm font-semibold text-slate-900">Household</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 ml-64 min-h-screen bg-surface">
|
|
<!-- Shared TopAppBar -->
|
|
<header class="flex justify-between items-center w-full pl-8 pr-8 py-6 sticky top-0 bg-surface/80 backdrop-blur-md z-10">
|
|
<div class="flex items-center gap-4">
|
|
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-colors" data-icon="arrow_back">arrow_back</button>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-bold uppercase tracking-widest text-slate-500 leading-none">Colectivo</span>
|
|
<h2 class="font-['Inter'] text-2xl font-semibold text-slate-900 leading-tight">Settings</h2>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="material-symbols-outlined opacity-80 hover:opacity-100 text-slate-900" data-icon="notifications">notifications</button>
|
|
<button class="material-symbols-outlined opacity-80 hover:opacity-100 text-slate-900" data-icon="account_circle">account_circle</button>
|
|
</div>
|
|
</header>
|
|
<!-- Settings Container -->
|
|
<div class="max-w-2xl mx-auto py-12 px-6">
|
|
<!-- Avatar Section -->
|
|
<section class="flex flex-col items-center mb-16">
|
|
<div class="relative group">
|
|
<div class="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center text-2xl font-semibold text-white mb-4">
|
|
AG
|
|
</div>
|
|
</div>
|
|
<button class="text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">Change avatar</button>
|
|
</section>
|
|
<!-- Segmented Control & Emoji Grid -->
|
|
<section class="mb-16">
|
|
<div class="flex justify-center mb-8">
|
|
<div class="bg-surface-container-low p-1 rounded-lg flex gap-1">
|
|
<button class="px-6 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">Initials</button>
|
|
<button class="px-6 py-1.5 text-sm font-semibold bg-white text-slate-900 rounded-md shadow-sm">Emoji</button>
|
|
<button class="px-6 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">Photo</button>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low rounded-xl p-6">
|
|
<div class="grid grid-cols-8 gap-4 justify-items-center">
|
|
<!-- Emoji Grid -->
|
|
<button class="text-2xl hover:scale-125 transition-transform">🐸</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🐼</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🦊</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🐨</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🦁</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🐯</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🐻</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🦋</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🌵</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🌻</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🍀</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🌈</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">⭐</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🔥</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">💎</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🎯</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🎸</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🎨</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">📚</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">✈️</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🏔️</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🌊</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🍕</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🍜</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🍣</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">☕</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🍎</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🥑</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🏠</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🚲</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">⚽</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🎮</button>
|
|
<button class="text-2xl hover:scale-125 transition-transform">🤿</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Form Section: Display Name -->
|
|
<section class="mb-12">
|
|
<header class="mb-3">
|
|
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">DISPLAY NAME</span>
|
|
</header>
|
|
<div class="relative">
|
|
<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 font-medium" type="text" value="Ana García"/>
|
|
</div>
|
|
<p class="mt-2 text-[13px] text-slate-400">Changes saved automatically</p>
|
|
</section>
|
|
<!-- Form Section: Language -->
|
|
<section class="mb-16">
|
|
<header class="mb-3">
|
|
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">LANGUAGE</span>
|
|
</header>
|
|
<div class="flex gap-2">
|
|
<button class="px-5 py-2 rounded-full bg-slate-900 text-white text-sm font-medium">English</button>
|
|
<button class="px-5 py-2 rounded-full bg-surface-container-low text-slate-500 hover:bg-slate-200 transition-colors text-sm font-medium">Español</button>
|
|
</div>
|
|
</section>
|
|
<!-- Form Section: Account -->
|
|
<section class="mb-16">
|
|
<header class="mb-3">
|
|
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">ACCOUNT</span>
|
|
</header>
|
|
<div class="bg-surface-container-low rounded-xl p-6 group cursor-pointer hover:bg-surface-container-high transition-colors">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-base font-semibold text-slate-900">Email & password <span class="ml-1 text-slate-400">→</span></p>
|
|
<p class="text-[13px] text-slate-500 mt-0.5">Managed in Keycloak</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="lock">lock</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Danger Zone -->
|
|
<section class="pt-8 border-t border-transparent">
|
|
<header class="mb-4">
|
|
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-red-500">DANGER ZONE</span>
|
|
</header>
|
|
<div class="bg-red-50/50 dark:bg-red-950/10 p-6 rounded-xl">
|
|
<div class="flex items-center justify-between">
|
|
<div class="pr-8">
|
|
<h4 class="text-sm font-semibold text-slate-900">Delete Account</h4>
|
|
<p class="text-[13px] text-slate-500 mt-1 leading-relaxed">Permanently delete your profile and all associated data. This action is irreversible.</p>
|
|
</div>
|
|
<button class="px-4 py-2 text-sm font-semibold text-red-500 hover:bg-red-500 hover:text-white transition-all duration-200 rounded-md">Delete account</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<!-- Glassmorphic Search / Tool (Optional enhancement for 'The Monolith' feel) -->
|
|
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 w-[400px] hidden md:flex items-center bg-white/80 backdrop-blur-xl px-4 py-3 rounded-full shadow-2xl z-50 border border-slate-100">
|
|
<span class="material-symbols-outlined text-slate-400" data-icon="command">keyboard_command_key</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-sm flex-1 placeholder-slate-400 text-slate-900" placeholder="Search settings or tools..." type="text"/>
|
|
<div class="flex gap-1">
|
|
<span class="px-1.5 py-0.5 rounded bg-slate-100 text-[10px] font-bold text-slate-500">⌘</span>
|
|
<span class="px-1.5 py-0.5 rounded bg-slate-100 text-[10px] font-bold text-slate-500">K</span>
|
|
</div>
|
|
</div>
|
|
</body></html> |