File size: 11,797 Bytes
6b6beb4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Devine et Gagne - Jeu de Devinette</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes confetti {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
animation: confetti 3s ease-in-out forwards;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-900 to-blue-800 min-h-screen text-white font-sans">
<div class="container mx-auto px-4 py-12">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-yellow-300 pulse">
<i class="fas fa-trophy mr-3"></i>Devine et Gagne!
</h1>
<p class="text-xl text-blue-200">Devinez le bon nombre et tentez de gagner de l'argent!</p>
</header>
<main class="max-w-md mx-auto bg-white/10 backdrop-blur-sm rounded-xl shadow-2xl overflow-hidden p-8">
<!-- Étape 1: Jeu de devinette -->
<div id="game-step" class="text-center">
<h2 class="text-2xl font-semibold mb-6 text-yellow-200">Devinez un nombre entre 1 et 10</h2>
<div class="flex justify-center space-x-4 mb-8">
<button onclick="guessNumber(1)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">1</button>
<button onclick="guessNumber(2)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">2</button>
<button onclick="guessNumber(3)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">3</button>
<button onclick="guessNumber(4)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">4</button>
<button onclick="guessNumber(5)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">5</button>
</div>
<div class="flex justify-center space-x-4 mb-8">
<button onclick="guessNumber(6)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">6</button>
<button onclick="guessNumber(7)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">7</button>
<button onclick="guessNumber(8)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">8</button>
<button onclick="guessNumber(9)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">9</button>
<button onclick="guessNumber(10)" class="number-btn bg-blue-500 hover:bg-blue-600 w-12 h-12 rounded-full text-xl font-bold transition-all">10</button>
</div>
<div id="result" class="text-xl font-semibold min-h-8 mb-6"></div>
<div id="attempts" class="text-blue-200 mb-4">Tentatives restantes: 3</div>
</div>
<!-- Étape 2: Formulaire de gain -->
<div id="win-step" class="hidden text-center">
<div class="mb-6">
<i class="fas fa-gift text-6xl text-yellow-400 mb-4"></i>
<h2 class="text-3xl font-bold text-green-400 mb-2">Félicitations!</h2>
<p class="text-lg mb-4">Vous avez gagné <span class="font-bold text-yellow-300">1000 FCFA</span>!</p>
<p class="text-blue-200 mb-6">Entrez votre numéro de téléphone pour recevoir votre prix</p>
</div>
<form id="win-form" class="space-y-4">
<div>
<input type="tel" id="phone" placeholder="Votre numéro (ex: 771234567)"
class="w-full px-4 py-3 rounded-lg bg-white/20 border border-blue-300 focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white placeholder-blue-200" required>
</div>
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all">
<i class="fas fa-paper-plane mr-2"></i>Envoyer et Recevoir mon Prix
</button>
</form>
</div>
<!-- Étape 3: Confirmation -->
<div id="confirm-step" class="hidden text-center">
<i class="fas fa-check-circle text-6xl text-green-400 mb-6"></i>
<h2 class="text-2xl font-bold mb-4">Votre demande a été enregistrée!</h2>
<p class="mb-6">Nous vous contacterons sous peu pour vous faire gagner votre prix de <span class="font-bold text-yellow-300">1000 FCFA</span>.</p>
<button onclick="resetGame()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition-all">
<i class="fas fa-redo mr-2"></i>Jouer à nouveau
</button>
</div>
</main>
<footer class="mt-16 text-center text-blue-200 text-sm">
<p>© 2023 Devine et Gagne. Tous droits réservés.</p>
<p class="mt-2">Jeu à but non lucratif - Réservé aux personnes majeures</p>
</footer>
</div>
<script>
// Variables du jeu
let secretNumber = Math.floor(Math.random() * 10) + 1;
let attemptsLeft = 3;
let hasWon = false;
// Éléments DOM
const gameStep = document.getElementById('game-step');
const winStep = document.getElementById('win-step');
const confirmStep = document.getElementById('confirm-step');
const resultDisplay = document.getElementById('result');
const attemptsDisplay = document.getElementById('attempts');
const winForm = document.getElementById('win-form');
// Fonction pour deviner un nombre
function guessNumber(number) {
if (hasWon || attemptsLeft <= 0) return;
const numberBtns = document.querySelectorAll('.number-btn');
numberBtns.forEach(btn => {
btn.disabled = true;
btn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
btn.classList.add('bg-gray-500', 'cursor-not-allowed');
});
setTimeout(() => {
if (number === secretNumber) {
// Gagné
hasWon = true;
resultDisplay.innerHTML = `<span class="text-green-400"><i class="fas fa-check-circle mr-2"></i>Correct! Le nombre était ${secretNumber}!</span>`;
createConfetti();
setTimeout(() => {
gameStep.classList.add('hidden');
winStep.classList.remove('hidden');
}, 2000);
} else {
// Perdu
attemptsLeft--;
attemptsDisplay.textContent = `Tentatives restantes: ${attemptsLeft}`;
resultDisplay.innerHTML = `<span class="text-red-400"><i class="fas fa-times-circle mr-2"></i>Incorrect! Essayez encore.</span>`;
if (attemptsLeft <= 0) {
resultDisplay.innerHTML = `<span class="text-red-400"><i class="fas fa-sad-tear mr-2"></i>Désolé, le nombre était ${secretNumber}. Essayez à nouveau!</span>`;
setTimeout(() => {
resetGame();
}, 3000);
} else {
// Réactiver les boutons pour la prochaine tentative
numberBtns.forEach(btn => {
btn.disabled = false;
btn.classList.add('bg-blue-500', 'hover:bg-blue-600');
btn.classList.remove('bg-gray-500', 'cursor-not-allowed');
});
}
}
}, 500);
}
// Fonction pour créer des confettis
function createConfetti() {
const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDuration = Math.random() * 2 + 2 + 's';
confetti.style.width = Math.random() * 10 + 5 + 'px';
confetti.style.height = Math.random() * 10 + 5 + 'px';
document.body.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, 3000);
}
}
// Gestion du formulaire de gain
winForm.addEventListener('submit', function(e) {
e.preventDefault();
const phoneNumber = document.getElementById('phone').value;
// Ici, vous pourriez envoyer le numéro à un serveur
console.log('Numéro enregistré:', phoneNumber);
winStep.classList.add('hidden');
confirmStep.classList.remove('hidden');
});
// Réinitialiser le jeu
function resetGame() {
secretNumber = Math.floor(Math.random() * 10) + 1;
attemptsLeft = 3;
hasWon = false;
resultDisplay.textContent = '';
attemptsDisplay.textContent = `Tentatives restantes: ${attemptsLeft}`;
document.getElementById('phone').value = '';
const numberBtns = document.querySelectorAll('.number-btn');
numberBtns.forEach(btn => {
btn.disabled = false;
btn.classList.add('bg-blue-500', 'hover:bg-blue-600');
btn.classList.remove('bg-gray-500', 'cursor-not-allowed');
});
confirmStep.classList.add('hidden');
gameStep.classList.remove('hidden');
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=KINGFAUS/king" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html> |