Spaces:
Running
Running
File size: 32,458 Bytes
538a944 |
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 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Innocent Bet - Paris Sportifs Responsables</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>
/* Custom animations */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.animate-pulse-slow {
animation: pulse 3s infinite;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #4f46e5;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4338ca;
}
/* Glassmorphism effect */
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Gradient text */
.gradient-text {
background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-gray-900 min-h-screen text-white font-sans">
<!-- Navigation -->
<nav class="glass fixed top-0 left-0 right-0 z-50 py-3 px-4 md:px-8 shadow-lg">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-dove text-2xl text-indigo-300"></i>
<span class="text-xl font-bold gradient-text">INNOCENT BET</span>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="hover:text-indigo-300 transition">Accueil</a>
<a href="#" class="hover:text-indigo-300 transition">Sports</a>
<a href="#" class="hover:text-indigo-300 transition">Promotions</a>
<a href="#" class="hover:text-indigo-300 transition">Aide</a>
</div>
<div class="flex items-center space-x-4">
<button class="hidden md:block bg-gradient-to-r from-indigo-500 to-blue-500 hover:from-indigo-600 hover:to-blue-600 px-4 py-2 rounded-full font-medium transition transform hover:scale-105">
S'identifier
</button>
<button class="md:hidden text-white">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="pt-24 pb-12 px-4 md:px-8">
<!-- Hero Section -->
<section class="max-w-7xl mx-auto mb-16">
<div class="glass rounded-3xl p-8 md:p-12 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 -z-10"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div class="animate-pulse-slow">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
<span class="gradient-text">Paris sportifs</span> <br>
<span>avec éthique</span>
</h1>
<p class="text-lg text-gray-200 mb-8 max-w-lg">
Découvrez une nouvelle expérience de paris sportifs où le plaisir du jeu rencontre la responsabilité.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-gradient-to-r from-indigoA-500 to-pink-500 hover:from-indigo-600 hover:to-pink-600 px-6 py-3 rounded-full font-bold transition transform hover:scale-105 shadow-lg">
Commencer
</button>
<button class="glass px-6 py-3 rounded-full font-medium transition hover:bg-white/10">
En savoir plus
</button>
</div>
</div>
<div class="relative">
<div class="absolute -top-12 -right-12 w-64 h-64 rounded-full bg-indigo-500/30 blur-3xl -z-10"></div>
<div class="glass rounded-2xl p-4 transform rotate-1 shadow-2xl">
<div class="bg-gray-800 rounded-lg overflow-hidden">
<div class="bg-gray-700 p-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="text-sm">Match en direct</div>
<div class="w-6"></div>
</div>
<div class="p-4">
<div class="flex justify-between items-center mb-6">
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center mb-2">
<img src="https://img.icons8.com/color/48/000000/france.png" alt="France" class="w-12 h-12">
</div>
<div class="font-medium">France</div>
<div class="text-sm text-gray-400">2.10</div>
</div>
<div class="text-2xl font-bold px-4">VS</div>
<div class="text-center">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center mb-2">
<img src="https://img.icons8.com/color/48/000000/brazil.png" alt="Brazil" class="w-12 h-12">
</div>
<div class="font-medium">Brésil</div>
<div class="text-sm text-gray-400">3.40</div>
</div>
</div>
<div class="bg-gray-700 rounded-lg p-3 mb-4">
<div class="flex justify-between text-xs">
<span>45'+2'</span>
<span>1-0</span>
<span>Mi-temps</span>
</div>
<div class="w-full bg-gray-600 h-1 rounded-full mt-2">
<div class="bg-indigo-400 h-1 rounded-full" style="width: 45%"></div>
</div>
</div>
<div class="grid grid-cols-3 gap-2">
<button class="bg-indigo-600 hover:bg-indigo-700 py-2 rounded text-sm transition">1</button>
<button class="bg-gray-700 hover:bg-gray-600 py-2 rounded text-sm transition">N</button>
<button class="bg-gray-700 hover:bg-gray-600 py-2 rounded text-sm transition">2</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="max-w-7xl mx-auto mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center gradient-text">Pourquoi choisir Innocent Bet?</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="glass rounded-2xl p-6 hover:transform hover:-translate-y-2 transition duration-300">
<div class="w-14 h-14 rounded-full bg-indigo-500/20 flex items-center justify-center mb-4">
<i class="fas fa-leaf text-2xl text-indigo-300"></i>
</div>
<h3 class="text-xl font-bold mb-3">Jouez responsable</h3>
<p class="text-gray-300">
Nous encourageons une pratique responsable avec des outils de contrôle et des limites personnalisables.
</p>
</div>
<!-- Feature 2 -->
<div class="glass rounded-2xl p-6 hover:transform hover:-translate-y-2 transition duration-300">
<div class="w-14 h-14 rounded-full bg-blue-500/20 flex items-center justify-center mb-4">
<i class="fas fa-shield-alt text-2xl text-blue-300"></i>
</div>
<h3 class="text-xl font-bold mb-3">Sécurité maximale</h3>
<p class="text-gray-300">
Vos données et transactions sont protégées avec les dernières technologies de chiffrement.
</p>
</div>
<!-- Feature 3 -->
<div class="glass rounded-2xl p-6 hover:transform hover:-translate-y-2 transition duration-300">
<div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
<i class="fas fa-gift text-2xl text-purple-300"></i>
</div>
<h3 class="text-xl font-bold mb-3">Bonus équitables</h3>
<p class="text-gray-300">
Des promotions transparentes sans conditions cachées pour une expérience client optimale.
</p>
</div>
</div>
</section>
<!-- Live Matches Section -->
<section class="max-w-7xl mx-auto mb-16">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold gradient-text">Matchs en direct</h2>
<div class="flex items-center space-x-2">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
<span>10 matchs en cours</span>
</div>
</div>
<div class="bg-gray-800/50 rounded-2xl overflow-hidden">
<!-- Matches Navigation -->
<div class="flex border-b border-gray-700">
<button class="px-6 py-3 font-medium border-b-2 border-indigo-500">Football</button>
<button class="px-6 py-3 font-medium text-gray-400 hover:text-white transition">Tennis</button>
<button class="px-6 py-3 font-medium text-gray-400 hover:text-white transition">Basket</button>
<button class="px-6 py-3 font-medium text-gray-400 hover:text-white transition">Rugby</button>
</div>
<!-- Matches List -->
<div class="divide-y divide-gray-700">
<!-- Match 1 -->
<div class="p-4 hover:bg-gray-700/50 transition cursor-pointer">
<div class="flex justify-between items-center">
<div class="flex-1">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3">
<i class="fas fa-futbol text-gray-300"></i>
</div>
<span>Ligue 1</span>
</div>
</div>
<div class="flex-1 text-right">
<span class="text-sm text-gray-400">75'</span>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex-1">
<div class="flex items-center">
<div class="w-6 h-6 bg-white/10 rounded-full mr-3 overflow-hidden">
<img src="https://img.icons8.com/color/48/000000/paris-saint-germain.png" alt="PSG" class="w-full h-full object-cover">
</div>
<span class="font-medium">PSG</span>
</div>
</div>
<div class="px-4 flex items-center">
<div class="w-16 py-1 bg-gray-700 rounded text-center font-bold">
2 - 1
</div>
</div>
<div class="flex-1 text-right">
<div class="flex items-center justify-end">
<span class="font-medium">OM</span>
<div class="w-6 h-6 bg-white/10 rounded-full ml-3 overflow-hidden">
<img src="https://img.icons8.com/color/48/000000/olympique-de-marseille.png" alt="OM" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mt-4">
<button class="bg-gray-700 hover:bg-indigo-600 py-2 rounded text-sm transition">1.75</button>
<button class="bg-gray-700 hover:bg-indigo-600 py-2 rounded text-sm transition">3.50</button>
<button class="bg-gray-700 hover:bg-indigo-600 py-2 rounded text-sm transition">2.10</button>
</div>
</div>
<!-- Match 2 -->
<div class="p-4 hover:bg-gray-700/50 transition cursor-pointer">
<div class="flex justify-between items-center">
<div class="flex-1">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3">
<i class="fas fa-futbol text-gray-300"></i>
</div>
<span>Premier League</span>
</div>
</div>
<div class="flex-1 text-right">
<span class="text-sm text-gray-400">62'</span>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex-1">
<div class="flex items-center">
<div class="w-6 h-6 bg-white/10 rounded-full mr-3 overflow-hidden">
<img src="https://img.icons8.com/color/48/000000/manchester-city.png" alt="Man City" class="w-full h-full object-cover">
</div>
<span class="font-medium">Man City</span>
</div>
</div>
<div class="px-4 flex items-center">
<div class="w-16 py-1 bg-gray-700 rounded text-center font-bold">
0 - 0
</div>
</div>
<div class="flex-1 text-right">
<div class="flex items-center justify-end">
<span class="font-medium">Liverpool</span>
<div class="w-6 h-6 bg-white/10 rounded-full ml-3 overflow-hidden">
<img src="https://img.icons8.com/color/48/000000/liverpool-fc.png" alt="Liverpool" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mt-4">
<button class="bg-indigo-600 hover:bg-indigo-700 py-2 rounded text-sm transition">1.90</button>
<button class="bg-gray-700 hover:bg-indigo-600 py-2 rounded text-sm transition">3.80</button>
<button class="bg-gray-700 hover:bg-indigo-600 py-2 rounded text-sm transition">3.20</button>
</div>
</div>
</div>
<div class="p-4 text-center">
<button class="text-indigo-300 hover:text-indigo-200 font-medium flex items-center justify-center mx-auto">
Voir plus de matchs
<i class="fas fa-chevron-down ml-2 text-sm"></i>
</button>
</div>
</div>
</section>
<!-- Jackpot Banner -->
<section class="max-w-7xl mx-auto mb-16">
<div class="glass rounded-2xl p-6 md:p-8 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 relative overflow-hidden">
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-purple-500/20 blur-3xl -z-10"></div>
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-indigo-500/20 blur-3xl -z-10"></div>
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="mb-6 md:mb-0">
<h3 class="text-2xl md:text-3xl font-bold mb-2">Jackpot du weekend</h3>
<p class="text-gray-300 max-w-md mb-4">
Tentez de remporter notre jackpot spécial de 250 000€ en pronostiquant les résultats des 10 matchs sélectionnés!
</p>
<button class="bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 px-6 py-2 rounded-full font-bold transition transform hover:scale-105 shadow-lg">
Participer
</button>
</div>
<div class="relative">
<div class="w-48 h-48 bg-yellow-500/10 rounded-full flex items-center justify-center border-2 border-yellow-500/30 animate-pulse-slow">
<div class="w-40 h-40 bg-yellow-500/20 rounded-full flex items-center justify-center border-2 border-yellow-500/20">
<div class="text-center">
<div class="text-4xl font-bold">250K€</div>
<div class="text-sm">À gagner</div>
</div>
</div>
</div>
<div class="absolute -top-4 -right-4 bg-gray-900 rounded-full p-3 shadow-lg">
<i class="fas fa-coins text-yellow-400 text-xl"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center gradient-text">Innocent Bet en chiffres</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="glass rounded-2xl p-6 text-center">
<div class="text-4xl font-bold text-indigo-300 mb-2">250K+</div>
<div class="text-gray-300">Utilisateurs actifs</div>
</div>
<div class="glass rounded-2xl p-6 text-center">
<div class="text-4xl font-bold text-blue-300 mb-2">95%</div>
<div class="text-gray-300">Satisfaction clients</div>
</div>
<div class="glass rounded-2xl p-6 text-center">
<div class="text-4xl font-bold text-purple-300 mb-2">30+</div>
<div class="text-gray-300">Sports disponibles</div>
</div>
<div class="glass rounded-2xl p-6 text-center">
<div class="text-4xl font-bold text-pink-300 mb-2">2.5M€</div>
<div class="text-gray-300">Gains distribués</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-900/80 py-12 px-4 md:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-dove text-2xl text-indigo-300"></i>
<span class="text-xl font-bold gradient-text">INNOCENT BET</span>
</div>
<p class="text-gray-400 mb-4">
La plateforme de paris sportifs qui met l'éthique et la responsabilité au premier plan.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-discord"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-white">Navigation</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Accueil</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Sports</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Promotions</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Programme VIP</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Live</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-white">Légal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Conditions générales</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Politique de confidentialité</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Jouer responsable</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Règles des paris</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-white">Assistance</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Centre d'aide</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Nous contacter</a></li>
<li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">FAQ</a></li>
</ul>
<div class="mt-6">
<h4 class="text-sm font-bold mb-2 text-gray-400">Télécharger l'app</h4>
<div class="flex space-x-2">
<a href="#" class="flex items-center justify-center bg-gray-800 hover:bg-gray-700 rounded-lg px-3 py-2 transition">
<i class="fab fa-apple mr-2"></i>
<span class="text-xs">App Store</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-800 hover:bg-gray-700 rounded-lg px-3 py-2 transition">
<i class="fab fa-google-play mr-2"></i>
<span class="text-xs">Play Store</span>
</a>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-500 text-sm mb-4 md:mb-0">
© 2023 Innocent Bet. Tous droits réservés.
</div>
<div class="flex space-x-4">
<img src="https://img.icons8.com/color/48/000000/visa.png" alt="Visa" class="w-8 h-5 object-cover">
<img src="https://img.icons8.com/color/48/000000/mastercard.png" alt="Mastercard" class="w-8 h-5 object-cover">
<img src="https://img.icons8.com/color/48/000000/paypal.png" alt="PayPal" class="w-8 h-5 object-cover">
<img src="https://img.icons8.com/color/48/000000/bitcoin.png" alt="Bitcoin" class="w-8 h-5 object-cover">
</div>
</div>
</div>
</div>
</footer>
<!-- Responsible Gambling Banner -->
<div class="fixed bottom-0 left-0 right-0 bg-indigo-900/90 backdrop-blur-sm z-40">
<div class="max-w-7xl mx-auto px-4 py-2 flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center mb-2 md:mb-0">
<i class="fas fa-info-circle text-indigo-300 mr-2"></i>
<span class="text-sm">Jouez de manière responsable. 18+ seulement.</span>
</div>
<div class="flex space-x-4">
<button class="text-xs hover:underline text-indigo-300">Limites de dépôt</button>
<button class="text-xs hover:underline text-indigo-300">Auto-exclusion</button>
</div>
</div>
</div>
<script>
// Simple JavaScript for demo purposes
document.addEventListener('DOMContentLoaded', function() {
// Animate match odds buttons on hover
const oddsButtons = document.querySelectorAll('.grid.grid-cols-3 button');
oddsButtons.forEach(button => {
button.addEventListener('mouseenter', function() {
this.classList.add('transform', 'scale-105');
});
button.addEventListener('mouseleave', function() {
this.classList.remove('transform', 'scale-105');
});
});
// Mobile menu toggle (would be expanded in a real implementation)
const mobileMenuBtn = document.querySelector('button[class*="md:hidden"]');
mobileMenuBtn.addEventListener('click', function() {
alert('Menu mobile serait ouvert ici dans une implémentation complète');
});
// Show toast notification when clicking on any bet button
const betButtons = document.querySelectorAll('button:not([class*="gradient"]):not([class*="glass"]):not([class*="text-xs"])');
betButtons.forEach(button => {
button.addEventListener('click', function(e) {
if(e.target.textContent.toLowerCase().includes('s\'identifier') ||
e.target.textContent.toLowerCase().includes('participer') ||
e.target.textContent.toLowerCase().includes('commencer') ||
e.target.textContent.toLowerCase().includes('savoir')) return;
showToast('Paris ajouté à votre slip', 'success');
});
});
function showToast(message, type) {
const toast = document.createElement('div');
toast.className = `fixed top-5 right-5 glass px-X4 py-3 rounded-lg flex items-center shadow-lg animate-slide-in`;
let iconClass = 'fas fa-check-circle';
let bgColor = 'bg-green-500/20';
let textColor = 'text-green-300';
if(type === 'error') {
iconClass = 'fas fa-times-circle';
bgColor = 'bg-red-500/20';
textColor = 'text-red-300';
}
toast.innerHTML = `
<div class="w-8 h-8 rounded-full ${bgColor} flex items-center justify-center mr-3">
<i class="${iconClass} ${textColor}"></i>
</div>
<div>
<div class="font-medium">${message}</div>
</div>
<button class="ml-4 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
`;
document.body.appendChild(toast);
// Auto remove after 3 seconds
setTimeout(() => {
toast.classList.add('animate-slide-out');
setTimeout(() => toast.remove(), 300);
}, 3000);
// Remove on click
toast.querySelector('button').addEventListener('click', () => toast.remove());
}
});
</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=innocent1265/innocent-smith" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |