Délégué test

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Votez pour le Délégué de la Seconde 6 !</title>
    <style>
        body {
            font-family: 'Comic Sans MS', 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            text-align: center;
            padding: 20px;
            margin: 0;
        }
        .container {
            max-width: 800px;
            background: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            margin: 0 auto;
        }
        h1 {
            color: #ff4757;
            font-size: 2.5em;
            text-shadow: 2px 2px #ffeaa7;
        }
        .subtitle {
            font-size: 1.2em;
            font-weight: bold;
            color: #57606f;
        }
        .btn {
            background-color: #ff6b81;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1em;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s, background-color 0.2s;
            margin: 10px;
        }
        .btn:hover {
            transform: scale(1.1);
            background-color: #ff4757;
        }
        .box {
            background-color: #f1f2f6;
            border-left: 5px solid #70a1ff;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            font-size: 1.2em;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer {
            margin-top: 30px;
            font-size: 0.9em;
            color: #747d8c;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>🚀 Objectif Délégué : Objectif Seconde 6 ! 🚀</h1>
    <p class="subtitle">Le seul site de campagne garanti 0% langue de bois, 100% mauvaise foi.</p>

    <!-- SECTION 1 : GENERATEUR DE PROMESSES -->
    <h2>🎯 Le Générateur de Promesses Électorales (Ultra Réalistes)</h2>
    <p>Clique pour découvrir ce que je vais essayer de négocier (sur un malentendu) :</p>
    <button class="btn" onclick="genererPromesse()">Générer une promesse</button>
    <div id="promesse-box" class="box">Clique sur le bouton pour voir l'avenir !</div>

    <!-- SECTION 2 : JEU DES RUMEURS -->
    <h2>🕵️‍♂️ Le Détecteur de Rumeurs du Conseil de Classe</h2>
    <p>Une question brûlante sur un prof ou la Seconde 6 ? Demande à la boule magique du futur délégué :</p>
    <input type="text" id="question-input" placeholder="Ex: Est-ce que le prof de maths va annuler le DS ?" style="padding: 10px; width: 80%; border-radius: 10px; border: 2px solid #70a1ff; font-size: 1em;">
    <br>
    <button class="btn" style="background-color: #2ed573;" onclick="repondreRumeur()">Interroger le Délégué</button>
    <div id="rumeur-box" class="box">La vérité se cache ici...</div>

    <!-- LOGO FIN -->
    <p class="footer">Fait avec amour, café et une bonne dose de flemme avant le prochain contrôle. <b>Votez utile, votez pour moi !</b></p>
</div>

<script>
    // Liste des promesses drôles
    const promesses = [
        "☕ Remplacement de la fontaine à eau par un distributeur officiel de Starbucks.",
        "🛋️ Installation de canapés VIP au fond de la classe de Seconde 6 pour les siestes post-cantine.",
        "🛑 Interdiction constitutionnelle de donner des devoirs le vendredi soir.",
        "🍕 Remplacement des brocolis de la cantine par une option Pizza/Kebab à volonté.",
        "⏰ Instauration d'un quart d'heure de politesse obligatoire : si le prof a 2 minutes de retard, on a le droit de partir.",
        "🎤 Négociation pour que le conseil de classe se déroule sous forme de battle de rap.",
        " Wi-Fi de la NASA débloqué dans tout le lycée uniquement pour notre classe."
    ];

    // Liste des réponses de la boule magique
    const reponses = [
        "🔮 Oui, et d'après mes sources, il offrira des chouquettes.",
        "🔮 C'est fort probable, mais seulement si on simule tous une extinction de voix générale.",
        "🔮 Non. Prépare tes antisèches (ou révise, c'est mieux).",
        "🔮 Le conseil de classe a refusé de répondre à cette question pour des raisons de sécurité nationale.",
        "🔮 Absolument ! Et si je suis élu, je transforme ce problème en rumeur officielle.",
        "🔮 Compte là-dessus... et oublie pas ton parapluie, il va pleuvoir des heures de colle."
    ];

    function genererPromesse() {
        const randomIndex = Math.floor(Math.random() * promesses.length);
        document.getElementById('promesse-box').innerText = promesses[randomIndex];
    }

    function repondreRumeur() {
        const input = document.getElementById('question-input').value;
        if (input.trim() === "") {
            document.getElementById('rumeur-box').innerText = "Pose une vraie question d'abord !";
            return;
        }
        const randomIndex = Math.floor(Math.random() * reponses.length);
        document.getElementById('rumeur-box').innerText = reponses[randomIndex];
    }
</script>

</body>
</html>