index.html - master - Samake/application_de_vente

index.html
1 213 строк45 KB
Samake
ajout
13 янв 2026, 20:48
13 янв 2026, 20:488222f09
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCollab - Apprenez le C++ avec la Communauté</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #4361ee;
            --primary-dark: #3a56d4;
            --secondary: #7209b7;
            --success: #4cc9f0;
            --warning: #f72585;
            --dark: #121826;
            --darker: #0d1117;
            --light: #f8f9fa;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --border: #2d3748;
            --card-bg: #1a1d29;
            --terminal-bg: #0d1117;
            
            --radius: 12px;
            --shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
            color: var(--light);
            min-height: 100vh;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            background: rgba(18, 24, 38, 0.95);
            backdrop-filter: blur(10px);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--border);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
            color: white;
        }

        .logo-icon {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav-link {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
            padding: 8px 16px;
            border-radius: 8px;
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--success);
        }

        .nav-link.active {
            background: var(--primary);
            color: white;
        }

        .header-actions {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .btn {
            padding: 10px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
        }

        .btn-secondary {
            background: transparent;
            color: var(--light);
            border: 2px solid var(--border);
        }

        .btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        /* Hero Section */
        .hero {
            padding: 140px 0 80px;
            text-align: center;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 24px;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--success));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto 40px;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 60px;
        }

        .stat {
            text-align: center;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--success);
        }

        .stat-label {
            color: var(--gray);
            font-size: 0.9rem;
            margin-top: 5px;
        }

        /* Main Layout */
        .main-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 30px;
            margin-top: 40px;
        }

        /* Sidebar */
        .sidebar {
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            height: fit-content;
            position: sticky;
            top: 100px;
        }

        .sidebar-title {
            font-size: 1.25rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--success);
        }

        .exercise-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .exercise-item {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: var(--transition);
        }

        .exercise-item:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--primary);
            transform: translateX(5px);
        }

        .exercise-item.active {
            background: rgba(67, 97, 238, 0.2);
            border-color: var(--primary);
        }

        .exercise-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .exercise-title {
            font-weight: 600;
            font-size: 1rem;
        }

        .exercise-difficulty {
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: 600;
        }

        .difficulty-easy {
            background: rgba(76, 201, 240, 0.2);
            color: var(--success);
        }

        .difficulty-medium {
            background: rgba(247, 37, 133, 0.2);
            color: var(--warning);
        }

        .exercise-desc {
            font-size: 0.875rem;
            color: var(--gray);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Editor Section */
        .editor-section {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .tabs {
            display: flex;
            background: var(--card-bg);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .tab {
            flex: 1;
            padding: 16px;
            text-align: center;
            background: transparent;
            border: none;
            color: var(--gray);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .tab.active {
            background: var(--primary);
            color: white;
        }

        .tab:hover:not(.active) {
            background: rgba(255, 255, 255, 0.05);
            color: var(--light);
        }

        .editor-container {
            background: var(--terminal-bg);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .editor-header {
            background: var(--card-bg);
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .file-dots {
            display: flex;
            gap: 8px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .dot.red { background: #ff5f56; }
        .dot.yellow { background: #ffbd2e; }
        .dot.green { background: #27ca3f; }

        .editor-actions {
            display: flex;
            gap: 12px;
        }

        .editor-content {
            padding: 20px;
            min-height: 400px;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
            tab-size: 2;
            overflow-x: auto;
        }

        .code-line {
            display: flex;
            margin-bottom: 4px;
        }

        .line-number {
            width: 40px;
            color: var(--gray);
            text-align: right;
            padding-right: 16px;
            user-select: none;
        }

        .code-text {
            flex: 1;
            color: #e6edf3;
        }

        .keyword { color: #ff7b72; }
        .type { color: #79c0ff; }
        .function { color: #d2a8ff; }
        .string { color: #a5d6ff; }
        .comment { color: #8b949e; font-style: italic; }
        .number { color: #79c0ff; }

        /* Terminal */
        .terminal-container {
            background: var(--terminal-bg);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .terminal-header {
            background: var(--card-bg);
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }

        .terminal-content {
            padding: 20px;
            min-height: 200px;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            overflow-y: auto;
            max-height: 300px;
        }

        .terminal-line {
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .prompt {
            color: var(--success);
        }

        .output {
            color: #e6edf3;
        }

        .error {
            color: #ff7b72;
        }

        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-top: 40px;
        }

        .stat-card {
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 24px;
        }

        .icon-blue { background: rgba(67, 97, 238, 0.2); color: var(--primary); }
        .icon-purple { background: rgba(114, 9, 183, 0.2); color: var(--secondary); }
        .icon-green { background: rgba(76, 201, 240, 0.2); color: var(--success); }
        .icon-pink { background: rgba(247, 37, 133, 0.2); color: var(--warning); }

        /* Footer */
        footer {
            margin-top: 80px;
            padding: 40px 0;
            border-top: 1px solid var(--border);
            text-align: center;
            color: var(--gray);
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
        }

        .footer-link {
            color: var(--gray);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-link:hover {
            color: var(--success);
        }

        /* Mobile Responsive */
        @media (max-width: 1024px) {
            .main-layout {
                grid-template-columns: 1fr;
            }
            
            .sidebar {
                position: static;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-stats {
                flex-direction: column;
                gap: 20px;
            }
            
            .editor-header, .terminal-header {
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }
            
            .tabs {
                flex-direction: column;
            }
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--darker);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <div class="header-content">
                <a href="#" class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    CodeCollab
                </a>
                
                <div class="nav-links">
                    <a href="#" class="nav-link active">
                        <i class="fas fa-home"></i> Accueil
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-book"></i> Apprendre
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-terminal"></i> Exercices
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-users"></i> Communauté
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-trophy"></i> Compétitions
                    </a>
                </div>
                
                <div class="header-actions">
                    <button class="btn btn-secondary">
                        <i class="fas fa-search"></i> Rechercher
                    </button>
                    <button class="btn btn-primary" id="loginBtn">
                        <i class="fas fa-user"></i> Connexion
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1 class="hero-title fade-in">
                Apprenez le C++ avec la Communauté
            </h1>
            <p class="hero-subtitle fade-in">
                La plateforme collaborative pour maîtriser le C++. Exercices interactifs, 
                terminal intégré, et solutions vérifiées par des experts.
            </p>
            
            <div class="hero-stats fade-in">
                <div class="stat">
                    <div class="stat-number" id="exerciseCount">150+</div>
                    <div class="stat-label">Exercices C++</div>
                </div>
                <div class="stat">
                    <div class="stat-number" id="userCount">2.5k+</div>
                    <div class="stat-label">Développeurs Actifs</div>
                </div>
                <div class="stat">
                    <div class="stat-number" id="solutionCount">5k+</div>
                    <div class="stat-label">Solutions Partagées</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container">
        <div class="main-layout">
            <!-- Sidebar - Exercices -->
            <aside class="sidebar fade-in">
                <h2 class="sidebar-title">
                    <i class="fas fa-list-check"></i> Exercices C++
                </h2>
                
                <div class="exercise-list" id="exerciseList">
                    <!-- Exercices seront générés par JavaScript -->
                </div>
                
                <button class="btn btn-secondary" style="width: 100%; margin-top: 20px;" id="addExerciseBtn">
                    <i class="fas fa-plus"></i> Ajouter un exercice
                </button>
            </aside>

            <!-- Main Content Area -->
            <main class="editor-section">
                <!-- Tabs -->
                <div class="tabs fade-in">
                    <button class="tab active" data-tab="editor">
                        <i class="fas fa-code"></i> Éditeur
                    </button>
                    <button class="tab" data-tab="theory">
                        <i class="fas fa-book-open"></i> Théorie
                    </button>
                    <button class="tab" data-tab="solutions">
                        <i class="fas fa-users"></i> Solutions
                    </button>
                </div>

                <!-- Éditeur de Code -->
                <div class="tab-content active" id="editorTab">
                    <div class="editor-container fade-in">
                        <div class="editor-header">
                            <div class="file-info">
                                <div class="file-dots">
                                    <span class="dot red"></span>
                                    <span class="dot yellow"></span>
                                    <span class="dot green"></span>
                                </div>
                                <span>main.cpp • C++</span>
                            </div>
                            <div class="editor-actions">
                                <button class="btn btn-secondary" id="resetBtn">
                                    <i class="fas fa-redo"></i> Réinitialiser
                                </button>
                                <button class="btn btn-primary" id="runBtn">
                                    <i class="fas fa-play"></i> Exécuter
                                </button>
                            </div>
                        </div>
                        <div class="editor-content" id="codeEditor" contenteditable="true" spellcheck="false">
                            <!-- Code sera généré par JavaScript -->
                        </div>
                    </div>

                    <!-- Terminal -->
                    <div class="terminal-container fade-in">
                        <div class="terminal-header">
                            <h3><i class="fas fa-terminal"></i> Terminal</h3>
                            <button class="btn btn-secondary" id="clearTerminalBtn">
                                <i class="fas fa-trash"></i> Effacer
                            </button>
                        </div>
                        <div class="terminal-content" id="terminalOutput">
                            <div class="terminal-line">
                                <span class="prompt">$</span> 
                                <span class="output">Bienvenue dans CodeCollab Terminal !</span>
                            </div>
                            <div class="terminal-line">
                                <span class="prompt">$</span> 
                                <span class="output">Tapez votre code C++ et cliquez sur "Exécuter"</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Théorie Tab -->
                <div class="tab-content" id="theoryTab" style="display: none;">
                    <div class="editor-container fade-in">
                        <div class="editor-header">
                            <h3><i class="fas fa-book"></i> Théorie du C++</h3>
                        </div>
                        <div class="editor-content" id="theoryContent">
                            <!-- Contenu théorique sera généré par JavaScript -->
                        </div>
                    </div>
                </div>

                <!-- Solutions Tab -->
                <div class="tab-content" id="solutionsTab" style="display: none;">
                    <div class="editor-container fade-in">
                        <div class="editor-header">
                            <h3><i class="fas fa-star"></i> Solutions de la Communauté</h3>
                        </div>
                        <div class="editor-content" style="white-space: normal;">
                            <div style="text-align: center; padding: 40px;">
                                <i class="fas fa-users" style="font-size: 48px; color: var(--gray); margin-bottom: 20px;"></i>
                                <h3 style="margin-bottom: 10px;">Rejoignez la communauté !</h3>
                                <p style="color: var(--gray); margin-bottom: 20px;">
                                    Partagez votre solution et aidez les autres développeurs.
                                </p>
                                <button class="btn btn-primary" id="shareSolutionBtn">
                                    <i class="fas fa-share"></i> Partager ma solution
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- Stats Cards -->
        <div class="stats-grid fade-in">
            <div class="stat-card">
                <div class="stat-icon icon-blue">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3>Exécution Instantanée</h3>
                <p style="color: var(--gray); margin-top: 10px;">
                    Exécutez du code C++ directement dans votre navigateur
                </p>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon icon-purple">
                    <i class="fas fa-user-graduate"></i>
                </div>
                <h3>Apprentissage Progressif</h3>
                <p style="color: var(--gray); margin-top: 10px;">
                    Du niveau débutant à expert avec des exercices adaptés
                </p>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon icon-green">
                    <i class="fas fa-hands-helping"></i>
                </div>
                <h3>Collaboration</h3>
                <p style="color: var(--gray); margin-top: 10px;">
                    Travaillez ensemble sur des problèmes complexes
                </p>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon icon-pink">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3>Suivi de Progression</h3>
                <p style="color: var(--gray); margin-top: 10px;">
                Visualisez votre amélioration avec des statistiques détaillées
                </p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="logo" style="justify-content: center; margin-bottom: 20px;">
                <div class="logo-icon">
                    <i class="fas fa-code"></i>
                </div>
                CodeCollab
            </div>
            
            <div class="footer-links">
                <a href="#" class="footer-link">À propos</a>
                <a href="#" class="footer-link">Contact</a>
                <a href="#" class="footer-link">Contribuer</a>
                <a href="#" class="footer-link">FAQ</a>
                <a href="#" class="footer-link">Conditions</a>
            </div>
            
            <p style="margin-top: 20px;">
                &copy; 2024 CodeCollab. Tous droits réservés. 
                <span style="color: var(--success);">Apprenez, codez, collaborez.</span>
            </p>
        </div>
    </footer>

    <script>
        // Données des exercices
        const exercises = [
            {
                id: 1,
                title: "Hello World",
                description: "Votre premier programme en C++",
                difficulty: "easy",
                code: `#include <iostream>\nusing namespace std;\n\nint main() {\n    cout << "Hello, World!" << endl;\n    return 0;\n}`,
                theory: `# Les bases du C++\n\nLe C++ est un langage de programmation compilé.\n\n## Structure d'un programme\n\n1. **Inclusion des bibliothèques** : #include <iostream>\n2. **Espace de noms** : using namespace std;\n3. **Fonction principale** : int main()\n\n## Afficher du texte\n\nUtilisez cout pour afficher du texte dans la console :\n\`cout << "Votre texte" << endl;\``
            },
            {
                id: 2,
                title: "Variables et Types",
                description: "Déclarez et utilisez des variables",
                difficulty: "easy",
                code: `#include <iostream>\nusing namespace std;\n\nint main() {\n    int age = 25;\n    double prix = 19.99;\n    string nom = "Alice";\n    \n    cout << "Nom: " << nom << endl;\n    cout << "Age: " << age << endl;\n    cout << "Prix: " << prix << "€" << endl;\n    \n    return 0;\n}`,
                theory: `# Variables et Types en C++\n\n## Déclaration de variables\n\nUne variable est un espace mémoire nommé qui stocke une valeur.\n\n## Types de base\n\n- **int** : nombres entiers\n- **double** : nombres à virgule flottante\n- **char** : caractère unique\n- **string** : chaîne de caractères\n- **bool** : vrai/faux\n\n## Exemple :\n\n\`int x = 10;\`\n\`double pi = 3.14159;\`\n\`string message = "Bonjour";\``
            },
            {
                id: 3,
                title: "Boucle For",
                description: "Répétez des instructions avec for",
                difficulty: "medium",
                code: `#include <iostream>\nusing namespace std;\n\nint main() {\n    for(int i = 1; i <= 10; i++) {\n        cout << i << " ";    \n    }\n    cout << endl;\n    \n    // Table de multiplication\n    for(int i = 1; i <= 5; i++) {\n        cout << "5 x " << i << " = " << 5*i << endl;\n    }\n    \n    return 0;\n}`,
                theory: `# Les boucles For\n\n## Syntaxe\n\n\`for(initialisation; condition; incrémentation) {\`\n\`    // code à répéter\`\n\`}\`\n\n## Comprendre les parties\n\n1. **Initialisation** : Exécutée une fois au début\n2. **Condition** : Vérifiée avant chaque itération\n3. **Incrémentation** : Exécutée après chaque itération\n\n## Exemple détaillé\n\n\`for(int i = 0; i < 5; i++) {\`\n\`    cout << i << endl;\`\n\`}\`\n\nSortie : 0 1 2 3 4`
            },
            {
                id: 4,
                title: "Fonctions",
                description: "Créez et utilisez des fonctions",
                difficulty: "medium",
                code: `#include <iostream>\nusing namespace std;\n\n// Déclaration de fonction\nint addition(int a, int b);\n\nint main() {\n    int resultat = addition(5, 3);\n    cout << "5 + 3 = " << resultat << endl;\n    \n    cout << "10 + 20 = " << addition(10, 20) << endl;\n    \n    return 0;\n}\n\n// Définition de fonction\nint addition(int a, int b) {\n    return a + b;\n}`,
                theory: `# Les Fonctions en C++\n\n## Pourquoi utiliser des fonctions ?\n\n- **Réutilisabilité** : Évitez la duplication de code\n- **Modularité** : Divisez un problème complexe\n- **Maintenabilité** : Code plus facile à comprendre\n\n## Structure d'une fonction\n\n\`type nomFonction(paramètres) {\`\n\`    // instructions\`\n\`    return valeur;\`\n\`}\`\n\n## Exemple :\n\n\`int carre(int x) {\`\n\`    return x * x;\`\n\`}\`\n\nAppel : \`carre(5)\` retourne 25`
            },
            {
                id: 5,
                title: "Tableaux",
                description: "Manipulez des collections de données",
                difficulty: "medium",
                code: `#include <iostream>\nusing namespace std;\n\nint main() {\n    // Déclaration d'un tableau\n    int nombres[5] = {10, 20, 30, 40, 50};\n    \n    // Accès aux éléments\n    cout << "Premier élément: " << nombres[0] << endl;\n    cout << "Dernier élément: " << nombres[4] << endl;\n    \n    // Parcourir le tableau\n    cout << "Tous les éléments: ";\n    for(int i = 0; i < 5; i++) {\n        cout << nombres[i] << " ";\n    }\n    cout << endl;\n    \n    // Calcul de la somme\n    int somme = 0;\n    for(int i = 0; i < 5; i++) {\n        somme += nombres[i];\n    }\n    cout << "Somme: " << somme << endl;\n    \n    return 0;\n}`,
                theory: `# Les Tableaux en C++\n\n## Déclaration\n\n\`type nom[taille];\`\n\nExemple : \`int notes[10];\`\n\n## Initialisation\n\n\`int nombres[5] = {1, 2, 3, 4, 5};\`\n\n## Accès aux éléments\n\nLes indices commencent à 0 :\n- Premier élément : \`tableau[0]\`\n- Dernier élément : \`tableau[taille-1]\`\n\n## Parcourir un tableau\n\nUtilisez une boucle for :\n\n\`for(int i = 0; i < taille; i++) {\`\n\`    cout << tableau[i] << endl;\`\n\`}\``
            }
        ];

        // Variables d'état
        let currentExercise = exercises[0];
        let terminalHistory = [];

        // Initialisation
        document.addEventListener('DOMContentLoaded', function() {
            // Charger les exercices
            loadExercises();
            
            // Afficher le premier exercice
            loadExercise(currentExercise);
            
            // Configurer les événements
            setupEventListeners();
            
            // Animer les compteurs
            animateCounters();
            
            // Syntax highlighting initial
            updateCodeHighlighting();
        });

        // Charger la liste des exercices
        function loadExercises() {
            const exerciseList = document.getElementById('exerciseList');
            exerciseList.innerHTML = '';
            
            exercises.forEach(exercise => {
                const exerciseItem = document.createElement('div');
                exerciseItem.className = `exercise-item ${exercise.id === currentExercise.id ? 'active' : ''}`;
                exerciseItem.dataset.id = exercise.id;
                
                exerciseItem.innerHTML = `
                    <div class="exercise-header">
                        <div class="exercise-title">${exercise.title}</div>
                        <div class="exercise-difficulty difficulty-${exercise.difficulty}">
                            ${exercise.difficulty === 'easy' ? 'Facile' : 
                              exercise.difficulty === 'medium' ? 'Moyen' : 'Difficile'}
                        </div>
                    </div>
                    <div class="exercise-desc">${exercise.description}</div>
                `;
                
                exerciseItem.addEventListener('click', () => {
                    const selectedExercise = exercises.find(e => e.id === parseInt(exerciseItem.dataset.id));
                    if (selectedExercise) {
                        document.querySelectorAll('.exercise-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        exerciseItem.classList.add('active');
                        loadExercise(selectedExercise);
                    }
                });
                
                exerciseList.appendChild(exerciseItem);
            });
        }

        // Charger un exercice spécifique
        function loadExercise(exercise) {
            currentExercise = exercise;
            
            // Mettre à jour l'éditeur
            document.getElementById('codeEditor').innerHTML = formatCode(exercise.code);
            
            // Mettre à jour la théorie
            document.getElementById('theoryContent').innerHTML = formatTheory(exercise.theory);
            
            // Mettre à jour le terminal
            addTerminalOutput(`Chargement de l'exercice : ${exercise.title}`);
            
            // Re-highlight le code
            updateCodeHighlighting();
        }

        // Formater le code avec highlight
        function formatCode(code) {
            const lines = code.split('\n');
            let html = '';
            
            lines.forEach((line, index) => {
                let formattedLine = line
                    .replace(/\/\/.*/g, '<span class="comment">$&</span>')
                    .replace(/#include.*/g, '<span class="keyword">$&</span>')
                    .replace(/\b(int|double|string|bool|char|void|return)\b/g, '<span class="keyword">$1</span>')
                    .replace(/\b(cout|cin|endl|main)\b/g, '<span class="function">$1</span>')
                    .replace(/\b(using|namespace|for|if|else|while)\b/g, '<span class="keyword">$1</span>')
                    .replace(/"[^"]*"/g, '<span class="string">$&</span>')
                    .replace(/\b(\d+\.?\d*)\b/g, '<span class="number">$1</span>');
                
                html += `<div class="code-line">
                    <span class="line-number">${index + 1}</span>
                    <span class="code-text">${formattedLine}</span>
                </div>`;
            });
            
            return html;
        }

        // Formater le contenu théorique
        function formatTheory(theory) {
            return theory
                .replace(/# (.*)/g, '<h1>$1</h1>')
                .replace(/## (.*)/g, '<h2>$1</h2>')
                .replace(/`([^`]+)`/g, '<code>$1</code>')
                .replace(/\n/g, '<br>');
        }

        // Mettre à jour le highlight du code
        function updateCodeHighlighting() {
            const editor = document.getElementById('codeEditor');
            const text = editor.textContent || editor.innerText;
            editor.innerHTML = formatCode(text);
        }

        // Ajouter du texte au terminal
        function addTerminalOutput(text, type = 'output') {
            const terminal = document.getElementById('terminalOutput');
            const line = document.createElement('div');
            line.className = 'terminal-line';
            
            if (type === 'error') {
                line.innerHTML = `<span class="prompt">$</span> <span class="error">${text}</span>`;
            } else if (type === 'success') {
                line.innerHTML = `<span class="prompt">$</span> <span style="color: var(--success);">${text}</span>`;
            } else {
                line.innerHTML = `<span class="prompt">$</span> <span class="output">${text}</span>`;
            }
            
            terminal.appendChild(line);
            terminal.scrollTop = terminal.scrollHeight;
            
            // Garder seulement les 50 dernières lignes
            const lines = terminal.querySelectorAll('.terminal-line');
            if (lines.length > 50) {
                lines[0].remove();
            }
        }

        // Simuler l'exécution de code
        function executeCode() {
            const editor = document.getElementById('codeEditor');
            const code = editor.textContent || editor.innerText;
            
            addTerminalOutput('Compilation en cours...', 'output');
            
            // Simulation d'exécution
            setTimeout(() => {
                addTerminalOutput('Compilation réussie !', 'success');
                addTerminalOutput('Exécution du programme...', 'output');
                
                // Résultats simulés selon l'exercice
                let output = '';
                switch(currentExercise.id) {
                    case 1:
                        output = 'Hello, World!';
                        break;
                    case 2:
                        output = 'Nom: Alice\nAge: 25\nPrix: 19.99€';
                        break;
                    case 3:
                        output = '1 2 3 4 5 6 7 8 9 10 \n5 x 1 = 5\n5 x 2 = 10\n5 x 3 = 15\n5 x 4 = 20\n5 x 5 = 25';
                        break;
                    case 4:
                        output = '5 + 3 = 8\n10 + 20 = 30';
                        break;
                    case 5:
                        output = 'Premier élément: 10\nDernier élément: 50\nTous les éléments: 10 20 30 40 50 \nSomme: 150';
                        break;
                    default:
                        output = 'Programme exécuté avec succès!';
                }
                
                // Afficher la sortie ligne par ligne
                output.split('\n').forEach(line => {
                    if (line.trim()) {
                        addTerminalOutput(line, 'output');
                    }
                });
                
                addTerminalOutput('Programme terminé (code de sortie: 0)', 'success');
            }, 1000);
        }

        // Configurer les événements
        function setupEventListeners() {
            // Bouton Exécuter
            document.getElementById('runBtn').addEventListener('click', executeCode);
            
            // Bouton Réinitialiser
            document.getElementById('resetBtn').addEventListener('click', () => {
                if (confirm('Voulez-vous réinitialiser le code à sa version originale ?')) {
                    loadExercise(currentExercise);
                    addTerminalOutput('Code réinitialisé', 'output');
                }
            });
            
            // Bouton Effacer Terminal
            document.getElementById('clearTerminalBtn').addEventListener('click', () => {
                document.getElementById('terminalOutput').innerHTML = '';
                addTerminalOutput('Terminal effacé', 'output');
            });
            
            // Tabs
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.dataset.tab;
                    
                    // Mettre à jour les tabs actifs
                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // Afficher le contenu correspondant
                    document.querySelectorAll('.tab-content').forEach(content => {
                        content.style.display = 'none';
                    });
                    
                    document.getElementById(tabId + 'Tab').style.display = 'block';
                });
            });
            
            // Bouton Ajouter un exercice
            document.getElementById('addExerciseBtn').addEventListener('click', () => {
                const title = prompt('Titre du nouvel exercice :');
                if (title) {
                    const newExercise = {
                        id: exercises.length + 1,
                        title: title,
                        description: "Nouvel exercice personnalisé",
                        difficulty: "easy",
                        code: `#include <iostream>\nusing namespace std;\n\nint main() {\n    // Votre code ici\n    return 0;\n}`,
                        theory: `# ${title}\n\nCréez votre propre exercice !\n\n## Instructions\n\n1. Écrivez votre code dans l'éditeur\n2. Cliquez sur "Exécuter" pour tester\n3. Partagez avec la communauté`
                    };
                    
                    exercises.push(newExercise);
                    loadExercises();
                    loadExercise(newExercise);
                    
                    addTerminalOutput(`Nouvel exercice créé : "${title}"`, 'success');
                }
            });
            
            // Bouton Partager solution
            document.getElementById('shareSolutionBtn').addEventListener('click', () => {
                const solution = prompt('Partagez votre solution :');
                if (solution) {
                    addTerminalOutput('Solution partagée avec la communauté !', 'success');
                    alert('Merci pour votre contribution !');
                }
            });
            
            // Bouton Connexion
            document.getElementById('loginBtn').addEventListener('click', () => {
                alert('Fonctionnalité de connexion à venir !');
            });
            
            // Éditeur : mise à jour du highlight lors de la saisie
            document.getElementById('codeEditor').addEventListener('input', updateCodeHighlighting);
            
            // Éditeur : empêcher la suppression des numéros de ligne
            document.getElementById('codeEditor').addEventListener('keydown', function(e) {
                if (e.key === 'Tab') {
                    e.preventDefault();
                    document.execCommand('insertText', false, '    ');
                }
            });
        }

        // Animer les compteurs
        function animateCounters() {
            const counters = [
                { element: document.getElementById('exerciseCount'), target: 150, suffix: '+' },
                { element: document.getElementById('userCount'), target: 2500, suffix: '+' },
                { element: document.getElementById('solutionCount'), target: 5000, suffix: '+' }
            ];
            
            counters.forEach(counter => {
                let current = 0;
                const increment = counter.target / 50;
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= counter.target) {
                        current = counter.target;
                        clearInterval(timer);
                    }
                    counter.element.textContent = Math.floor(current) + counter.suffix;
                }, 30);
            });
        }

        // Raccourcis clavier
        document.addEventListener('keydown', function(e) {
            // Ctrl+Enter pour exécuter
            if (e.ctrlKey && e.key === 'Enter') {
                e.preventDefault();
                executeCode();
            }
            
            // Ctrl+R pour réinitialiser
            if (e.ctrlKey && e.key === 'r') {
                e.preventDefault();
                document.getElementById('resetBtn').click();
            }
            
            // Ctrl+L pour effacer le terminal
            if (e.ctrlKey && e.key === 'l') {
                e.preventDefault();
                document.getElementById('clearTerminalBtn').click();
            }
        });
    </script>
</body>
</html>