sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3b036e84b8cc368e5371b21892d4b5bdea98938d
Momento/stitch_momento_settings_redesign/code.html

263 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="fr"><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;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-error": "#ffffff",
"secondary": "#5c5f60",
"on-primary-fixed-variant": "#004b73",
"secondary-fixed-dim": "#c5c6c8",
"surface": "#f7f9ff",
"on-surface-variant": "#3f4850",
"secondary-container": "#dee0e2",
"primary-container": "#007bb9",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"surface-container": "#ebeef4",
"on-primary-fixed": "#001d31",
"tertiary-fixed-dim": "#ffb875",
"tertiary": "#894d00",
"surface-dim": "#d7dae0",
"secondary-fixed": "#e1e2e4",
"on-background": "#181c20",
"primary-fixed-dim": "#93ccff",
"tertiary-fixed": "#ffdcc0",
"error-container": "#ffdad6",
"on-primary-container": "#fdfcff",
"primary-fixed": "#cce5ff",
"surface-tint": "#006398",
"tertiary-container": "#ac6200",
"outline-variant": "#bfc7d2",
"on-tertiary-fixed": "#2d1600",
"on-secondary-fixed-variant": "#444749",
"on-surface": "#181c20",
"surface-container-highest": "#dfe3e8",
"primary": "#006194",
"surface-container-low": "#f1f4fa",
"on-secondary-container": "#606365",
"surface-bright": "#f7f9ff",
"error": "#ba1a1a",
"on-tertiary-fixed-variant": "#6b3b00",
"outline": "#707881",
"on-primary": "#ffffff",
"on-error-container": "#93000a",
"inverse-primary": "#93ccff",
"on-tertiary-container": "#fffbff",
"inverse-on-surface": "#eef1f7",
"surface-container-high": "#e5e8ee",
"surface-container-lowest": "#ffffff",
"on-secondary-fixed": "#191c1e",
"inverse-surface": "#2d3135",
"surface-variant": "#dfe3e8",
"background": "#f7f9ff"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"lg": "24px",
"gutter": "16px",
"base": "8px",
"xl": "32px",
"sm": "8px",
"margin": "24px",
"md": "16px",
"xs": "4px"
},
"fontFamily": {
"body-lg": ["Inter"],
"body-sm": ["Inter"],
"display-md": ["Inter"],
"headline": ["Inter"],
"label-sm": ["Inter"],
"label-md": ["Inter"],
"display-lg": ["Inter"]
},
"fontSize": {
"body-lg": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}],
"display-md": ["24px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"headline": ["20px", {"lineHeight": "1.4", "fontWeight": "600"}],
"label-sm": ["12px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
"label-md": ["14px", {"lineHeight": "1.2", "fontWeight": "500"}],
"display-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-surface-bright text-on-surface antialiased overflow-hidden">
<!-- SideNavBar Component -->
<aside class="fixed left-0 top-0 h-full w-[260px] border-r border-slate-200 bg-slate-100 flex flex-col p-4 gap-2">
<div class="flex items-center gap-3 px-2 mb-8 mt-2">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white text-xl" data-icon="description">description</span>
</div>
<div>
<h1 class="text-lg font-bold text-slate-900">Memento</h1>
<p class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">Productivity Tool</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
Notes
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="folder">folder</span>
Carnets
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
Rappels
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="archive">archive</span>
Archives
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="delete">delete</span>
Corbeille
</a>
</nav>
<!-- Settings at bottom - Highlighting as active per request -->
<div class="mt-auto pt-4 border-t border-slate-200 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 bg-sky-500/10 text-sky-600 rounded-lg font-medium text-sm transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="settings" style="font-variation-settings: 'FILL' 1;">settings</span>
Paramètres
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
Aide &amp; Support
</a>
</div>
</aside>
<!-- TopNavBar & Main Canvas Content -->
<main class="ml-[260px] h-screen overflow-y-auto bg-[#f8fafc]">
<!-- TopNavBar Cluster -->
<header class="flex items-center justify-start gap-8 px-8 py-4 w-full bg-slate-50 border-b border-slate-200">
<a class="text-sky-600 border-b-2 border-sky-600 pb-2 font-semibold text-sm tracking-tight transition-colors" href="#">Général</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">IA</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">Apparence</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">Profil</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">Données</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">MCP</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">À propos</a>
<div class="ml-auto flex items-center gap-4">
<button class="p-2 text-slate-400 hover:text-slate-600 transition-colors">
<span class="material-symbols-outlined" data-icon="search">search</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-200">
<img alt="Avatar User" data-alt="A professional headshot of a young professional in a minimalist setting. Soft natural lighting from the side illuminates a friendly expression. The background is a clean, neutral white wall, matching the high-end minimalist corporate aesthetic of the Memento app. High resolution, crisp details, soft shadows." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqslXyYOxl-BplqBb3yy4GzYH0Rq5q3ZYVY6ecx8bfM0Z7MUZk9sVN_49ciSeCHu77DeV3L3sGJucBVJ7DwqeJwWCaHpakyV1AyWiNfYyaJUtoYQ5QJ2sIcckq2p9AHdau6O3W9uBzbQFnaqLKn4W0ept-1Uwzs3jfnZNUUaFKEhtMzOWi6oBrVGFeLKzOnF-sPiWNIqSdNoAJ6XCzUjxvgnwzhR9bClX_QkTOC8kTjL2HqhtFrID_Fy22EZ5C4MHRcCv5-sfsiGo"/>
</div>
</div>
</header>
<!-- Main Content Grid -->
<div class="p-lg max-w-6xl mx-auto space-y-8">
<!-- Title Section -->
<section class="flex flex-col gap-1">
<h2 class="font-display-lg text-slate-800">Paramètres</h2>
<p class="font-body-sm text-slate-500">Gérez vos préférences générales et la configuration de votre espace de travail.</p>
</section>
<!-- Bento Grid for Settings Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-lg">
<!-- Card 1: Langue -->
<article class="bg-white rounded-lg border border-slate-200 p-lg shadow-[0_4px_6px_-1px_rgba(0,0,0,0.05)] flex flex-col gap-md">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-sky-50 flex items-center justify-center text-sky-600">
<span class="material-symbols-outlined" data-icon="language">language</span>
</div>
<div>
<h3 class="font-headline text-slate-800">Langue</h3>
<p class="font-body-sm text-slate-500">Choisissez la langue de l'interface</p>
</div>
</div>
<div class="mt-4 relative">
<select class="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-lg text-slate-700 font-body-sm focus:ring-2 focus:ring-sky-600/20 focus:border-sky-600 outline-none appearance-none cursor-pointer">
<option value="auto">Auto</option>
<option value="fr">Français</option>
<option value="en">English</option>
</select>
<div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
<span class="material-symbols-outlined" data-icon="expand_more">expand_more</span>
</div>
</div>
</article>
<!-- Card 2: Notifications -->
<article class="bg-white rounded-lg border border-slate-200 p-lg shadow-[0_4px_6px_-1px_rgba(0,0,0,0.05)] flex flex-col gap-md">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-sky-50 flex items-center justify-center text-sky-600">
<span class="material-symbols-outlined" data-icon="notifications_active">notifications_active</span>
</div>
<div>
<h3 class="font-headline text-slate-800">Notifications</h3>
<p class="font-body-sm text-slate-500">Configurez vos alertes et récapitulatifs</p>
</div>
</div>
<div class="mt-2 space-y-6">
<!-- Toggle Row 1 -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="font-label-md text-slate-700">Notifications email</span>
<span class="font-body-sm text-slate-500">Recevez un récapitulatif par email</span>
</div>
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 transition-colors focus:outline-none">
<span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
</button>
</div>
<!-- Toggle Row 2 -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="font-label-md text-slate-700">Notifications bureau</span>
<span class="font-body-sm text-slate-500">Alertes en temps réel</span>
</div>
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 transition-colors focus:outline-none">
<span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
</button>
</div>
</div>
</article>
<!-- Asymmetric Detail: Security Insight (Bonus High-End UI Element) -->
<article class="md:col-span-2 bg-gradient-to-br from-white to-slate-50 rounded-lg border border-slate-200 p-lg flex items-center gap-8 relative overflow-hidden group">
<div class="z-10 flex-1">
<h3 class="font-headline text-slate-800 mb-2">Sécurité du compte</h3>
<p class="font-body-sm text-slate-500 max-w-xl">Votre compte est actuellement sécurisé par authentification standard. Pour une protection maximale de vos carnets, nous recommandons l'activation de la double authentification.</p>
<div class="mt-6 flex gap-4">
<button class="bg-primary text-white font-label-md py-2.5 px-6 rounded-lg hover:bg-primary-container transition-all shadow-sm">
Activer 2FA
</button>
<button class="bg-transparent border border-slate-200 text-slate-600 font-label-md py-2.5 px-6 rounded-lg hover:bg-white hover:border-slate-300 transition-all">
Journal de connexion
</button>
</div>
</div>
<div class="hidden lg:block relative w-48 h-48 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[180px] absolute -bottom-10 -right-10 text-primary" data-icon="security">security</span>
</div>
</article>
</div>
</div>
</main>
</body></html>
Reference in New Issue View Git Blame Copy Permalink