Spaces:
Running
Running
<html lang="fr"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Générateur de Site de Jeux avec 200K IA</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> | |
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
body { | |
font-family: 'Rajdhani', sans-serif; | |
background: #0a0a12; | |
color: #e2e8f0; | |
overflow-x: hidden; | |
} | |
.title-font { | |
font-family: 'Orbitron', sans-serif; | |
} | |
.gradient-text { | |
background: linear-gradient(90deg, #00f5d4, #00bbf9, #9b5de5); | |
-webkit-background-clip: text; | |
background-clip: text; | |
color: transparent; | |
} | |
.glow-box { | |
box-shadow: 0 0 20px rgba(0, 245, 212, 0.3); | |
border: 1px solid rgba(0, 245, 212, 0.2); | |
} | |
.glow-box-purple { | |
box-shadow: 0 0 20px rgba(155, 93, 229, 0.3); | |
border: 1px solid rgba(155, 93, 229, 0.2); | |
} | |
.glow-box-blue { | |
box-shadow: 0 0 20px rgba(0, 187, 249, 0.3); | |
border: 1px solid rgba(0, 187, 249, 0.2); | |
} | |
@keyframes pulse { | |
0% { opacity: 0.6; transform: scale(0.95); } | |
50% { opacity: 1; transform: scale(1.05); } | |
100% { opacity: 0.6; transform: scale(0.95); } | |
} | |
.pulse { | |
animation: pulse 2s infinite; | |
} | |
.game-card { | |
transition: all 0.3s ease; | |
transform-style: preserve-3d; | |
} | |
.game-card:hover { | |
transform: translateY(-5px) scale(1.02); | |
box-shadow: 0 15px 30px rgba(0, 245, 212, 0.4); | |
} | |
.progress-bar { | |
height: 6px; | |
background: linear-gradient(90deg, #00f5d4, #00bbf9); | |
border-radius: 3px; | |
transition: width 0.5s ease; | |
} | |
.typewriter { | |
border-right: 3px solid #00f5d4; | |
white-space: nowrap; | |
overflow: hidden; | |
animation: typing 3s steps(40) 1s 1 normal both, blink-caret 0.75s step-end infinite; | |
} | |
@keyframes typing { | |
from { width: 0 } | |
to { width: 100% } | |
} | |
@keyframes blink-caret { | |
from, to { border-color: transparent } | |
50% { border-color: #00f5d4 } | |
} | |
/* Style pour les notifications de téléchargement */ | |
.download-notification { | |
position: fixed; | |
bottom: 20px; | |
right: 20px; | |
background: rgba(0, 0, 0, 0.8); | |
border-left: 4px solid #00f5d4; | |
color: white; | |
padding: 15px; | |
border-radius: 5px; | |
display: flex; | |
align-items: center; | |
z-index: 1000; | |
transform: translateX(120%); | |
transition: transform 0.3s ease; | |
max-width: 350px; | |
} | |
.download-notification.show { | |
transform: translateX(0); | |
} | |
.download-notification i { | |
margin-right: 10px; | |
font-size: 20px; | |
} | |
.download-progress { | |
width: 100%; | |
height: 3px; | |
background: #333; | |
margin-top: 10px; | |
border-radius: 3px; | |
overflow: hidden; | |
} | |
.download-progress-bar { | |
height: 100%; | |
background: linear-gradient(90deg, #00f5d4, #00bbf9); | |
width: 0%; | |
transition: width 0.1s linear; | |
} | |
.file-structure { | |
background: rgba(15, 23, 42, 0.7); | |
border-radius: 8px; | |
padding: 15px; | |
margin-top: 15px; | |
font-family: monospace; | |
font-size: 14px; | |
max-height: 200px; | |
overflow-y: auto; | |
} | |
.file-item { | |
padding: 2px 0; | |
display: flex; | |
align-items: center; | |
} | |
.file-item i { | |
margin-right: 8px; | |
width: 16px; | |
text-align: center; | |
} | |
.folder { | |
color: #00bbf9; | |
} | |
.file { | |
color: #e2e8f0; | |
} | |
.file-size { | |
color: #94a3b8; | |
margin-left: 10px; | |
font-size: 12px; | |
} | |
/* Animation pour le bouton de démo */ | |
@keyframes demoPulse { | |
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } | |
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
} | |
.demo-pulse { | |
animation: demoPulse 2s infinite; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Notification de téléchargement --> | |
<div id="download-notification" class="download-notification"> | |
<i class="fas fa-download"></i> | |
<div style="flex-grow: 1;"> | |
<div id="download-message">Téléchargement en cours...</div> | |
<div id="file-structure" class="file-structure" style="display: none;"> | |
<div class="file-item"><i class="fas fa-folder folder"></i> /site-jeux <span class="file-size">(dossier)</span></div> | |
<div class="file-item"><i class="fas fa-file-code file"></i> ├── index.html <span class="file-size">12.4 KB</span></div> | |
<div class="file-item"><i class="fas fa-file-code file"></i> ├── styles.css <span class="file-size">8.7 KB</span></div> | |
<div class="file-item"><i class="fas fa-file-code file"></i> ├── script.js <span class="file-size">15.2 KB</span></div> | |
<div class="file-item"><i class="fas fa-folder folder"></i> ├── assets <span class="file-size">(dossier)</span></div> | |
<div class="file-item"><i class="fas fa-image file"></i> │ ├── logo.png <span class="file-size">24.8 KB</span></div> | |
<div class="file-item"><i class="fas fa-image file"></i> │ ├── background.jpg <span class="file-size">145.6 KB</span></div> | |
<div class="file-item"><i class="fas fa-file-alt file"></i> └── README.md <span class="file-size">1.2 KB</span></div> | |
</div> | |
<div class="download-progress"> | |
<div id="download-progress-bar" class="download-progress-bar"></div> | |
</div> | |
</div> | |
</div> | |
<!-- Results Panel --> | |
<div class="container mx-auto px-4 py-12"> | |
<div class="max-w-6xl mx-auto bg-black bg-opacity-50 rounded-xl p-8 glow-box"> | |
<div class="text-center mb-12"> | |
<div class="text-5xl font-bold mb-4 title-font gradient-text">GÉNÉRATION TERMINÉE!</div> | |
<p class="text-xl max-w-3xl mx-auto">Votre site de jeux a été généré avec succès par notre armée de 200,000 IA en <span class="font-bold text-green-400">4.7 secondes</span>.</p> | |
</div> | |
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-purple"> | |
<h3 class="text-xl font-bold mb-4 title-font">STATISTIQUES</h3> | |
<div class="space-y-4"> | |
<div class="flex justify-between"> | |
<span>Pages Générées</span> | |
<span class="font-bold">27</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>Assets Créés</span> | |
<span class="font-bold">143</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>IA Utilisées</span> | |
<span class="font-bold">200,000</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>Puissance de Calcul</span> | |
<span class="font-bold">4.7 PetaFLOPS</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>Score de Qualité</span> | |
<span class="font-bold">98.7%</span> | |
</div> | |
</div> | |
</div> | |
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-blue"> | |
<h3 class="text-xl font-bold mb-4 title-font">OPTIONS DE TÉLÉCHARGEMENT</h3> | |
<div class="space-y-4"> | |
<button id="download-complete" class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all"> | |
<div class="flex items-center"> | |
<div class="text-2xl mr-4 text-blue-400"> | |
<i class="fas fa-file-archive"></i> | |
</div> | |
<div> | |
<div class="font-bold">Package Complet</div> | |
<div class="text-sm text-gray-400">HTML, CSS, JS, Assets (ZIP vérifié)</div> | |
</div> | |
</div> | |
<div class="text-gray-400"> | |
<i class="fas fa-download"></i> | |
</div> | |
</button> | |
<button id="download-react" class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all"> | |
<div class="flex items-center"> | |
<div class="text-2xl mr-4 text-green-400"> | |
<i class="fab fa-react"></i> | |
</div> | |
<div> | |
<div class="font-bold">Version React</div> | |
<div class="text-sm text-gray-400">Implémentation React Moderne (ZIP vérifié)</div> | |
</div> | |
</div> | |
<div class="text-gray-400"> | |
<i class="fas fa-download"></i> | |
</div> | |
</button> | |
<button id="download-wordpress" class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all"> | |
<div class="flex items-center"> | |
<div class="text-2xl mr-4 text-purple-400"> | |
<i class="fab fa-wordpress"></i> | |
</div> | |
<div> | |
<div class="font-bold">Thème WordPress</div> | |
<div class="text-sm text-gray-400">Prêt pour WordPress (ZIP vérifié)</div> | |
</div> | |
</div> | |
<div class="text-gray-400"> | |
<i class="fas fa-download"></i> | |
</div> | |
</button> | |
</div> | |
</div> | |
</div> | |
<div class="text-center"> | |
<button id="new-project" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg mr-4"> | |
NOUVEAU PROJET | |
</button> | |
<button id="demo-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg demo-pulse"> | |
VOIR LA DÉMO | |
</button> | |
</div> | |
</div> | |
</div> | |
<script> | |