682 lines
22 KiB
HTML
682 lines
22 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 Fondation Professionnel</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>
|
|
/* ============================================
|
|
DESIGN FOUNDATION - PROFESSIONNEL & MODERNE
|
|
|
|
Pour modifier les couleurs, changez UNIQUEMENT
|
|
les variables CSS ci-dessous dans :root.
|
|
|
|
Toute l'application utilisera automatiquement
|
|
ces nouvelles couleurs.
|
|
============================================ */
|
|
|
|
:root {
|
|
/* === PRIMARY COLORS === */
|
|
--color-primary: #0A84FF;
|
|
--color-primary-hover: #0870E6;
|
|
--color-primary-active: #0655CC;
|
|
|
|
/* === BACKGROUND COLORS === */
|
|
--color-background: #FFFFFF;
|
|
--color-surface: #F5F5F7;
|
|
--color-surface-hover: #EBEBED;
|
|
|
|
/* === TEXT COLORS === */
|
|
--color-text-primary: #1C1C1E;
|
|
--color-text-secondary: #6E6E73;
|
|
--color-text-tertiary: #86868B;
|
|
|
|
/* === BORDER COLORS === */
|
|
--color-border: #D1D1D6;
|
|
--color-border-hover: #BCBCBE;
|
|
|
|
/* === CONFIDENCE COLORS === */
|
|
--color-confidence-high: var(--color-primary);
|
|
--color-confidence-medium: var(--color-text-secondary);
|
|
--color-confidence-low: var(--color-border);
|
|
|
|
/* === SPACING === */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--spacing-2xl: 48px;
|
|
--spacing-3xl: 64px;
|
|
|
|
/* === BORDER RADIUS === */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 18px;
|
|
--radius-xl: 24px;
|
|
--radius-pill: 980px;
|
|
|
|
/* === TRANSITIONS === */
|
|
--transition-fast: 150ms;
|
|
--transition-normal: 200ms;
|
|
--transition-slow: 300ms;
|
|
|
|
/* === SHADOWS === */
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
* {
|
|
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;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-3xl) var(--spacing-xl);
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-3xl);
|
|
padding: var(--spacing-3xl) var(--spacing-2xl);
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
header p {
|
|
font-size: 21px;
|
|
font-weight: 400;
|
|
color: var(--color-text-secondary);
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: var(--spacing-3xl);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.003em;
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.color-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-3xl);
|
|
}
|
|
|
|
.swatch {
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
background: var(--color-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.swatch.light {
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.swatch.dark {
|
|
color: var(--color-background);
|
|
}
|
|
|
|
.swatch-name {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.022em;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.swatch-hex {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
opacity: 0.7;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
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;
|
|
transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
|
|
letter-spacing: -0.022em;
|
|
}
|
|
|
|
button:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
button:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
button.btn-primary {
|
|
background: var(--color-primary);
|
|
color: var(--color-background);
|
|
}
|
|
|
|
button.btn-primary:hover {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
button.btn-primary:active {
|
|
background: var(--color-primary-active);
|
|
}
|
|
|
|
button.btn-secondary {
|
|
background: var(--color-surface);
|
|
color: var(--color-text-primary);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
button.btn-secondary:hover {
|
|
background: var(--color-surface-hover);
|
|
}
|
|
|
|
button.btn-tertiary {
|
|
background: transparent;
|
|
color: var(--color-primary);
|
|
border: none;
|
|
}
|
|
|
|
button.btn-tertiary:hover {
|
|
color: var(--color-primary-hover);
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.card {
|
|
background: var(--color-background);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
border: 1px solid var(--color-border);
|
|
transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
margin-bottom: var(--spacing-md);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.card-body {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.card-divider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin: var(--spacing-lg) 0;
|
|
}
|
|
|
|
.confidence-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.confidence-bar {
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-lg);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.confidence-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.confidence-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.confidence-label {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.confidence-track {
|
|
height: 8px;
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-pill);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.confidence-fill {
|
|
height: 100%;
|
|
border-radius: var(--radius-pill);
|
|
transition: width var(--transition-slow) ease;
|
|
}
|
|
|
|
.confidence-high .confidence-value {
|
|
color: var(--color-confidence-high);
|
|
}
|
|
|
|
.confidence-high .confidence-fill {
|
|
background: var(--color-confidence-high);
|
|
}
|
|
|
|
.confidence-medium .confidence-value {
|
|
color: var(--color-confidence-medium);
|
|
}
|
|
|
|
.confidence-medium .confidence-fill {
|
|
background: var(--color-confidence-medium);
|
|
}
|
|
|
|
.confidence-low .confidence-value {
|
|
color: var(--color-confidence-low);
|
|
}
|
|
|
|
.confidence-low .confidence-fill {
|
|
background: var(--color-confidence-low);
|
|
}
|
|
|
|
.input-section {
|
|
margin-bottom: var(--spacing-xl);
|
|
max-width: 400px;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
padding: 14px var(--spacing-lg);
|
|
border-radius: var(--radius-md);
|
|
border: 1.5px solid var(--color-border);
|
|
background: var(--color-background);
|
|
letter-spacing: -0.022em;
|
|
transition: all var(--transition-normal) ease;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
|
|
}
|
|
|
|
.typography-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.typography-item {
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.typography-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--color-text-tertiary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.typography-display {
|
|
font-size: 96px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.typography-h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.08;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.typography-h2 {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.003em;
|
|
line-height: 1.08;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.typography-h3 {
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.004em;
|
|
line-height: 1.1;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.typography-h4 {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.007em;
|
|
line-height: 1.12;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.typography-body {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.typography-caption {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.typography-data {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.info-box {
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
margin-top: var(--spacing-2xl);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.info-box h3 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
margin-bottom: var(--spacing-md);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.info-box p {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.info-box code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 15px;
|
|
background: var(--color-background);
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: var(--spacing-xl) var(--spacing-md);
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
header p {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.typography-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.typography-display {
|
|
font-size: 64px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Chartbastan</h1>
|
|
<p>Design professionnel et fonctionnel. Minimaliste, sobre, et centré sur l'essentiel.</p>
|
|
</header>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Palette de Couleurs</h2>
|
|
<div class="color-grid">
|
|
<div class="swatch light">
|
|
<div class="swatch-name">Background</div>
|
|
<div class="swatch-hex">#FFFFFF</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-name">Surface</div>
|
|
<div class="swatch-hex">#F5F5F7</div>
|
|
</div>
|
|
<div class="swatch dark" style="background: var(--color-primary);">
|
|
<div class="swatch-name">Primary</div>
|
|
<div class="swatch-hex">#0A84FF</div>
|
|
</div>
|
|
<div class="swatch dark" style="background: var(--color-text-primary);">
|
|
<div class="swatch-name">Text</div>
|
|
<div class="swatch-hex">#1C1C1E</div>
|
|
</div>
|
|
<div class="swatch" style="background: var(--color-text-secondary); color: var(--color-background);">
|
|
<div class="swatch-name">Secondary</div>
|
|
<div class="swatch-hex">#6E6E73</div>
|
|
</div>
|
|
<div class="swatch" style="background: var(--color-border); color: var(--color-background);">
|
|
<div class="swatch-name">Border</div>
|
|
<div class="swatch-hex">#D1D1D6</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Boutons</h2>
|
|
<div class="button-group">
|
|
<button class="btn-primary">Voir les prédictions</button>
|
|
<button class="btn-secondary">En savoir plus</button>
|
|
<button class="btn-tertiary">Annuler</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Confidence Meter</h2>
|
|
<div class="confidence-grid">
|
|
<div class="confidence-bar confidence-high">
|
|
<div class="confidence-header">
|
|
<div class="confidence-value">78%</div>
|
|
<div class="confidence-label">Confiance haute</div>
|
|
</div>
|
|
<div class="confidence-track">
|
|
<div class="confidence-fill" style="width: 78%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="confidence-bar confidence-medium">
|
|
<div class="confidence-header">
|
|
<div class="confidence-value">62%</div>
|
|
<div class="confidence-label">Confiance moyenne</div>
|
|
</div>
|
|
<div class="confidence-track">
|
|
<div class="confidence-fill" style="width: 62%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="confidence-bar confidence-low">
|
|
<div class="confidence-header">
|
|
<div class="confidence-value">45%</div>
|
|
<div class="confidence-label">Confiance basse</div>
|
|
</div>
|
|
<div class="confidence-track">
|
|
<div class="confidence-fill" style="width: 45%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Cards</h2>
|
|
<div class="card-grid">
|
|
<div class="card">
|
|
<div class="card-title">Précision Historique</div>
|
|
<div class="card-body">Sur les 30 derniers matchs, votre précision est de 67%. Continuez à améliorer votre stratégie.</div>
|
|
<div class="card-divider"></div>
|
|
<button class="btn-primary" style="width: 100%;">Voir l'historique</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">Matchs du Jour</div>
|
|
<div class="card-body">8 matchs disponibles aujourd'hui. Les prédictions sont mises à jour en temps réel.</div>
|
|
<div class="card-divider"></div>
|
|
<button class="btn-secondary" style="width: 100%;">Voir tous les matchs</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">Statistiques</div>
|
|
<div class="card-body">Vos métriques détaillées sur les 30 derniers jours. Analysez vos performances.</div>
|
|
<div class="card-divider"></div>
|
|
<button class="btn-tertiary" style="width: 100%;">Analyser</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Typographie</h2>
|
|
<div class="typography-grid">
|
|
<div class="typography-item">
|
|
<div class="typography-label">Display</div>
|
|
<div class="typography-display">Aa</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Heading 1</div>
|
|
<div class="typography-h1">Chartbastan</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Heading 2</div>
|
|
<div class="typography-h2">Prédictions du Jour</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Heading 3</div>
|
|
<div class="typography-h3">Confiance Historique</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Heading 4</div>
|
|
<div class="typography-h4">Statistiques de Précision</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Body</div>
|
|
<div class="typography-body">Les prédictions sont basées sur l'analyse de l'énergie collective des supporters sur les réseaux sociaux. Les résultats sont mis à jour en temps réel pour vous fournir les informations les plus précises possibles.</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Caption</div>
|
|
<div class="typography-caption">Dernière mise à jour : il y a 5 minutes</div>
|
|
</div>
|
|
<div class="typography-item">
|
|
<div class="typography-label">Data</div>
|
|
<div class="typography-data">78% | 67% | 45%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Inputs</h2>
|
|
<div class="input-section">
|
|
<div class="input-group">
|
|
<input type="email" placeholder="Email">
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="password" placeholder="Mot de passe">
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" placeholder="Code de vérification">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h3>Comment modifier les couleurs</h3>
|
|
<p>Pour changer les couleurs du design, modifiez uniquement les variables CSS dans la section <code>:root</code> en haut du fichier.</p>
|
|
<p>Par exemple, pour changer la couleur principale, modifiez :</p>
|
|
<p><code>--color-primary: #0A84FF;</code></p>
|
|
<p>Tous les boutons, liens et éléments utilisant cette couleur seront automatiquement mis à jour.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |