367 lines
13 KiB
HTML
367 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chartbastan - Design Directions</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--color-primary: #0A84FF;
|
|
--color-primary-hover: #0870E6;
|
|
--color-background: #FFFFFF;
|
|
--color-surface: #F5F5F7;
|
|
--color-text-primary: #1C1C1E;
|
|
--color-text-secondary: #6E6E73;
|
|
--color-border: #D1D1D6;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--radius-lg: 18px;
|
|
--radius-pill: 980px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--color-background);
|
|
color: var(--color-text-primary);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 64px;
|
|
padding: 64px 32px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
header p {
|
|
font-size: 21px;
|
|
font-weight: 400;
|
|
color: var(--color-text-secondary);
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.direction-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 32px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.direction-card {
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px;
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
.direction-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.direction-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.direction-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.direction-badge {
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
background: var(--color-surface);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.direction-description {
|
|
font-size: 17px;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.direction-features {
|
|
list-style: none;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.direction-features li {
|
|
padding: 8px 0;
|
|
padding-left: 24px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.direction-features li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--color-primary);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mockup-preview {
|
|
background: var(--color-surface);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
min-height: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.mockup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: var(--color-background);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mockup-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mockup-confidence {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.mockup-content {
|
|
background: var(--color-background);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.mockup-match {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.mockup-match:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.match-teams {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.match-confidence {
|
|
font-size: 15px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
button {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
padding: 12px 28px;
|
|
border-radius: var(--radius-pill);
|
|
border: none;
|
|
cursor: pointer;
|
|
background: var(--color-primary);
|
|
color: var(--color-background);
|
|
transition: all 200ms ease;
|
|
width: 100%;
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--color-primary-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.direction-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Chartbastan - Design Directions</h1>
|
|
<p>Explorez différentes directions de design pour trouver celle qui correspond le mieux à votre vision.</p>
|
|
</header>
|
|
|
|
<div class="direction-grid">
|
|
<!-- Direction 1: Minimaliste Centré -->
|
|
<div class="direction-card">
|
|
<div class="direction-header">
|
|
<div class="direction-title">Direction 1: Minimaliste Centré</div>
|
|
<div class="direction-badge">Sobre</div>
|
|
</div>
|
|
<div class="direction-description">
|
|
Design épuré avec focus sur l'essentiel. Information hiérarchisée, espace blanc généreux, navigation simple.
|
|
</div>
|
|
<ul class="direction-features">
|
|
<li>Layout centré avec largeur max 800px</li>
|
|
<li>Navigation bottom bar simple</li>
|
|
<li>Cards espacées verticalement</li>
|
|
<li>Confidence Meter en vedette</li>
|
|
</ul>
|
|
<div class="mockup-preview">
|
|
<div class="mockup-header">
|
|
<div class="mockup-title">Matchs du Jour</div>
|
|
<div class="mockup-confidence">78%</div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div class="mockup-match">
|
|
<div class="match-teams">PSG vs Marseille</div>
|
|
<div class="match-confidence">Confiance : 78%</div>
|
|
</div>
|
|
<div class="mockup-match">
|
|
<div class="match-teams">Lyon vs Saint-Étienne</div>
|
|
<div class="match-confidence">Confiance : 62%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button>Voir cette direction</button>
|
|
</div>
|
|
|
|
<!-- Direction 2: Dashboard Dense -->
|
|
<div class="direction-card">
|
|
<div class="direction-header">
|
|
<div class="direction-title">Direction 2: Dashboard Dense</div>
|
|
<div class="direction-badge">Informatif</div>
|
|
</div>
|
|
<div class="direction-description">
|
|
Layout dense avec beaucoup d'informations visibles. Grid system, multiples cards, métriques détaillées.
|
|
</div>
|
|
<ul class="direction-features">
|
|
<li>Grid 2-3 colonnes sur desktop</li>
|
|
<li>Cards compactes avec plus d'infos</li>
|
|
<li>Navigation tabs horizontale</li>
|
|
<li>Statistiques visibles en permanence</li>
|
|
</ul>
|
|
<div class="mockup-preview">
|
|
<div class="mockup-header">
|
|
<div class="mockup-title">Dashboard</div>
|
|
<div class="mockup-confidence">67%</div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
|
|
<div class="mockup-match">
|
|
<div class="match-teams">PSG</div>
|
|
<div class="match-confidence">78%</div>
|
|
</div>
|
|
<div class="mockup-match">
|
|
<div class="match-teams">Lyon</div>
|
|
<div class="match-confidence">62%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button>Voir cette direction</button>
|
|
</div>
|
|
|
|
<!-- Direction 3: Card-First -->
|
|
<div class="direction-card">
|
|
<div class="direction-header">
|
|
<div class="direction-title">Direction 3: Card-First</div>
|
|
<div class="direction-badge">Moderne</div>
|
|
</div>
|
|
<div class="direction-description">
|
|
Chaque match est une card grande et immersive. Swipe navigation, focus sur un match à la fois.
|
|
</div>
|
|
<ul class="direction-features">
|
|
<li>Cards full-width avec images</li>
|
|
<li>Swipe gauche/droite entre matchs</li>
|
|
<li>Confidence Meter intégré dans card</li>
|
|
<li>Navigation minimaliste</li>
|
|
</ul>
|
|
<div class="mockup-preview">
|
|
<div class="mockup-content" style="padding: 0;">
|
|
<div style="background: var(--color-surface); padding: 32px; border-radius: 12px;">
|
|
<div class="match-teams" style="font-size: 24px; margin-bottom: 16px;">PSG vs Marseille</div>
|
|
<div class="mockup-confidence" style="font-size: 48px; margin-bottom: 16px;">78%</div>
|
|
<div class="match-confidence">Confiance haute</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button>Voir cette direction</button>
|
|
</div>
|
|
|
|
<!-- Direction 4: List-First -->
|
|
<div class="direction-card">
|
|
<div class="direction-header">
|
|
<div class="direction-title">Direction 4: List-First</div>
|
|
<div class="direction-badge">Rapide</div>
|
|
</div>
|
|
<div class="direction-description">
|
|
Liste verticale simple et rapide. Scan visuel facile, informations essentielles, actions rapides.
|
|
</div>
|
|
<ul class="direction-features">
|
|
<li>Liste verticale scrollable</li>
|
|
<li>Items compacts avec confidence visible</li>
|
|
<li>Pull-to-refresh natif</li>
|
|
<li>Actions rapides (tap pour détails)</li>
|
|
</ul>
|
|
<div class="mockup-preview">
|
|
<div class="mockup-content" style="padding: 0;">
|
|
<div class="mockup-match" style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<div class="match-teams">PSG vs Marseille</div>
|
|
<div class="match-confidence">Aujourd'hui 20h00</div>
|
|
</div>
|
|
<div class="mockup-confidence" style="font-size: 24px;">78%</div>
|
|
</div>
|
|
<div class="mockup-match" style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<div class="match-teams">Lyon vs Saint-Étienne</div>
|
|
<div class="match-confidence">Aujourd'hui 22h00</div>
|
|
</div>
|
|
<div class="mockup-confidence" style="font-size: 24px; color: var(--color-text-secondary);">62%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button>Voir cette direction</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |