diff --git a/static/css/app.css b/static/css/app.css index e57ee08..8a02811 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -82,6 +82,30 @@ --container-w: 1100px; --gutter: 20px; --focus-ring: 0 0 0 3px rgba(78,158,214,0.45); + + /* Utility base colors */ + --white: #ffffff; + --black: #000000; + + /* Code window & syntax tokens (dark default) */ + --code-bg: #1e1e2e; + --code-header-bg: #28293d; + --code-filename: #a9a9b3; + --code-text: #cdd6f4; + --code-line-number: #5c5f77; + --code-dot-red: #ff5f56; + --code-dot-yellow: #ffbd2e; + --code-dot-green: #27c93f; + --syn-qn: #cba6f7; /* keywords like def/if/return */ + --syn-fn: #89b4fa; /* function names */ + --syn-st: #a6e3a1; /* strings */ + --syn-kw: #f9e2af; /* booleans/values */ + --syn-cm: #6c7086; /* comments */ + --syn-ow: #cba6f7; /* operators */ + + /* Misc */ + --border-glass-dark: rgba(0,0,0,0.2); + --border-glass-light: rgba(255,255,255,0.05); } /* Light theme values — applied via colors_light.css inclusion */ @@ -104,7 +128,10 @@ --text: var(--fg); --text-muted: var(--muted); --link: var(--primary); - --link-hover: var(--accent); + /* Hover liens (light): garder une teinte bleue pour éviter l'orange sur bleu */ + --link-hover: color-mix(in oklab, var(--primary) 78%, var(--black) 22%); + /* Visited liens (light): un ton plus profond, toujours dans la gamme bleue */ + --link-visited: color-mix(in oklab, var(--primary) 70%, var(--black) 30%); /* Functional colors */ --success: #1f9d63; @@ -133,6 +160,28 @@ --surface-raised: var(--elev); --border-subtle: rgba(12,32,55,0.10); --border-strong: #8fb0c4; + + /* Utility base colors */ + --white: #ffffff; + --black: #000000; + + /* Code window & syntax tokens (light theme keeps same accent look) */ + --code-bg: #1e1e2e; + --code-header-bg: #28293d; + --code-filename: #a9a9b3; + --code-text: #cdd6f4; + --code-line-number: #5c5f77; + --code-dot-red: #ff5f56; + --code-dot-yellow: #ffbd2e; + --code-dot-green: #27c93f; + --syn-qn: #cba6f7; + --syn-fn: #89b4fa; + --syn-st: #a6e3a1; + --syn-kw: #f9e2af; + --syn-cm: #6c7086; + --syn-ow: #cba6f7; + --border-glass-dark: rgba(0,0,0,0.2); + --border-glass-light: rgba(255,255,255,0.05); } html { @@ -523,10 +572,10 @@ pre { /* Make primary CTA more visible */ font-weight: 700; background: linear-gradient(180deg, - color-mix(in oklab, var(--primary) 92%, #ffffff 8%), - color-mix(in oklab, var(--primary) 82%, #000000 18%) + color-mix(in oklab, var(--primary) 92%, var(--white) 8%), + color-mix(in oklab, var(--primary) 82%, var(--black) 18%) ); - border-color: color-mix(in oklab, var(--primary) 70%, #000000 30%); + border-color: color-mix(in oklab, var(--primary) 70%, var(--black) 30%); box-shadow: 0 8px 22px color-mix(in oklab, var(--primary) 35%, transparent), 0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent); @@ -535,8 +584,8 @@ pre { .cta-primary:hover { transform: translateY(-2px); background: linear-gradient(180deg, - color-mix(in oklab, var(--primary) 96%, #ffffff 4%), - color-mix(in oklab, var(--primary) 88%, #000000 12%) + color-mix(in oklab, var(--primary) 96%, var(--white) 4%), + color-mix(in oklab, var(--primary) 88%, var(--black) 12%) ); box-shadow: 0 12px 28px color-mix(in oklab, var(--primary) 45%, transparent), @@ -953,6 +1002,29 @@ footer.site-footer { html { background: var(--bg); color: var(--fg); } nav.site-nav { background: var(--nav-bg); } +/* Light-mode link ergonomics — avoid orange on blue, improve affordance */ +[data-theme='light'] a:not(.button) { + color: var(--link); + text-decoration: none; + text-underline-offset: 2px; +} + +[data-theme='light'] a:not(.button):hover, +[data-theme='light'] a:not(.button):focus-visible { + color: var(--link-hover); + text-decoration: underline; +} + +[data-theme='light'] a:not(.button):visited { + color: var(--link-visited); +} + +/* Navigation links: keep same bg hover but swap orange for blue in light */ +[data-theme='light'] .site-nav a:hover { + color: var(--link-hover); + background-color: var(--surface-raised); +} + .navbar ul ul { background: var(--elev); border-color: var(--border); box-shadow: var(--shadow-1); } .navbar ul ul a { color: var(--muted); } @@ -1018,12 +1090,12 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); } .code-window { /* Fond sombre style éditeur moderne (ex: Dracula/Catppuccin) */ - background: #1e1e2e; + background: var(--code-bg); border-radius: 12px; /* Une ombre portée pour donner de la profondeur */ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; /* Pour que les coins arrondis fonctionnent */ - border: 1px solid rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-glass-light); font-family: 'Fira Code', 'Roboto Mono', 'Courier New', monospace; /* Important: police monospace */ transform: translateY(0); transition: transform 0.3s ease, box-shadow 0.3s ease; @@ -1037,12 +1109,12 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); } /* HEADER DE LA FENÊTRE (Style macOS) */ .window-header { - background: #28293d; /* Légèrement plus clair que le fond */ + background: var(--code-header-bg); /* Légèrement plus clair que le fond */ padding: 12px 16px; display: flex; align-items: center; position: relative; - border-bottom: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid var(--border-glass-dark); } /* Les 3 petits points colorés */ @@ -1052,9 +1124,9 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); } z-index: 2; } .dot { width: 12px; height: 12px; border-radius: 50%; } -.dot.red { background: #ff5f56; } -.dot.yellow { background: #ffbd2e; } -.dot.green { background: #27c93f; } +.dot.red { background: var(--code-dot-red); } +.dot.yellow { background: var(--code-dot-yellow); } +.dot.green { background: var(--code-dot-green); } /* Le nom du fichier centré */ .filename { @@ -1062,7 +1134,7 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); } left: 0; right: 0; text-align: center; - color: #a9a9b3; + color: var(--code-filename); font-size: 0.85rem; font-weight: 500; user-select: none; /* Empêche de sélectionner le texte du titre */ @@ -1076,7 +1148,7 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); } .code-block { margin: 0; - color: #cdd6f4; /* Couleur de base du texte */ + color: var(--code-text); /* Couleur de base du texte */ line-height: 1.7; font-size: 15px; white-space: pre; /* Respecte les espaces et sauts de ligne */ @@ -1096,18 +1168,148 @@ footer { background-color: var(--neutral-0); color: var(--text-muted); } display: inline-block; width: 30px; margin-right: 20px; - color: #5c5f77; /* Gris foncé pour les numéros */ + color: var(--code-line-number); /* Gris foncé pour les numéros */ text-align: right; user-select: none; } /* Couleurs des mots-clés (Basé sur les classes span ajoutées dans le HTML) */ -.qn { color: #cba6f7; font-weight: bold; } /* def, if, return (Mauve) */ -.fn { color: #89b4fa; } /* Noms de fonctions (Bleu) */ -.st { color: #a6e3a1; } /* Strings / Textes (Vert) */ -.kw { color: #f9e2af; } /* Booléens, valeurs clés (Jaune/Orange) */ -.cm { color: #6c7086; font-style: italic; } /* Commentaires (Gris) */ -.ow { color: #cba6f7; } /* Opérateurs and/or (Mauve) */ +.qn { color: var(--syn-qn); font-weight: bold; } /* def, if, return (Mauve) */ +.fn { color: var(--syn-fn); } /* Noms de fonctions (Bleu) */ +.st { color: var(--syn-st); } /* Strings / Textes (Vert) */ +.kw { color: var(--syn-kw); } /* Booléens, valeurs clés (Jaune/Orange) */ +.cm { color: var(--syn-cm); font-style: italic; } /* Commentaires (Gris) */ +.ow { color: var(--syn-ow); } /* Opérateurs and/or (Mauve) */ + +/* --- SECTION PRICING --- */ + +.pricing-section { + padding: 80px 20px; + max-width: 1000px; + margin: 0 auto; +} + +.pricing-header { + text-align: center; + margin-bottom: 50px; +} +.pricing-header h2 { font-size: 2rem; margin-bottom: 10px; } +.pricing-header p { color: var(--text-muted); } + +/* La Grille des cartes */ +.pricing-grid { + display: grid; + grid-template-columns: 1fr; + gap: 30px; +} + +/* Sur écran large, on met côte à côte */ +@media (min-width: 768px) { + .pricing-grid { + grid-template-columns: 1fr 1fr; + align-items: center; /* Pour centrer verticalement si tailles différentes */ + } +} + +/* --- STYLE DES CARTES --- */ + +.plan-card { + background: var(--code-bg); /* Fond sombre carte */ + border: 1px solid var(--border-glass-light); + border-radius: 16px; + padding: 30px; + position: relative; + transition: transform 0.3s ease; +} + +.plan-card:hover { + transform: translateY(-5px); +} + +.plan-header { + margin-bottom: 25px; + text-align: center; + border-bottom: 1px solid color-mix(in oklab, var(--white) 10%, transparent); + padding-bottom: 20px; +} + +.plan-header h3 { font-size: 1.4rem; margin-bottom: 5px; color: var(--white); } +.plan-header .price { font-size: 2rem; font-weight: bold; color: var(--white); margin: 10px 0; } +.plan-header p { font-size: 0.9rem; color: var(--text-muted); margin: 0; } + +/* Liste des features */ +.plan-features { + list-style: none; + padding: 0; + margin: 0 0 30px 0; +} + +.plan-features li { + margin-bottom: 15px; + color: var(--text); + display: flex; + align-items: flex-start; + gap: 10px; +} + +.plan-features i { + color: var(--success); /* Check vert */ + margin-top: 4px; /* Alignement visuel */ +} + +/* Bouton pleine largeur dans les cartes */ +.full-width { + width: 100%; + display: block; + text-align: center; + box-sizing: border-box; +} + +/* --- SPÉCIFICITÉS CARTE PREMIUM --- */ + +.plan-card.premium { + background: color-mix(in oklab, var(--code-bg) 92%, var(--white) 8%); /* Un poil plus clair pour ressortir */ + border: 1px solid var(--primary); /* Bordure violette (ou ta couleur primaire) */ + box-shadow: 0 0 30px color-mix(in oklab, var(--primary) 15%, transparent); /* Glow subtil */ + transform: scale(1.02); /* Légèrement plus grande par défaut */ +} + +/* Le petit badge "Recommandé" */ +.badge-popular { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + background: var(--primary); /* Ta couleur primaire */ + color: var(--white); + padding: 4px 12px; + border-radius: 20px; + font-size: 0.75rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Light mode adjustments for plan cards — align with light DA */ +[data-theme='light'] .plan-card { + background: var(--card); + border: 1px solid var(--border); +} + +[data-theme='light'] .plan-header { + border-bottom: 1px solid color-mix(in oklab, var(--black) 8%, transparent); +} + +[data-theme='light'] .plan-header h3, +[data-theme='light'] .plan-header .price { + color: var(--fg); +} + +[data-theme='light'] .plan-card.premium { + background: color-mix(in oklab, var(--card) 94%, var(--primary) 6%); + border: 1px solid color-mix(in oklab, var(--primary) 60%, var(--border) 40%); + box-shadow: 0 0 24px color-mix(in oklab, var(--primary) 18%, transparent); +} /* Light theme stylesheet — relies on design tokens */ @@ -1296,7 +1498,7 @@ input[type="text"], input[type="email"], input[type="password"], textarea { [data-theme='light'] .button-secondary { background-color: var(--accent); border-color: var(--accent); - color: #ffffff; + color: var(--white); } [data-theme='light'] .button.button-secondary:hover, [data-theme='light'] .btn-secondary:hover, diff --git a/templates/home.html b/templates/home.html index 77ae7c2..22a0cbe 100644 --- a/templates/home.html +++ b/templates/home.html @@ -70,20 +70,43 @@

