╔════════════════════════════════════════════════════════════╗
║ 🐍 PythonTaMère [Accueil] [Leçons] [Profil] [Connexion] ║
╠════════════════════════════════════════════════════════════╣
║ ║
║ Apprenez Python de manière interactive ║
║ ║
║ Des leçons courtes, des exercices pratiques, ║
║ des résultats immédiats ║
║ ║
║ [🚀 Commencer maintenant] [ℹ️ En savoir plus] ║
║ ║
║ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ║
║ │ ⚡ Instant│ │ ✓ Feedback│ │ 📊 Suivi │ │ 🎓 Progressif║
║ │ │ │ │ │ │ │ │ ║
║ │ Code dans│ │ Tests │ │Progression│ │ Leçons │ ║
║ │navigateur│ │ auto │ │ perso │ │ courtes │ ║
║ └──────────┘ └──────────┘ └──────────┘ └──────────┘ ║
╚════════════════════════════════════════════════════════════╝
╔════════════════════════════════════════════════════════════╗
║ 🐍 PythonTaMère [Accueil] [Leçons] [Profil] [Connexion] ║
╠════════════════════════════════════════════════════════════╣
║ ║
║ Mes Leçons ║
║ ║
║ ━━ Bases ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║
║ ║
║ ┌────────────────────────┐ ┌────────────────────────┐ ║
║ │ Les Bases de Python │ │ Opérations & Conditions│ ║
║ │ BASES │ │ BASES │ ║
║ │ │ │ │ ║
║ │ 📋 2 exercices │ │ 📋 2 exercices │ ║
║ │ [✓ Terminé] │ │ [⏳ En cours] │ ║
║ └────────────────────────┘ └────────────────────────┘ ║
║ ║
║ ━━ Contrôle de flux ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║
║ ║
║ ┌────────────────────────┐ ║
║ │ Les Boucles │ ║
║ │ CONTRÔLE DE FLUX │ ║
║ │ │ ║
║ │ 📋 1 exercice │ ║
║ │ [⭘ Pas commencé] │ ║
║ └────────────────────────┘ ║
╚════════════════════════════════════════════════════════════╝
╔════════════════════════════════════════════════════════════╗
║ ← Retour aux leçons ║
╠════════════════════════════════════════════════════════════╣
║ ║
║ # Les Bases de Python ║
║ ║
║ Bienvenue dans votre première leçon ! Nous allons ║
║ découvrir les fondamentaux de Python. ║
║ ║
║ ## Variables et Types ║
║ ║
║ En Python, vous pouvez créer des variables sans ║
║ déclarer leur type : ║
║ ║
║ name = "Alice" ║
║ age = 25 ║
║ ║
║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║
║ ║
║ Exercices ║
║ ║
║ ┌───────────────────────────────────────────────────┐ ║
║ │ ⭐ Hello World ✓ │ ║
║ └───────────────────────────────────────────────────┘ ║
║ ┌───────────────────────────────────────────────────┐ ║
║ │ ⭐ Utiliser des variables │ ║
║ └───────────────────────────────────────────────────┘ ║
╚════════════════════════════════════════════════════════════╝
╔══════════════════════╦══════════════════════════════════════╗
║ ← Retour ║ Hello World [▶ Exécuter] [✓ Valider]
╠══════════════════════╬══════════════════════════════════════╣
║ ║ ║
║ ## Énoncé ║ 1 | # Écrivez votre code ici ║
║ ║ 2 | print("Hello, World!") ║
║ Écrivez un programme ║ 3 | ║
║ qui affiche ║ 4 | ║
║ "Hello, World!" ║ 5 | ║
║ ║ 6 | ║
║ **Objectif**: ║ 7 | ║
║ Utiliser la fonction ║ 8 | ║
║ `print()` pour ║ ║
║ afficher du texte. ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║
║ ║ [Console] [Tests] ║
║ **Exemple**: ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║
║ ``` ║ ║
║ Hello, World! ║ ✓ Test basique ║
║ ``` ║ Test passed ║
║ ║ ║
║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║
║ ║ Résultats: 1/1 tests réussis ║
║ ║ ║
║ ║ 🏆 Bravo ! Tous les tests passés ! ║
╚══════════════════════╩══════════════════════════════════════╝
╔════════════════════════════════════════════════════════════╗
║ 🐍 PythonTaMère [Accueil] [Leçons] [Profil] [Déconnexion]║
╠════════════════════════════════════════════════════════════╣
║ ║
║ Mon Profil ║
║ ║
║ 👤 student@test.com ║
║ ║
║ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ║
║ │ 2 │ │ 5 │ │ 10 │ ║
║ │ ─────────── │ │ ─────────── │ │ ─────────── │ ║
║ │ Leçons │ │ Exercices │ │ Soumissions │ ║
║ │ complétées │ │ réussis │ │ récentes │ ║
║ │ 67% de 3 │ │ 100% de 5 │ │ │ ║
║ └─────────────┘ └─────────────┘ └─────────────┘ ║
║ ║
╚════════════════════════════════════════════════════════════╝
╔════════════════════════════════════════════════════════════╗
║ 🐍 PythonTaMère [Accueil] [Leçons] [Profil] [Admin] [Déco]║
╠════════════════════════════════════════════════════════════╣
║ ║
║ ⚙️ Administration ║
║ ║
║ ┌────────────────────────────────────────────────────┐ ║
║ │ Créer une Leçon │ ║
║ ├────────────────────────────────────────────────────┤ ║
║ │ Slug (identifiant unique) │ ║
║ │ [python-basics________________________] │ ║
║ │ │ ║
║ │ Titre │ ║
║ │ [Les Bases de Python__________________] │ ║
║ │ │ ║
║ │ Module │ ║
║ │ [Bases_________________________________] │ ║
║ │ │ ║
║ │ Contenu (Markdown) │ ║
║ │ ┌────────────────────────────────────────────┐ │ ║
║ │ │ # Titre │ │ ║
║ │ │ │ │ ║
║ │ │ Contenu en Markdown... │ │ ║
║ │ └────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ │ [➕ Créer la Leçon] │ ║
║ └────────────────────────────────────────────────────┘ ║
║ ║
║ ┌────────────────────────────────────────────────────┐ ║
║ │ Créer un Exercice │ ║
║ │ ... │ ║
╚════════════════════════════════════════════════════════════╝
Primary (Bleu): #3b82f6 ███ Actions principales
Success (Vert): #10b981 ███ Tests réussis
Danger (Rouge): #ef4444 ███ Erreurs
Warning (Orange): #f59e0b ███ Avertissements
Text Main: #1e293b ███ Texte principal
Text Secondary: #64748b ███ Texte secondaire
Background: #f8fafc ███ Fond général
Card Background: #ffffff ███ Fond cartes
┌────────────────┐
│ ▶ Exécuter │ → Lance le code sans validation
└────────────────┘
┌────────────────┐
│ ✓ Valider │ → Lance les tests automatiques
└────────────────┘
┌────────────────┐
│ 🔐 Connexion │ → Ouvre la modal d'authentification
└────────────────┘
[⭘ Pas commencé] → Gris
[⏳ En cours] → Bleu
[✓ Terminé] → Vert
✓ Test basique → Vert (réussi)
✗ Test échoué → Rouge (échec)
┌─────────────────────────────────────────────┐
│ Navigation Bar │
├──────────────┬──────────────────────────────┤
│ Sidebar │ Main Content │
│ │ │
│ │ │
└──────────────┴──────────────────────────────┘
┌────────────────────────────────┐
│ Navigation Bar │
├────────────────────────────────┤
│ │
│ Main Content │
│ (Full Width) │
│ │
└────────────────────────────────┘
┌──────────────┐
│ Nav │
├──────────────┤
│ │
│ Content │
│ Stacked │
│ │
└──────────────┘
1. Landing Page
│
├─→ [Mode Invité]
│ └─→ Leçons → Exercice → Tests → Continue
│
└─→ [Se connecter]
└─→ Email → Magic Link → JWT
└─→ Leçons → Exercice → Tests → Sauvegarde
└─→ Profil (Voir progression)
User écrit code
│
▼
[Exécuter] → Pyodide → Sortie console
│
▼
[Valider] → Pyodide + Tests
│
├─→ Tous réussis → POST /submissions → Progression++
│ │
│ └─→ [✓ Bravo !]
│
└─→ Échecs → [✗ Réessayer]
│
└─→ Afficher erreurs
┌────────────────────┐
│ Titre │
│ ─────────────── │
│ Description ici │
│ │
│ [Action] │
└────────────────────┘
┌───────────────────┐
│ Titre [×] │
├───────────────────┤
│ │
│ Contenu modal │
│ │
│ [Bouton] │
└───────────────────┘
┌─────┬─────┬─────┐
│ Tab1│ Tab2│ Tab3│
└─────┴─────┴─────┘
┌───────────────────┐
│ Contenu Tab 1 │
└───────────────────┘
// Thème: vs-dark
// Syntax highlighting: Python
// Autocomplétion: Activée
// Line numbers: Oui
// Minimap: NonWebAssembly Runtime
↓
Python 3.11
↓
Code utilisateur
↓
Tests + Validation
Ce guide visuel vous aide à comprendre l'interface et les interactions de PythonTaMère ! 🎨