Hugging Face's logo

Spaces:
LDrago-R
/
mygamelibrary
Running

App Files Community
LDrago-R commited on
Commit
6eadae2
·
verified ·
1 Parent(s): ef7c646

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +637 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mygamelibrary
3
- emoji: 📉
4
- colorFrom: pink
5
- colorTo: yellow
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: mygamelibrary
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,637 @@
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>Neon Nexus - Cyberpunk Game Library</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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@300;400;700&display=swap');
11
+
12
+ :root {
13
+ --neon-pink: #ff2a6d;
14
+ --neon-blue: #05d9e8;
15
+ --neon-purple: #d300c5;
16
+ --neon-green: #00ff9d;
17
+ --dark-bg: #0d0221;
18
+ --darker-bg: #05010e;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Roboto Mono', monospace;
23
+ background-color: var(--dark-bg);
24
+ color: white;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ h1, h2, h3, .neon-title {
29
+ font-family: 'Orbitron', sans-serif;
30
+ }
31
+
32
+ .neon-text-pink {
33
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
34
+ color: var(--neon-pink);
35
+ }
36
+
37
+ .neon-text-blue {
38
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
39
+ color: var(--neon-blue);
40
+ }
41
+
42
+ .neon-text-purple {
43
+ text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple);
44
+ color: var(--neon-purple);
45
+ }
46
+
47
+ .neon-text-green {
48
+ text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
49
+ color: var(--neon-green);
50
+ }
51
+
52
+ .neon-border-pink {
53
+ border: 2px solid var(--neon-pink);
54
+ box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px var(--neon-pink);
55
+ }
56
+
57
+ .neon-border-blue {
58
+ border: 2px solid var(--neon-blue);
59
+ box-shadow: 0 0 10px var(--neon-blue), inset 0 0 5px var(--neon-blue);
60
+ }
61
+
62
+ .neon-border-purple {
63
+ border: 2px solid var(--neon-purple);
64
+ box-shadow: 0 0 10px var(--neon-purple), inset 0 0 5px var(--neon-purple);
65
+ }
66
+
67
+ .neon-border-green {
68
+ border: 2px solid var(--neon-green);
69
+ box-shadow: 0 0 10px var(--neon-green), inset 0 0 5px var(--neon-green);
70
+ }
71
+
72
+ .game-card {
73
+ transition: all 0.3s ease;
74
+ background-color: rgba(13, 2, 33, 0.7);
75
+ backdrop-filter: blur(5px);
76
+ transform-style: preserve-3d;
77
+ transform: perspective(1000px);
78
+ }
79
+
80
+ .game-card:hover {
81
+ transform: perspective(1000px) translateY(-10px) rotateX(5deg);
82
+ z-index: 10;
83
+ }
84
+
85
+ .game-card::before {
86
+ content: '';
87
+ position: absolute;
88
+ top: -2px;
89
+ left: -2px;
90
+ right: -2px;
91
+ bottom: -2px;
92
+ z-index: -1;
93
+ opacity: 0;
94
+ transition: opacity 0.3s ease;
95
+ }
96
+
97
+ .game-card:hover::before {
98
+ opacity: 1;
99
+ }
100
+
101
+ .game-card.pink:hover::before {
102
+ background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple));
103
+ }
104
+
105
+ .game-card.blue:hover::before {
106
+ background: linear-gradient(45deg, var(--neon-blue), var(--neon-green));
107
+ }
108
+
109
+ .game-card.purple:hover::before {
110
+ background: linear-gradient(45deg, var(--neon-purple), var(--neon-pink));
111
+ }
112
+
113
+ .game-card.green:hover::before {
114
+ background: linear-gradient(45deg, var(--neon-green), var(--neon-blue));
115
+ }
116
+
117
+ .glitch-effect {
118
+ position: relative;
119
+ }
120
+
121
+ .glitch-effect::before, .glitch-effect::after {
122
+ content: attr(data-text);
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ width: 100%;
127
+ height: 100%;
128
+ opacity: 0.8;
129
+ }
130
+
131
+ .glitch-effect::before {
132
+ color: var(--neon-blue);
133
+ animation: glitch 3s infinite linear;
134
+ clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
135
+ }
136
+
137
+ .glitch-effect::after {
138
+ color: var(--neon-pink);
139
+ animation: glitch 2s infinite linear reverse;
140
+ clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
141
+ }
142
+
143
+ @keyframes glitch {
144
+ 0%, 100% { transform: translate(0); }
145
+ 20% { transform: translate(-3px, 3px); }
146
+ 40% { transform: translate(-3px, -3px); }
147
+ 60% { transform: translate(3px, 3px); }
148
+ 80% { transform: translate(3px, -3px); }
149
+ }
150
+
151
+ .scanline {
152
+ position: fixed;
153
+ top: 0;
154
+ left: 0;
155
+ width: 100%;
156
+ height: 100%;
157
+ background: linear-gradient(
158
+ to bottom,
159
+ rgba(255, 255, 255, 0) 0%,
160
+ rgba(255, 255, 255, 0.03) 50%,
161
+ rgba(255, 255, 255, 0) 100%
162
+ );
163
+ background-size: 100% 4px;
164
+ animation: scanline 8s linear infinite;
165
+ pointer-events: none;
166
+ z-index: 9999;
167
+ }
168
+
169
+ @keyframes scanline {
170
+ 0% { background-position: 0 0; }
171
+ 100% { background-position: 0 100%; }
172
+ }
173
+
174
+ .terminal-text {
175
+ border-right: 0.15em solid var(--neon-green);
176
+ animation: blink-caret 0.75s step-end infinite;
177
+ }
178
+
179
+ @keyframes blink-caret {
180
+ from, to { border-color: transparent; }
181
+ 50% { border-color: var(--neon-green); }
182
+ }
183
+
184
+ .pulse {
185
+ animation: pulse 2s infinite;
186
+ }
187
+
188
+ @keyframes pulse {
189
+ 0% { opacity: 0.6; }
190
+ 50% { opacity: 1; }
191
+ 100% { opacity: 0.6; }
192
+ }
193
+ </style>
194
+ </head>
195
+ <body class="min-h-screen">
196
+ <!-- Scanline effect -->
197
+ <div class="scanline"></div>
198
+
199
+ <!-- Header -->
200
+ <header class="py-6 px-4 md:px-12 border-b border-gray-800">
201
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
202
+ <div class="flex items-center mb-4 md:mb-0">
203
+ <i class="fas fa-gamepad text-3xl neon-text-pink mr-3"></i>
204
+ <h1 class="text-3xl md:text-4xl font-bold neon-text-blue glitch-effect" data-text="NEON NEXUS">NEON NEXUS</h1>
205
+ </div>
206
+ <div class="relative w-full md:w-64">
207
+ <input type="text" placeholder="Search games..."
208
+ class="w-full bg-black bg-opacity-50 text-white px-4 py-2 rounded-md border border-gray-700 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
209
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
210
+ </div>
211
+ </div>
212
+ </header>
213
+
214
+ <!-- Main Content -->
215
+ <main class="container mx-auto px-4 py-8">
216
+ <!-- Featured Game -->
217
+ <section class="mb-12">
218
+ <div class="flex justify-between items-center mb-6">
219
+ <h2 class="text-2xl md:text-3xl font-bold neon-text-pink">FEATURED TITLE</h2>
220
+ <div class="flex space-x-2">
221
+ <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="relative overflow-hidden rounded-lg neon-border-blue h-96">
226
+ <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
227
+ <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
228
+ alt="Featured Game" class="w-full h-full object-cover">
229
+ <div class="absolute bottom-0 left-0 z-20 p-6 md:p-8 w-full md:w-2/3">
230
+ <div class="flex items-center mb-2">
231
+ <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded mr-2">NEW RELEASE</span>
232
+ <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">RPG</span>
233
+ </div>
234
+ <h3 class="text-3xl md:text-4xl font-bold mb-2 neon-text-green">Neon Dawn</h3>
235
+ <p class="text-gray-300 mb-4">A cyberpunk RPG set in the dystopian megacity of Neo-Tokyo. Hack, fight and charm your way through corporate intrigue and street gang warfare.</p>
236
+ <div class="flex space-x-3">
237
+ <button class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md neon-text-green font-bold transition">PLAY NOW</button>
238
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-md transition">WATCH TRAILER</button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </section>
243
+
244
+ <!-- Genres Navigation -->
245
+ <section class="mb-8">
246
+ <div class="flex overflow-x-auto pb-2 space-x-2 scrollbar-hide">
247
+ <button class="px-4 py-2 rounded-full neon-border-pink neon-text-pink whitespace-nowrap hover:bg-pink-900 hover:bg-opacity-30 transition">All Games</button>
248
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">RPG</button>
249
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">FPS</button>
250
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Adventure</button>
251
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Strategy</button>
252
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Simulation</button>
253
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Horror</button>
254
+ <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Sports</button>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Recently Added -->
259
+ <section class="mb-12">
260
+ <div class="flex justify-between items-center mb-6">
261
+ <h2 class="text-2xl font-bold neon-text-purple">RECENTLY ADDED</h2>
262
+ <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button>
263
+ </div>
264
+
265
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
266
+ <!-- Game Card 1 -->
267
+ <div class="game-card pink rounded-lg overflow-hidden neon-border-pink relative">
268
+ <div class="relative h-48 overflow-hidden">
269
+ <img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
270
+ alt="Cyber Runner" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
271
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-pink">
272
+ <i class="fas fa-heart mr-1"></i> 4.8
273
+ </div>
274
+ </div>
275
+ <div class="p-4">
276
+ <div class="flex justify-between items-start mb-2">
277
+ <h3 class="text-lg font-bold neon-text-pink">Cyber Runner</h3>
278
+ <span class="px-2 py-1 text-xs bg-pink-900 text-pink-300 rounded">FPS</span>
279
+ </div>
280
+ <p class="text-gray-400 text-sm mb-3">A high-speed parkour shooter set in a neon-drenched future city.</p>
281
+ <div class="flex justify-between items-center">
282
+ <span class="text-xs text-gray-500">Free</span>
283
+ <button class="text-xs px-3 py-1 bg-pink-900 hover:bg-pink-800 rounded transition">PLAY</button>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Game Card 2 -->
289
+ <div class="game-card blue rounded-lg overflow-hidden neon-border-blue relative">
290
+ <div class="relative h-48 overflow-hidden">
291
+ <img src="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
292
+ alt="Neon Protocol" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
293
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue">
294
+ <i class="fas fa-heart mr-1"></i> 4.6
295
+ </div>
296
+ </div>
297
+ <div class="p-4">
298
+ <div class="flex justify-between items-start mb-2">
299
+ <h3 class="text-lg font-bold neon-text-blue">Neon Protocol</h3>
300
+ <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">RPG</span>
301
+ </div>
302
+ <p class="text-gray-400 text-sm mb-3">A tactical cyberpunk RPG with deep hacking mechanics and turn-based combat.</p>
303
+ <div class="flex justify-between items-center">
304
+ <span class="text-xs text-gray-500">$29.99</span>
305
+ <button class="text-xs px-3 py-1 bg-blue-900 hover:bg-blue-800 rounded transition">BUY</button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Game Card 3 -->
311
+ <div class="game-card purple rounded-lg overflow-hidden neon-border-purple relative">
312
+ <div class="relative h-48 overflow-hidden">
313
+ <img src="https://images.unsplash.com/photo-1511512578047-dba367674e13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
314
+ alt="Circuit Break" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
315
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple">
316
+ <i class="fas fa-heart mr-1"></i> 4.9
317
+ </div>
318
+ </div>
319
+ <div class="p-4">
320
+ <div class="flex justify-between items-start mb-2">
321
+ <h3 class="text-lg font-bold neon-text-purple">Circuit Break</h3>
322
+ <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded">Racing</span>
323
+ </div>
324
+ <p class="text-gray-400 text-sm mb-3">Futuristic anti-gravity racing through neon cityscapes at breakneck speeds.</p>
325
+ <div class="flex justify-between items-center">
326
+ <span class="text-xs text-gray-500">$19.99</span>
327
+ <button class="text-xs px-3 py-1 bg-purple-900 hover:bg-purple-800 rounded transition">BUY</button>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Game Card 4 -->
333
+ <div class="game-card green rounded-lg overflow-hidden neon-border-green relative">
334
+ <div class="relative h-48 overflow-hidden">
335
+ <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
336
+ alt="Synthwave Survivor" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
337
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-green">
338
+ <i class="fas fa-heart mr-1"></i> 4.7
339
+ </div>
340
+ </div>
341
+ <div class="p-4">
342
+ <div class="flex justify-between items-start mb-2">
343
+ <h3 class="text-lg font-bold neon-text-green">Synthwave Survivor</h3>
344
+ <span class="px-2 py-1 text-xs bg-green-900 text-green-300 rounded">Roguelike</span>
345
+ </div>
346
+ <p class="text-gray-400 text-sm mb-3">A neon-drenched roguelike where you battle through waves of enemies with synthwave beats.</p>
347
+ <div class="flex justify-between items-center">
348
+ <span class="text-xs text-gray-500">$14.99</span>
349
+ <button class="text-xs px-3 py-1 bg-green-900 hover:bg-green-800 rounded transition">BUY</button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
+ <!-- Popular Games -->
357
+ <section class="mb-12">
358
+ <div class="flex justify-between items-center mb-6">
359
+ <h2 class="text-2xl font-bold neon-text-blue">POPULAR GAMES</h2>
360
+ <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button>
361
+ </div>
362
+
363
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
364
+ <!-- Game Card 5 -->
365
+ <div class="game-card pink rounded-lg overflow-hidden neon-border-pink relative">
366
+ <div class="relative h-48 overflow-hidden">
367
+ <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
368
+ alt="Neon Dawn" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
369
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-pink">
370
+ <i class="fas fa-heart mr-1"></i> 4.9
371
+ </div>
372
+ </div>
373
+ <div class="p-4">
374
+ <div class="flex justify-between items-start mb-2">
375
+ <h3 class="text-lg font-bold neon-text-pink">Neon Dawn</h3>
376
+ <span class="px-2 py-1 text-xs bg-pink-900 text-pink-300 rounded">RPG</span>
377
+ </div>
378
+ <p class="text-gray-400 text-sm mb-3">Explore the sprawling megacity of Neo-Tokyo in this open-world cyberpunk adventure.</p>
379
+ <div class="flex justify-between items-center">
380
+ <span class="text-xs text-gray-500">$39.99</span>
381
+ <button class="text-xs px-3 py-1 bg-pink-900 hover:bg-pink-800 rounded transition">BUY</button>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Game Card 6 -->
387
+ <div class="game-card blue rounded-lg overflow-hidden neon-border-blue relative">
388
+ <div class="relative h-48 overflow-hidden">
389
+ <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
390
+ alt="Hacknet Legends" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
391
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue">
392
+ <i class="fas fa-heart mr-1"></i> 4.5
393
+ </div>
394
+ </div>
395
+ <div class="p-4">
396
+ <div class="flex justify-between items-start mb-2">
397
+ <h3 class="text-lg font-bold neon-text-blue">Hacknet Legends</h3>
398
+ <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">Simulation</span>
399
+ </div>
400
+ <p class="text-gray-400 text-sm mb-3">A realistic hacking simulator with a deep storyline and cyberpunk aesthetics.</p>
401
+ <div class="flex justify-between items-center">
402
+ <span class="text-xs text-gray-500">$24.99</span>
403
+ <button class="text-xs px-3 py-1 bg-blue-900 hover:bg-blue-800 rounded transition">BUY</button>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Game Card 7 -->
409
+ <div class="game-card purple rounded-lg overflow-hidden neon-border-purple relative">
410
+ <div class="relative h-48 overflow-hidden">
411
+ <img src="https://images.unsplash.com/photo-1544200175-ca6e80a59346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
412
+ alt="Ghostwire" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
413
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple">
414
+ <i class="fas fa-heart mr-1"></i> 4.3
415
+ </div>
416
+ </div>
417
+ <div class="p-4">
418
+ <div class="flex justify-between items-start mb-2">
419
+ <h3 class="text-lg font-bold neon-text-purple">Ghostwire</h3>
420
+ <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded">Horror</span>
421
+ </div>
422
+ <p class="text-gray-400 text-sm mb-3">A supernatural horror game set in a cyberpunk world where ghosts invade the digital realm.</p>
423
+ <div class="flex justify-between items-center">
424
+ <span class="text-xs text-gray-500">$29.99</span>
425
+ <button class="text-xs px-3 py-1 bg-purple-900 hover:bg-purple-800 rounded transition">BUY</button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Game Card 8 -->
431
+ <div class="game-card green rounded-lg overflow-hidden neon-border-green relative">
432
+ <div class="relative h-48 overflow-hidden">
433
+ <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80"
434
+ alt="Cyber Arena" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
435
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-green">
436
+ <i class="fas fa-heart mr-1"></i> 4.8
437
+ </div>
438
+ </div>
439
+ <div class="p-4">
440
+ <div class="flex justify-between items-start mb-2">
441
+ <h3 class="text-lg font-bold neon-text-green">Cyber Arena</h3>
442
+ <span class="px-2 py-1 text-xs bg-green-900 text-green-300 rounded">Fighting</span>
443
+ </div>
444
+ <p class="text-gray-400 text-sm mb-3">A competitive fighting game with cybernetically enhanced warriors in neon-lit arenas.</p>
445
+ <div class="flex justify-between items-center">
446
+ <span class="text-xs text-gray-500">$19.99</span>
447
+ <button class="text-xs px-3 py-1 bg-green-900 hover:bg-green-800 rounded transition">BUY</button>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- Coming Soon -->
455
+ <section>
456
+ <div class="flex justify-between items-center mb-6">
457
+ <h2 class="text-2xl font-bold neon-text-green">COMING SOON</h2>
458
+ <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button>
459
+ </div>
460
+
461
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
462
+ <!-- Game Card 9 -->
463
+ <div class="game-card pink rounded-lg overflow-hidden neon-border-pink relative">
464
+ <div class="relative h-48 overflow-hidden">
465
+ <img src="https://images.unsplash.com/photo-1633613286848-e6f43bbafb8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
466
+ alt="Neon Noir" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
467
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-pink">
468
+ <i class="fas fa-clock mr-1"></i> Q1 2024
469
+ </div>
470
+ </div>
471
+ <div class="p-4">
472
+ <div class="flex justify-between items-start mb-2">
473
+ <h3 class="text-lg font-bold neon-text-pink">Neon Noir</h3>
474
+ <span class="px-2 py-1 text-xs bg-pink-900 text-pink-300 rounded">Adventure</span>
475
+ </div>
476
+ <p class="text-gray-400 text-sm mb-3">A cyberpunk detective story with branching narratives and moral choices.</p>
477
+ <div class="flex justify-between items-center">
478
+ <span class="text-xs text-gray-500">Coming Soon</span>
479
+ <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Game Card 10 -->
485
+ <div class="game-card blue rounded-lg overflow-hidden neon-border-blue relative">
486
+ <div class="relative h-48 overflow-hidden">
487
+ <img src="https://images.unsplash.com/photo-1638549909131-aad8a0598ff9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
488
+ alt="Megacity Zero" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
489
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue">
490
+ <i class="fas fa-clock mr-1"></i> Q2 2024
491
+ </div>
492
+ </div>
493
+ <div class="p-4">
494
+ <div class="flex justify-between items-start mb-2">
495
+ <h3 class="text-lg font-bold neon-text-blue">Megacity Zero</h3>
496
+ <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">Strategy</span>
497
+ </div>
498
+ <p class="text-gray-400 text-sm mb-3">Build and manage a dystopian megacity while dealing with corporate espionage.</p>
499
+ <div class="flex justify-between items-center">
500
+ <span class="text-xs text-gray-500">Coming Soon</span>
501
+ <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Game Card 11 -->
507
+ <div class="game-card purple rounded-lg overflow-hidden neon-border-purple relative">
508
+ <div class="relative h-48 overflow-hidden">
509
+ <img src="https://images.unsplash.com/photo-1633613286991-611fe299c4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
510
+ alt="Synth Riders" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
511
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple">
512
+ <i class="fas fa-clock mr-1"></i> Q3 2024
513
+ </div>
514
+ </div>
515
+ <div class="p-4">
516
+ <div class="flex justify-between items-start mb-2">
517
+ <h3 class="text-lg font-bold neon-text-purple">Synth Riders</h3>
518
+ <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded">Rhythm</span>
519
+ </div>
520
+ <p class="text-gray-400 text-sm mb-3">A VR rhythm game set in a neon cyberpunk world with synthwave soundtrack.</p>
521
+ <div class="flex justify-between items-center">
522
+ <span class="text-xs text-gray-500">Coming Soon</span>
523
+ <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Game Card 12 -->
529
+ <div class="game-card green rounded-lg overflow-hidden neon-border-green relative">
530
+ <div class="relative h-48 overflow-hidden">
531
+ <img src="https://images.unsplash.com/photo-1639762681057-1e7aa943168e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
532
+ alt="Cyber Samurai" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
533
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-green">
534
+ <i class="fas fa-clock mr-1"></i> Q4 2024
535
+ </div>
536
+ </div>
537
+ <div class="p-4">
538
+ <div class="flex justify-between items-start mb-2">
539
+ <h3 class="text-lg font-bold neon-text-green">Cyber Samurai</h3>
540
+ <span class="px-2 py-1 text-xs bg-green-900 text-green-300 rounded">Action</span>
541
+ </div>
542
+ <p class="text-gray-400 text-sm mb-3">A fast-paced action game blending cyberpunk with feudal Japan aesthetics.</p>
543
+ <div class="flex justify-between items-center">
544
+ <span class="text-xs text-gray-500">Coming Soon</span>
545
+ <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </section>
551
+ </main>
552
+
553
+ <!-- Footer -->
554
+ <footer class="bg-black bg-opacity-50 py-8 px-4 border-t border-gray-800 mt-12">
555
+ <div class="container mx-auto">
556
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
557
+ <div>
558
+ <h3 class="text-lg font-bold neon-text-pink mb-4">NEON NEXUS</h3>
559
+ <p class="text-gray-400 text-sm">Your gateway to the best cyberpunk gaming experiences in the neon-lit future.</p>
560
+ </div>
561
+ <div>
562
+ <h4 class="text-md font-bold neon-text-blue mb-4">QUICK LINKS</h4>
563
+ <ul class="space-y-2">
564
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Home</a></li>
565
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Games</a></li>
566
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Genres</a></li>
567
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Coming Soon</a></li>
568
+ </ul>
569
+ </div>
570
+ <div>
571
+ <h4 class="text-md font-bold neon-text-purple mb-4">SUPPORT</h4>
572
+ <ul class="space-y-2">
573
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">FAQ</a></li>
574
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact Us</a></li>
575
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a></li>
577
+ </ul>
578
+ </div>
579
+ <div>
580
+ <h4 class="text-md font-bold neon-text-green mb-4">CONNECT</h4>
581
+ <div class="flex space-x-4">
582
+ <a href="#" class="text-gray-400 hover:text-pink-500 transition"><i class="fab fa-twitter"></i></a>
583
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-discord"></i></a>
584
+ <a href="#" class="text-gray-400 hover:text-purple-500 transition"><i class="fab fa-twitch"></i></a>
585
+ <a href="#" class="text-gray-400 hover:text-red-500 transition"><i class="fab fa-youtube"></i></a>
586
+ </div>
587
+ <div class="mt-4">
588
+ <p class="text-gray-500 text-xs terminal-text">SYSTEM STATUS: ONLINE</p>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ <div class="border-t border-gray-800 mt-8 pt-6 text-center">
593
+ <p class="text-gray-500 text-sm pulse">&copy; 2023 NEON NEXUS. ALL RIGHTS RESERVED.</p>
594
+ </div>
595
+ </div>
596
+ </footer>
597
+
598
+ <script>
599
+ // Simple script to add hover effects to game cards
600
+ document.addEventListener('DOMContentLoaded', function() {
601
+ const gameCards = document.querySelectorAll('.game-card');
602
+
603
+ gameCards.forEach(card => {
604
+ card.addEventListener('mouseenter', function() {
605
+ const colorClass = Array.from(this.classList).find(cls =>
606
+ cls === 'pink' || cls === 'blue' || cls === 'purple' || cls === 'green'
607
+ );
608
+
609
+ if (colorClass) {
610
+ this.style.boxShadow = `0 0 20px var(--neon-${colorClass}), inset 0 0 10px var(--neon-${colorClass})`;
611
+ }
612
+ });
613
+
614
+ card.addEventListener('mouseleave', function() {
615
+ this.style.boxShadow = '';
616
+ });
617
+ });
618
+
619
+ // Terminal text effect
620
+ const terminalText = document.querySelector('.terminal-text');
621
+ if (terminalText) {
622
+ const text = terminalText.textContent;
623
+ terminalText.textContent = '';
624
+ let i = 0;
625
+ const typing = setInterval(() => {
626
+ if (i < text.length) {
627
+ terminalText.textContent += text.charAt(i);
628
+ i++;
629
+ } else {
630
+ clearInterval(typing);
631
+ }
632
+ }, 100);
633
+ }
634
+ });
635
+ </script>
636
+ <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=LDrago-R/mygamelibrary" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
637
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create me a game library with interactive cards for each game and with different genres and the theme should be cyberpunk style