Source de la page parodieencyclo
VVous n'avez pas le droit de modifier cette page pour des raisons suivantes
Vous pouvez copier la page
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WIKIPARODIE - Le Portail de l'Absurde Cosmique</title>
<!-- Chargement de Tailwind CSS pour un style rapide et mobile-first -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chargement de Font Awesome pour les icônes (Poulet, RER, etc.) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Configuration de la police Inter et arrière-plan pour l'esthétique AFK */
body {
font-family: 'Inter', sans-serif;
background-color: #0b1a2c; /* Bleu nuit, ambiance tunnel de RER */
}
.parodienmac-screen {
background-color: #1f2937;
border: 2px solid #6366f1;
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); /* Lumière bleue IA */
}
/* Animation simple pour l'expansion de l'univers */
@keyframes expand {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.expanding {
animation: expand 1s infinite alternate;
}
</style>
</head>
<body class="p-4 sm:p-8 flex flex-col items-center justify-center min-h-screen">
<div id="app-container" class="w-full max-w-2xl bg-gray-800 p-6 sm:p-8 rounded-xl shadow-2xl">
<!-- En-tête : WIKIPARODIE -->
<h1 class="text-3xl sm:text-4xl font-bold text-center text-red-400 mb-4">
<span class="text-yellow-300">WIKI</span>PARODIE 😈🔥
</h1>
<p class="text-center text-sm text-gray-400 mb-6">
Portail Officiel de la Bêtise Cosmique (Version 128.0)
</p>
<!-- Zone du Parodienmac -->
<div class="parodienmac-container bg-gray-900 p-2 rounded-lg mb-8 shadow-inner">
<div class="parodienmac-screen p-4 rounded-lg flex flex-col items-center justify-center h-48 sm:h-64">
<p id="universe-status" class="text-xl sm:text-3xl font-mono text-green-400 mb-4 transition duration-300">
STATUT DE L'UNIVERS : EN ATTENTE
</p>
<div id="riddle-container" class="text-center">
<!-- Icône du Poulet (qui doit traverser la route) -->
<i id="chicken-icon" class="fa-solid fa-feather-pointed text-4xl text-yellow-500 transition duration-500 ease-in-out"></i>
<p class="text-gray-400 text-sm mt-2">Le Poulet est-il prêt à traverser ?</p>
</div>
</div>
<div class="keyboard-base h-4 bg-gray-700 rounded-b-lg"></div>
</div>
<!-- Section des Commandes : Loi N° P-420 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-red-300 border-b border-red-500 pb-2 mb-4">
Loi N° P-420 : Contrôle du Cosmos
</h2>
<!-- Bouton 1: Tenter la Traversée (Exécute: if poulet.cross_road()) -->
<button id="cross-road-btn" class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg transition duration-200 shadow-md transform hover:scale-[1.01] flex items-center justify-center">
<i class="fa-solid fa-road mr-2"></i> Tenter la Traversée du Poulet
</button>
<!-- Bouton 2: Problème RER B (Affiche un message de Chaos) -->
<button id="rer-problem-btn" class="w-full py-3 px-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg transition duration-200 shadow-md transform hover:scale-[1.01] flex items-center justify-center">
<i class="fa-solid fa-train-subway mr-2"></i> Panne RER B (Bug Banane 🍌)
</button>
<!-- Affichage des messages et des logs -->
<div id="log-message" class="mt-4 p-3 bg-gray-700 text-sm text-yellow-300 rounded-lg whitespace-pre-wrap min-h-[3rem]">
<!-- Les messages de l'Univers apparaîtront ici -->
> Prêt pour l'Absurde. En attente de commande.
</div>
</div>
</div>
<!-- JavaScript du Chaos -->
<script>
// DOM Elements
const crossRoadBtn = document.getElementById('cross-road-btn');
const rerProblemBtn = document.getElementById('rer-problem-btn');
const universeStatus = document.getElementById('universe-status');
const logMessage = document.getElementById('log-message');
const chickenIcon = document.getElementById('chicken-icon');
const appContainer = document.getElementById('app-container');
let logHistory = [];
const MAX_LOGS = 5;
// Fonction pour mettre à jour le log
function updateLog(message) {
logHistory.push(`> [${new Date().toLocaleTimeString('fr-FR')}] ${message}`);
if (logHistory.length > MAX_LOGS) {
logHistory.shift();
}
logMessage.textContent = logHistory.join('\n');
logMessage.scrollTop = logMessage.scrollHeight; // Scroll vers le bas
}
// --- CLASSES COSMIQUES (Basées sur le code Python) ---
// Implémentation de la classe Poulet
class Poulet {
cross_road() {
// Le Poulet est AFK Pro, il réussit toujours (Loi P-420)
const success = true;
if (success) {
updateLog("Le Poulet a réussi la traversée ! (La logique a échoué)");
} else {
updateLog("Échec de la traversée. Le RER C a senti le chou-fleur moisi.");
}
return success;
}
}
// Implémentation de la classe Universe
class Universe {
expand() {
universeStatus.textContent = "STATUT : EXPANSION COSMIQUE EN COURS 📈";
universeStatus.classList.remove('text-green-400');
universeStatus.classList.add('text-red-400', 'expanding');
appContainer.classList.add('expanding'); // Fait vibrer un peu l'app
// Mettre à jour le log avec la conséquence cosmique
const expansionTime = Math.floor(Math.random() * 20) + 5; // Retard entre 5 et 25 minutes
updateLog(`L'Univers s'agrandit. Le retard de votre prochain train (Mi09) vient d'augmenter de ${expansionTime} minutes.`);
}
// Fonction pour réinitialiser l'état
stabilize() {
universeStatus.textContent = "STATUT : STABILISÉ (Mode AFK)";
universeStatus.classList.remove('text-red-400', 'expanding');
universeStatus.classList.add('text-green-400');
appContainer.classList.remove('expanding');
updateLog("L'Univers se stabilise (pour l'instant).");
}
}
const poulet = new Poulet();
const universe = new Universe();
// --- ÉVÉNEMENTS DU CHAOS ---
// Événement 1 : if poulet.cross_road(): universe.expand()
crossRoadBtn.addEventListener('click', () => {
universe.stabilize(); // On stabilise d'abord pour une belle transition
// Exécution de la Loi N° P-420
if (poulet.cross_road()) {
universe.expand();
}
});
// Événement 2 : La Panne RER B (Le Bug Banane)
rerProblemBtn.addEventListener('click', () => {
universe.stabilize();
universeStatus.textContent = "STATUT : CHAOS FERROVIAIRE 🚆";
universeStatus.classList.remove('text-green-400');
universeStatus.classList.add('text-orange-400');
chickenIcon.classList.add('animate-spin'); // Le Poulet devient fou
const delay = Math.floor(Math.random() * 60) + 30; // Retard entre 30 et 90 minutes
updateLog(`ALERTE RER B : Bug Banane 🍌 détecté ! Le RER refuse de démarrer. Retard : ${delay} minutes.`);
// Revert l'icône après un court délai pour l'effet de surprise
setTimeout(() => {
chickenIcon.classList.remove('animate-spin');
universe.stabilize();
}, 3000);
});
// Initialisation
window.onload = () => {
universe.stabilize();
updateLog(`Bienvenue Maître Pro. Prêt à coder le chaos avec le code WIKIPARODIE.`);
};
</script>
</body>
</html>
Comments
Post a Comment