Hugging Face's logo

Spaces:
ZMaxAIru
/
ppl
Running

App Files Community
ZMaxAIru commited on
Commit
98fb3ce
·
verified ·
1 Parent(s): fff96f0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1336 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ppl
3
- emoji: 🌍
4
- colorFrom: indigo
5
- colorTo: purple
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: ppl
3
+ emoji: 🐳
4
+ colorFrom: blue
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,1336 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Пиксельный Майнинг</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --bg-color: #1a1a2e;
11
+ --primary-color: #4ecca3;
12
+ --secondary-color: #eeeeee;
13
+ --danger-color: #f05454;
14
+ --silver-color: #c0c0c0;
15
+ --gold-color: #ffd700;
16
+ --diamond-color: #b9f2ff;
17
+ --canvas-bg: #16213e;
18
+ --card-bg: #0f3460;
19
+ --text-color: #e6e6e6;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Courier New', monospace;
27
+ }
28
+
29
+ body {
30
+ background-color: var(--bg-color);
31
+ color: var(--text-color);
32
+ min-height: 100vh;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ .container {
37
+ max-width: 1200px;
38
+ margin: 0 auto;
39
+ padding: 20px;
40
+ }
41
+
42
+ header {
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ padding: 15px 0;
47
+ border-bottom: 2px solid var(--primary-color);
48
+ margin-bottom: 20px;
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 10px;
55
+ font-size: 24px;
56
+ font-weight: bold;
57
+ color: var(--primary-color);
58
+ }
59
+
60
+ .logo img {
61
+ width: 40px;
62
+ height: 40px;
63
+ }
64
+
65
+ .nav-tabs {
66
+ display: flex;
67
+ gap: 15px;
68
+ }
69
+
70
+ .tab {
71
+ padding: 8px 15px;
72
+ border-radius: 20px;
73
+ cursor: pointer;
74
+ transition: all 0.3s;
75
+ font-weight: bold;
76
+ }
77
+
78
+ .tab:hover {
79
+ background-color: var(--card-bg);
80
+ }
81
+
82
+ .tab.active {
83
+ background-color: var(--primary-color);
84
+ color: var(--bg-color);
85
+ }
86
+
87
+ .user-profile {
88
+ display: flex;
89
+ align-items: center;
90
+ gap: 10px;
91
+ }
92
+
93
+ .avatar {
94
+ width: 40px;
95
+ height: 40px;
96
+ border-radius: 50%;
97
+ border: 2px solid var(--primary-color);
98
+ }
99
+
100
+ .pix-balance {
101
+ background-color: var(--card-bg);
102
+ padding: 5px 10px;
103
+ border-radius: 20px;
104
+ font-weight: bold;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 5px;
108
+ }
109
+
110
+ .pix-balance i {
111
+ color: var(--gold-color);
112
+ }
113
+
114
+ .main-content {
115
+ display: flex;
116
+ flex-direction: column;
117
+ gap: 30px;
118
+ }
119
+
120
+ .section-title {
121
+ font-size: 22px;
122
+ margin-bottom: 15px;
123
+ color: var(--primary-color);
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 10px;
127
+ }
128
+
129
+ /* Mining Section */
130
+ .mining-section {
131
+ background-color: var(--card-bg);
132
+ border-radius: 15px;
133
+ padding: 20px;
134
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
135
+ }
136
+
137
+ .block-info {
138
+ display: flex;
139
+ justify-content: space-between;
140
+ margin-bottom: 20px;
141
+ flex-wrap: wrap;
142
+ gap: 15px;
143
+ }
144
+
145
+ .info-card {
146
+ background-color: var(--bg-color);
147
+ padding: 15px;
148
+ border-radius: 10px;
149
+ flex: 1;
150
+ min-width: 150px;
151
+ }
152
+
153
+ .info-card h3 {
154
+ font-size: 14px;
155
+ margin-bottom: 5px;
156
+ color: var(--primary-color);
157
+ }
158
+
159
+ .info-card p {
160
+ font-size: 18px;
161
+ font-weight: bold;
162
+ }
163
+
164
+ .pixel-canvas-container {
165
+ position: relative;
166
+ margin: 20px auto;
167
+ max-width: 600px;
168
+ }
169
+
170
+ .pixel-canvas {
171
+ display: grid;
172
+ background-color: var(--canvas-bg);
173
+ border: 4px solid var(--primary-color);
174
+ border-radius: 5px;
175
+ overflow: hidden;
176
+ }
177
+
178
+ .pixel {
179
+ aspect-ratio: 1/1;
180
+ background-color: #2b2b3a;
181
+ border: 1px solid rgba(0, 0, 0, 0.1);
182
+ cursor: pointer;
183
+ transition: all 0.2s;
184
+ position: relative;
185
+ overflow: hidden;
186
+ }
187
+
188
+ .pixel:hover {
189
+ filter: brightness(1.2);
190
+ }
191
+
192
+ .pixel.mined {
193
+ background-color: #4ecca3;
194
+ }
195
+
196
+ .pixel.silver {
197
+ background-color: var(--silver-color);
198
+ }
199
+
200
+ .pixel.gold {
201
+ background-color: var(--gold-color);
202
+ }
203
+
204
+ .pixel.diamond {
205
+ background-color: var(--diamond-color);
206
+ }
207
+
208
+ .pixel-value {
209
+ position: absolute;
210
+ bottom: 2px;
211
+ right: 2px;
212
+ font-size: 8px;
213
+ font-weight: bold;
214
+ color: #000;
215
+ opacity: 0.7;
216
+ }
217
+
218
+ .mine-button-container {
219
+ display: flex;
220
+ justify-content: center;
221
+ margin-top: 20px;
222
+ }
223
+
224
+ .mine-btn {
225
+ background-color: var(--primary-color);
226
+ color: var(--bg-color);
227
+ border: none;
228
+ padding: 15px 30px;
229
+ font-size: 18px;
230
+ border-radius: 50px;
231
+ cursor: pointer;
232
+ transition: all 0.3s;
233
+ font-weight: bold;
234
+ display: flex;
235
+ align-items: center;
236
+ gap: 10px;
237
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
238
+ }
239
+
240
+ .mine-btn:hover {
241
+ transform: translateY(-3px);
242
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
243
+ }
244
+
245
+ .mine-btn:active {
246
+ transform: translateY(0);
247
+ }
248
+
249
+ .mine-btn i {
250
+ animation: pulse 2s infinite;
251
+ }
252
+
253
+ @keyframes pulse {
254
+ 0% { transform: scale(1); }
255
+ 50% { transform: scale(1.2); }
256
+ 100% { transform: scale(1); }
257
+ }
258
+
259
+ /* Leaderboard Section */
260
+ .leaderboard-section {
261
+ background-color: var(--card-bg);
262
+ border-radius: 15px;
263
+ padding: 20px;
264
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
265
+ }
266
+
267
+ .leaderboard {
268
+ width: 100%;
269
+ border-collapse: collapse;
270
+ }
271
+
272
+ .leaderboard th, .leaderboard td {
273
+ padding: 12px 15px;
274
+ text-align: left;
275
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
276
+ }
277
+
278
+ .leaderboard th {
279
+ color: var(--primary-color);
280
+ font-size: 16px;
281
+ }
282
+
283
+ .leaderboard tr:hover {
284
+ background-color: rgba(255, 255, 255, 0.05);
285
+ }
286
+
287
+ .leaderboard .rank {
288
+ font-weight: bold;
289
+ width: 50px;
290
+ }
291
+
292
+ .leaderboard .user {
293
+ display: flex;
294
+ align-items: center;
295
+ gap: 10px;
296
+ }
297
+
298
+ .leaderboard .user-avatar {
299
+ width: 30px;
300
+ height: 30px;
301
+ border-radius: 50%;
302
+ }
303
+
304
+ .leaderboard .pix {
305
+ display: flex;
306
+ align-items: center;
307
+ gap: 5px;
308
+ color: var(--gold-color);
309
+ font-weight: bold;
310
+ }
311
+
312
+ /* Blocks History */
313
+ .history-section {
314
+ background-color: var(--card-bg);
315
+ border-radius: 15px;
316
+ padding: 20px;
317
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
318
+ margin-bottom: 50px;
319
+ }
320
+
321
+ .blocks-grid {
322
+ display: grid;
323
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
324
+ gap: 15px;
325
+ margin-top: 20px;
326
+ }
327
+
328
+ .block-card {
329
+ background-color: var(--bg-color);
330
+ border-radius: 10px;
331
+ overflow: hidden;
332
+ cursor: pointer;
333
+ transition: all 0.3s;
334
+ position: relative;
335
+ }
336
+
337
+ .block-card:hover {
338
+ transform: translateY(-5px);
339
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
340
+ }
341
+
342
+ .block-preview {
343
+ width: 100%;
344
+ height: 150px;
345
+ }
346
+
347
+ .block-info-overlay {
348
+ position: absolute;
349
+ bottom: 0;
350
+ left: 0;
351
+ right: 0;
352
+ background: rgba(0, 0, 0, 0.7);
353
+ padding: 10px;
354
+ }
355
+
356
+ .block-number {
357
+ font-size: 14px;
358
+ font-weight: bold;
359
+ color: var(--primary-color);
360
+ }
361
+
362
+ .block-creator {
363
+ font-size: 12px;
364
+ display: -webkit-box;
365
+ -webkit-line-clamp: 1;
366
+ -webkit-box-orient: vertical;
367
+ overflow: hidden;
368
+ text-overflow: ellipsis;
369
+ }
370
+
371
+ /* Modal */
372
+ .modal {
373
+ display: none;
374
+ position: fixed;
375
+ top: 0;
376
+ left: 0;
377
+ width: 100%;
378
+ height: 100%;
379
+ background-color: rgba(0, 0, 0, 0.8);
380
+ z-index: 1000;
381
+ justify-content: center;
382
+ align-items: center;
383
+ }
384
+
385
+ .modal-content {
386
+ background-color: var(--card-bg);
387
+ border-radius: 15px;
388
+ padding: 30px;
389
+ max-width: 500px;
390
+ width: 90%;
391
+ position: relative;
392
+ max-height: 90vh;
393
+ overflow-y: auto;
394
+ }
395
+
396
+ .close-modal {
397
+ position: absolute;
398
+ top: 15px;
399
+ right: 15px;
400
+ font-size: 24px;
401
+ cursor: pointer;
402
+ color: var(--text-color);
403
+ transition: all 0.3s;
404
+ }
405
+
406
+ .close-modal:hover {
407
+ color: var(--danger-color);
408
+ }
409
+
410
+ .modal-title {
411
+ font-size: 24px;
412
+ margin-bottom: 20px;
413
+ color: var(--primary-color);
414
+ text-align: center;
415
+ }
416
+
417
+ /* Responsive */
418
+ @media (max-width: 768px) {
419
+ .nav-tabs {
420
+ display: none;
421
+ }
422
+
423
+ .user-profile {
424
+ margin-left: auto;
425
+ }
426
+
427
+ .block-info {
428
+ flex-direction: column;
429
+ }
430
+
431
+ .info-card {
432
+ min-width: 100%;
433
+ }
434
+
435
+ .leaderboard th, .leaderboard td {
436
+ padding: 10px 12px;
437
+ font-size: 14px;
438
+ }
439
+
440
+ .blocks-grid {
441
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
442
+ }
443
+ }
444
+
445
+ /* Pixel animation */
446
+ @keyframes reveal {
447
+ 0% { transform: scale(0); opacity: 0; }
448
+ 100% { transform: scale(1); opacity: 1; }
449
+ }
450
+
451
+ .pixel.reveal {
452
+ animation: reveal 0.3s ease-out;
453
+ }
454
+
455
+ /* Badges */
456
+ .badge {
457
+ padding: 2px 5px;
458
+ border-radius: 3px;
459
+ font-size: 10px;
460
+ font-weight: bold;
461
+ margin-left: 5px;
462
+ }
463
+
464
+ .badge.silver {
465
+ background-color: var(--silver-color);
466
+ color: #000;
467
+ }
468
+
469
+ .badge.gold {
470
+ background-color: var(--gold-color);
471
+ color: #000;
472
+ }
473
+
474
+ .badge.diamond {
475
+ background-color: var(--diamond-color);
476
+ color: #000;
477
+ }
478
+
479
+ /* Notification */
480
+ .notification {
481
+ position: fixed;
482
+ bottom: 20px;
483
+ right: 20px;
484
+ background-color: var(--primary-color);
485
+ color: var(--bg-color);
486
+ padding: 15px 20px;
487
+ border-radius: 10px;
488
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
489
+ transform: translateY(100px);
490
+ opacity: 0;
491
+ transition: all 0.3s;
492
+ z-index: 100;
493
+ }
494
+
495
+ .notification.show {
496
+ transform: translateY(0);
497
+ opacity: 1;
498
+ }
499
+
500
+ .notification-title {
501
+ font-weight: bold;
502
+ margin-bottom: 5px;
503
+ }
504
+
505
+ /* Tutorial tooltip */
506
+ .tooltip {
507
+ position: relative;
508
+ display: inline-block;
509
+ margin-left: 10px;
510
+ }
511
+
512
+ .tooltip .tooltip-text {
513
+ visibility: hidden;
514
+ width: 200px;
515
+ background-color: var(--bg-color);
516
+ color: var(--text-color);
517
+ text-align: center;
518
+ border-radius: 6px;
519
+ padding: 10px;
520
+ position: absolute;
521
+ z-index: 1;
522
+ bottom: 125%;
523
+ left: 50%;
524
+ margin-left: -100px;
525
+ opacity: 0;
526
+ transition: opacity 0.3s;
527
+ border: 1px solid var(--primary-color);
528
+ }
529
+
530
+ .tooltip:hover .tooltip-text {
531
+ visibility: visible;
532
+ opacity: 1;
533
+ }
534
+ </style>
535
+ </head>
536
+ <body>
537
+ <div class="container">
538
+ <header>
539
+ <div class="logo">
540
+ <i class="fas fa-cubes"></i>
541
+ <span>Пиксельный Майнинг</span>
542
+ </div>
543
+ <div class="nav-tabs">
544
+ <div class="tab active" onclick="showTab('mining')">
545
+ <i class="fas fa-digging"></i> Майнинг
546
+ </div>
547
+ <div class="tab" onclick="showTab('profile')">
548
+ <i class="fas fa-user"></i> Профиль
549
+ </div>
550
+ <div class="tab" onclick="showTab('wallet')">
551
+ <i class="fas fa-wallet"></i> Кошелек
552
+ </div>
553
+ <div class="tab" onclick="showTab('leaderboard')">
554
+ <i class="fas fa-trophy"></i> Топ игроков
555
+ </div>
556
+ <div class="tab" onclick="showTab('history')">
557
+ <i class="fas fa-history"></i> История блоков
558
+ </div>
559
+ </div>
560
+ <div class="user-profile">
561
+ <div class="pix-balance">
562
+ <i class="fas fa-coins"></i>
563
+ <span id="userBalance">1,240</span> ПИКС
564
+ </div>
565
+ <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="avatar">
566
+ </div>
567
+ </header>
568
+
569
+ <div class="main-content">
570
+ <div id="mining-tab" class="tab-content">
571
+ <section class="mining-section">
572
+ <h2 class="section-title">
573
+ <i class="fas fa-digging"></i> Текущий Блок
574
+ <div class="tooltip">
575
+ <i class="fas fa-question-circle"></i>
576
+ <span class="tooltip-text">Добывайте пиксели вместе с другими игроками! Чем больше пикселей вы откроете, тем больше очков получите.</span>
577
+ </div>
578
+ </h2>
579
+
580
+ <div class="block-info">
581
+ <div class="info-card">
582
+ <h3>Текущий Блок</h3>
583
+ <p>#42</p>
584
+ </div>
585
+ <div class="info-card">
586
+ <h3>Прогресс</h3>
587
+ <p>76%</p>
588
+ </div>
589
+ <div class="info-card">
590
+ <h3>Пикселей</h3>
591
+ <p>76/100</p>
592
+ </div>
593
+ <div class="info-card">
594
+ <h3>Создатель</h3>
595
+ <p>-</p>
596
+ </div>
597
+ </div>
598
+
599
+ <div class="pixel-canvas-container">
600
+ <div id="pixelCanvas" class="pixel-canvas"></div>
601
+ </div>
602
+
603
+ <div class="mine-button-container">
604
+ <button id="mineBtn" class="mine-btn" onclick="minePixel()">
605
+ <i class="fas fa-hammer"></i> Добыть Пиксель
606
+ </button>
607
+ </div>
608
+ </section>
609
+
610
+ <section class="leaderboard-section">
611
+ <h2 class="section-title"><i class="fas fa-trophy"></i> Топ Блока</h2>
612
+ <div class="table-responsive">
613
+ <table class="leaderboard">
614
+ <thead>
615
+ <tr>
616
+ <th class="rank">#</th>
617
+ <th>Игрок</th>
618
+ <th>Пикселей</th>
619
+ <th>Очки</th>
620
+ </tr>
621
+ </thead>
622
+ <tbody id="blockLeaderboard">
623
+ <!-- Filled by JS -->
624
+ </tbody>
625
+ </table>
626
+ </div>
627
+ </section>
628
+ </div>
629
+
630
+ <div id="leaderboard-tab" class="tab-content" style="display: none;">
631
+ <section class="leaderboard-section">
632
+ <h2 class="section-title"><i class="fas fa-trophy"></i> Топ Игроков</h2>
633
+ <div class="table-responsive">
634
+ <table class="leaderboard">
635
+ <thead>
636
+ <tr>
637
+ <th class="rank">#</th>
638
+ <th>Игрок</th>
639
+ <th>Блоков</th>
640
+ <th>Очки</th>
641
+ </tr>
642
+ </thead>
643
+ <tbody id="globalLeaderboard">
644
+ <!-- Filled by JS -->
645
+ </tbody>
646
+ </table>
647
+ </div>
648
+ </section>
649
+ </div>
650
+
651
+ <div id="history-tab" class="tab-content" style="display: none;">
652
+ <section class="history-section">
653
+ <h2 class="section-title"><i class="fas fa-history"></i> История Блоков</h2>
654
+ <div class="blocks-grid" id="blocksGrid">
655
+ <!-- Filled by JS -->
656
+ </div>
657
+ </section>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <!-- Block Details Modal -->
663
+ <div id="blockModal" class="modal">
664
+ <div class="modal-content">
665
+ <span class="close-modal" onclick="closeModal('blockModal')">&times;</span>
666
+ <h2 class="modal-title">Блок #<span id="modalBlockNumber"></span></h2>
667
+
668
+ <div class="block-info" style="margin-bottom: 20px;">
669
+ <div class="info-card">
670
+ <h3>Создатель</h3>
671
+ <p id="modalCreator">Username</p>
672
+ </div>
673
+ <div class="info-card">
674
+ <h3>Дата завершения</h3>
675
+ <p id="modalDate">01.01.2023</p>
676
+ </div>
677
+ <div class="info-card">
678
+ <h3>Всего пикселей</h3>
679
+ <p id="modalPixels">100</p>
680
+ </div>
681
+ <div class="info-card">
682
+ <h3>Редкие пиксели</h3>
683
+ <p id="modalRare">3</p>
684
+ </div>
685
+ </div>
686
+
687
+ <div style="text-align: center; margin: 20px 0;">
688
+ <div id="modalBlockPreview" class="pixel-canvas" style="display: inline-grid; width: 200px;"></div>
689
+ </div>
690
+
691
+ <div class="section-title" style="margin-top: 30px;">
692
+ <i class="fas fa-crown"></i> Топ игроков блока
693
+ </div>
694
+
695
+ <div class="table-responsive">
696
+ <table class="leaderboard">
697
+ <thead>
698
+ <tr>
699
+ <th class="rank">#</th>
700
+ <th>Игрок</th>
701
+ <th>Пикселей</th>
702
+ <th>Очки</th>
703
+ </tr>
704
+ </thead>
705
+ <tbody id="modalLeaderboard">
706
+ <!-- Filled by JS -->
707
+ </tbody>
708
+ </table>
709
+ </div>
710
+
711
+ <div style="text-align: center; margin-top: 20px;">
712
+ <button class="mine-btn" style="padding: 10px 20px;">
713
+ <i class="fas fa-user-astronaut"></i> Сделать Аватаром
714
+ </button>
715
+ </div>
716
+ </div>
717
+ </div>
718
+
719
+ <!-- Notification -->
720
+ <div id="notification" class="notification">
721
+ <div class="notification-title">Пиксель добыт!</div>
722
+ <div class="notification-message">Вы получили <span class="pix-earned">15</span> ПИКС</div>
723
+ </div>
724
+
725
+ <script>
726
+ // Game configuration
727
+ const config = {
728
+ currentBlock: 42,
729
+ blockSize: 100,
730
+ minedPixels: 76,
731
+ baseReward: 10,
732
+ rewards: {
733
+ common: 10,
734
+ silver: 30,
735
+ gold: 75,
736
+ diamond: 200
737
+ },
738
+ rareChances: {
739
+ silver: 0.1,
740
+ gold: 0.025,
741
+ diamond: 0.005
742
+ }
743
+ };
744
+
745
+ // Sample data
746
+ const sampleUsers = [
747
+ { id: 1, name: "User1", avatar: "https://i.pravatar.cc/150?img=1", pixels: 24, points: 420 },
748
+ { id: 2, name: "User2", avatar: "https://i.pravatar.cc/150?img=2", pixels: 18, points: 315 },
749
+ { id: 3, name: "User3", avatar: "https://i.pravatar.cc/150?img=3", pixels: 12, points: 210 },
750
+ { id: 4, name: "User4", avatar: "https://i.pravatar.cc/150?img=4", pixels: 10, points: 175 },
751
+ { id: 5, name: "User5", avatar: "https://i.pravatar.cc/150?img=5", pixels: 8, points: 140 }
752
+ ];
753
+
754
+ const globalLeaders = [
755
+ { id: 1, name: "TopMiner", avatar: "https://i.pravatar.cc/150?img=6", blocks: 12, points: 12450 },
756
+ { id: 2, name: "PixMaster", avatar: "https://i.pravatar.cc/150?img=7", blocks: 9, points: 9860 },
757
+ { id: 3, name: "BlockCreator", avatar: "https://i.pravatar.cc/150?img=8", blocks: 7, points: 7820 },
758
+ { id: 4, name: "User5", avatar: "https://i.pravatar.cc/150?img=5", blocks: 6, points: 6540 },
759
+ { id: 5, name: "Newbie", avatar: "https://i.pravatar.cc/150?img=9", blocks: 5, points: 5210 },
760
+ { id: 6, name: "ProMiner", avatar: "https://i.pravatar.cc/150?img=10", blocks: 4, points: 4320 },
761
+ { id: 7, name: "PixelKing", avatar: "https://i.pravatar.cc/150?img=11", blocks: 3, points: 3210 },
762
+ { id: 8, name: "DiamondHunter", avatar: "https://i.pravatar.cc/150?img=12", blocks: 2, points: 2450 },
763
+ { id: 9, name: "SilverCollector", avatar: "https://i.pravatar.cc/150?img=13", blocks: 2, points: 1980 },
764
+ { id: 10, name: "LuckyOne", avatar: "https://i.pravatar.cc/150?img=14", blocks: 1, points: 1250 }
765
+ ];
766
+
767
+ const blocksHistory = [
768
+ { id: 41, creator: "TopMiner", date: "20.05.2023", pixels: 90, rare: 4, image: generateFakeBlock(10, 9, 41) },
769
+ { id: 40, creator: "PixMaster", date: "18.05.2023", pixels: 81, rare: 3, image: generateFakeBlock(9, 9, 40) },
770
+ { id: 39, creator: "BlockCreator", date: "15.05.2023", pixels: 64, rare: 2, image: generateFakeBlock(8, 8, 39) },
771
+ { id: 38, creator: "User5", date: "12.05.2023", pixels: 49, rare: 1, image: generateFakeBlock(7, 7, 38) },
772
+ { id: 37, creator: "ProMiner", date: "10.05.2023", pixels: 36, rare: 1, image: generateFakeBlock(6, 6, 37) },
773
+ { id: 36, creator: "Newbie", date: "08.05.2023", pixels: 25, rare: 0, image: generateFakeBlock(5, 5, 36) }
774
+ ];
775
+
776
+ // Generate a fake block image for the history
777
+ function generateFakeBlock(width, height, seed) {
778
+ const types = ['common', 'silver', 'gold', 'diamond'];
779
+ const pixels = [];
780
+
781
+ // Simple seeded random function
782
+ function random(min, max) {
783
+ const x = Math.sin(seed++) * 10000;
784
+ return Math.floor((x - Math.floor(x)) * (max - min + 1) + min);
785
+ }
786
+
787
+ for (let y = 0; y < height; y++) {
788
+ const row = [];
789
+ for (let x = 0; x < width; x++) {
790
+ const rand = random(0, 100);
791
+ let type = 'common';
792
+
793
+ if (rand > 99) type = 'diamond';
794
+ else if (rand > 97) type = 'gold';
795
+ else if (rand > 90) type = 'silver';
796
+
797
+ row.push(type);
798
+ }
799
+ pixels.push(row);
800
+ }
801
+
802
+ return {
803
+ width,
804
+ height,
805
+ pixels
806
+ };
807
+ }
808
+
809
+ // Current state
810
+ let currentUser = {
811
+ id: 5,
812
+ name: "User5",
813
+ avatar: "https://i.pravatar.cc/150?img=5",
814
+ balance: 1240,
815
+ mined: 0,
816
+ points: 0
817
+ };
818
+
819
+ let blockPixels = generateInitialBlock(10, 10);
820
+
821
+ // Initialize the game
822
+ document.addEventListener('DOMContentLoaded', function() {
823
+ renderCanvas();
824
+ renderBlockLeaderboard();
825
+ renderGlobalLeaderboard();
826
+ renderBlocksHistory();
827
+
828
+ // Simulate some mined pixels (for demo purposes)
829
+ setTimeout(() => {
830
+ simulateMinedPixels();
831
+ }, 1000);
832
+ });
833
+
834
+ // Generate initial block with given width and height
835
+ function generateInitialBlock(width, height) {
836
+ const pixels = [];
837
+ const total = width * height;
838
+ const minedCount = Math.floor(total * 0.76); // 76% mined
839
+
840
+ // Create empty pixel grid
841
+ for (let y = 0; y < height; y++) {
842
+ const row = [];
843
+ for (let x = 0; x < width; x++) {
844
+ row.push({
845
+ x,
846
+ y,
847
+ mined: false,
848
+ type: 'common',
849
+ miner: null,
850
+ value: 0
851
+ });
852
+ }
853
+ pixels.push(row);
854
+ }
855
+
856
+ // Mark some pixels as mined (for demo)
857
+ for (let i = 0; i < minedCount; i++) {
858
+ const x = Math.floor(Math.random() * width);
859
+ const y = Math.floor(Math.random() * height);
860
+
861
+ if (!pixels[y][x].mined) {
862
+ const rand = Math.random() * 100;
863
+ let type = 'common';
864
+ let value = config.rewards.common;
865
+
866
+ if (rand > 99.5) {
867
+ type = 'diamond';
868
+ value = config.rewards.diamond;
869
+ } else if (rand > 97.5) {
870
+ type = 'gold';
871
+ value = config.rewards.gold;
872
+ } else if (rand > 90) {
873
+ type = 'silver';
874
+ value = config.rewards.silver;
875
+ }
876
+
877
+ const miner = sampleUsers[Math.floor(Math.random() * sampleUsers.length)];
878
+
879
+ pixels[y][x] = {
880
+ x,
881
+ y,
882
+ mined: true,
883
+ type,
884
+ miner,
885
+ value
886
+ };
887
+ } else {
888
+ i--; // Try again if this pixel is already mined
889
+ }
890
+ }
891
+
892
+ return pixels;
893
+ }
894
+
895
+ // Render the pixel canvas
896
+ function renderCanvas() {
897
+ const canvas = document.getElementById('pixelCanvas');
898
+ canvas.innerHTML = '';
899
+
900
+ const width = blockPixels[0].length;
901
+ const height = blockPixels.length;
902
+
903
+ canvas.style.gridTemplateColumns = `repeat(${width}, 1fr)`;
904
+ canvas.style.gridTemplateRows = `repeat(${height}, 1fr)`;
905
+
906
+ blockPixels.forEach(row => {
907
+ row.forEach(pixel => {
908
+ const pixelEl = document.createElement('div');
909
+ pixelEl.className = 'pixel' + (pixel.mined ? ` mined ${pixel.type}` : '');
910
+
911
+ if (pixel.mined) {
912
+ pixelEl.innerHTML = `<div class="pixel-value">${pixel.value}</div>`;
913
+
914
+ if (pixel.miner.id === currentUser.id) {
915
+ pixelEl.style.boxShadow = 'inset 0 0 0 2px var(--primary-color)';
916
+ }
917
+ }
918
+
919
+ canvas.appendChild(pixelEl);
920
+ });
921
+ });
922
+ }
923
+
924
+ // Simulate some mined pixels (for demo)
925
+ function simulateMinedPixels() {
926
+ const width = blockPixels[0].length;
927
+ const height = blockPixels.length;
928
+ const unmined = [];
929
+
930
+ // Find all unmined pixels
931
+ for (let y = 0; y < height; y++) {
932
+ for (let x = 0; x < width; x++) {
933
+ if (!blockPixels[y][x].mined) {
934
+ unmined.push({x, y});
935
+ }
936
+ }
937
+ }
938
+
939
+ // "Mine" a few pixels
940
+ for (let i = 0; i < 3; i++) {
941
+ if (unmined.length === 0) break;
942
+
943
+ const idx = Math.floor(Math.random() * unmined.length);
944
+ const {x, y} = unmined[idx];
945
+ unmined.splice(idx, 1);
946
+
947
+ const rand = Math.random() * 100;
948
+ let type = 'common';
949
+ let value = config.rewards.common;
950
+
951
+ if (rand > 99.5) {
952
+ type = 'diamond';
953
+ value = config.rewards.diamond;
954
+ } else if (rand > 97.5) {
955
+ type = 'gold';
956
+ value = config.rewards.gold;
957
+ } else if (rand > 90) {
958
+ type = 'silver';
959
+ value = config.rewards.silver;
960
+ }
961
+
962
+ const miner = sampleUsers[Math.floor(Math.random() * sampleUsers.length)];
963
+ blockPixels[y][x] = {x, y, mined: true, type, miner, value};
964
+
965
+ // Animate the pixel
966
+ setTimeout(() => {
967
+ const canvas = document.getElementById('pixelCanvas');
968
+ const pixelEl = canvas.children[y * width + x];
969
+ pixelEl.className = 'pixel mined ' + type + ' reveal';
970
+ pixelEl.innerHTML = `<div class="pixel-value">${value}</div>`;
971
+
972
+ if (miner.id === currentUser.id) {
973
+ pixelEl.style.boxShadow = 'inset 0 0 0 2px var(--primary-color)';
974
+ showNotification(`Вы получили ${value} ПИКС!`, type);
975
+ }
976
+ }, i * 300);
977
+ }
978
+
979
+ // Update progress
980
+ updateProgress();
981
+ }
982
+
983
+ // Mine a pixel
984
+ function minePixel() {
985
+ const btn = document.getElementById('mineBtn');
986
+ btn.disabled = true;
987
+ btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Добыча...';
988
+
989
+ // Simulate mining delay
990
+ setTimeout(() => {
991
+ const width = blockPixels[0].length;
992
+ const height = blockPixels.length;
993
+ const unmined = [];
994
+
995
+ // Find all unmined pixels
996
+ for (let y = 0; y < height; y++) {
997
+ for (let x = 0; x < width; x++) {
998
+ if (!blockPixels[y][x].mined) {
999
+ unmined.push({x, y});
1000
+ }
1001
+ }
1002
+ }
1003
+
1004
+ if (unmined.length === 0) {
1005
+ // Block is completed
1006
+ alert('Этот блок уже полностью добыт!');
1007
+ btn.disabled = false;
1008
+ btn.innerHTML = '<i class="fas fa-hammer"></i> Добыть Пиксель';
1009
+ return;
1010
+ }
1011
+
1012
+ // Randomly select a pixel to mine
1013
+ const idx = Math.floor(Math.random() * unmined.length);
1014
+ const {x, y} = unmined[idx];
1015
+
1016
+ // Determine pixel type
1017
+ const rand = Math.random() * 100;
1018
+ let type = 'common';
1019
+ let value = config.rewards.common;
1020
+
1021
+ if (rand > 99.5) {
1022
+ type = 'diamond';
1023
+ value = config.rewards.diamond;
1024
+ } else if (rand > 97.5) {
1025
+ type = 'gold';
1026
+ value = config.rewards.gold;
1027
+ } else if (rand > 90) {
1028
+ type = 'silver';
1029
+ value = config.rewards.silver;
1030
+ }
1031
+
1032
+ // Mine the pixel
1033
+ blockPixels[y][x] = {
1034
+ x,
1035
+ y,
1036
+ mined: true,
1037
+ type,
1038
+ miner: currentUser,
1039
+ value
1040
+ };
1041
+
1042
+ // Update user stats
1043
+ currentUser.balance += value;
1044
+ currentUser.mined++;
1045
+ currentUser.points += value;
1046
+
1047
+ // Update UI
1048
+ updateUserBalance();
1049
+ updateProgress();
1050
+
1051
+ const canvas = document.getElementById('pixelCanvas');
1052
+ const pixelEl = canvas.children[y * width + x];
1053
+ pixelEl.className = 'pixel mined ' + type + ' reveal';
1054
+ pixelEl.innerHTML = `<div class="pixel-value">${value}</div>`;
1055
+ pixelEl.style.boxShadow = 'inset 0 0 0 2px var(--primary-color)';
1056
+
1057
+ // Show notification
1058
+ showNotification(`Вы получили ${value} ПИКС!`, type);
1059
+
1060
+ // Update leaderboard
1061
+ renderBlockLeaderboard();
1062
+
1063
+ // Re-enable button
1064
+ btn.disabled = false;
1065
+ btn.innerHTML = '<i class="fas fa-hammer"></i> Добыть Пиксель';
1066
+
1067
+ // Check if block is completed
1068
+ if (unmined.length === 1) { // We just mined the last one
1069
+ setTimeout(() => {
1070
+ alert(`Блок #${config.currentBlock} завершен! Вы заработали ${currentUser.points} ПИКС в этом блоке.`);
1071
+ // Here you would typically move to the next block
1072
+ }, 500);
1073
+ }
1074
+
1075
+ }, 1000);
1076
+ }
1077
+
1078
+ // Update mining progress
1079
+ function updateProgress() {
1080
+ const width = blockPixels[0].length;
1081
+ const height = blockPixels.length;
1082
+ let mined = 0;
1083
+
1084
+ for (let y = 0; y < height; y++) {
1085
+ for (let x = 0; x < width; x++) {
1086
+ if (blockPixels[y][x].mined) mined++;
1087
+ }
1088
+ }
1089
+
1090
+ config.minedPixels = mined;
1091
+ // In a real app, you would update the progress display here
1092
+ }
1093
+
1094
+ // Update user balance display
1095
+ function updateUserBalance() {
1096
+ document.getElementById('userBalance').textContent = currentUser.balance.toLocaleString();
1097
+ }
1098
+
1099
+ // Render block leaderboard
1100
+ function renderBlockLeaderboard() {
1101
+ const leaderboard = document.getElementById('blockLeaderboard');
1102
+ leaderboard.innerHTML = '';
1103
+
1104
+ // Sort users by points in this block
1105
+ const sortedUsers = [...sampleUsers].sort((a, b) => b.points - a.points);
1106
+
1107
+ sortedUsers.forEach((user, index) => {
1108
+ const row = document.createElement('tr');
1109
+
1110
+ if (user.id === currentUser.id) {
1111
+ row.style.backgroundColor = 'rgba(78, 204, 163, 0.1)';
1112
+ }
1113
+
1114
+ row.innerHTML = `
1115
+ <td class="rank">${index + 1}</td>
1116
+ <td class="user">
1117
+ <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
1118
+ ${user.name} ${user.id === currentUser.id ? '<span style="color: var(--primary-color)">(Вы)</span>' : ''}
1119
+ </td>
1120
+ <td>${user.pixels}</td>
1121
+ <td class="pix">
1122
+ <i class="fas fa-coins"></i> ${user.points}
1123
+ </td>
1124
+ `;
1125
+
1126
+ leaderboard.appendChild(row);
1127
+ });
1128
+ }
1129
+
1130
+ // Render global leaderboard
1131
+ function renderGlobalLeaderboard() {
1132
+ const leaderboard = document.getElementById('globalLeaderboard');
1133
+ leaderboard.innerHTML = '';
1134
+
1135
+ globalLeaders.forEach((user, index) => {
1136
+ const row = document.createElement('tr');
1137
+
1138
+ if (user.id === currentUser.id) {
1139
+ row.style.backgroundColor = 'rgba(78, 204, 163, 0.1)';
1140
+ }
1141
+
1142
+ row.innerHTML = `
1143
+ <td class="rank">${index + 1}</td>
1144
+ <td class="user">
1145
+ <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
1146
+ ${user.name} ${user.id === currentUser.id ? '<span style="color: var(--primary-color)">(Вы)</span>' : ''}
1147
+ </td>
1148
+ <td>${user.blocks}</td>
1149
+ <td class="pix">
1150
+ <i class="fas fa-coins"></i> ${user.points.toLocaleString()}
1151
+ </td>
1152
+ `;
1153
+
1154
+ leaderboard.appendChild(row);
1155
+ });
1156
+ }
1157
+
1158
+ // Render blocks history
1159
+ function renderBlocksHistory() {
1160
+ const grid = document.getElementById('blocksGrid');
1161
+ grid.innerHTML = '';
1162
+
1163
+ blocksHistory.forEach(block => {
1164
+ const blockEl = document.createElement('div');
1165
+ blockEl.className = 'block-card';
1166
+ blockEl.onclick = () => openBlockModal(block);
1167
+
1168
+ // Create block preview
1169
+ const preview = document.createElement('div');
1170
+ preview.className = 'block-preview';
1171
+
1172
+ // Create a small grid to show the block
1173
+ const blockGrid = document.createElement('div');
1174
+ blockGrid.className = 'pixel-canvas';
1175
+ blockGrid.style.width = '100%';
1176
+ blockGrid.style.height = '100%';
1177
+ blockGrid.style.gridTemplateColumns = `repeat(${block.image.width}, 1fr)`;
1178
+ blockGrid.style.gridTemplateRows = `repeat(${block.image.height}, 1fr)`;
1179
+
1180
+ // Add pixels to the grid
1181
+ block.image.pixels.forEach((row, y) => {
1182
+ row.forEach((type, x) => {
1183
+ const pixel = document.createElement('div');
1184
+ pixel.className = 'pixel mined ' + type;
1185
+ pixel.style.width = '100%';
1186
+ pixel.style.height = '100%';
1187
+ blockGrid.appendChild(pixel);
1188
+ });
1189
+ });
1190
+
1191
+ preview.appendChild(blockGrid);
1192
+ blockEl.appendChild(preview);
1193
+
1194
+ // Add block info
1195
+ const info = document.createElement('div');
1196
+ info.className = 'block-info-overlay';
1197
+ info.innerHTML = `
1198
+ <div class="block-number">Блок #${block.id}</div>
1199
+ <div class="block-creator">Создатель: ${block.creator}</div>
1200
+ `;
1201
+ blockEl.appendChild(info);
1202
+
1203
+ grid.appendChild(blockEl);
1204
+ });
1205
+ }
1206
+
1207
+ // Show notification
1208
+ function showNotification(message, type) {
1209
+ const notif = document.getElementById('notification');
1210
+ const messageEl = notif.querySelector('.notification-message');
1211
+
1212
+ notif.style.backgroundColor = type === 'diamond' ? 'var(--diamond-color)' :
1213
+ type === 'gold' ? 'var(--gold-color)' :
1214
+ type === 'silver' ? 'var(--silver-color)' : 'var(--primary-color)';
1215
+
1216
+ if (type === 'diamond' || type === 'gold' || type === 'silver') {
1217
+ notif.style.color = '#000';
1218
+ messageEl.innerHTML = `Редкий пиксель! ${message} <span class="badge ${type}">${type === 'silver' ? 'Серебро' : type === 'gold' ? 'Золото' : 'Бриллиант'}</span>`;
1219
+ } else {
1220
+ notif.style.color = '#fff';
1221
+ messageEl.innerHTML = message;
1222
+ }
1223
+
1224
+ notif.classList.add('show');
1225
+
1226
+ setTimeout(() => {
1227
+ notif.classList.remove('show');
1228
+ }, 3000);
1229
+ }
1230
+
1231
+ // Tab switching
1232
+ function showTab(tabName) {
1233
+ // Hide all tabs
1234
+ document.querySelectorAll('.tab-content').forEach(tab => {
1235
+ tab.style.display = 'none';
1236
+ });
1237
+
1238
+ // Deactivate all tab buttons
1239
+ document.querySelectorAll('.tab').forEach(tab => {
1240
+ tab.classList.remove('active');
1241
+ });
1242
+
1243
+ // Show selected tab
1244
+ document.getElementById(`${tabName}-tab`).style.display = 'block';
1245
+
1246
+ // Activate selected tab button
1247
+ const tabButtons = document.querySelectorAll('.tab');
1248
+ let found = false;
1249
+
1250
+ tabButtons.forEach(tab => {
1251
+ if (tab.textContent.includes(tabName === 'mining' ? 'Майнинг' :
1252
+ tabName === 'profile' ? 'Профиль' :
1253
+ tabName === 'wallet' ? 'Кошелек' :
1254
+ tabName === 'leaderboard' ? 'Топ' :
1255
+ 'История')) {
1256
+ tab.classList.add('active');
1257
+ found = true;
1258
+ }
1259
+ });
1260
+
1261
+ if (!found && tabButtons.length > 0) {
1262
+ tabButtons[0].classList.add('active');
1263
+ }
1264
+
1265
+ // For leaderboard tab, ensure it's rendered (in case of updates)
1266
+ if (tabName === 'leaderboard') {
1267
+ renderGlobalLeaderboard();
1268
+ }
1269
+ }
1270
+
1271
+ // Open block modal
1272
+ function openBlockModal(block) {
1273
+ const modal = document.getElementById('blockModal');
1274
+ const preview = document.getElementById('modalBlockPreview');
1275
+
1276
+ // Set block info
1277
+ document.getElementById('modalBlockNumber').textContent = block.id;
1278
+ document.getElementById('modalCreator').textContent = block.creator;
1279
+ document.getElementById('modalDate').textContent = block.date;
1280
+ document.getElementById('modalPixels').textContent = block.pixels;
1281
+ document.getElementById('modalRare').textContent = block.rare;
1282
+
1283
+ // Create block preview
1284
+ preview.innerHTML = '';
1285
+ preview.style.gridTemplateColumns = `repeat(${block.image.width}, 1fr)`;
1286
+ preview.style.gridTemplateRows = `repeat(${block.image.height}, 1fr)`;
1287
+
1288
+ block.image.pixels.forEach((row, y) => {
1289
+ row.forEach((type, x) => {
1290
+ const pixel = document.createElement('div');
1291
+ pixel.className = 'pixel mined ' + type;
1292
+ pixel.style.width = '100%';
1293
+ pixel.style.height = '100%';
1294
+ preview.appendChild(pixel);
1295
+ });
1296
+ });
1297
+
1298
+ // Update leaderboard in modal (mock data)
1299
+ const modalLeaderboard = document.getElementById('modalLeaderboard');
1300
+ modalLeaderboard.innerHTML = '';
1301
+
1302
+ const topMiners = [
1303
+ { name: block.creator, avatar: "https://i.pravatar.cc/150?img=6", pixels: Math.floor(block.pixels * 0.3), points: 1250 },
1304
+ { name: "OtherUser", avatar: "https://i.pravatar.cc/150?img=3", pixels: Math.floor(block.pixels * 0.2), points: 850 },
1305
+ { name: "PixCollector", avatar: "https://i.pravatar.cc/150?img=7", pixels: Math.floor(block.pixels * 0.15), points: 640 },
1306
+ { name: "Miner123", avatar: "https://i.pravatar.cc/150?img=4", pixels: Math.floor(block.pixels * 0.1), points: 420 }
1307
+ ];
1308
+
1309
+ topMiners.forEach((user, index) => {
1310
+ const row = document.createElement('tr');
1311
+
1312
+ row.innerHTML = `
1313
+ <td class="rank">${index + 1}</td>
1314
+ <td class="user">
1315
+ <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
1316
+ ${user.name}
1317
+ </td>
1318
+ <td>${user.pixels}</td>
1319
+ <td class="pix">
1320
+ <i class="fas fa-coins"></i> ${user.points}
1321
+ </td>
1322
+ `;
1323
+
1324
+ modalLeaderboard.appendChild(row);
1325
+ });
1326
+
1327
+ modal.style.display = 'flex';
1328
+ }
1329
+
1330
+ // Close modal
1331
+ function closeModal(modalId) {
1332
+ document.getElementById(modalId).style.display = 'none';
1333
+ }
1334
+ </script>
1335
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1336
+ </html>