Hugging Face's logo

Spaces:
docto41
/
mega-game-generator
Running

App Files Community
docto41 commited on
Commit
5009984
·
verified ·
1 Parent(s): 464f5c7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +669 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mega Game Generator
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mega-game-generator
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,669 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mega Game Site Generator with 200K AI Army</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Rajdhani', sans-serif;
15
+ background: #0a0a12;
16
+ color: #e2e8f0;
17
+ overflow-x: hidden;
18
+ }
19
+
20
+ .title-font {
21
+ font-family: 'Orbitron', sans-serif;
22
+ }
23
+
24
+ .gradient-text {
25
+ background: linear-gradient(90deg, #00f5d4, #00bbf9, #9b5de5);
26
+ -webkit-background-clip: text;
27
+ background-clip: text;
28
+ color: transparent;
29
+ }
30
+
31
+ .ai-node {
32
+ position: absolute;
33
+ width: 6px;
34
+ height: 6px;
35
+ border-radius: 50%;
36
+ background: #00f5d4;
37
+ box-shadow: 0 0 10px #00f5d4, 0 0 20px #00f5d4;
38
+ z-index: 1;
39
+ }
40
+
41
+ .glow-box {
42
+ box-shadow: 0 0 20px rgba(0, 245, 212, 0.3);
43
+ border: 1px solid rgba(0, 245, 212, 0.2);
44
+ }
45
+
46
+ .glow-box-purple {
47
+ box-shadow: 0 0 20px rgba(155, 93, 229, 0.3);
48
+ border: 1px solid rgba(155, 93, 229, 0.2);
49
+ }
50
+
51
+ .glow-box-blue {
52
+ box-shadow: 0 0 20px rgba(0, 187, 249, 0.3);
53
+ border: 1px solid rgba(0, 187, 249, 0.2);
54
+ }
55
+
56
+ @keyframes pulse {
57
+ 0% { opacity: 0.6; transform: scale(0.95); }
58
+ 50% { opacity: 1; transform: scale(1.05); }
59
+ 100% { opacity: 0.6; transform: scale(0.95); }
60
+ }
61
+
62
+ .pulse {
63
+ animation: pulse 2s infinite;
64
+ }
65
+
66
+ #ai-visualization {
67
+ position: fixed;
68
+ top: 0;
69
+ left: 0;
70
+ width: 100%;
71
+ height: 100%;
72
+ z-index: 0;
73
+ opacity: 0.3;
74
+ }
75
+
76
+ .game-card {
77
+ transition: all 0.3s ease;
78
+ transform-style: preserve-3d;
79
+ }
80
+
81
+ .game-card:hover {
82
+ transform: translateY(-5px) scale(1.02);
83
+ box-shadow: 0 15px 30px rgba(0, 245, 212, 0.4);
84
+ }
85
+
86
+ .progress-bar {
87
+ height: 6px;
88
+ background: linear-gradient(90deg, #00f5d4, #00bbf9);
89
+ border-radius: 3px;
90
+ transition: width 0.5s ease;
91
+ }
92
+
93
+ .typewriter {
94
+ border-right: 3px solid #00f5d4;
95
+ white-space: nowrap;
96
+ overflow: hidden;
97
+ animation: typing 3s steps(40) 1s 1 normal both, blink-caret 0.75s step-end infinite;
98
+ }
99
+
100
+ @keyframes typing {
101
+ from { width: 0 }
102
+ to { width: 100% }
103
+ }
104
+
105
+ @keyframes blink-caret {
106
+ from, to { border-color: transparent }
107
+ 50% { border-color: #00f5d4 }
108
+ }
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <!-- AI Visualization Canvas -->
113
+ <div id="ai-visualization"></div>
114
+
115
+ <!-- Main Content -->
116
+ <div class="relative z-10">
117
+ <!-- Header -->
118
+ <header class="container mx-auto px-4 py-12 text-center">
119
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 title-font gradient-text">MEGA GAME GENERATOR</h1>
120
+ <div class="typewriter text-2xl md:text-3xl font-medium mb-8 mx-auto max-w-2xl">
121
+ Powered by 200,000 AI Agents in Real-Time
122
+ </div>
123
+
124
+ <div class="flex justify-center space-x-4 mb-12">
125
+ <div class="flex items-center bg-black bg-opacity-50 px-4 py-2 rounded-full glow-box">
126
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2 pulse"></div>
127
+ <span>AI ARMY ACTIVE</span>
128
+ </div>
129
+ <div class="flex items-center bg-black bg-opacity-50 px-4 py-2 rounded-full glow-box-purple">
130
+ <i class="fas fa-bolt text-purple-400 mr-2"></i>
131
+ <span>200,000 UNITS</span>
132
+ </div>
133
+ <div class="flex items-center bg-black bg-opacity-50 px-4 py-2 rounded-full glow-box-blue">
134
+ <i class="fas fa-shield-alt text-blue-400 mr-2"></i>
135
+ <span>MAXIMUM POWER</span>
136
+ </div>
137
+ </div>
138
+
139
+ <div class="max-w-4xl mx-auto bg-black bg-opacity-50 rounded-xl p-8 glow-box">
140
+ <h2 class="text-3xl font-bold mb-6 title-font">CREATE YOUR DREAM GAME SITE</h2>
141
+ <p class="text-xl mb-8">Our army of 200,000 specialized AI agents will generate a complete gaming website tailored to your exact specifications in seconds.</p>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
144
+ <div class="bg-gray-900 bg-opacity-70 p-6 rounded-lg glow-box">
145
+ <div class="text-4xl text-green-400 mb-4">
146
+ <i class="fas fa-robot"></i>
147
+ </div>
148
+ <h3 class="text-xl font-bold mb-2 title-font">AI-Powered</h3>
149
+ <p>200,000 specialized AI agents working in perfect synchronization</p>
150
+ </div>
151
+ <div class="bg-gray-900 bg-opacity-70 p-6 rounded-lg glow-box-purple">
152
+ <div class="text-4xl text-purple-400 mb-4">
153
+ <i class="fas fa-bolt"></i>
154
+ </div>
155
+ <h3 class="text-xl font-bold mb-2 title-font">Instant Generation</h3>
156
+ <p>Complete gaming websites generated in under 30 seconds</p>
157
+ </div>
158
+ <div class="bg-gray-900 bg-opacity-70 p-6 rounded-lg glow-box-blue">
159
+ <div class="text-4xl text-blue-400 mb-4">
160
+ <i class="fas fa-sliders-h"></i>
161
+ </div>
162
+ <h3 class="text-xl font-bold mb-2 title-font">Fully Customizable</h3>
163
+ <p>Tailor every aspect to your exact requirements</p>
164
+ </div>
165
+ </div>
166
+
167
+ <button id="start-generator" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-black font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg">
168
+ DEPLOY AI ARMY
169
+ </button>
170
+ </div>
171
+ </header>
172
+
173
+ <!-- Generator Interface (Hidden Initially) -->
174
+ <div id="generator-interface" class="container mx-auto px-4 py-12 hidden">
175
+ <div class="max-w-6xl mx-auto bg-black bg-opacity-50 rounded-xl p-8 glow-box">
176
+ <div class="flex justify-between items-center mb-8">
177
+ <h2 class="text-3xl font-bold title-font">GAME SITE GENERATOR</h2>
178
+ <div class="flex items-center space-x-2">
179
+ <div class="w-3 h-3 rounded-full bg-green-500 pulse"></div>
180
+ <span>200,000 AI AGENTS ACTIVE</span>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
185
+ <!-- Configuration Panel -->
186
+ <div class="lg:col-span-1 bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-purple">
187
+ <h3 class="text-xl font-bold mb-6 title-font">CONFIGURATION</h3>
188
+
189
+ <div class="space-y-6">
190
+ <div>
191
+ <label class="block text-sm font-medium mb-2">Game Site Name</label>
192
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-400" placeholder="My Awesome Game Site">
193
+ </div>
194
+
195
+ <div>
196
+ <label class="block text-sm font-medium mb-2">Primary Game Genre</label>
197
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-400">
198
+ <option>Action</option>
199
+ <option>Adventure</option>
200
+ <option>RPG</option>
201
+ <option>Strategy</option>
202
+ <option>Sports</option>
203
+ <option>Puzzle</option>
204
+ <option>MMO</option>
205
+ <option>Casual</option>
206
+ </select>
207
+ </div>
208
+
209
+ <div>
210
+ <label class="block text-sm font-medium mb-2">Color Theme</label>
211
+ <div class="grid grid-cols-5 gap-2">
212
+ <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
213
+ <div class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
214
+ <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
215
+ <div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
216
+ <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
217
+ <div class="w-8 h-8 rounded-full bg-pink-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
218
+ <div class="w-8 h-8 rounded-full bg-indigo-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
219
+ <div class="w-8 h-8 rounded-full bg-teal-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
220
+ <div class="w-8 h-8 rounded-full bg-orange-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
221
+ <div class="w-8 h-8 rounded-full bg-gray-500 cursor-pointer border-2 border-transparent hover:border-white"></div>
222
+ </div>
223
+ </div>
224
+
225
+ <div>
226
+ <label class="block text-sm font-medium mb-2">AI Power Allocation</label>
227
+ <div class="flex items-center space-x-2">
228
+ <input type="range" min="1" max="100" value="75" class="w-full">
229
+ <span class="text-sm font-bold">75%</span>
230
+ </div>
231
+ <div class="text-xs text-gray-400 mt-1">Higher allocation = faster generation</div>
232
+ </div>
233
+
234
+ <div>
235
+ <label class="block text-sm font-medium mb-2">Additional Features</label>
236
+ <div class="space-y-2">
237
+ <label class="flex items-center space-x-2">
238
+ <input type="checkbox" class="form-checkbox text-green-400 rounded">
239
+ <span>Multiplayer Support</span>
240
+ </label>
241
+ <label class="flex items-center space-x-2">
242
+ <input type="checkbox" class="form-checkbox text-green-400 rounded" checked>
243
+ <span>Leaderboards</span>
244
+ </label>
245
+ <label class="flex items-center space-x-2">
246
+ <input type="checkbox" class="form-checkbox text-green-400 rounded" checked>
247
+ <span>User Profiles</span>
248
+ </label>
249
+ <label class="flex items-center space-x-2">
250
+ <input type="checkbox" class="form-checkbox text-green-400 rounded">
251
+ <span>In-Game Chat</span>
252
+ </label>
253
+ <label class="flex items-center space-x-2">
254
+ <input type="checkbox" class="form-checkbox text-green-400 rounded">
255
+ <span>Payment Integration</span>
256
+ </label>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Preview Panel -->
263
+ <div class="lg:col-span-2">
264
+ <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 mb-6 glow-box-blue">
265
+ <div class="flex justify-between items-center mb-4">
266
+ <h3 class="text-xl font-bold title-font">LIVE PREVIEW</h3>
267
+ <div class="flex space-x-2">
268
+ <button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-lg text-sm">
269
+ Desktop
270
+ </button>
271
+ <button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-lg text-sm">
272
+ Tablet
273
+ </button>
274
+ <button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-lg text-sm">
275
+ Mobile
276
+ </button>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="border-2 border-gray-700 rounded-lg overflow-hidden">
281
+ <div class="bg-gray-800 h-8 flex items-center px-3 space-x-2">
282
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
283
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
284
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
285
+ <div class="flex-1 text-center text-sm">mygame-site.com</div>
286
+ </div>
287
+ <div class="h-96 bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center">
288
+ <div class="text-center">
289
+ <div class="text-4xl mb-4 title-font gradient-text">GAME SITE PREVIEW</div>
290
+ <p class="text-gray-400">Configure options to see live preview</p>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Generation Progress -->
297
+ <div id="generation-progress" class="hidden">
298
+ <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box">
299
+ <h3 class="text-xl font-bold mb-4 title-font">AI ARMY DEPLOYMENT IN PROGRESS</h3>
300
+
301
+ <div class="mb-4">
302
+ <div class="flex justify-between text-sm mb-1">
303
+ <span>Generating Game Site</span>
304
+ <span id="progress-percent">0%</span>
305
+ </div>
306
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
307
+ <div id="progress-bar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
312
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">
313
+ <div class="text-sm text-gray-400 mb-1">AI Agents Deployed</div>
314
+ <div class="text-xl font-bold" id="agents-deployed">0</div>
315
+ </div>
316
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">
317
+ <div class="text-sm text-gray-400 mb-1">Tasks Completed</div>
318
+ <div class="text-xl font-bold" id="tasks-completed">0</div>
319
+ </div>
320
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">
321
+ <div class="text-sm text-gray-400 mb-1">Estimated Time</div>
322
+ <div class="text-xl font-bold" id="estimated-time">5s</div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="space-y-3">
327
+ <div class="flex items-center">
328
+ <div class="w-4 h-4 rounded-full bg-green-500 mr-3 pulse"></div>
329
+ <div class="text-sm flex-1">Initializing AI Core Systems</div>
330
+ <div class="text-sm text-green-400">Complete</div>
331
+ </div>
332
+ <div class="flex items-center">
333
+ <div class="w-4 h-4 rounded-full bg-green-500 mr-3 pulse" id="task-1-icon"></div>
334
+ <div class="text-sm flex-1">Deploying AI Agents</div>
335
+ <div class="text-sm text-yellow-400" id="task-1-status">In Progress</div>
336
+ </div>
337
+ <div class="flex items-center">
338
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-3" id="task-2-icon"></div>
339
+ <div class="text-sm flex-1">Generating Game Content</div>
340
+ <div class="text-sm text-gray-400" id="task-2-status">Pending</div>
341
+ </div>
342
+ <div class="flex items-center">
343
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-3" id="task-3-icon"></div>
344
+ <div class="text-sm flex-1">Building UI Components</div>
345
+ <div class="text-sm text-gray-400" id="task-3-status">Pending</div>
346
+ </div>
347
+ <div class="flex items-center">
348
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-3" id="task-4-icon"></div>
349
+ <div class="text-sm flex-1">Optimizing Performance</div>
350
+ <div class="text-sm text-gray-400" id="task-4-status">Pending</div>
351
+ </div>
352
+ <div class="flex items-center">
353
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-3" id="task-5-icon"></div>
354
+ <div class="text-sm flex-1">Finalizing Deployment</div>
355
+ <div class="text-sm text-gray-400" id="task-5-status">Pending</div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Generate Button -->
362
+ <button id="generate-button" class="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-black font-bold py-4 px-8 rounded-lg text-xl title-font transition-all transform hover:scale-[1.01] shadow-lg mt-4">
363
+ GENERATE GAME SITE
364
+ </button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Results Panel (Hidden Initially) -->
371
+ <div id="results-panel" class="container mx-auto px-4 py-12 hidden">
372
+ <div class="max-w-6xl mx-auto bg-black bg-opacity-50 rounded-xl p-8 glow-box">
373
+ <div class="text-center mb-12">
374
+ <div class="text-5xl font-bold mb-4 title-font gradient-text">GENERATION COMPLETE!</div>
375
+ <p class="text-xl max-w-3xl mx-auto">Your game site has been successfully generated by our army of 200,000 AI agents in <span class="font-bold text-green-400">4.7 seconds</span>.</p>
376
+ </div>
377
+
378
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
379
+ <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-purple">
380
+ <h3 class="text-xl font-bold mb-4 title-font">SITE STATISTICS</h3>
381
+ <div class="space-y-4">
382
+ <div class="flex justify-between">
383
+ <span>Pages Generated</span>
384
+ <span class="font-bold">27</span>
385
+ </div>
386
+ <div class="flex justify-between">
387
+ <span>Game Assets Created</span>
388
+ <span class="font-bold">143</span>
389
+ </div>
390
+ <div class="flex justify-between">
391
+ <span>AI Agents Utilized</span>
392
+ <span class="font-bold">200,000</span>
393
+ </div>
394
+ <div class="flex justify-between">
395
+ <span>Processing Power</span>
396
+ <span class="font-bold">4.7 PetaFLOPS</span>
397
+ </div>
398
+ <div class="flex justify-between">
399
+ <span>Code Quality Score</span>
400
+ <span class="font-bold">98.7%</span>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-blue">
406
+ <h3 class="text-xl font-bold mb-4 title-font">DOWNLOAD OPTIONS</h3>
407
+ <div class="space-y-4">
408
+ <button class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all">
409
+ <div class="flex items-center">
410
+ <div class="text-2xl mr-4 text-blue-400">
411
+ <i class="fas fa-file-archive"></i>
412
+ </div>
413
+ <div>
414
+ <div class="font-bold">Complete Package</div>
415
+ <div class="text-sm text-gray-400">HTML, CSS, JS, Assets</div>
416
+ </div>
417
+ </div>
418
+ <div class="text-gray-400">
419
+ <i class="fas fa-download"></i>
420
+ </div>
421
+ </button>
422
+
423
+ <button class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all">
424
+ <div class="flex items-center">
425
+ <div class="text-2xl mr-4 text-green-400">
426
+ <i class="fab fa-react"></i>
427
+ </div>
428
+ <div>
429
+ <div class="font-bold">React Version</div>
430
+ <div class="text-sm text-gray-400">Modern React Implementation</div>
431
+ </div>
432
+ </div>
433
+ <div class="text-gray-400">
434
+ <i class="fas fa-download"></i>
435
+ </div>
436
+ </button>
437
+
438
+ <button class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all">
439
+ <div class="flex items-center">
440
+ <div class="text-2xl mr-4 text-purple-400">
441
+ <i class="fab fa-wordpress"></i>
442
+ </div>
443
+ <div>
444
+ <div class="font-bold">WordPress Theme</div>
445
+ <div class="text-sm text-gray-400">Ready for WordPress</div>
446
+ </div>
447
+ </div>
448
+ <div class="text-gray-400">
449
+ <i class="fas fa-download"></i>
450
+ </div>
451
+ </button>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <div class="text-center">
457
+ <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">
458
+ START NEW PROJECT
459
+ </button>
460
+ <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg">
461
+ VIEW LIVE DEMO
462
+ </button>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <script>
469
+ document.addEventListener('DOMContentLoaded', function() {
470
+ // Create AI visualization
471
+ const container = document.getElementById('ai-visualization');
472
+ const width = window.innerWidth;
473
+ const height = window.innerHeight;
474
+
475
+ // Create 200 AI nodes (200,000 would be too resource intensive)
476
+ for (let i = 0; i < 200; i++) {
477
+ const node = document.createElement('div');
478
+ node.className = 'ai-node';
479
+
480
+ // Random position
481
+ const x = Math.random() * width;
482
+ const y = Math.random() * height;
483
+ node.style.left = `${x}px`;
484
+ node.style.top = `${y}px`;
485
+
486
+ // Random movement
487
+ setInterval(() => {
488
+ const newX = x + (Math.random() * 40 - 20);
489
+ const newY = y + (Math.random() * 40 - 20);
490
+ node.style.transform = `translate(${newX - x}px, ${newY - y}px)`;
491
+
492
+ // Random connections
493
+ if (Math.random() > 0.95) {
494
+ const connection = document.createElement('div');
495
+ connection.className = 'ai-connection';
496
+ connection.style.position = 'absolute';
497
+ connection.style.left = `${x}px`;
498
+ connection.style.top = `${y}px`;
499
+ connection.style.width = '1px';
500
+ connection.style.height = '1px';
501
+ connection.style.background = 'rgba(0, 245, 212, 0.3)';
502
+ connection.style.boxShadow = '0 0 5px rgba(0, 245, 212, 0.5)';
503
+ container.appendChild(connection);
504
+
505
+ // Animate connection
506
+ const targetX = x + (Math.random() * 200 - 100);
507
+ const targetY = y + (Math.random() * 200 - 100);
508
+
509
+ let start = null;
510
+ const duration = 500;
511
+
512
+ function animateConnection(timestamp) {
513
+ if (!start) start = timestamp;
514
+ const progress = Math.min((timestamp - start) / duration, 1);
515
+
516
+ const currentX = x + (targetX - x) * progress;
517
+ const currentY = y + (targetY - y) * progress;
518
+
519
+ const distance = Math.sqrt(Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2));
520
+ const angle = Math.atan2(targetY - currentY, targetX - currentX);
521
+
522
+ connection.style.left = `${currentX}px`;
523
+ connection.style.top = `${currentY}px`;
524
+ connection.style.width = `${distance}px`;
525
+ connection.style.transform = `rotate(${angle}rad)`;
526
+ connection.style.opacity = `${1 - progress}`;
527
+
528
+ if (progress < 1) {
529
+ requestAnimationFrame(animateConnection);
530
+ } else {
531
+ connection.remove();
532
+ }
533
+ }
534
+
535
+ requestAnimationFrame(animateConnection);
536
+ }
537
+ }, Math.random() * 1000 + 500);
538
+
539
+ container.appendChild(node);
540
+ }
541
+
542
+ // UI Interactions
543
+ const startButton = document.getElementById('start-generator');
544
+ const generatorInterface = document.getElementById('generator-interface');
545
+ const generateButton = document.getElementById('generate-button');
546
+ const generationProgress = document.getElementById('generation-progress');
547
+ const resultsPanel = document.getElementById('results-panel');
548
+ const newProjectButton = document.getElementById('new-project');
549
+
550
+ startButton.addEventListener('click', function() {
551
+ startButton.classList.add('hidden');
552
+ generatorInterface.classList.remove('hidden');
553
+ });
554
+
555
+ generateButton.addEventListener('click', function() {
556
+ generatorInterface.classList.add('hidden');
557
+ generationProgress.classList.remove('hidden');
558
+
559
+ // Simulate generation progress
560
+ let progress = 0;
561
+ const interval = setInterval(() => {
562
+ progress += Math.random() * 5;
563
+ if (progress > 100) progress = 100;
564
+
565
+ document.getElementById('progress-bar').style.width = `${progress}%`;
566
+ document.getElementById('progress-percent').textContent = `${Math.floor(progress)}%`;
567
+
568
+ // Update agent count (scaled down from 200,000 for display)
569
+ document.getElementById('agents-deployed').textContent = Math.floor(progress * 2000);
570
+ document.getElementById('tasks-completed').textContent = Math.floor(progress * 143);
571
+
572
+ // Update estimated time
573
+ const remaining = Math.max(0, (100 - progress) / 20).toFixed(1);
574
+ document.getElementById('estimated-time').textContent = `${remaining}s`;
575
+
576
+ // Update task statuses
577
+ if (progress > 10) {
578
+ document.getElementById('task-1-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3';
579
+ document.getElementById('task-1-status').textContent = 'Complete';
580
+ document.getElementById('task-1-status').className = 'text-sm text-green-400';
581
+ }
582
+
583
+ if (progress > 30) {
584
+ document.getElementById('task-2-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3 pulse';
585
+ document.getElementById('task-2-status').textContent = 'In Progress';
586
+ document.getElementById('task-2-status').className = 'text-sm text-yellow-400';
587
+ }
588
+
589
+ if (progress > 50) {
590
+ document.getElementById('task-2-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3';
591
+ document.getElementById('task-2-status').textContent = 'Complete';
592
+ document.getElementById('task-2-status').className = 'text-sm text-green-400';
593
+
594
+ document.getElementById('task-3-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3 pulse';
595
+ document.getElementById('task-3-status').textContent = 'In Progress';
596
+ document.getElementById('task-3-status').className = 'text-sm text-yellow-400';
597
+ }
598
+
599
+ if (progress > 70) {
600
+ document.getElementById('task-3-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3';
601
+ document.getElementById('task-3-status').textContent = 'Complete';
602
+ document.getElementById('task-3-status').className = 'text-sm text-green-400';
603
+
604
+ document.getElementById('task-4-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3 pulse';
605
+ document.getElementById('task-4-status').textContent = 'In Progress';
606
+ document.getElementById('task-4-status').className = 'text-sm text-yellow-400';
607
+ }
608
+
609
+ if (progress > 90) {
610
+ document.getElementById('task-4-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3';
611
+ document.getElementById('task-4-status').textContent = 'Complete';
612
+ document.getElementById('task-4-status').className = 'text-sm text-green-400';
613
+
614
+ document.getElementById('task-5-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3 pulse';
615
+ document.getElementById('task-5-status').textContent = 'In Progress';
616
+ document.getElementById('task-5-status').className = 'text-sm text-yellow-400';
617
+ }
618
+
619
+ if (progress >= 100) {
620
+ clearInterval(interval);
621
+
622
+ document.getElementById('task-5-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3';
623
+ document.getElementById('task-5-status').textContent = 'Complete';
624
+ document.getElementById('task-5-status').className = 'text-sm text-green-400';
625
+
626
+ setTimeout(() => {
627
+ generationProgress.classList.add('hidden');
628
+ resultsPanel.classList.remove('hidden');
629
+ }, 1000);
630
+ }
631
+ }, 100);
632
+ });
633
+
634
+ newProjectButton.addEventListener('click', function() {
635
+ resultsPanel.classList.add('hidden');
636
+ generatorInterface.classList.remove('hidden');
637
+
638
+ // Reset progress
639
+ document.getElementById('progress-bar').style.width = '0%';
640
+ document.getElementById('progress-percent').textContent = '0%';
641
+ document.getElementById('agents-deployed').textContent = '0';
642
+ document.getElementById('tasks-completed').textContent = '0';
643
+ document.getElementById('estimated-time').textContent = '5s';
644
+
645
+ // Reset task statuses
646
+ document.getElementById('task-1-icon').className = 'w-4 h-4 rounded-full bg-green-500 mr-3 pulse';
647
+ document.getElementById('task-1-status').textContent = 'In Progress';
648
+ document.getElementById('task-1-status').className = 'text-sm text-yellow-400';
649
+
650
+ document.getElementById('task-2-icon').className = 'w-4 h-4 rounded-full bg-gray-500 mr-3';
651
+ document.getElementById('task-2-status').textContent = 'Pending';
652
+ document.getElementById('task-2-status').className = 'text-sm text-gray-400';
653
+
654
+ document.getElementById('task-3-icon').className = 'w-4 h-4 rounded-full bg-gray-500 mr-3';
655
+ document.getElementById('task-3-status').textContent = 'Pending';
656
+ document.getElementById('task-3-status').className = 'text-sm text-gray-400';
657
+
658
+ document.getElementById('task-4-icon').className = 'w-4 h-4 rounded-full bg-gray-500 mr-3';
659
+ document.getElementById('task-4-status').textContent = 'Pending';
660
+ document.getElementById('task-4-status').className = 'text-sm text-gray-400';
661
+
662
+ document.getElementById('task-5-icon').className = 'w-4 h-4 rounded-full bg-gray-500 mr-3';
663
+ document.getElementById('task-5-status').textContent = 'Pending';
664
+ document.getElementById('task-5-status').className = 'text-sm text-gray-400';
665
+ });
666
+ });
667
+ </script>
668
+ <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=docto41/mega-game-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
669
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ https://huggingface.co/spaces/docto41/mega-ai
2
+ je veux un génerateur de site de jeux tres puissant accompagner d'une armées de 200000 IA tres puissant en plein action