feat(aep): carte AEP — push Gitea 2026-04-28
This commit is contained in:
Jules Neny
226
V2-cadrage/palettes-preview.html
Normal file
226
V2-cadrage/palettes-preview.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>NAV V2 — Palettes preview</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f0f0f0; padding: 24px; }
|
||||
h1 { font-size: 20px; margin-bottom: 4px; }
|
||||
.intro { color: #666; margin-bottom: 24px; font-size: 14px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||||
@media (max-width: 1200px) { .grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.palette-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
||||
.palette-label { padding: 12px 16px; background: #222; color: white; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; }
|
||||
.palette-label small { display: block; font-weight: 400; opacity: 0.7; margin-top: 2px; font-size: 11px; }
|
||||
.swatches { display: flex; height: 40px; }
|
||||
.swatch { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: monospace; color: rgba(0,0,0,0.5); }
|
||||
|
||||
/* Wireframe NAV */
|
||||
.mockup { height: 480px; display: flex; flex-direction: column; font-size: 12px; }
|
||||
.mock-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.08); }
|
||||
.mock-logo { font-weight: 700; font-size: 14px; }
|
||||
.mock-nav-links { display: flex; gap: 12px; font-size: 11px; opacity: 0.7; }
|
||||
.mock-body { flex: 1; display: flex; overflow: hidden; }
|
||||
.mock-sidebar { width: 160px; padding: 12px; border-right: 1px solid rgba(0,0,0,0.08); font-size: 10px; }
|
||||
.mock-filter-group { margin-bottom: 12px; }
|
||||
.mock-filter-title { font-weight: 600; margin-bottom: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.6; }
|
||||
.mock-chip { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 9px; margin: 2px 2px 0 0; }
|
||||
.mock-chip.active { font-weight: 600; }
|
||||
.mock-map { flex: 1; position: relative; overflow: hidden; }
|
||||
.mock-map-bg { position: absolute; inset: 0; opacity: 0.8; background-image:
|
||||
radial-gradient(circle at 30% 40%, rgba(0,0,0,0.06) 0, transparent 40%),
|
||||
radial-gradient(circle at 70% 60%, rgba(0,0,0,0.06) 0, transparent 40%); }
|
||||
.mock-pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid white; }
|
||||
.mock-pin.p1 { top: 25%; left: 40%; }
|
||||
.mock-pin.p2 { top: 45%; left: 50%; }
|
||||
.mock-pin.p3 { top: 60%; left: 35%; }
|
||||
.mock-pin.p4 { top: 35%; left: 65%; }
|
||||
.mock-pin.p5 { top: 55%; left: 70%; }
|
||||
.mock-banner { padding: 10px 16px; font-size: 10px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.08); }
|
||||
.mock-banner-btn { padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; }
|
||||
|
||||
/* ============ PALETTE A — SOBRE INSTITUTIONNEL ============ */
|
||||
.palette-a .mockup { background: #f8f6f1; color: #1a2238; }
|
||||
.palette-a .mock-header { background: white; }
|
||||
.palette-a .mock-logo { color: #1a2238; }
|
||||
.palette-a .mock-sidebar { background: white; }
|
||||
.palette-a .mock-filter-title { color: #1a2238; }
|
||||
.palette-a .mock-chip { background: #eee9df; color: #1a2238; }
|
||||
.palette-a .mock-chip.active { background: #1a2238; color: #f5b342; }
|
||||
.palette-a .mock-map { background: #eee9df; }
|
||||
.palette-a .mock-pin { background: #1a2238; }
|
||||
.palette-a .mock-pin.p2, .palette-a .mock-pin.p4 { background: #f5b342; }
|
||||
.palette-a .mock-banner { background: #1a2238; color: #f8f6f1; }
|
||||
.palette-a .mock-banner-btn { background: #f5b342; color: #1a2238; }
|
||||
|
||||
/* ============ PALETTE B — CHALEUREUX ARTISANAL ============ */
|
||||
.palette-b .mockup { background: #f5ede2; color: #2d2418; }
|
||||
.palette-b .mock-header { background: #fbf6ec; }
|
||||
.palette-b .mock-logo { color: #9b4a2a; }
|
||||
.palette-b .mock-sidebar { background: #fbf6ec; }
|
||||
.palette-b .mock-filter-title { color: #2d5741; }
|
||||
.palette-b .mock-chip { background: #ecd9c1; color: #2d2418; }
|
||||
.palette-b .mock-chip.active { background: #9b4a2a; color: #f5ede2; }
|
||||
.palette-b .mock-map { background: #e6d3b8; }
|
||||
.palette-b .mock-pin { background: #9b4a2a; }
|
||||
.palette-b .mock-pin.p2, .palette-b .mock-pin.p4 { background: #2d5741; }
|
||||
.palette-b .mock-banner { background: #2d5741; color: #f5ede2; }
|
||||
.palette-b .mock-banner-btn { background: #e6b35a; color: #2d2418; }
|
||||
|
||||
/* ============ PALETTE C — MODERNE SOUVERAIN ============ */
|
||||
.palette-c .mockup { background: #fafafa; color: #1f2937; }
|
||||
.palette-c .mock-header { background: white; }
|
||||
.palette-c .mock-logo { color: #000091; }
|
||||
.palette-c .mock-sidebar { background: white; }
|
||||
.palette-c .mock-filter-title { color: #374151; }
|
||||
.palette-c .mock-chip { background: #f3f4f6; color: #1f2937; border: 1px solid #e5e7eb; }
|
||||
.palette-c .mock-chip.active { background: #000091; color: white; border-color: #000091; }
|
||||
.palette-c .mock-map { background: #e5e7eb; }
|
||||
.palette-c .mock-pin { background: #000091; }
|
||||
.palette-c .mock-pin.p2, .palette-c .mock-pin.p4 { background: #ffcc00; border-color: #000091; }
|
||||
.palette-c .mock-banner { background: #1f2937; color: #fafafa; }
|
||||
.palette-c .mock-banner-btn { background: #ffcc00; color: #1f2937; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>NAV V2 — Palettes preview</h1>
|
||||
<p class="intro">3 directions visuelles appliquées au wireframe. Choisis celle qui matche l'énergie du projet.</p>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<!-- PALETTE A -->
|
||||
<div class="palette-card palette-a">
|
||||
<div class="palette-label">A — Sobre institutionnel<small>Service public, lisible, sérieux</small></div>
|
||||
<div class="swatches">
|
||||
<div class="swatch" style="background:#f8f6f1">#f8f6f1</div>
|
||||
<div class="swatch" style="background:#eee9df">#eee9df</div>
|
||||
<div class="swatch" style="background:#1a2238;color:#fff">#1a2238</div>
|
||||
<div class="swatch" style="background:#f5b342">#f5b342</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mock-header">
|
||||
<span class="mock-logo">NAV</span>
|
||||
<div class="mock-nav-links"><span>Carte</span><span>Proposer</span><span>À propos</span></div>
|
||||
</div>
|
||||
<div class="mock-body">
|
||||
<div class="mock-sidebar">
|
||||
<div class="mock-filter-group">
|
||||
<div class="mock-filter-title">Échelle</div>
|
||||
<span class="mock-chip active">National</span>
|
||||
<span class="mock-chip">Régional</span>
|
||||
<span class="mock-chip">Local</span>
|
||||
</div>
|
||||
<div class="mock-filter-group">
|
||||
<div class="mock-filter-title">Fonction</div>
|
||||
<span class="mock-chip active">Juridique</span>
|
||||
<span class="mock-chip">Technique</span>
|
||||
<span class="mock-chip">Chantier</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-map">
|
||||
<div class="mock-map-bg"></div>
|
||||
<div class="mock-pin p1"></div><div class="mock-pin p2"></div>
|
||||
<div class="mock-pin p3"></div><div class="mock-pin p4"></div>
|
||||
<div class="mock-pin p5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-banner">
|
||||
<span>IA : 3,40 €/20 € · 12 fiches · 0,8 kg CO₂</span>
|
||||
<span class="mock-banner-btn">Soutenir NAV</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PALETTE B -->
|
||||
<div class="palette-card palette-b">
|
||||
<div class="palette-label">B — Chaleureux artisanal<small>Humain, proche archi réno, terre</small></div>
|
||||
<div class="swatches">
|
||||
<div class="swatch" style="background:#f5ede2">#f5ede2</div>
|
||||
<div class="swatch" style="background:#9b4a2a;color:#fff">#9b4a2a</div>
|
||||
<div class="swatch" style="background:#2d5741;color:#fff">#2d5741</div>
|
||||
<div class="swatch" style="background:#e6b35a">#e6b35a</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mock-header">
|
||||
<span class="mock-logo">NAV</span>
|
||||
<div class="mock-nav-links"><span>Carte</span><span>Proposer</span><span>À propos</span></div>
|
||||
</div>
|
||||
<div class="mock-body">
|
||||
<div class="mock-sidebar">
|
||||
<div class="mock-filter-group">
|
||||
<div class="mock-filter-title">Échelle</div>
|
||||
<span class="mock-chip active">National</span>
|
||||
<span class="mock-chip">Régional</span>
|
||||
<span class="mock-chip">Local</span>
|
||||
</div>
|
||||
<div class="mock-filter-group">
|
||||
<div class="mock-filter-title">Fonction</div>
|
||||
<span class="mock-chip active">Juridique</span>
|
||||
<span class="mock-chip">Technique</span>
|
||||
<span class="mock-chip">Chantier</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-map">
|
||||
<div class="mock-map-bg"></div>
|
||||
<div class="mock-pin p1"></div><div class="mock-pin p2"></div>
|
||||
<div class="mock-pin p3"></div><div class="mock-pin p4"></div>
|
||||
<div class="mock-pin p5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-banner">
|
||||
<span>IA : 3,40 €/20 € · 12 fiches · 0,8 kg CO₂</span>
|
||||
<span class="mock-banner-btn">Soutenir NAV</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PALETTE C -->
|
||||
<div class="palette-card palette-c">
|
||||
<div class="palette-label">C — Moderne souverain<small>Tech-forward, vibe gouv.fr</small></div>
|
||||
<div class="swatches">
|
||||
<div class="swatch" style="background:#fafafa">#fafafa</div>
|
||||
<div class="swatch" style="background:#000091;color:#fff">#000091</div>
|
||||
<div class="swatch" style="background:#ffcc00">#ffcc00</div>
|
||||
<div class="swatch" style="background:#1f2937;color:#fff">#1f2937</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mock-header">
|
||||
<span class="mock-logo">NAV</span>
|
||||
<div class="mock-nav-links"><span>Carte</span><span>Proposer</span><span>À propos</span></div>
|
||||
</div>
|
||||
<div class="mock-body">
|
||||
<div class="mock-sidebar">
|
||||
<div class="mock-filter-group">
|
||||
<div class="mock-filter-title">Échelle</div>
|
||||
<span class="mock-chip active">National</span>
|
||||
<span class="mock-chip">Régional</span>
|
||||
<span class="mock-chip">Local</span>
|
||||
</div>
|
||||
<div class="mock-filter-group">
|
||||
<div class="mock-filter-title">Fonction</div>
|
||||
<span class="mock-chip active">Juridique</span>
|
||||
<span class="mock-chip">Technique</span>
|
||||
<span class="mock-chip">Chantier</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-map">
|
||||
<div class="mock-map-bg"></div>
|
||||
<div class="mock-pin p1"></div><div class="mock-pin p2"></div>
|
||||
<div class="mock-pin p3"></div><div class="mock-pin p4"></div>
|
||||
<div class="mock-pin p5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-banner">
|
||||
<span>IA : 3,40 €/20 € · 12 fiches · 0,8 kg CO₂</span>
|
||||
<span class="mock-banner-btn">Soutenir NAV</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user