Posez vos questions et obtenez de l'aide de la communauté et de l'auteur.

- {% block course %} - {% include "courses/partials/list.html" %} - {% endblock %} -
-

Gratuit pour commencer, Premium pour aller plus loin

- -
- Créer mon compte - Parcourir les cours +
+
+

Commencez gratuitement, passez Pro quand vous êtes prêt

+

Pas de surprise, pas de carte cachée.

+
+ +
+
+
+

Découverte

+
0€
+

Pour tester la pédagogie

+
+
    +
  • Cours d'introduction complets
    • +
  • Accès au code source de base
    • +
  • Accès à la communauté
    • +
+ Créer un compte gratuit +
+ +
+
Recommandé
+
+

Premium

+
À la carte

Pour devenir autonome

+
+
    +
  • Tous les avantages gratuits
    • +
  • Projets complexes de A à Z
    • +
  • Corrections détaillées en vidéo
    • +
  • Certificat de réussite
    • +
  • Mises à jour à vie
    • +
+ Voir les cours Premium +
@@ -101,10 +124,12 @@ {% endfor %}
- - -
+ + +{% block course %} + {% include "courses/partials/list.html" %} +{% endblock %}

Ils progressent avec Partir de zéro

@@ -129,4 +154,4 @@
-{% endblock %} +{% endblock %} \ No newline at end of file