POL Mickaël
62ae4c54eb
- Design system glassmorphism avec Material Design 3 - 14 composants : App, Sidebar, Dashboard, EnclosView, DragodindeCard, AccouplementView, ReapproView, InventaireView, WorkflowsView, StatistiquesView, ParametresView, UpdateBanner, Toast, ConfirmModal - UndoManager pour annulation des actions destructives (Ctrl+Z) - Toast notifications (success/error) avec bouton Annuler - Modale de confirmation glassmorphism (remplace confirm() natif) - Export/import global des données depuis Paramètres - Maquettes HTML/PNG de la refonte graphique Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
342 lines
19 KiB
HTML
Executable File
342 lines
19 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="fr"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Obsidian Amethyst - Guide de Style</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@100..900&family=Plus+Jakarta+Sans:wght@200..800&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": "#46007c",
|
|
"tertiary-fixed-dim": "#eec200",
|
|
"secondary-dim": "#f271b5",
|
|
"surface-container-lowest": "#000000",
|
|
"on-tertiary": "#645000",
|
|
"on-primary-fixed-variant": "#430077",
|
|
"outline": "#7a7380",
|
|
"surface-container-low": "#16111d",
|
|
"on-secondary-container": "#ffbeda",
|
|
"secondary": "#f673b7",
|
|
"primary-dim": "#be83fa",
|
|
"on-surface-variant": "#b0a8b6",
|
|
"surface-tint": "#cb97ff",
|
|
"tertiary-fixed": "#fed01b",
|
|
"on-primary-fixed": "#000000",
|
|
"on-secondary-fixed-variant": "#922164",
|
|
"on-primary-container": "#360061",
|
|
"inverse-surface": "#fef7ff",
|
|
"surface-container-high": "#231d2b",
|
|
"secondary-container": "#85145a",
|
|
"error": "#ff6e84",
|
|
"surface-container": "#1c1724",
|
|
"secondary-fixed-dim": "#ffabd1",
|
|
"primary-fixed": "#c185fd",
|
|
"surface": "#100c16",
|
|
"surface-bright": "#302939",
|
|
"on-secondary": "#4a002f",
|
|
"on-tertiary-container": "#594700",
|
|
"tertiary": "#ffe083",
|
|
"error-dim": "#d73357",
|
|
"on-error": "#490013",
|
|
"error-container": "#a70138",
|
|
"surface-container-highest": "#292332",
|
|
"tertiary-container": "#fed01b",
|
|
"inverse-primary": "#7c41b5",
|
|
"background": "#100c16",
|
|
"secondary-fixed": "#ffc0db",
|
|
"primary": "#cb97ff",
|
|
"on-tertiary-fixed": "#433500",
|
|
"on-error-container": "#ffb2b9",
|
|
"tertiary-dim": "#eec200",
|
|
"on-secondary-fixed": "#690045",
|
|
"primary-fixed-dim": "#b378ef",
|
|
"on-background": "#f1e8f7",
|
|
"inverse-on-surface": "#59535f",
|
|
"on-surface": "#f1e8f7",
|
|
"surface-dim": "#100c16",
|
|
"surface-variant": "#292332",
|
|
"primary-container": "#c185fd",
|
|
"on-tertiary-fixed-variant": "#645000",
|
|
"outline-variant": "#4b4652"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
|
min-height: 100vh;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-card {
|
|
background: rgba(41, 35, 50, 0.6);
|
|
backdrop-filter: blur(40px);
|
|
-webkit-backdrop-filter: blur(40px);
|
|
}
|
|
.no-line-rule { border: none !important; }
|
|
</style>
|
|
</head>
|
|
<body class="font-body text-on-surface">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full z-50 bg-[#1c1724]/60 backdrop-blur-xl shadow-[0_24px_40px_rgba(0,0,0,0.15)] flex justify-between items-center px-8 h-20 w-full">
|
|
<div class="text-2xl font-black tracking-tighter text-[#cb97ff] uppercase font-headline">Obsidian Amethyst</div>
|
|
<nav class="hidden md:flex gap-8 items-center">
|
|
<a class="font-headline font-bold text-lg tracking-tight text-[#cb97ff] border-b-2 border-[#cb97ff] pb-1 hover:text-[#f1e8f7] transition-colors duration-300" href="#">Foundations</a>
|
|
<a class="font-headline font-bold text-lg tracking-tight text-[#b0a8b6] font-medium hover:text-[#f1e8f7] transition-colors duration-300" href="#">Components</a>
|
|
<a class="font-headline font-bold text-lg tracking-tight text-[#b0a8b6] font-medium hover:text-[#f1e8f7] transition-colors duration-300" href="#">Tokens</a>
|
|
<a class="font-headline font-bold text-lg tracking-tight text-[#b0a8b6] font-medium hover:text-[#f1e8f7] transition-colors duration-300" href="#">Patterns</a>
|
|
</nav>
|
|
<div class="flex items-center gap-6">
|
|
<span class="material-symbols-outlined text-[#cb97ff] cursor-pointer active:scale-95 transition-transform">contrast</span>
|
|
<span class="material-symbols-outlined text-[#cb97ff] cursor-pointer active:scale-95 transition-transform">settings</span>
|
|
<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-highest">
|
|
<img alt="User profile avatar" data-alt="close up of a digital minimalist avatar with violet and black highlights on a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7tEgejfWyafFzblGSBwbCNGUVd0T7F2o_Cg1fQ7pnUxXPhw698nGv5VnibVMIVgoKT3sS-arThlXa207nOmTzTe-NtWVrTHeD2v9vvoNkPO_pMRf5Ksx27BQ5crLqdGO2reAwUy9dDntX2Qrez_DReI0HObXCWOPIXdGpSvhjChyNtBwmpuBX9lNi8XDT9XFx2tbvKWQCiAPR5C_kj-a80WE_RD3F2qWXD5S3jk1ivu3Epd7aqUoNpI1tRjtTz3flPkNHylNj3QP4"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-screen w-64 z-40 bg-[#1c1724]/60 backdrop-blur-2xl shadow-2xl flex flex-col h-full py-8 hidden md:flex">
|
|
<div class="px-8 mb-12 mt-20">
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-on-primary">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</div>
|
|
<h2 class="text-[#f1e8f7] font-bold text-xl">Design System</h2>
|
|
</div>
|
|
<p class="text-xs text-on-surface-variant uppercase tracking-widest font-label">v1.0.4</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<div class="flex items-center gap-3 bg-gradient-to-r from-[#cb97ff]/20 to-transparent text-[#cb97ff] border-l-4 border-[#cb97ff] px-6 py-4 font-['Inter'] text-sm font-semibold cursor-pointer transition-all active:translate-x-1">
|
|
<span class="material-symbols-outlined">palette</span>
|
|
<span>Colors</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
|
<span class="material-symbols-outlined">text_fields</span>
|
|
<span>Typography</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
|
<span class="material-symbols-outlined">layers</span>
|
|
<span>Elevation</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
|
<span class="material-symbols-outlined">grid_view</span>
|
|
<span>Layout</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
|
<span class="material-symbols-outlined">auto_awesome</span>
|
|
<span>Motion</span>
|
|
</div>
|
|
</nav>
|
|
<div class="mt-auto px-6 space-y-4">
|
|
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer">
|
|
<span class="material-symbols-outlined">description</span>
|
|
<span>Documentation</span>
|
|
</div>
|
|
<button class="w-full py-3 bg-primary text-on-primary rounded-xl font-bold hover:brightness-110 transition-all shadow-lg shadow-primary/20">
|
|
Download Assets
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Canvas -->
|
|
<main class="md:ml-64 pt-28 px-8 pb-12">
|
|
<!-- Header Section -->
|
|
<section class="mb-16">
|
|
<h1 class="font-headline font-extrabold text-5xl tracking-tighter text-on-surface mb-2">Guide de Style</h1>
|
|
<p class="text-on-surface-variant font-label text-lg">Spécifications visuelles et identité de l'archive Obsidian.</p>
|
|
</section>
|
|
<!-- Bento Grid for Sections -->
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-8">
|
|
<!-- 1. Color Palette Section -->
|
|
<section class="xl:col-span-8 flex flex-col gap-6">
|
|
<div class="flex items-center gap-4 mb-2">
|
|
<span class="material-symbols-outlined text-primary text-3xl">palette</span>
|
|
<h2 class="font-headline font-bold text-2xl text-on-surface">Palette de Couleurs</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Primary Amethyst -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
|
<div class="h-32 bg-[#8B5CF6] group-hover:brightness-110 transition-all"></div>
|
|
<div class="p-4">
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Améthyste Primaire</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline font-bold text-on-surface">#8B5CF6</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Amethyst Variant -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
|
<div class="h-32 bg-[#CB97FF] group-hover:brightness-110 transition-all"></div>
|
|
<div class="p-4">
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Améthyste Éclat</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline font-bold text-on-surface">#CB97FF</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Secondary Pink -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
|
<div class="h-32 bg-[#F673B7] group-hover:brightness-110 transition-all"></div>
|
|
<div class="p-4">
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Rose Secondaire</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline font-bold text-on-surface">#F673B7</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Deep Background -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
|
<div class="h-32 bg-[#0A0A0F] group-hover:brightness-110 transition-all"></div>
|
|
<div class="p-4">
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Noir Profond</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline font-bold text-on-surface">#0A0A0F</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Surface Deep -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
|
<div class="h-32 bg-[#1C1724] group-hover:brightness-110 transition-all"></div>
|
|
<div class="p-4">
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Surface Obsidian</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline font-bold text-on-surface">#1C1724</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- UI Grey -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
|
<div class="h-32 bg-[#4B4652] group-hover:brightness-110 transition-all"></div>
|
|
<div class="p-4">
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Gris d'Interface</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline font-bold text-on-surface">#4B4652</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 2. Typography Section -->
|
|
<section class="xl:col-span-4 glass-card rounded-xl p-8 shadow-2xl border-none">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<span class="material-symbols-outlined text-secondary text-3xl">text_fields</span>
|
|
<h2 class="font-headline font-bold text-2xl text-on-surface">Typographie</h2>
|
|
</div>
|
|
<div class="space-y-12">
|
|
<div>
|
|
<p class="text-xs text-on-surface-variant uppercase tracking-widest mb-4 font-label">Police Headline: Manrope</p>
|
|
<div class="space-y-4">
|
|
<h1 class="font-headline font-extrabold text-4xl tracking-tighter">Affichage Large</h1>
|
|
<h2 class="font-headline font-bold text-2xl tracking-tight">Titre de Section</h2>
|
|
<h3 class="font-headline font-semibold text-xl tracking-tight">Sous-titre informatif</h3>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-on-surface-variant uppercase tracking-widest mb-4 font-label">Police Body: Inter</p>
|
|
<div class="space-y-4">
|
|
<p class="font-body text-base text-on-surface leading-relaxed">
|
|
Le corps de texte utilise Inter pour une lisibilité maximale. Idéal pour les descriptions longues et les données complexes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-on-surface-variant uppercase tracking-widest mb-4 font-label">Police Label: Plus Jakarta Sans</p>
|
|
<div class="space-y-2">
|
|
<p class="font-label text-sm font-medium text-on-surface">Metadata et petits détails</p>
|
|
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Boutons et Indicateurs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 3. Components Preview Section -->
|
|
<section class="xl:col-span-12 mt-8">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<span class="material-symbols-outlined text-tertiary text-3xl">widgets</span>
|
|
<h2 class="font-headline font-bold text-2xl text-on-surface">Composants & Glassmorphism</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Glass Card Example -->
|
|
<div class="glass-card p-8 rounded-xl relative overflow-hidden group">
|
|
<div class="absolute -right-10 -top-10 w-32 h-32 bg-primary/20 rounded-full blur-3xl transition-all duration-500 group-hover:bg-primary/40"></div>
|
|
<span class="material-symbols-outlined text-primary mb-4 text-4xl" style="font-variation-settings: 'FILL' 1;">diamond</span>
|
|
<h3 class="font-headline font-bold text-xl mb-3">Carte Vitrée</h3>
|
|
<p class="text-on-surface-variant text-sm mb-6 leading-relaxed">Illustration du style glassmorphism avec flou d'arrière-plan et bordures fantômes subtiles.</p>
|
|
<div class="w-full h-1.5 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="w-2/3 h-full bg-gradient-to-r from-primary to-primary-container shadow-[0_0_12px_rgba(203,151,255,0.4)]"></div>
|
|
</div>
|
|
<div class="mt-2 flex justify-between">
|
|
<span class="text-[10px] font-label uppercase text-on-surface-variant">Progression</span>
|
|
<span class="text-[10px] font-label font-bold text-primary">66%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Buttons Section -->
|
|
<div class="bg-surface-container p-8 rounded-xl">
|
|
<h3 class="font-headline font-bold text-xl mb-6">Boutons & Actions</h3>
|
|
<div class="space-y-4">
|
|
<button class="w-full py-4 bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold rounded-xl active:scale-95 transition-all shadow-xl shadow-primary/10">
|
|
Action Principale
|
|
</button>
|
|
<button class="w-full py-4 bg-secondary-container text-secondary-fixed font-bold rounded-xl active:scale-95 transition-all flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined">bolt</span>
|
|
Action Secondaire
|
|
</button>
|
|
<div class="flex gap-2">
|
|
<button class="flex-1 py-3 bg-surface-variant/40 hover:bg-surface-variant text-on-surface-variant font-semibold rounded-xl transition-all text-sm">Annuler</button>
|
|
<button class="flex-1 py-3 bg-error/10 text-error hover:bg-error/20 font-semibold rounded-xl transition-all text-sm">Supprimer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Visual Assets / Imagery Style -->
|
|
<div class="bg-surface-container rounded-xl overflow-hidden relative group">
|
|
<img alt="Imagery Style" class="w-full h-full object-cover opacity-60 group-hover:scale-110 transition-transform duration-700" data-alt="abstract flowing silk textures in deep purple and magenta tones with cinematic atmospheric lighting and soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuACsNwGWZEtZWVb6zrAF8BxLMSCA7dslwDZV3Ge4P7A79P0aI4dDPzDPZBdldlqbxTeMJjBQWUwQ7aHT8MEOIgASFSLm2fl4LjGLM_VhVpJR4_non8giL3x04BXtndSWE66YMW4HdilOW0MRuhT9-hE4kD48dPbEfb3YUzAC6wpITiaqCTcaHDqEqITdj_Zd76rcJhVskVYOh99YGyco8HT26C7k4Ld_XJUbiQIUn1bMjaI1RKPKrCXpk_vwTkA2pQTr-I-egKxZXuY"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-[#100c16] via-transparent to-transparent p-8 flex flex-col justify-end">
|
|
<h3 class="font-headline font-bold text-xl text-[#f1e8f7]">Style Imagerie</h3>
|
|
<p class="text-on-surface-variant text-sm mt-1">Sombres, cinématiques, avec accents néon.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Footer Export Branding -->
|
|
<footer class="mt-20 pt-12 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-8">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-surface-container rounded-full flex items-center justify-center text-primary font-black text-xl">Ω</div>
|
|
<div>
|
|
<p class="font-headline font-bold text-on-surface">Obsidian Amethyst System</p>
|
|
<p class="text-xs text-on-surface-variant font-label">Propriété de l'Archive Améthyste © 2024</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="px-6 py-2 bg-surface-container-highest rounded-full text-xs font-bold text-on-surface tracking-wider uppercase flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
Export Prêt
|
|
</div>
|
|
<div class="px-6 py-2 bg-surface-container-highest rounded-full text-xs font-bold text-on-surface tracking-wider uppercase">
|
|
A3 / Digital Standard
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<!-- Contextual FAB Suppression: Hide for Guide/Style screens as per rules -->
|
|
</body></html> |