donoboy-psc-rw 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Side Files (DNT)/GTAGM.js +1206 -0
- package/importantfiles(Editable)/Thumbnails/0.png +0 -0
- package/importantfiles(Editable)/Thumbnails/1.png +0 -0
- package/importantfiles(Editable)/Thumbnails/Placeholder.png +0 -0
- package/importantfiles(Editable)/gamelist.json +5006 -0
- package/importantfiles(Editable)/games/0.html +118 -0
- package/importantfiles(Editable)/games/1.html +148 -0
- package/importantfiles(Editable)/games/1Assets/app/apple-touch-icon.png +0 -0
- package/importantfiles(Editable)/games/1Assets/app/favicon-16.png +0 -0
- package/importantfiles(Editable)/games/1Assets/app/favicon-32.png +0 -0
- package/importantfiles(Editable)/games/1Assets/app/favicon.ico +0 -0
- package/importantfiles(Editable)/games/1Assets/app-ad408b54.css +1 -0
- package/importantfiles(Editable)/games/1Assets/atlas_boot.json +1 -0
- package/importantfiles(Editable)/games/1Assets/atlas_boot.png +0 -0
- package/importantfiles(Editable)/games/1Assets/atlas_pages.json +1 -0
- package/importantfiles(Editable)/games/1Assets/data.json +1 -0
- package/importantfiles(Editable)/games/1Assets/fnt_main.png +0 -0
- package/importantfiles(Editable)/games/1Assets/fnt_mainbig.png +0 -0
- package/importantfiles(Editable)/games/1Assets/js/boot0-0796dd8d.js +1 -0
- package/importantfiles(Editable)/games/1Assets/js/boot2_08735c02.js +1 -0
- package/importantfiles(Editable)/games/1Assets/manifest.webmanifest +22 -0
- package/index.html +15 -0
- package/package.json +29 -0
- package/subdex.html +1181 -0
package/subdex.html
ADDED
|
@@ -0,0 +1,1181 @@
|
|
|
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>True Freedom</title>
|
|
7
|
+
<!-- Google tag (gtag.js) -->
|
|
8
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X5ZF2WZSZW"></script>
|
|
9
|
+
<script>
|
|
10
|
+
window.dataLayer = window.dataLayer || [];
|
|
11
|
+
function gtag(){dataLayer.push(arguments);}
|
|
12
|
+
gtag('js', new Date());
|
|
13
|
+
|
|
14
|
+
gtag('config', 'G-X5ZF2WZSZW');
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<!-- Adsterra Ad Code -->
|
|
18
|
+
<script type="text/javascript" src="https://www.revenuecpmgate.com/bkeuniy3?key=151caf0808922d3167985da5120e8aac"></script>
|
|
19
|
+
|
|
20
|
+
<!-- Additional Ad Script -->
|
|
21
|
+
<script type='text/javascript' src='//eyebrowcohabit.com/57/51/c0/5751c0582842e4d0246d9bfc787d8213.js'></script>
|
|
22
|
+
|
|
23
|
+
<script src="https://unpkg.com/lucide@latest"></script>
|
|
24
|
+
<style>
|
|
25
|
+
* {
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
33
|
+
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
|
34
|
+
min-height: 100vh;
|
|
35
|
+
color: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.main-container {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
min-height: 100vh;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.header {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: space-between;
|
|
48
|
+
padding: 20px 40px;
|
|
49
|
+
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.logo-container {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 10px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.logo-text {
|
|
59
|
+
font-size: 24px;
|
|
60
|
+
font-weight: 700;
|
|
61
|
+
color: #fff;
|
|
62
|
+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.back-home {
|
|
66
|
+
background: #fff;
|
|
67
|
+
border: 2px solid #fff;
|
|
68
|
+
color: #1a1a1a;
|
|
69
|
+
padding: 10px 20px;
|
|
70
|
+
border-radius: 25px;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
font-weight: 600;
|
|
74
|
+
transition: all 0.3s;
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 8px;
|
|
78
|
+
text-decoration: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.back-home:hover {
|
|
82
|
+
background: #e0e0e0;
|
|
83
|
+
border-color: #e0e0e0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.container {
|
|
87
|
+
flex: 1;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
padding: 30px 40px;
|
|
91
|
+
max-width: 1400px;
|
|
92
|
+
margin: 0 auto;
|
|
93
|
+
width: 100%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.view-all-top {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: center;
|
|
100
|
+
margin-bottom: 30px;
|
|
101
|
+
gap: 15px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.search-container {
|
|
105
|
+
width: 100%;
|
|
106
|
+
max-width: 600px;
|
|
107
|
+
position: relative;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.search-input {
|
|
111
|
+
width: 100%;
|
|
112
|
+
padding: 12px 45px 12px 20px;
|
|
113
|
+
border-radius: 25px;
|
|
114
|
+
border: 2px solid rgba(255,255,255,0.3);
|
|
115
|
+
background: rgba(255,255,255,0.1);
|
|
116
|
+
color: #fff;
|
|
117
|
+
font-size: 16px;
|
|
118
|
+
transition: all 0.3s;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.search-input::placeholder {
|
|
122
|
+
color: rgba(255,255,255,0.5);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.search-input:focus {
|
|
126
|
+
outline: none;
|
|
127
|
+
border-color: rgba(255,255,255,0.5);
|
|
128
|
+
background: rgba(255,255,255,0.15);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.search-icon {
|
|
132
|
+
position: absolute;
|
|
133
|
+
right: 15px;
|
|
134
|
+
top: 50%;
|
|
135
|
+
transform: translateY(-50%);
|
|
136
|
+
opacity: 0.5;
|
|
137
|
+
pointer-events: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.search-results {
|
|
141
|
+
position: absolute;
|
|
142
|
+
top: 100%;
|
|
143
|
+
left: 0;
|
|
144
|
+
right: 0;
|
|
145
|
+
margin-top: 10px;
|
|
146
|
+
background: rgba(20, 20, 20, 0.98);
|
|
147
|
+
border: 1px solid rgba(255,255,255,0.2);
|
|
148
|
+
border-radius: 15px;
|
|
149
|
+
max-height: 500px;
|
|
150
|
+
overflow-y: auto;
|
|
151
|
+
z-index: 1000;
|
|
152
|
+
display: none;
|
|
153
|
+
backdrop-filter: blur(10px);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.search-results.active {
|
|
157
|
+
display: block;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.search-result-item {
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
gap: 15px;
|
|
164
|
+
padding: 12px 15px;
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
transition: all 0.3s;
|
|
167
|
+
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.search-result-item:last-child {
|
|
171
|
+
border-bottom: none;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.search-result-item:hover {
|
|
175
|
+
background: rgba(255,255,255,0.1);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.search-result-image {
|
|
179
|
+
width: 80px;
|
|
180
|
+
height: 60px;
|
|
181
|
+
object-fit: cover;
|
|
182
|
+
border-radius: 8px;
|
|
183
|
+
flex-shrink: 0;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.search-result-info {
|
|
187
|
+
flex: 1;
|
|
188
|
+
min-width: 0;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.search-result-name {
|
|
192
|
+
font-size: 16px;
|
|
193
|
+
font-weight: 600;
|
|
194
|
+
color: #fff;
|
|
195
|
+
margin-bottom: 4px;
|
|
196
|
+
white-space: nowrap;
|
|
197
|
+
overflow: hidden;
|
|
198
|
+
text-overflow: ellipsis;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.search-result-category {
|
|
202
|
+
font-size: 13px;
|
|
203
|
+
color: rgba(255,255,255,0.6);
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: center;
|
|
206
|
+
gap: 5px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.search-results::-webkit-scrollbar {
|
|
210
|
+
width: 8px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.search-results::-webkit-scrollbar-track {
|
|
214
|
+
background: rgba(255,255,255,0.05);
|
|
215
|
+
border-radius: 10px;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.search-results::-webkit-scrollbar-thumb {
|
|
219
|
+
background: rgba(255,255,255,0.2);
|
|
220
|
+
border-radius: 10px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.search-results::-webkit-scrollbar-thumb:hover {
|
|
224
|
+
background: rgba(255,255,255,0.3);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.search-no-results {
|
|
228
|
+
padding: 40px 20px;
|
|
229
|
+
text-align: center;
|
|
230
|
+
color: rgba(255,255,255,0.5);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.search-results-header {
|
|
234
|
+
padding: 10px 15px;
|
|
235
|
+
background: rgba(255,255,255,0.05);
|
|
236
|
+
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
237
|
+
font-size: 13px;
|
|
238
|
+
color: rgba(255,255,255,0.6);
|
|
239
|
+
border-radius: 15px 15px 0 0;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.view-all-btn, .random-game-btn {
|
|
243
|
+
background: #fff;
|
|
244
|
+
border: 2px solid #fff;
|
|
245
|
+
color: #1a1a1a;
|
|
246
|
+
padding: 12px 24px;
|
|
247
|
+
border-radius: 25px;
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
font-size: 16px;
|
|
250
|
+
font-weight: 600;
|
|
251
|
+
transition: all 0.3s;
|
|
252
|
+
display: inline-flex;
|
|
253
|
+
align-items: center;
|
|
254
|
+
gap: 8px;
|
|
255
|
+
white-space: nowrap;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.view-all-btn:hover, .random-game-btn:hover {
|
|
259
|
+
background: #e0e0e0;
|
|
260
|
+
border-color: #e0e0e0;
|
|
261
|
+
transform: translateY(-2px);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.random-game-btn {
|
|
265
|
+
position: relative;
|
|
266
|
+
overflow: hidden;
|
|
267
|
+
min-width: 200px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.random-game-preview {
|
|
271
|
+
position: absolute;
|
|
272
|
+
top: 0;
|
|
273
|
+
left: 0;
|
|
274
|
+
width: 100%;
|
|
275
|
+
height: 100%;
|
|
276
|
+
object-fit: cover;
|
|
277
|
+
opacity: 0.15;
|
|
278
|
+
transition: opacity 0.5s;
|
|
279
|
+
z-index: 0;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.random-game-btn:hover .random-game-preview {
|
|
283
|
+
opacity: 0.25;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.random-game-content {
|
|
287
|
+
position: relative;
|
|
288
|
+
z-index: 1;
|
|
289
|
+
display: flex;
|
|
290
|
+
align-items: center;
|
|
291
|
+
gap: 8px;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.button-group {
|
|
295
|
+
display: flex;
|
|
296
|
+
gap: 15px;
|
|
297
|
+
align-items: center;
|
|
298
|
+
flex-wrap: wrap;
|
|
299
|
+
justify-content: center;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.category-section {
|
|
303
|
+
margin-bottom: 50px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.category-header {
|
|
307
|
+
display: flex;
|
|
308
|
+
justify-content: space-between;
|
|
309
|
+
align-items: center;
|
|
310
|
+
margin-bottom: 20px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.category-title {
|
|
314
|
+
font-size: 24px;
|
|
315
|
+
font-weight: 700;
|
|
316
|
+
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
|
317
|
+
display: flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
gap: 12px;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.category-view-all {
|
|
323
|
+
background: rgba(255,255,255,0.1);
|
|
324
|
+
border: 1px solid rgba(255,255,255,0.3);
|
|
325
|
+
color: #fff;
|
|
326
|
+
padding: 8px 16px;
|
|
327
|
+
border-radius: 20px;
|
|
328
|
+
cursor: pointer;
|
|
329
|
+
font-size: 14px;
|
|
330
|
+
transition: all 0.3s;
|
|
331
|
+
display: flex;
|
|
332
|
+
align-items: center;
|
|
333
|
+
gap: 6px;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.category-view-all:hover {
|
|
337
|
+
background: rgba(255,255,255,0.2);
|
|
338
|
+
border-color: rgba(255,255,255,0.5);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.carousel {
|
|
342
|
+
display: flex;
|
|
343
|
+
gap: 20px;
|
|
344
|
+
overflow-x: auto;
|
|
345
|
+
padding-bottom: 15px;
|
|
346
|
+
scroll-behavior: smooth;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.carousel::-webkit-scrollbar {
|
|
350
|
+
height: 8px;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.carousel::-webkit-scrollbar-track {
|
|
354
|
+
background: rgba(255,255,255,0.1);
|
|
355
|
+
border-radius: 10px;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.carousel::-webkit-scrollbar-thumb {
|
|
359
|
+
background: rgba(255,255,255,0.3);
|
|
360
|
+
border-radius: 10px;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.carousel::-webkit-scrollbar-thumb:hover {
|
|
364
|
+
background: rgba(255,255,255,0.5);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.game-card {
|
|
368
|
+
min-width: 280px;
|
|
369
|
+
height: 200px;
|
|
370
|
+
background: rgba(255,255,255,0.08);
|
|
371
|
+
backdrop-filter: blur(10px);
|
|
372
|
+
border-radius: 15px;
|
|
373
|
+
overflow: hidden;
|
|
374
|
+
transition: all 0.3s;
|
|
375
|
+
border: 1px solid rgba(255,255,255,0.15);
|
|
376
|
+
cursor: pointer;
|
|
377
|
+
position: relative;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.game-card:hover {
|
|
381
|
+
transform: translateY(-5px);
|
|
382
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
383
|
+
background: rgba(255,255,255,0.12);
|
|
384
|
+
border-color: rgba(255,255,255,0.3);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.game-image {
|
|
388
|
+
width: 100%;
|
|
389
|
+
height: 100%;
|
|
390
|
+
object-fit: cover;
|
|
391
|
+
background: rgba(0,0,0,0.2);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.game-overlay {
|
|
395
|
+
position: absolute;
|
|
396
|
+
top: 0;
|
|
397
|
+
left: 0;
|
|
398
|
+
right: 0;
|
|
399
|
+
bottom: 0;
|
|
400
|
+
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
|
|
401
|
+
display: flex;
|
|
402
|
+
flex-direction: column;
|
|
403
|
+
justify-content: flex-end;
|
|
404
|
+
padding: 20px;
|
|
405
|
+
opacity: 0;
|
|
406
|
+
transition: opacity 0.3s;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.game-card:hover .game-overlay {
|
|
410
|
+
opacity: 1;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.game-title {
|
|
414
|
+
font-size: 20px;
|
|
415
|
+
font-weight: 700;
|
|
416
|
+
margin-bottom: 8px;
|
|
417
|
+
display: flex;
|
|
418
|
+
justify-content: space-between;
|
|
419
|
+
align-items: center;
|
|
420
|
+
color: #fff;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.open-icon {
|
|
424
|
+
opacity: 0.9;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.game-description {
|
|
428
|
+
font-size: 14px;
|
|
429
|
+
color: rgba(255,255,255,0.9);
|
|
430
|
+
margin-bottom: 8px;
|
|
431
|
+
line-height: 1.4;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.game-creator {
|
|
435
|
+
font-size: 12px;
|
|
436
|
+
color: rgba(255,255,255,0.7);
|
|
437
|
+
display: flex;
|
|
438
|
+
align-items: center;
|
|
439
|
+
gap: 5px;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.grid-view {
|
|
443
|
+
display: grid;
|
|
444
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
445
|
+
gap: 20px;
|
|
446
|
+
margin-top: 30px;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.grid-view .game-card {
|
|
450
|
+
min-width: auto;
|
|
451
|
+
height: 200px;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.view-mode {
|
|
455
|
+
display: none;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.view-mode.active {
|
|
459
|
+
display: block;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.back-btn {
|
|
463
|
+
background: #fff;
|
|
464
|
+
border: 2px solid #fff;
|
|
465
|
+
color: #1a1a1a;
|
|
466
|
+
padding: 12px 24px;
|
|
467
|
+
border-radius: 25px;
|
|
468
|
+
cursor: pointer;
|
|
469
|
+
font-size: 16px;
|
|
470
|
+
font-weight: 600;
|
|
471
|
+
transition: all 0.3s;
|
|
472
|
+
display: inline-flex;
|
|
473
|
+
align-items: center;
|
|
474
|
+
gap: 8px;
|
|
475
|
+
margin-bottom: 30px;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.back-btn:hover {
|
|
479
|
+
background: #e0e0e0;
|
|
480
|
+
border-color: #e0e0e0;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
/* Game Player Styles */
|
|
484
|
+
.game-info-bar {
|
|
485
|
+
background: rgba(255,255,255,0.08);
|
|
486
|
+
border: 1px solid rgba(255,255,255,0.15);
|
|
487
|
+
border-radius: 15px;
|
|
488
|
+
padding: 20px;
|
|
489
|
+
margin-bottom: 20px;
|
|
490
|
+
display: flex;
|
|
491
|
+
justify-content: space-between;
|
|
492
|
+
align-items: center;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.game-details {
|
|
496
|
+
flex: 1;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.game-player-title {
|
|
500
|
+
font-size: 28px;
|
|
501
|
+
font-weight: 700;
|
|
502
|
+
margin-bottom: 10px;
|
|
503
|
+
display: flex;
|
|
504
|
+
align-items: center;
|
|
505
|
+
gap: 12px;
|
|
506
|
+
color: #fff;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.game-meta {
|
|
510
|
+
display: flex;
|
|
511
|
+
gap: 20px;
|
|
512
|
+
align-items: center;
|
|
513
|
+
color: rgba(255,255,255,0.7);
|
|
514
|
+
font-size: 14px;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.meta-item {
|
|
518
|
+
display: flex;
|
|
519
|
+
align-items: center;
|
|
520
|
+
gap: 6px;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.action-buttons {
|
|
524
|
+
display: flex;
|
|
525
|
+
gap: 12px;
|
|
526
|
+
align-items: center;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.fullscreen-btn, .newtab-btn {
|
|
530
|
+
background: #fff;
|
|
531
|
+
border: 2px solid #fff;
|
|
532
|
+
color: #1a1a1a;
|
|
533
|
+
padding: 12px 24px;
|
|
534
|
+
border-radius: 25px;
|
|
535
|
+
cursor: pointer;
|
|
536
|
+
font-size: 14px;
|
|
537
|
+
font-weight: 600;
|
|
538
|
+
transition: all 0.3s;
|
|
539
|
+
display: inline-flex;
|
|
540
|
+
align-items: center;
|
|
541
|
+
gap: 8px;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.fullscreen-btn:hover, .newtab-btn:hover {
|
|
545
|
+
background: #e0e0e0;
|
|
546
|
+
border-color: #e0e0e0;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.game-frame-container {
|
|
550
|
+
flex: 1;
|
|
551
|
+
background: rgba(0,0,0,0.3);
|
|
552
|
+
border-radius: 15px;
|
|
553
|
+
overflow: hidden;
|
|
554
|
+
border: 1px solid rgba(255,255,255,0.15);
|
|
555
|
+
position: relative;
|
|
556
|
+
min-height: 500px;
|
|
557
|
+
height: calc(100vh - 200px);
|
|
558
|
+
display: flex;
|
|
559
|
+
align-items: center;
|
|
560
|
+
justify-content: center;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.game-frame {
|
|
564
|
+
border: none;
|
|
565
|
+
background: #000;
|
|
566
|
+
border-radius: 15px;
|
|
567
|
+
flex-grow: 1;
|
|
568
|
+
width: 90%;
|
|
569
|
+
height: 90%;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.loading {
|
|
573
|
+
position: absolute;
|
|
574
|
+
top: 50%;
|
|
575
|
+
left: 50%;
|
|
576
|
+
transform: translate(-50%, -50%);
|
|
577
|
+
text-align: center;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.spinner {
|
|
581
|
+
width: 50px;
|
|
582
|
+
height: 50px;
|
|
583
|
+
border: 4px solid rgba(255,255,255,0.3);
|
|
584
|
+
border-top-color: #fff;
|
|
585
|
+
border-radius: 50%;
|
|
586
|
+
animation: spin 1s linear infinite;
|
|
587
|
+
margin: 0 auto 15px;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
@keyframes spin {
|
|
591
|
+
to { transform: rotate(360deg); }
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.error-message {
|
|
595
|
+
text-align: center;
|
|
596
|
+
padding: 40px;
|
|
597
|
+
color: rgba(255,255,255,0.7);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
@media (max-width: 768px) {
|
|
601
|
+
.header {
|
|
602
|
+
padding: 15px 20px;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.container {
|
|
606
|
+
padding: 15px;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.category-title {
|
|
610
|
+
font-size: 20px;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.game-card {
|
|
614
|
+
min-width: 240px;
|
|
615
|
+
height: 180px;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.grid-view {
|
|
619
|
+
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.grid-view .game-card {
|
|
623
|
+
height: 180px;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.search-container {
|
|
627
|
+
max-width: 100%;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.button-group {
|
|
631
|
+
flex-direction: column;
|
|
632
|
+
width: 100%;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.random-game-btn, .view-all-btn {
|
|
636
|
+
width: 100%;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.game-info-bar {
|
|
640
|
+
flex-direction: column;
|
|
641
|
+
gap: 15px;
|
|
642
|
+
align-items: flex-start;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.game-player-title {
|
|
646
|
+
font-size: 20px;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.action-buttons {
|
|
650
|
+
width: 100%;
|
|
651
|
+
flex-direction: column;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.fullscreen-btn, .newtab-btn {
|
|
655
|
+
width: 100%;
|
|
656
|
+
justify-content: center;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.game-frame-container {
|
|
660
|
+
min-height: 300px;
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
</style>
|
|
664
|
+
</head>
|
|
665
|
+
<body>
|
|
666
|
+
<div class="main-container">
|
|
667
|
+
<div class="header">
|
|
668
|
+
<div class="logo-container">
|
|
669
|
+
<i data-lucide="gamepad-2" width="28" height="28"></i>
|
|
670
|
+
<span class="logo-text">BigDom</span>
|
|
671
|
+
</div>
|
|
672
|
+
<a href="javascript:void(0);" class="back-home" id="backHomeBtn" onclick="showGamesView()" style="display: none;">
|
|
673
|
+
<i data-lucide="arrow-left" width="18" height="18"></i>
|
|
674
|
+
<span>Back to Games</span>
|
|
675
|
+
</a>
|
|
676
|
+
</div>
|
|
677
|
+
|
|
678
|
+
<div class="container">
|
|
679
|
+
<!-- Games View -->
|
|
680
|
+
<div id="gamesView" class="view-mode active">
|
|
681
|
+
<div class="view-all-top">
|
|
682
|
+
<div class="search-container">
|
|
683
|
+
<input type="text" class="search-input" id="searchInput" placeholder="Search games..." oninput="handleSearch(this.value)" onfocus="handleSearch(this.value)">
|
|
684
|
+
<i data-lucide="search" class="search-icon" width="20" height="20"></i>
|
|
685
|
+
<div class="search-results" id="searchResults"></div>
|
|
686
|
+
</div>
|
|
687
|
+
<div class="button-group">
|
|
688
|
+
<button class="random-game-btn" id="randomGameBtn" onclick="openRandomGame()">
|
|
689
|
+
<img id="randomGamePreview" class="random-game-preview" src="" alt="">
|
|
690
|
+
<div class="random-game-content">
|
|
691
|
+
<i data-lucide="shuffle" width="20" height="20"></i>
|
|
692
|
+
<span>Random Game</span>
|
|
693
|
+
</div>
|
|
694
|
+
</button>
|
|
695
|
+
<button class="view-all-btn" onclick="showAllGamesGrid()">
|
|
696
|
+
<span>View All Games</span>
|
|
697
|
+
<i data-lucide="grid-3x3" width="20" height="20"></i>
|
|
698
|
+
</button>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
|
|
702
|
+
<div id="categories"></div>
|
|
703
|
+
</div>
|
|
704
|
+
|
|
705
|
+
<!-- Grid View -->
|
|
706
|
+
<div id="gridView" class="view-mode">
|
|
707
|
+
<button class="back-btn" onclick="showGamesView()">
|
|
708
|
+
<i data-lucide="arrow-left" width="20" height="20"></i>
|
|
709
|
+
<span>Back to Categories</span>
|
|
710
|
+
</button>
|
|
711
|
+
<div id="allGamesGrid" class="grid-view"></div>
|
|
712
|
+
</div>
|
|
713
|
+
|
|
714
|
+
<!-- Game Player View -->
|
|
715
|
+
<div id="gamePlayerView" class="view-mode">
|
|
716
|
+
<div class="game-info-bar" id="gameInfoBar">
|
|
717
|
+
<div class="game-details">
|
|
718
|
+
<div class="game-player-title" id="gameTitle">
|
|
719
|
+
<i data-lucide="loader" width="28" height="28"></i>
|
|
720
|
+
<span>Loading...</span>
|
|
721
|
+
</div>
|
|
722
|
+
<div class="game-meta" id="gameMeta">
|
|
723
|
+
<div class="meta-item">
|
|
724
|
+
<i data-lucide="info" width="16" height="16"></i>
|
|
725
|
+
<span id="gameDescription">Loading game information...</span>
|
|
726
|
+
</div>
|
|
727
|
+
</div>
|
|
728
|
+
</div>
|
|
729
|
+
<div class="action-buttons">
|
|
730
|
+
<button class="newtab-btn" onclick="openInNewTab()">
|
|
731
|
+
<i data-lucide="external-link" width="18" height="18"></i>
|
|
732
|
+
<span>Open in New Tab</span>
|
|
733
|
+
</button>
|
|
734
|
+
<button class="fullscreen-btn" onclick="toggleFullscreen()">
|
|
735
|
+
<i data-lucide="maximize" width="18" height="18"></i>
|
|
736
|
+
<span>Fullscreen</span>
|
|
737
|
+
</button>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
|
|
741
|
+
<div class="game-frame-container" id="gameFrameContainer">
|
|
742
|
+
<div class="loading" id="loading">
|
|
743
|
+
<div class="spinner"></div>
|
|
744
|
+
<p>Loading game...</p>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
|
|
751
|
+
<script>
|
|
752
|
+
let allGames = [];
|
|
753
|
+
let currentGame = null;
|
|
754
|
+
let currentRandomGame = null;
|
|
755
|
+
let randomGameInterval = null;
|
|
756
|
+
const categories = ['Action', 'Adventure', 'Arcade', 'Racing', 'Sports', 'Puzzle', 'Strategy', 'Simulation', 'Platform', 'Music', 'Horror', 'Multiplayer', 'Other'];
|
|
757
|
+
|
|
758
|
+
const categoryIcons = {
|
|
759
|
+
'Action': 'zap',
|
|
760
|
+
'Adventure': 'map',
|
|
761
|
+
'Arcade': 'joystick',
|
|
762
|
+
'Racing': 'car',
|
|
763
|
+
'Sports': 'trophy',
|
|
764
|
+
'Puzzle': 'puzzle',
|
|
765
|
+
'Strategy': 'brain',
|
|
766
|
+
'Simulation': 'settings',
|
|
767
|
+
'Platform': 'layers',
|
|
768
|
+
'Music': 'music',
|
|
769
|
+
'Horror': 'skull',
|
|
770
|
+
'Multiplayer': 'users',
|
|
771
|
+
'Other': 'gamepad-2'
|
|
772
|
+
};
|
|
773
|
+
|
|
774
|
+
// Load games from CDN JSON
|
|
775
|
+
fetch('https://cdn.jsdelivr.net/gh/donoboy49/HTML-projects@TESTING-BRANCH/importantfiles(Editable)/gamelist.json')
|
|
776
|
+
.then(response => response.json())
|
|
777
|
+
.then(games => {
|
|
778
|
+
console.log('Loaded games from CDN:', games.length);
|
|
779
|
+
allGames = games;
|
|
780
|
+
initializeCarousel();
|
|
781
|
+
startRandomGameRotation();
|
|
782
|
+
|
|
783
|
+
// Handle direct game loading via URL parameters (like gn-math)
|
|
784
|
+
const search = new URLSearchParams(window.location.search);
|
|
785
|
+
const id = search.get('id');
|
|
786
|
+
if (id) {
|
|
787
|
+
const game = allGames.find(game => game.id + '' == id + '');
|
|
788
|
+
if (game) {
|
|
789
|
+
openGame(game.id);
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
})
|
|
793
|
+
.catch(error => {
|
|
794
|
+
console.error('Error loading games from CDN:', error);
|
|
795
|
+
// Show error message to user
|
|
796
|
+
document.getElementById('categories').innerHTML = `
|
|
797
|
+
<div style="text-align: center; padding: 40px; color: rgba(255,255,255,0.7);">
|
|
798
|
+
<i data-lucide="alert-circle" width="48" height="48"></i>
|
|
799
|
+
<h3 style="margin: 20px 0;">Unable to load games</h3>
|
|
800
|
+
<p>Please check your internet connection and try refreshing the page.</p>
|
|
801
|
+
</div>
|
|
802
|
+
`;
|
|
803
|
+
lucide.createIcons();
|
|
804
|
+
});
|
|
805
|
+
|
|
806
|
+
function initializeCarousel() {
|
|
807
|
+
const categoriesContainer = document.getElementById('categories');
|
|
808
|
+
categoriesContainer.innerHTML = '';
|
|
809
|
+
|
|
810
|
+
categories.forEach(category => {
|
|
811
|
+
const categoryGames = allGames.filter(game => game.category === category);
|
|
812
|
+
if (categoryGames.length === 0) return;
|
|
813
|
+
|
|
814
|
+
const section = document.createElement('div');
|
|
815
|
+
section.className = 'category-section';
|
|
816
|
+
section.innerHTML = `
|
|
817
|
+
<div class="category-header">
|
|
818
|
+
<h2 class="category-title">
|
|
819
|
+
<i data-lucide="${categoryIcons[category]}" width="28" height="28"></i>
|
|
820
|
+
<span>${category}</span>
|
|
821
|
+
</h2>
|
|
822
|
+
<button class="category-view-all" onclick="showCategoryGrid('${category}')">
|
|
823
|
+
<span>View All</span>
|
|
824
|
+
<i data-lucide="arrow-right" width="16" height="16"></i>
|
|
825
|
+
</button>
|
|
826
|
+
</div>
|
|
827
|
+
<div class="carousel">
|
|
828
|
+
${categoryGames.map(game => createGameCard(game)).join('')}
|
|
829
|
+
</div>
|
|
830
|
+
`;
|
|
831
|
+
categoriesContainer.appendChild(section);
|
|
832
|
+
});
|
|
833
|
+
|
|
834
|
+
lucide.createIcons();
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
function createGameCard(game) {
|
|
838
|
+
return `
|
|
839
|
+
<div class="game-card" onclick="openGame(${game.id})">
|
|
840
|
+
<img src="${game.image}" alt="${game.name}" class="game-image">
|
|
841
|
+
<div class="game-overlay">
|
|
842
|
+
<div class="game-title">
|
|
843
|
+
<span>${game.name}</span>
|
|
844
|
+
<i data-lucide="play-circle" width="24" height="24" class="open-icon"></i>
|
|
845
|
+
</div>
|
|
846
|
+
<div class="game-description">${game.description}</div>
|
|
847
|
+
<div class="game-creator">
|
|
848
|
+
<i data-lucide="user" width="12" height="12"></i>
|
|
849
|
+
<span>${game.creator}</span>
|
|
850
|
+
</div>
|
|
851
|
+
</div>
|
|
852
|
+
</div>
|
|
853
|
+
`;
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
function showAllGamesGrid() {
|
|
857
|
+
document.getElementById('gamesView').classList.remove('active');
|
|
858
|
+
document.getElementById('gridView').classList.add('active');
|
|
859
|
+
|
|
860
|
+
const gridContainer = document.getElementById('allGamesGrid');
|
|
861
|
+
gridContainer.innerHTML = allGames.map(game => createGameCard(game)).join('');
|
|
862
|
+
lucide.createIcons();
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
function showCategoryGrid(category) {
|
|
866
|
+
document.getElementById('gamesView').classList.remove('active');
|
|
867
|
+
document.getElementById('gridView').classList.add('active');
|
|
868
|
+
|
|
869
|
+
const categoryGames = allGames.filter(game => game.category === category);
|
|
870
|
+
const gridContainer = document.getElementById('allGamesGrid');
|
|
871
|
+
gridContainer.innerHTML = categoryGames.map(game => createGameCard(game)).join('');
|
|
872
|
+
lucide.createIcons();
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
function showGamesView() {
|
|
876
|
+
// Restore the games view and clear the game container
|
|
877
|
+
document.getElementById('gridView').classList.remove('active');
|
|
878
|
+
document.getElementById('gamePlayerView').classList.remove('active');
|
|
879
|
+
document.getElementById('gamesView').classList.add('active');
|
|
880
|
+
document.getElementById('backHomeBtn').style.display = 'none';
|
|
881
|
+
document.getElementById('searchInput').value = '';
|
|
882
|
+
|
|
883
|
+
// Clean up iframe properly
|
|
884
|
+
const container = document.getElementById('gameFrameContainer');
|
|
885
|
+
const gameFrame = document.getElementById('gameFrame');
|
|
886
|
+
if (gameFrame && container.contains(gameFrame)) {
|
|
887
|
+
container.removeChild(gameFrame);
|
|
888
|
+
}
|
|
889
|
+
if (container) container.innerHTML = '<div class="loading" id="loading"><div class="spinner"></div><p>Loading game...</p></div>';
|
|
890
|
+
|
|
891
|
+
// Clear URL parameters (like gn-math)
|
|
892
|
+
const url = new URL(window.location);
|
|
893
|
+
url.searchParams.delete('id');
|
|
894
|
+
history.pushState(null, '', url.toString());
|
|
895
|
+
|
|
896
|
+
initializeCarousel();
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
// Handle iframe navigation - listen for messages from iframe
|
|
900
|
+
window.addEventListener('message', function(event) {
|
|
901
|
+
// Check if message is from our game iframe
|
|
902
|
+
const gameFrame = document.getElementById('gameFrame');
|
|
903
|
+
if (gameFrame && event.source === gameFrame.contentWindow) {
|
|
904
|
+
if (event.data === 'back-to-games') {
|
|
905
|
+
showGamesView();
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
});
|
|
909
|
+
|
|
910
|
+
function openGame(gameId) {
|
|
911
|
+
currentGame = allGames.find(game => game.id == gameId);
|
|
912
|
+
|
|
913
|
+
if (currentGame) {
|
|
914
|
+
document.getElementById('gamesView').classList.remove('active');
|
|
915
|
+
document.getElementById('gridView').classList.remove('active');
|
|
916
|
+
document.getElementById('gamePlayerView').classList.add('active');
|
|
917
|
+
document.getElementById('backHomeBtn').style.display = 'inline-flex';
|
|
918
|
+
|
|
919
|
+
// Update URL parameters (like gn-math)
|
|
920
|
+
const url = new URL(window.location);
|
|
921
|
+
url.searchParams.set('id', gameId);
|
|
922
|
+
history.pushState(null, '', url.toString());
|
|
923
|
+
|
|
924
|
+
displayGame(currentGame);
|
|
925
|
+
}
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
function displayGame(game) {
|
|
929
|
+
// Update page title
|
|
930
|
+
document.title = `${game.name} - BigDom`;
|
|
931
|
+
|
|
932
|
+
// Update game info
|
|
933
|
+
document.getElementById('gameTitle').innerHTML = `
|
|
934
|
+
<i data-lucide="${getCategoryIcon(game.category)}" width="28" height="28"></i>
|
|
935
|
+
<span>${game.name}</span>
|
|
936
|
+
`;
|
|
937
|
+
|
|
938
|
+
document.getElementById('gameMeta').innerHTML = `
|
|
939
|
+
<div class="meta-item">
|
|
940
|
+
<i data-lucide="tag" width="16" height="16"></i>
|
|
941
|
+
<span>${game.category}</span>
|
|
942
|
+
</div>
|
|
943
|
+
<div class="meta-item">
|
|
944
|
+
<i data-lucide="user" width="16" height="16"></i>
|
|
945
|
+
<span>${game.creator}</span>
|
|
946
|
+
</div>
|
|
947
|
+
<div class="meta-item">
|
|
948
|
+
<i data-lucide="info" width="16" height="16"></i>
|
|
949
|
+
<span>${game.description}</span>
|
|
950
|
+
</div>
|
|
951
|
+
`;
|
|
952
|
+
|
|
953
|
+
// Load game using launch function
|
|
954
|
+
launchGame(game.id);
|
|
955
|
+
|
|
956
|
+
// Reinitialize Lucide icons
|
|
957
|
+
lucide.createIcons();
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
async function launchGame(gameId) {
|
|
961
|
+
const container = document.getElementById('gameFrameContainer');
|
|
962
|
+
const loading = document.getElementById('loading');
|
|
963
|
+
|
|
964
|
+
try {
|
|
965
|
+
// Fetch the HTML as text from jsDelivr
|
|
966
|
+
const url = `https://cdn.jsdelivr.net/gh/donoboy49/HTML-projects@TESTING-BRANCH/games/${gameId}.html`;
|
|
967
|
+
const response = await fetch(url);
|
|
968
|
+
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
|
|
969
|
+
let html = await response.text();
|
|
970
|
+
|
|
971
|
+
// Create iframe exactly like gn-math implementation
|
|
972
|
+
let gameFrame = document.getElementById('gameFrame');
|
|
973
|
+
if (gameFrame === null) {
|
|
974
|
+
gameFrame = document.createElement('iframe');
|
|
975
|
+
gameFrame.id = 'gameFrame';
|
|
976
|
+
gameFrame.className = 'game-frame';
|
|
977
|
+
container.appendChild(gameFrame);
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
// Hide loading spinner
|
|
981
|
+
loading.style.display = 'none';
|
|
982
|
+
|
|
983
|
+
// Write HTML directly to iframe - exact gn-math approach
|
|
984
|
+
gameFrame.contentDocument.open();
|
|
985
|
+
gameFrame.contentDocument.write(html);
|
|
986
|
+
gameFrame.contentDocument.close();
|
|
987
|
+
|
|
988
|
+
} catch (error) {
|
|
989
|
+
console.error('Error loading game:', error);
|
|
990
|
+
// Hide loading spinner on error
|
|
991
|
+
loading.style.display = 'none';
|
|
992
|
+
|
|
993
|
+
// Create iframe for error display
|
|
994
|
+
let gameFrame = document.getElementById('gameFrame');
|
|
995
|
+
if (gameFrame === null) {
|
|
996
|
+
gameFrame = document.createElement('iframe');
|
|
997
|
+
gameFrame.id = 'gameFrame';
|
|
998
|
+
gameFrame.className = 'game-frame';
|
|
999
|
+
container.appendChild(gameFrame);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
gameFrame.contentDocument.open();
|
|
1003
|
+
gameFrame.contentDocument.write(`
|
|
1004
|
+
<html>
|
|
1005
|
+
<head><title>Error</title></head>
|
|
1006
|
+
<body style="display:flex;align-items:center;justify-content:center;height:100vh;font-family:Arial,sans-serif;background:#1a1a1a;color:#fff;">
|
|
1007
|
+
<div style="text-align:center;">
|
|
1008
|
+
<h2>Failed to load game</h2>
|
|
1009
|
+
<p>${error}</p>
|
|
1010
|
+
</div>
|
|
1011
|
+
</body>
|
|
1012
|
+
</html>
|
|
1013
|
+
`);
|
|
1014
|
+
gameFrame.contentDocument.close();
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
|
|
1018
|
+
function getCategoryIcon(category) {
|
|
1019
|
+
return categoryIcons[category] || 'gamepad-2';
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
function closeGame() {
|
|
1023
|
+
const gameFrame = document.getElementById('gameFrame');
|
|
1024
|
+
const container = document.getElementById('gameFrameContainer');
|
|
1025
|
+
|
|
1026
|
+
if (gameFrame && container.contains(gameFrame)) {
|
|
1027
|
+
container.removeChild(gameFrame);
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
// Reset container to loading state
|
|
1031
|
+
container.innerHTML = '<div class="loading" id="loading"><div class="spinner"></div><p>Loading game...</p></div>';
|
|
1032
|
+
|
|
1033
|
+
// Show games view
|
|
1034
|
+
showGamesView();
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
function toggleFullscreen() {
|
|
1038
|
+
const gameFrame = document.getElementById('gameFrame');
|
|
1039
|
+
|
|
1040
|
+
if (!document.fullscreenElement) {
|
|
1041
|
+
if (gameFrame && gameFrame.requestFullscreen) {
|
|
1042
|
+
gameFrame.requestFullscreen().catch(err => {
|
|
1043
|
+
console.error('Error attempting to enable fullscreen:', err);
|
|
1044
|
+
});
|
|
1045
|
+
} else {
|
|
1046
|
+
console.error('Fullscreen not supported or iframe not found');
|
|
1047
|
+
}
|
|
1048
|
+
} else {
|
|
1049
|
+
document.exitFullscreen();
|
|
1050
|
+
}
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
async function openInNewTab() {
|
|
1054
|
+
if (currentGame && currentGame.id) {
|
|
1055
|
+
try {
|
|
1056
|
+
// Open new tab exactly like gn-math does
|
|
1057
|
+
const newWindow = window.open("about:blank", "_blank");
|
|
1058
|
+
const url = `https://cdn.jsdelivr.net/gh/donoboy49/HTML-projects@TESTING-BRANCH/importantfiles(Editable)/games/${currentGame.id}.html`;
|
|
1059
|
+
const response = await fetch(url);
|
|
1060
|
+
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
|
|
1061
|
+
let html = await response.text();
|
|
1062
|
+
|
|
1063
|
+
if (newWindow) {
|
|
1064
|
+
newWindow.document.open();
|
|
1065
|
+
newWindow.document.write(html);
|
|
1066
|
+
newWindow.document.close();
|
|
1067
|
+
}
|
|
1068
|
+
} catch (error) {
|
|
1069
|
+
alert('Failed to open game in new tab: ' + error);
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
function handleSearch(query) {
|
|
1075
|
+
const searchTerm = query.toLowerCase().trim();
|
|
1076
|
+
const searchResults = document.getElementById('searchResults');
|
|
1077
|
+
|
|
1078
|
+
if (searchTerm === '') {
|
|
1079
|
+
searchResults.classList.remove('active');
|
|
1080
|
+
searchResults.innerHTML = '';
|
|
1081
|
+
return;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
// Filter games by search term
|
|
1085
|
+
const filteredGames = allGames.filter(game =>
|
|
1086
|
+
game.name.toLowerCase().includes(searchTerm) ||
|
|
1087
|
+
game.category.toLowerCase().includes(searchTerm) ||
|
|
1088
|
+
game.description.toLowerCase().includes(searchTerm)
|
|
1089
|
+
);
|
|
1090
|
+
|
|
1091
|
+
if (filteredGames.length === 0) {
|
|
1092
|
+
searchResults.innerHTML = `
|
|
1093
|
+
<div class="search-no-results">
|
|
1094
|
+
<i data-lucide="search-x" width="32" height="32"></i>
|
|
1095
|
+
<p style="margin-top: 10px;">No games found</p>
|
|
1096
|
+
</div>
|
|
1097
|
+
`;
|
|
1098
|
+
searchResults.classList.add('active');
|
|
1099
|
+
lucide.createIcons();
|
|
1100
|
+
return;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
// Display search results as list
|
|
1104
|
+
const maxResults = 50;
|
|
1105
|
+
const displayGames = filteredGames.slice(0, maxResults);
|
|
1106
|
+
const hasMore = filteredGames.length > maxResults;
|
|
1107
|
+
|
|
1108
|
+
searchResults.innerHTML = `
|
|
1109
|
+
<div class="search-results-header">
|
|
1110
|
+
Found ${filteredGames.length} game${filteredGames.length !== 1 ? 's' : ''}${hasMore ? ` (showing first ${maxResults})` : ''}
|
|
1111
|
+
</div>
|
|
1112
|
+
${displayGames.map(game => `
|
|
1113
|
+
<div class="search-result-item" onclick="openGame(${game.id}); closeSearch();">
|
|
1114
|
+
<img src="${game.image}" alt="${game.name}" class="search-result-image" onerror="this.src='https://via.placeholder.com/80x60/667eea/ffffff?text=Game'">
|
|
1115
|
+
<div class="search-result-info">
|
|
1116
|
+
<div class="search-result-name">${game.name}</div>
|
|
1117
|
+
<div class="search-result-category">
|
|
1118
|
+
<i data-lucide="${categoryIcons[game.category] || 'gamepad-2'}" width="14" height="14"></i>
|
|
1119
|
+
<span>${game.category}</span>
|
|
1120
|
+
</div>
|
|
1121
|
+
</div>
|
|
1122
|
+
<i data-lucide="play-circle" width="20" height="20" style="opacity: 0.5;"></i>
|
|
1123
|
+
</div>
|
|
1124
|
+
`).join('')}
|
|
1125
|
+
`;
|
|
1126
|
+
|
|
1127
|
+
searchResults.classList.add('active');
|
|
1128
|
+
lucide.createIcons();
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
function closeSearch() {
|
|
1132
|
+
const searchResults = document.getElementById('searchResults');
|
|
1133
|
+
const searchInput = document.getElementById('searchInput');
|
|
1134
|
+
searchResults.classList.remove('active');
|
|
1135
|
+
searchInput.value = '';
|
|
1136
|
+
}
|
|
1137
|
+
|
|
1138
|
+
// Random Game Feature
|
|
1139
|
+
function getRandomGame() {
|
|
1140
|
+
if (allGames.length === 0) return null;
|
|
1141
|
+
const randomIndex = Math.floor(Math.random() * allGames.length);
|
|
1142
|
+
return allGames[randomIndex];
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
function updateRandomGamePreview() {
|
|
1146
|
+
currentRandomGame = getRandomGame();
|
|
1147
|
+
if (currentRandomGame) {
|
|
1148
|
+
const previewImg = document.getElementById('randomGamePreview');
|
|
1149
|
+
previewImg.src = currentRandomGame.image;
|
|
1150
|
+
}
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
function openRandomGame() {
|
|
1154
|
+
if (currentRandomGame) {
|
|
1155
|
+
openGame(currentRandomGame.id);
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
function startRandomGameRotation() {
|
|
1160
|
+
// Initial game
|
|
1161
|
+
updateRandomGamePreview();
|
|
1162
|
+
|
|
1163
|
+
// Update every 3 seconds
|
|
1164
|
+
randomGameInterval = setInterval(updateRandomGamePreview, 3000);
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
// Close search results when clicking outside
|
|
1168
|
+
document.addEventListener('click', function(event) {
|
|
1169
|
+
const searchContainer = document.querySelector('.search-container');
|
|
1170
|
+
const searchResults = document.getElementById('searchResults');
|
|
1171
|
+
|
|
1172
|
+
if (searchContainer && !searchContainer.contains(event.target)) {
|
|
1173
|
+
searchResults.classList.remove('active');
|
|
1174
|
+
}
|
|
1175
|
+
});
|
|
1176
|
+
|
|
1177
|
+
// Initialize Lucide icons
|
|
1178
|
+
lucide.createIcons();
|
|
1179
|
+
</script>
|
|
1180
|
+
</body>
|
|
1181
|
+
</html>
|