522 lines
20 KiB
HTML
522 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Visualisation des Couleurs - Slate Moderne</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
padding: 40px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
color: #333;
|
|
font-size: 32px;
|
|
}
|
|
|
|
h2 {
|
|
margin: 40px 0 20px 0;
|
|
color: #444;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.section {
|
|
max-width: 1400px;
|
|
margin: 0 auto 60px;
|
|
}
|
|
|
|
.theme-comparison {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
|
|
gap: 40px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.theme-box {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.theme-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #eee;
|
|
}
|
|
|
|
.theme-name {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.color-swatches {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
}
|
|
|
|
.swatch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.color-box {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
border: 2px solid #e0e0e0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.color-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.color-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.color-value {
|
|
font-size: 12px;
|
|
color: #999;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.comparison-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.comparison-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.comparison-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.comparison-label {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.comparison-swatch {
|
|
height: 150px;
|
|
border-radius: 12px;
|
|
border: 3px solid #e0e0e0;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.comparison-code {
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
color: #666;
|
|
background: #f5f5f5;
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.note-colors {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.note-card {
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.note-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.note-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.note-content {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.recommendation {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.recommendation h2 {
|
|
color: white;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.recommendation p {
|
|
font-size: 18px;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.winner {
|
|
border: 3px solid #667eea;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎨 Visualisation des Couleurs - Options Modernes</h1>
|
|
|
|
<div class="recommendation">
|
|
<h2>🏆 RECOMMANDATION PRINCIPALE : SLATE (GRIS-BLEU)</h2>
|
|
<p>Plus professionnel, moins fatigant, moderne - Sans dégradés !</p>
|
|
</div>
|
|
|
|
<!-- COMPARAISON : AVANT / APRÈS -->
|
|
<div class="section">
|
|
<h2>📊 Comparaison : Bleu Actuel vs Slate Moderne</h2>
|
|
<div class="comparison-section">
|
|
<div class="comparison-grid">
|
|
<div class="comparison-item">
|
|
<div class="comparison-label">Bleu Keep Actuel</div>
|
|
<div class="comparison-swatch" style="background: #356AC0;">
|
|
#356AC0
|
|
</div>
|
|
<span class="comparison-code">Bleu saturé</span>
|
|
</div>
|
|
|
|
<div class="comparison-item">
|
|
<div class="comparison-label">Slate Moderne (NOUVEAU)</div>
|
|
<div class="comparison-swatch" style="background: #7A8A9A;">
|
|
#7A8A9A
|
|
</div>
|
|
<span class="comparison-code">Gris-bleu élégant</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- THEME SLATE - LIGHT MODE -->
|
|
<div class="section">
|
|
<h2>✨ Option 1 : Slate (Gris-Bleu) - Mode Light</h2>
|
|
<div class="theme-comparison">
|
|
<div class="theme-box winner">
|
|
<div class="theme-header">
|
|
<span class="theme-name">🏆 SLATE LIGHT</span>
|
|
</div>
|
|
<div class="color-swatches">
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #F8F9FB;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Background</div>
|
|
<div class="color-value">#F8F9FB</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #FFFFFF;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Card</div>
|
|
<div class="color-value">#FFFFFF</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #F3F4F6;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Sidebar</div>
|
|
<div class="color-value">#F3F4F6</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #3B4252;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Texte (foreground)</div>
|
|
<div class="color-value">#3B4252</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #7A8A9A;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Primary (boutons)</div>
|
|
<div class="color-value">#7A8A9A</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #E5E7EB;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Border</div>
|
|
<div class="color-value">#E5E7EB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- THEME SLATE - DARK MODE -->
|
|
<div class="section">
|
|
<h2>🌙 Option 1 : Slate (Gris-Bleu) - Mode Dark</h2>
|
|
<div class="theme-comparison">
|
|
<div class="theme-box winner">
|
|
<div class="theme-header">
|
|
<span class="theme-name">🏆 SLATE DARK</span>
|
|
</div>
|
|
<div class="color-swatches">
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #1F2937;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Background</div>
|
|
<div class="color-value">#1F2937</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #2D3748;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Card</div>
|
|
<div class="color-value">#2D3748</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #1A202C;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Sidebar</div>
|
|
<div class="color-value">#1A202C</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #F7FAFC;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Texte (foreground)</div>
|
|
<div class="color-value">#F7FAFC</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #9CA3AF;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Primary (boutons)</div>
|
|
<div class="color-value">#9CA3AF</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #4A5568;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Border</div>
|
|
<div class="color-value">#4A5568</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COULEURS DES NOTES -->
|
|
<div class="section">
|
|
<h2>📝 Couleurs des Notes (Light Mode)</h2>
|
|
<div class="note-colors">
|
|
<div class="note-card" style="background: #FFFFFF; border: 1px solid #E5E7EB;">
|
|
<div class="note-title">Default</div>
|
|
<div class="note-content">Note blanche standard</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #FEF2F2; border: 1px solid #FEE2E2;">
|
|
<div class="note-title" style="color: #7F1D1D;">Red</div>
|
|
<div class="note-content" style="color: #991B1B;">Note rouge</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #FFF7ED; border: 1px solid #FFEDD5;">
|
|
<div class="note-title" style="color: #9A3412;">Orange</div>
|
|
<div class="note-content" style="color: #C2410C;">Note orange</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #FEFCE8; border: 1px solid #FEF9C3;">
|
|
<div class="note-title" style="color: #854D0E;">Yellow</div>
|
|
<div class="note-content" style="color: #A16207;">Note jaune</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #ECFDF5; border: 1px solid #D1FAE5;">
|
|
<div class="note-title" style="color: #065F46;">Green (Emerald)</div>
|
|
<div class="note-content" style="color: #047857;">Note verte</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #F0FDFA; border: 1px solid #CCFBF1;">
|
|
<div class="note-title" style="color: #0F766E;">Teal</div>
|
|
<div class="note-content" style="color: #115E59;">Note teal</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #EFF6FF; border: 1px solid #DBEAFE;">
|
|
<div class="note-title" style="color: #1E40AF;">Blue (Sky)</div>
|
|
<div class="note-content" style="color: #1D4ED8;">Note bleue</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #EEF2FF; border: 1px solid #E0E7FF;">
|
|
<div class="note-title" style="color: #4338CA;">Indigo</div>
|
|
<div class="note-content" style="color: #4338CA;">Note indigo</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #F5F3FF; border: 1px solid #EDE9FE;">
|
|
<div class="note-title" style="color: #7C3AED;">Violet</div>
|
|
<div class="note-content" style="color: #7C3AED;">Note violette</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #FAF5FF; border: 1px solid #F3E8FF;">
|
|
<div class="note-title" style="color: #9333EA;">Purple</div>
|
|
<div class="note-content" style="color: #9333EA;">Note pourpre</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #FDF2F8; border: 1px solid #FCE7F3;">
|
|
<div class="note-title" style="color: #BE185D;">Pink</div>
|
|
<div class="note-content" style="color: #BE185D;">Note rose</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #FFF1F2; border: 1px solid #FFE4E6;">
|
|
<div class="note-title" style="color: #E11D48;">Rose</div>
|
|
<div class="note-content" style="color: #E11D48;">Note rose rougeâtre</div>
|
|
</div>
|
|
|
|
<div class="note-card" style="background: #F5F5F4; border: 1px solid #E7E5E4;">
|
|
<div class="note-title" style="color: #71717A;">Gray</div>
|
|
<div class="note-content" style="color: #71717A;">Note grise</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AUTRES OPTIONS -->
|
|
<div class="section">
|
|
<h2>🔄 Autres Options de Thème</h2>
|
|
<div class="theme-comparison">
|
|
<div class="theme-box">
|
|
<div class="theme-header">
|
|
<span class="theme-name">⚫ MONOCHROME</span>
|
|
</div>
|
|
<div class="color-swatches">
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #FFFFFF;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Background</div>
|
|
<div class="color-value">#FFFFFF</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #262626;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Primary</div>
|
|
<div class="color-value">#262626</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-box">
|
|
<div class="theme-header">
|
|
<span class="theme-name">💜 INDIGO (Violet)</span>
|
|
</div>
|
|
<div class="color-swatches">
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #F9F9FB;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Background</div>
|
|
<div class="color-value">#F9F9FB</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #7C3AED;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Primary</div>
|
|
<div class="color-value">#7C3AED</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-box">
|
|
<div class="theme-header">
|
|
<span class="theme-name">🌊 TEAL (Turquoise)</span>
|
|
</div>
|
|
<div class="color-swatches">
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #F9FAFB;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Background</div>
|
|
<div class="color-value">#F9FAFB</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="color-box" style="background: #0F766E;"></div>
|
|
<div class="color-info">
|
|
<div class="color-label">Primary</div>
|
|
<div class="color-value">#0F766E</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="text-align: center; margin-top: 60px;">
|
|
<h2>💬 Votre Choix Ramez ?</h2>
|
|
<p style="font-size: 18px; color: #666; margin-bottom: 30px;">
|
|
Regardez les couleurs, choisissez ce que vous préférez, puis dites-moi :
|
|
</p>
|
|
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
|
|
<div style="background: #10B981; color: white; padding: 15px 30px; border-radius: 8px; font-weight: bold; font-size: 16px;">
|
|
✅ SLATE (mon choix)
|
|
</div>
|
|
<div style="background: #6366F1; color: white; padding: 15px 30px; border-radius: 8px; font-weight: bold; font-size: 16px;">
|
|
💜 INDIGO
|
|
</div>
|
|
<div style="background: #0F766E; color: white; padding: 15px 30px; border-radius: 8px; font-weight: bold; font-size: 16px;">
|
|
🌊 TEAL
|
|
</div>
|
|
<div style="background: #262626; color: white; padding: 15px 30px; border-radius: 8px; font-weight: bold; font-size: 16px;">
|
|
⚫ MONOCHROME
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 40px; padding-bottom: 40px; color: #999; font-size: 14px;">
|
|
<p>💡 Ouvrez ce fichier dans votre navigateur pour voir toutes les couleurs !</p>
|
|
<p>Double-cliquez sur : keep-notes/VISUALISATION-COULEURS.html</p>
|
|
</div>
|
|
</body>
|
|
</html>
|