263 lines
13 KiB
HTML
263 lines
13 KiB
HTML
<!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&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-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 & 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> |