🎭 Une pointe d'humour

Prêt pour une petite blague ?

✎ᝰ Es-tu prêt ?

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎭</text></svg>" /> <title>Ma Page blagueur</title> <style> /* 1. base.css - à mettre dans votre fichier de style principal */ html, body { font-family: 'Segoe UI', sans-serif; margin: 0; background-color: #f0f2f5; } /*** - ***/ /* 2. module.css - à mettre dans votre fichier html divers (css principal) ce Style est spécifique au module de blagues */ html, body { user-select: none; -webkit-user-select: none; -ms-user-select: none;} .zone { margin: 10px auto; width: 90%;} .base_container { max-width: 520px; padding: 20px; margin: 10px auto;} h1 { text-align: center; font-size: 22px; font-family: serif;} /* 3. CARTE */ .joke_card { background: #ffffff; border-radius: 15px; padding: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); text-align: center; border: 2px solid #2c3e50; } .joke_question { font-size: 1.1rem; font-weight: bold; color: #2c3e50; margin-bottom: 20px; min-height: 50px; } .joke_question, #joke_answer { transition: opacity 0.3s ease;} .joke_answer_container { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; border: 1px dashed #ccc; } /* 4. STYLE REPONSE */ .joke_answer_style { display: block; color: #e74c3c; font-style: italic; } /* 5. BOUTON */ .btn_refresh { margin-top: 25px; background-color: #2c3e50; color: white; border: none; padding: 10px 20px; border-radius: 25px; cursor: pointer; font-size: 1rem; transition: background 0.3s; } .btn_refresh:hover { background-color: #34495e;} </style> </head> <body> <div class="zone"> <div class="base_container"> <h1>🎭 Une pointe d'humour</h1> <div class="joke_card"> <div id="joke_question" class="joke_question">Prêt pour une petite blague ?</div> <div class="joke_answer_container"> <span id="joke_answer" class="joke_answer_style">★ es-tu prêt ? ✎ᝰ.</span> </div> <button class="btn_refresh" id="btn_refresh">Changer de blague 🙃</button> </div> <div style="margin-top: 1.5rem;"> <footer style="position:relative; margin:10px auto 0; width:65% auto; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(255,0,0,0.3); padding:10px 0; font-size:12px;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration:none; color:inherit;">Humour - Feuille d'heures Angélique - © 2026</a></footer> <footer style="text-align:center; font-size:0.7rem; margin-top:10px;"><a href="txt/Humour.txt" download="Humour.txt" style="text-decoration:none; color:inherit;">💾 Télécharger Générateur d'humour</a></footer> </div> </div> </div> <script> // blague "B" réponse "R" const blagues = [ // { Blague: " ici ", Reponse: " ici "}, { Blague: "Pourquoi les femmes ont 2 trous ? ", Reponse: "Pour les prendre comme un pack de bière"}, { Blague: "Pourquoi les voitures Toyota ne jouent jamais à cache-cache ?", Reponse: "Parce qu’elles sont toujours fiables… donc on les trouve tout de suite. 🚗... (oui, c’est une blague pourrit, mais avoue qu’elle démarre au quart de tour 😏)"}, { Blague: "Que se passe-t-il quand 2 poissons s'énervent ?", Reponse: "Le thon monte."}, { Blague: "Où est-ce que les super-héros vont-ils faire leurs courses ?", Reponse: "Au supermarché."}, { Blague: "Pourquoi les plongeurs plongent-ils toujours en arrière ?", Reponse: "Parce que sinon ils tombent dans le bateau."}, { Blague: "Qu'est-ce qu'une suite de chiffres qui ne finit pas ?", Reponse: "Un dromadaire (un chiffre d'eau)."}, { Blague: "Pourquoi les oiseaux volent-ils vers le sud en hiver ?", Reponse: "Parce que c'est trop loin pour y aller à pied."}, { Blague: "Comment appelle-t-on un boomerang qui ne revient pas ?", Reponse: "Un bâton."}, { Blague: "Quelle mamie fait peur aux voleurs ?", Reponse: "Mamie Traillette."}, { Blague: "Pourquoi est-ce qu'il faut mettre tous les crocos en prison ?", Reponse: "Parce que les crocos dealent."}, { Blague: "Qu'est-ce qui est noir et blanc et qui fait piou-piou ?", Reponse: "Une vache qui imite un poussin." }, { Blague: "Quel est le comble pour un électricien ?", Reponse: "De ne pas être au courant."}, { Blague: "Pourquoi les squelettes ne se battent jamais ?", Reponse: "Parce qu’ils n’ont pas le cœur à ça."}, { Blague: "Quel est le fruit le plus patient ?", Reponse: "La poire… parce qu’elle attend."}, { Blague: "Pourquoi les programmeurs confondent Halloween et Noël ?", Reponse: "Parce que OCT 31 = DEC 25."}, { Blague: "Qu’est-ce qu’un canard geek ?", Reponse: "Un canard qui code… en coin-coin."}, { Blague: "Pourquoi les maths dépriment ?", Reponse: "Parce qu’elles ont trop de problèmes."}, { Blague: "Quel est le comble pour un jardinier ?", Reponse: "Raconter des salades."}, { Blague: "Pourquoi les vampires aiment-ils les maths ?", Reponse: "Parce qu’ils adorent les calculs sanguins."}, { Blague: "Qu’est-ce qu’un chat qui tombe dans un pot de peinture ?", Reponse: "Un chat-peint."}, { Blague: "Quelle est la différence entre un homme et un yaourt ?", Reponse: "Le yaourt, lui, il a une vraie culture."}, { Blague: "Pourquoi les hommes mettent-ils du parfum sous les bras ?", Reponse: "Parce qu’ils n’ont pas de cerveau pour en mettre ailleurs."}, { Blague: "Pourquoi les femmes parlent-elles autant ?", Reponse: "Parce qu’elles ont un processeur multi-tâches… mais sans bouton pause 😄"}, { Blague: "Quel est le sport préféré des insectes ?", Reponse: "Le criquet."}, { Blague: "Pourquoi les femmes ont-elles toujours raison ?", Reponse: "Parce que dès qu’elles ont tort… ça devient une discussion."}, { Blague: "Pourquoi les femmes vivent-elles plus longtemps que les hommes ?", Reponse: "Parce qu’elles ne prennent pas le temps de mourir, elles sont occupées à avoir raison."} ]; // 2. VARIABLES let lastIndex = -1; let enCours = false; // 3. EVENT document.getElementById("btn_refresh").addEventListener("click", nouvelleBlague); // 4. LOGIQUE PRINCIPALE function nouvelleBlague() { if (enCours) return; enCours = true; let index; do { index = Math.floor(Math.random() * blagues.length); } while (index === lastIndex); lastIndex = index; const questionEl = document.getElementById('joke_question'); const answerEl = document.getElementById('joke_answer'); // fade out / s'estomper questionEl.style.opacity = 1; answerEl.style.opacity = 1; setTimeout(() => { answerEl.innerHTML = ""; // question questionEl.textContent = blagues[index].Blague; questionEl.style.opacity = 1; // réponse différée setTimeout(() => { effetMouches(answerEl, blagues[index].Reponse); answerEl.style.opacity = 1; enCours = false; }, 1200); }, 200); } // 5. ANIMATION function effetMouches(el, texte) { el.innerHTML = ""; const chars = Array.from(texte); chars.forEach((c, i) => { const span = document.createElement("span"); span.textContent = c; span.style.display = "inline-block"; span.style.whiteSpace = "pre"; span.style.opacity = "0"; span.style.transform = `translate(${(Math.random()-0.5)*80}px, ${(Math.random()-0.5)*80}px) scale(${Math.random()*0.5+0.6})`; span.style.filter = "blur(6px)"; span.style.transition = "all 0.6s ease"; el.appendChild(span); setTimeout(() => { span.style.opacity = "1"; span.style.transform = "translate(0,0) scale(1)"; span.style.filter = "blur(0)"; }, i * 25); }); } </script>  </body> </html>