Hugging Face's logo

Spaces:
samirerty
/
anycoder-8207cd23
Running

App Files Community
samirerty commited on
Commit
ba6dc05
·
verified ·
1 Parent(s): 8f8bdd7

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1305 -19
index.html CHANGED
@@ -1,19 +1,1305 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>مار و پله | Snakes & Ladders</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ /* ============================================
12
+ CSS CUSTOM PROPERTIES & DESIGN TOKENS
13
+ ============================================ */
14
+ :root {
15
+ /* Color Palette - Minimal & Elegant */
16
+ --primary: #4A6FA5;
17
+ --primary-dark: #166088;
18
+ --primary-light: #6B8CBE;
19
+ --background: #F8F9FA;
20
+ --surface: #FFFFFF;
21
+ --text-primary: #2D3047;
22
+ --text-secondary: #6C757D;
23
+ --success: #6BA368;
24
+ --warning: #E54B4B;
25
+ --accent-purple: #8B5CF6;
26
+ --accent-orange: #F59E0B;
27
+
28
+ /* Shadows - Soft & Layered */
29
+ --shadow-sm: 0 1px 2px rgba(45, 48, 71, 0.05);
30
+ --shadow-md: 0 4px 6px -1px rgba(45, 48, 71, 0.1), 0 2px 4px -1px rgba(45, 48, 71, 0.06);
31
+ --shadow-lg: 0 10px 15px -3px rgba(45, 48, 71, 0.1), 0 4px 6px -2px rgba(45, 48, 71, 0.05);
32
+ --shadow-xl: 0 20px 25px -5px rgba(45, 48, 71, 0.1), 0 10px 10px -5px rgba(45, 48, 71, 0.04);
33
+ --shadow-dice: 0 8px 16px rgba(74, 111, 165, 0.3);
34
+
35
+ /* Spacing Scale */
36
+ --space-xs: 0.25rem;
37
+ --space-sm: 0.5rem;
38
+ --space-md: 1rem;
39
+ --space-lg: 1.5rem;
40
+ --space-xl: 2rem;
41
+ --space-2xl: 3rem;
42
+
43
+ /* Border Radius */
44
+ --radius-sm: 8px;
45
+ --radius-md: 12px;
46
+ --radius-lg: 16px;
47
+ --radius-xl: 24px;
48
+ --radius-full: 9999px;
49
+
50
+ /* Transitions */
51
+ --transition-fast: 150ms ease;
52
+ --transition-normal: 250ms ease;
53
+ --transition-slow: 400ms ease;
54
+
55
+ /* Typography */
56
+ --font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
57
+ }
58
+
59
+ /* Dark Mode Variables */
60
+ [data-theme="dark"] {
61
+ --background: #1a1a2e;
62
+ --surface: #16213e;
63
+ --text-primary: #e94560;
64
+ --text-secondary: #a0a0a0;
65
+ --primary: #e94560;
66
+ --primary-dark: #c73e54;
67
+ --primary-light: #ff6b6b;
68
+ }
69
+
70
+ /* ============================================
71
+ RESET & BASE STYLES
72
+ ============================================ */
73
+ *, *::before, *::after {
74
+ margin: 0;
75
+ padding: 0;
76
+ box-sizing: border-box;
77
+ }
78
+
79
+ html {
80
+ font-size: 16px;
81
+ scroll-behavior: smooth;
82
+ }
83
+
84
+ body {
85
+ font-family: var(--font-family);
86
+ background: var(--background);
87
+ color: var(--text-primary);
88
+ min-height: 100vh;
89
+ line-height: 1.6;
90
+ overflow-x: hidden;
91
+ }
92
+
93
+ /* ============================================
94
+ UTILITY CLASSES
95
+ ============================================ */
96
+ .container {
97
+ max-width: 1200px;
98
+ margin: 0 auto;
99
+ padding: var(--space-lg);
100
+ }
101
+
102
+ .flex {
103
+ display: flex;
104
+ }
105
+
106
+ .flex-col {
107
+ flex-direction: column;
108
+ }
109
+
110
+ .items-center {
111
+ align-items: center;
112
+ }
113
+
114
+ .justify-center {
115
+ justify-content: center;
116
+ }
117
+
118
+ .gap-sm { gap: var(--space-sm); }
119
+ .gap-md { gap: var(--space-md); }
120
+ .gap-lg { gap: var(--space-lg); }
121
+
122
+ .text-center { text-align: center; }
123
+
124
+ /* ============================================
125
+ HEADER & BRANDING
126
+ ============================================ */
127
+ .header {
128
+ position: fixed;
129
+ top: 0;
130
+ left: 0;
131
+ right: 0;
132
+ z-index: 100;
133
+ background: rgba(248, 249, 250, 0.95);
134
+ backdrop-filter: blur(10px);
135
+ border-bottom: 1px solid rgba(74, 111, 165, 0.1);
136
+ padding: var(--space-md) var(--space-lg);
137
+ }
138
+
139
+ [data-theme="dark"] .header {
140
+ background: rgba(22, 33, 62, 0.95);
141
+ }
142
+
143
+ .header-content {
144
+ max-width: 1200px;
145
+ margin: 0 auto;
146
+ display: flex;
147
+ justify-content: space-between;
148
+ align-items: center;
149
+ }
150
+
151
+ .logo {
152
+ display: flex;
153
+ align-items: center;
154
+ gap: var(--space-sm);
155
+ font-size: 1.5rem;
156
+ font-weight: 700;
157
+ color: var(--primary);
158
+ }
159
+
160
+ .logo-icon {
161
+ width: 40px;
162
+ height: 40px;
163
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
164
+ border-radius: var(--radius-md);
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ color: white;
169
+ font-size: 1.25rem;
170
+ }
171
+
172
+ .built-with {
173
+ font-size: 0.75rem;
174
+ color: var(--text-secondary);
175
+ text-decoration: none;
176
+ padding: var(--space-xs) var(--space-md);
177
+ background: var(--surface);
178
+ border-radius: var(--radius-full);
179
+ box-shadow: var(--shadow-sm);
180
+ transition: all var(--transition-fast);
181
+ }
182
+
183
+ .built-with:hover {
184
+ color: var(--primary);
185
+ box-shadow: var(--shadow-md);
186
+ transform: translateY(-1px);
187
+ }
188
+
189
+ /* Theme Toggle */
190
+ .theme-toggle {
191
+ background: var(--surface);
192
+ border: none;
193
+ width: 44px;
194
+ height: 44px;
195
+ border-radius: var(--radius-full);
196
+ cursor: pointer;
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ box-shadow: var(--shadow-sm);
201
+ transition: all var(--transition-fast);
202
+ }
203
+
204
+ .theme-toggle:hover {
205
+ box-shadow: var(--shadow-md);
206
+ transform: scale(1.05);
207
+ }
208
+
209
+ /* ============================================
210
+ SCREEN MANAGEMENT
211
+ ============================================ */
212
+ .screen {
213
+ display: none;
214
+ min-height: 100vh;
215
+ padding-top: 80px;
216
+ animation: fadeIn 0.5s ease;
217
+ }
218
+
219
+ .screen.active {
220
+ display: flex;
221
+ flex-direction: column;
222
+ }
223
+
224
+ @keyframes fadeIn {
225
+ from { opacity: 0; transform: translateY(20px); }
226
+ to { opacity: 1; transform: translateY(0); }
227
+ }
228
+
229
+ /* ============================================
230
+ HOME SCREEN
231
+ ============================================ */
232
+ .home-screen {
233
+ justify-content: center;
234
+ align-items: center;
235
+ text-align: center;
236
+ }
237
+
238
+ .hero {
239
+ max-width: 600px;
240
+ }
241
+
242
+ .hero-title {
243
+ font-size: clamp(2.5rem, 8vw, 4rem);
244
+ font-weight: 800;
245
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
246
+ -webkit-background-clip: text;
247
+ -webkit-text-fill-color: transparent;
248
+ margin-bottom: var(--space-md);
249
+ line-height: 1.2;
250
+ }
251
+
252
+ .hero-subtitle {
253
+ font-size: 1.125rem;
254
+ color: var(--text-secondary);
255
+ margin-bottom: var(--space-2xl);
256
+ }
257
+
258
+ .game-preview {
259
+ width: 200px;
260
+ height: 200px;
261
+ margin: 0 auto var(--space-2xl);
262
+ position: relative;
263
+ }
264
+
265
+ .preview-board {
266
+ width: 100%;
267
+ height: 100%;
268
+ background: var(--surface);
269
+ border-radius: var(--radius-lg);
270
+ box-shadow: var(--shadow-xl);
271
+ display: grid;
272
+ grid-template-columns: repeat(5, 1fr);
273
+ grid-template-rows: repeat(5, 1fr);
274
+ gap: 4px;
275
+ padding: var(--space-md);
276
+ animation: float 3s ease-in-out infinite;
277
+ }
278
+
279
+ @keyframes float {
280
+ 0%, 100% { transform: translateY(0); }
281
+ 50% { transform: translateY(-10px); }
282
+ }
283
+
284
+ .preview-cell {
285
+ background: linear-gradient(135deg, var(--primary-light), var(--primary));
286
+ border-radius: var(--radius-sm);
287
+ opacity: 0.3;
288
+ }
289
+
290
+ .preview-cell:nth-child(3n) {
291
+ opacity: 0.6;
292
+ }
293
+
294
+ /* ============================================
295
+ BUTTONS
296
+ ============================================ */
297
+ .btn {
298
+ display: inline-flex;
299
+ align-items: center;
300
+ justify-content: center;
301
+ gap: var(--space-sm);
302
+ padding: var(--space-md) var(--space-xl);
303
+ font-family: var(--font-family);
304
+ font-size: 1rem;
305
+ font-weight: 600;
306
+ border: none;
307
+ border-radius: var(--radius-lg);
308
+ cursor: pointer;
309
+ transition: all var(--transition-fast);
310
+ position: relative;
311
+ overflow: hidden;
312
+ }
313
+
314
+ .btn::before {
315
+ content: '';
316
+ position: absolute;
317
+ inset: 0;
318
+ background: linear-gradient(135deg, transparent, rgba(255,255,255,0.2), transparent);
319
+ transform: translateX(-100%);
320
+ transition: transform 0.5s;
321
+ }
322
+
323
+ .btn:hover::before {
324
+ transform: translateX(100%);
325
+ }
326
+
327
+ .btn-primary {
328
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
329
+ color: white;
330
+ box-shadow: var(--shadow-dice);
331
+ }
332
+
333
+ .btn-primary:hover {
334
+ transform: translateY(-2px);
335
+ box-shadow: 0 12px 24px rgba(74, 111, 165, 0.4);
336
+ }
337
+
338
+ .btn-secondary {
339
+ background: var(--surface);
340
+ color: var(--text-primary);
341
+ box-shadow: var(--shadow-md);
342
+ }
343
+
344
+ .btn-secondary:hover {
345
+ background: var(--background);
346
+ transform: translateY(-2px);
347
+ }
348
+
349
+ .btn:disabled {
350
+ opacity: 0.5;
351
+ cursor: not-allowed;
352
+ transform: none !important;
353
+ }
354
+
355
+ /* ============================================
356
+ SETUP SCREEN
357
+ ============================================ */
358
+ .setup-card {
359
+ background: var(--surface);
360
+ border-radius: var(--radius-xl);
361
+ padding: var(--space-2xl);
362
+ box-shadow: var(--shadow-lg);
363
+ max-width: 500px;
364
+ width: 100%;
365
+ }
366
+
367
+ .setup-title {
368
+ font-size: 1.5rem;
369
+ font-weight: 700;
370
+ margin-bottom: var(--space-lg);
371
+ text-align: center;
372
+ }
373
+
374
+ .form-group {
375
+ margin-bottom: var(--space-lg);
376
+ }
377
+
378
+ .form-label {
379
+ display: block;
380
+ font-size: 0.875rem;
381
+ font-weight: 500;
382
+ color: var(--text-secondary);
383
+ margin-bottom: var(--space-sm);
384
+ }
385
+
386
+ .form-input {
387
+ width: 100%;
388
+ padding: var(--space-md);
389
+ font-family: var(--font-family);
390
+ font-size: 1rem;
391
+ border: 2px solid rgba(74, 111, 165, 0.1);
392
+ border-radius: var(--radius-md);
393
+ background: var(--background);
394
+ color: var(--text-primary);
395
+ transition: all var(--transition-fast);
396
+ }
397
+
398
+ .form-input:focus {
399
+ outline: none;
400
+ border-color: var(--primary);
401
+ box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
402
+ }
403
+
404
+ .player-inputs {
405
+ display: flex;
406
+ flex-direction: column;
407
+ gap: var(--space-md);
408
+ }
409
+
410
+ .player-input-row {
411
+ display: flex;
412
+ align-items: center;
413
+ gap: var(--space-md);
414
+ padding: var(--space-md);
415
+ background: var(--background);
416
+ border-radius: var(--radius-md);
417
+ transition: all var(--transition-fast);
418
+ }
419
+
420
+ .player-input-row.active {
421
+ background: linear-gradient(135deg, rgba(74, 111, 165, 0.1), rgba(74, 111, 165, 0.05));
422
+ border: 2px solid var(--primary);
423
+ }
424
+
425
+ .player-color {
426
+ width: 32px;
427
+ height: 32px;
428
+ border-radius: var(--radius-full);
429
+ flex-shrink: 0;
430
+ box-shadow: var(--shadow-sm);
431
+ }
432
+
433
+ .player-color-1 { background: linear-gradient(135deg, #4A6FA5, #166088); }
434
+ .player-color-2 { background: linear-gradient(135deg, #E54B4B, #C73E54); }
435
+ .player-color-3 { background: linear-gradient(135deg, #6BA368, #4A7A47); }
436
+ .player-color-4 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
437
+
438
+ .player-count-selector {
439
+ display: flex;
440
+ gap: var(--space-sm);
441
+ justify-content: center;
442
+ margin-bottom: var(--space-lg);
443
+ }
444
+
445
+ .count-btn {
446
+ width: 48px;
447
+ height: 48px;
448
+ border-radius: var(--radius-md);
449
+ border: 2px solid rgba(74, 111, 165, 0.2);
450
+ background: var(--surface);
451
+ font-size: 1.25rem;
452
+ font-weight: 700;
453
+ color: var(--text-secondary);
454
+ cursor: pointer;
455
+ transition: all var(--transition-fast);
456
+ }
457
+
458
+ .count-btn:hover, .count-btn.active {
459
+ border-color: var(--primary);
460
+ background: var(--primary);
461
+ color: white;
462
+ }
463
+
464
+ /* ============================================
465
+ GAME SCREEN
466
+ ============================================ */
467
+ .game-layout {
468
+ display: grid;
469
+ grid-template-columns: 1fr;
470
+ gap: var(--space-lg);
471
+ max-width: 1400px;
472
+ margin: 0 auto;
473
+ padding: var(--space-lg);
474
+ }
475
+
476
+ @media (min-width: 1024px) {
477
+ .game-layout {
478
+ grid-template-columns: 280px 1fr 280px;
479
+ align-items: start;
480
+ }
481
+ }
482
+
483
+ /* Game Board */
484
+ .board-container {
485
+ position: relative;
486
+ aspect-ratio: 1;
487
+ max-width: 600px;
488
+ margin: 0 auto;
489
+ width: 100%;
490
+ }
491
+
492
+ .game-board {
493
+ display: grid;
494
+ grid-template-columns: repeat(10, 1fr);
495
+ grid-template-rows: repeat(10, 1fr);
496
+ gap: 2px;
497
+ width: 100%;
498
+ height: 100%;
499
+ background: var(--surface);
500
+ border-radius: var(--radius-lg);
501
+ padding: var(--space-md);
502
+ box-shadow: var(--shadow-xl);
503
+ position: relative;
504
+ }
505
+
506
+ .cell {
507
+ position: relative;
508
+ border-radius: var(--radius-sm);
509
+ display: flex;
510
+ align-items: center;
511
+ justify-content: center;
512
+ font-size: clamp(0.625rem, 2vw, 0.875rem);
513
+ font-weight: 500;
514
+ color: var(--text-secondary);
515
+ transition: all var(--transition-fast);
516
+ overflow: hidden;
517
+ }
518
+
519
+ /* Checkerboard pattern */
520
+ .cell:nth-child(even) {
521
+ background: rgba(74, 111, 165, 0.05);
522
+ }
523
+
524
+ .cell:nth-child(odd) {
525
+ background: rgba(74, 111, 165, 0.02);
526
+ }
527
+
528
+ /* Special cells */
529
+ .cell.ladder-start {
530
+ background: linear-gradient(135deg, rgba(107, 163, 104, 0.2), rgba(107, 163, 104, 0.1));
531
+ }
532
+
533
+ .cell.ladder-end {
534
+ background: linear-gradient(135deg, rgba(107, 163, 104, 0.3), rgba(107, 163, 104, 0.2));
535
+ }
536
+
537
+ .cell.snake-start {
538
+ background: linear-gradient(135deg, rgba(229, 75, 75, 0.2), rgba(229, 75, 75, 0.1));
539
+ }
540
+
541
+ .cell.snake-end {
542
+ background: linear-gradient(135deg, rgba(229, 75, 75, 0.1), rgba(229, 75, 75, 0.05));
543
+ }
544
+
545
+ .cell-content {
546
+ position: absolute;
547
+ inset: 0;
548
+ display: flex;
549
+ align-items: center;
550
+ justify-content: center;
551
+ }
552
+
553
+ /* Snake and Ladder SVG overlays */
554
+ .board-overlay {
555
+ position: absolute;
556
+ inset: var(--space-md);
557
+ pointer-events: none;
558
+ z-index: 10;
559
+ }
560
+
561
+ .snake-path, .ladder-path {
562
+ fill: none;
563
+ stroke-width: 4;
564
+ stroke-linecap: round;
565
+ }
566
+
567
+ .snake-path {
568
+ stroke: var(--warning);
569
+ filter: drop-shadow(0 2px 4px rgba(229, 75, 75, 0.3));
570
+ }
571
+
572
+ .ladder-path {
573
+ stroke: var(--success);
574
+ filter: drop-shadow(0 2px 4px rgba(107, 163, 104, 0.3));
575
+ }
576
+
577
+ .ladder-rung {
578
+ stroke: var(--success);
579
+ stroke-width: 2;
580
+ }
581
+
582
+ /* Player Tokens */
583
+ .token {
584
+ position: absolute;
585
+ width: clamp(20px, 5vw, 32px);
586
+ height: clamp(20px, 5vw, 32px);
587
+ border-radius: 50%;
588
+ transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
589
+ z-index: 20;
590
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
591
+ display: flex;
592
+ align-items: center;
593
+ justify-content: center;
594
+ font-size: clamp(10px, 2.5vw, 14px);
595
+ color: white;
596
+ font-weight: 700;
597
+ }
598
+
599
+ .token::after {
600
+ content: '';
601
+ position: absolute;
602
+ inset: -3px;
603
+ border-radius: 50%;
604
+ border: 2px solid rgba(255,255,255,0.5);
605
+ }
606
+
607
+ .token-player-1 { background: linear-gradient(135deg, #4A6FA5, #166088); }
608
+ .token-player-2 { background: linear-gradient(135deg, #E54B4B, #C73E54); }
609
+ .token-player-3 { background: linear-gradient(135deg, #6BA368, #4A7A47); }
610
+ .token-player-4 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
611
+
612
+ .token.moving {
613
+ z-index: 30;
614
+ transform: scale(1.2);
615
+ }
616
+
617
+ /* Side Panels */
618
+ .side-panel {
619
+ background: var(--surface);
620
+ border-radius: var(--radius-xl);
621
+ padding: var(--space-lg);
622
+ box-shadow: var(--shadow-lg);
623
+ }
624
+
625
+ .panel-title {
626
+ font-size: 1rem;
627
+ font-weight: 600;
628
+ color: var(--text-secondary);
629
+ margin-bottom: var(--space-md);
630
+ text-transform: uppercase;
631
+ letter-spacing: 0.5px;
632
+ }
633
+
634
+ /* Player Info Cards */
635
+ .player-card {
636
+ display: flex;
637
+ align-items: center;
638
+ gap: var(--space-md);
639
+ padding: var(--space-md);
640
+ border-radius: var(--radius-md);
641
+ margin-bottom: var(--space-sm);
642
+ transition: all var(--transition-fast);
643
+ border: 2px solid transparent;
644
+ }
645
+
646
+ .player-card.active {
647
+ background: linear-gradient(135deg, rgba(74, 111, 165, 0.1), rgba(74, 111, 165, 0.05));
648
+ border-color: var(--primary);
649
+ box-shadow: var(--shadow-md);
650
+ }
651
+
652
+ .player-card.winner {
653
+ background: linear-gradient(135deg, rgba(107, 163, 104, 0.2), rgba(107, 163, 104, 0.1));
654
+ border-color: var(--success);
655
+ }
656
+
657
+ .player-avatar {
658
+ width: 48px;
659
+ height: 48px;
660
+ border-radius: var(--radius-full);
661
+ display: flex;
662
+ align-items: center;
663
+ justify-content: center;
664
+ font-size: 1.25rem;
665
+ color: white;
666
+ font-weight: 700;
667
+ flex-shrink: 0;
668
+ }
669
+
670
+ .player-info {
671
+ flex: 1;
672
+ }
673
+
674
+ .player-name {
675
+ font-weight: 600;
676
+ margin-bottom: var(--space-xs);
677
+ }
678
+
679
+ .player-stats {
680
+ font-size: 0.875rem;
681
+ color: var(--text-secondary);
682
+ }
683
+
684
+ .player-position {
685
+ font-size: 1.5rem;
686
+ font-weight: 700;
687
+ color: var(--primary);
688
+ }
689
+
690
+ /* Dice Section */
691
+ .dice-section {
692
+ text-align: center;
693
+ }
694
+
695
+ .dice-container {
696
+ width: 120px;
697
+ height: 120px;
698
+ margin: 0 auto var(--space-lg);
699
+ perspective: 600px;
700
+ }
701
+
702
+ .dice {
703
+ width: 100%;
704
+ height: 100%;
705
+ position: relative;
706
+ transform-style: preserve-3d;
707
+ transition: transform 0.6s ease;
708
+ }
709
+
710
+ .dice.rolling {
711
+ animation: rollDice 0.6s ease;
712
+ }
713
+
714
+ @keyframes rollDice {
715
+ 0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
716
+ 25% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
717
+ 50% { transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
718
+ 75% { transform: rotateX(1080deg) rotateY(540deg) rotateZ(270deg); }
719
+ 100% { transform: rotateX(1440deg) rotateY(720deg) rotateZ(360deg); }
720
+ }
721
+
722
+ .dice-face {
723
+ position: absolute;
724
+ width: 100%;
725
+ height: 100%;
726
+ background: var(--surface);
727
+ border-radius: var(--radius-lg);
728
+ box-shadow: var(--shadow-lg), inset 0 0 20px rgba(0,0,0,0.05);
729
+ display: grid;
730
+ grid-template-columns: repeat(3, 1fr);
731
+ grid-template-rows: repeat(3, 1fr);
732
+ padding: 16px;
733
+ backface-visibility: hidden;
734
+ }
735
+
736
+ .dice-face::before {
737
+ content: '';
738
+ position: absolute;
739
+ inset: 0;
740
+ border-radius: var(--radius-lg);
741
+ background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
742
+ }
743
+
744
+ .dot {
745
+ width: 20px;
746
+ height: 20px;
747
+ background: var(--text-primary);
748
+ border-radius: 50%;
749
+ align-self: center;
750
+ justify-self: center;
751
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
752
+ }
753
+
754
+ /* Dice face positions */
755
+ .dice-face:nth-child(1) { transform: translateZ(60px); }
756
+ .dice-face:nth-child(2) { transform: rotateY(90deg) translateZ(60px); }
757
+ .dice-face:nth-child(3) { transform: rotateY(180deg) translateZ(60px); }
758
+ .dice-face:nth-child(4) { transform: rotateY(-90deg) translateZ(60px); }
759
+ .dice-face:nth-child(5) { transform: rotateX(90deg) translateZ(60px); }
760
+ .dice-face:nth-child(6) { transform: rotateX(-90deg) translateZ(60px); }
761
+
762
+ /* Dot positions for each face */
763
+ .dice-face[data-face="1"] .dot:nth-child(1) { grid-area: 2 / 2; }
764
+
765
+ .dice-face[data-face="2"] .dot:nth-child(1) { grid-area: 1 / 1; }
766
+ .dice-face[data-face="2"] .dot:nth-child(2) { grid-area: 3 / 3; }
767
+
768
+ .dice-face[data-face="3"] .dot:nth-child(1) { grid-area: 1 / 1; }
769
+ .dice-face[data-face="3"] .dot:nth-child(2) { grid-area: 2 / 2; }
770
+ .dice-face[data-face="3"] .dot:nth-child(3) { grid-area: 3 / 3; }
771
+
772
+ .dice-face[data-face="4"] .dot:nth-child(1) { grid-area: 1 / 1; }
773
+ .dice-face[data-face="4"] .dot:nth-child(2) { grid-area: 1 / 3; }
774
+ .dice-face[data-face="4"] .dot:nth-child(3) { grid-area: 3 / 1; }
775
+ .dice-face[data-face="4"] .dot:nth-child(4) { grid-area: 3 / 3; }
776
+
777
+ .dice-face[data-face="5"] .dot:nth-child(1) { grid-area: 1 / 1; }
778
+ .dice-face[data-face="5"] .dot:nth-child(2) { grid-area: 1 / 3; }
779
+ .dice-face[data-face="5"] .dot:nth-child(3) { grid-area: 2 / 2; }
780
+ .dice-face[data-face="5"] .dot:nth-child(4) { grid-area: 3 / 1; }
781
+ .dice-face[data-face="5"] .dot:nth-child(5) { grid-area: 3 / 3; }
782
+
783
+ .dice-face[data-face="6"] .dot:nth-child(1) { grid-area: 1 / 1; }
784
+ .dice-face[data-face="6"] .dot:nth-child(2) { grid-area: 1 / 3; }
785
+ .dice-face[data-face="6"] .dot:nth-child(3) { grid-area: 2 / 1; }
786
+ .dice-face[data-face="6"] .dot:nth-child(4) { grid-area: 2 / 3; }
787
+ .dice-face[data-face="6"] .dot:nth-child(5) { grid-area: 3 / 1; }
788
+ .dice-face[data-face="6"] .dot:nth-child(6) { grid-area: 3 / 3; }
789
+
790
+ .turn-indicator {
791
+ display: flex;
792
+ align-items: center;
793
+ justify-content: center;
794
+ gap: var(--space-sm);
795
+ padding: var(--space-md);
796
+ background: var(--background);
797
+ border-radius: var(--radius-md);
798
+ margin-bottom: var(--space-md);
799
+ }
800
+
801
+ .turn-dot {
802
+ width: 12px;
803
+ height: 12px;
804
+ border-radius: 50%;
805
+ animation: pulse 1.5s ease infinite;
806
+ }
807
+
808
+ @keyframes pulse {
809
+ 0%, 100% { transform: scale(1); opacity: 1; }
810
+ 50% { transform: scale(1.2); opacity: 0.7; }
811
+ }
812
+
813
+ /* Move History */
814
+ .history-list {
815
+ max-height: 300px;
816
+ overflow-y: auto;
817
+ display: flex;
818
+ flex-direction: column;
819
+ gap: var(--space-sm);
820
+ }
821
+
822
+ .history-item {
823
+ display: flex;
824
+ align-items: center;
825
+ gap: var(--space-sm);
826
+ padding: var(--space-sm);
827
+ background: var(--background);
828
+ border-radius: var(--radius-sm);
829
+ font-size: 0.875rem;
830
+ animation: slideIn 0.3s ease;
831
+ }
832
+
833
+ @keyframes slideIn {
834
+ from { opacity: 0; transform: translateX(-20px); }
835
+ to { opacity: 1; transform: translateX(0); }
836
+ }
837
+
838
+ .history-dice {
839
+ width: 24px;
840
+ height: 24px;
841
+ background: var(--surface);
842
+ border-radius: var(--radius-sm);
843
+ display: flex;
844
+ align-items: center;
845
+ justify-content: center;
846
+ font-weight: 700;
847
+ font-size: 0.75rem;
848
+ box-shadow: var(--shadow-sm);
849
+ }
850
+
851
+ /* ============================================
852
+ MODALS & OVERLAYS
853
+ ============================================ */
854
+ .modal-overlay {
855
+ position: fixed;
856
+ inset: 0;
857
+ background: rgba(45, 48, 71, 0.8);
858
+ backdrop-filter: blur(4px);
859
+ display: none;
860
+ align-items: center;
861
+ justify-content: center;
862
+ z-index: 1000;
863
+ padding: var(--space-lg);
864
+ }
865
+
866
+ .modal-overlay.active {
867
+ display: flex;
868
+ animation: fadeIn 0.3s ease;
869
+ }
870
+
871
+ .modal {
872
+ background: var(--surface);
873
+ border-radius: var(--radius-xl);
874
+ padding: var(--space-2xl);
875
+ max-width: 400px;
876
+ width: 100%;
877
+ text-align: center;
878
+ box-shadow: var(--shadow-xl);
879
+ animation: scaleIn 0.3s ease;
880
+ }
881
+
882
+ @keyframes scaleIn {
883
+ from { transform: scale(0.9); opacity: 0; }
884
+ to { transform: scale(1); opacity: 1; }
885
+ }
886
+
887
+ .modal-icon {
888
+ width: 80px;
889
+ height: 80px;
890
+ margin: 0 auto var(--space-lg);
891
+ border-radius: var(--radius-full);
892
+ display: flex;
893
+ align-items: center;
894
+ justify-content: center;
895
+ font-size: 2.5rem;
896
+ }
897
+
898
+ .modal-icon.win {
899
+ background: linear-gradient(135deg, rgba(107, 163, 104, 0.2), rgba(107, 163, 104, 0.1));
900
+ }
901
+
902
+ .modal-icon.snake {
903
+ background: linear-gradient(135deg, rgba(229, 75, 75, 0.2), rgba(229, 75, 75, 0.1));
904
+ }
905
+
906
+ .modal-icon.ladder {
907
+ background: linear-gradient(135deg, rgba(107, 163, 104, 0.2), rgba(107, 163, 104, 0.1));
908
+ }
909
+
910
+ .modal-title {
911
+ font-size: 1.5rem;
912
+ font-weight: 700;
913
+ margin-bottom: var(--space-sm);
914
+ }
915
+
916
+ .modal-message {
917
+ color: var(--text-secondary);
918
+ margin-bottom: var(--space-xl);
919
+ }
920
+
921
+ /* ============================================
922
+ ANIMATIONS & EFFECTS
923
+ ============================================ */
924
+ .confetti {
925
+ position: fixed;
926
+ width: 10px;
927
+ height: 10px;
928
+ animation: confetti-fall 3s ease-out forwards;
929
+ z-index: 1001;
930
+ }
931
+
932
+ @keyframes confetti-fall {
933
+ 0% {
934
+ transform: translateY(-100vh) rotate(0deg);
935
+ opacity: 1;
936
+ }
937
+ 100% {
938
+ transform: translateY(100vh) rotate(720deg);
939
+ opacity: 0;
940
+ }
941
+ }
942
+
943
+ /* Snake bite effect */
944
+ .snake-bite {
945
+ animation: shake 0.5s ease;
946
+ }
947
+
948
+ @keyframes shake {
949
+ 0%, 100% { transform: translateX(0); }
950
+ 25% { transform: translateX(-10px) rotate(-5deg); }
951
+ 75% { transform: translateX(10px) rotate(5deg); }
952
+ }
953
+
954
+ /* Ladder climb effect */
955
+ .ladder-climb {
956
+ animation: bounce 0.6s ease;
957
+ }
958
+
959
+ @keyframes bounce {
960
+ 0%, 100% { transform: scale(1); }
961
+ 50% { transform: scale(1.2); }
962
+ }
963
+
964
+ /* ============================================
965
+ RESPONSIVE DESIGN
966
+ ============================================ */
967
+ @media (max-width: 1023px) {
968
+ .game-layout {
969
+ grid-template-columns: 1fr;
970
+ }
971
+
972
+ .side-panel {
973
+ order: 2;
974
+ }
975
+
976
+ .board-container {
977
+ order: 1;
978
+ }
979
+
980
+ .dice-section {
981
+ order: 3;
982
+ }
983
+
984
+ .players-panel {
985
+ display: grid;
986
+ grid-template-columns: repeat(2, 1fr);
987
+ gap: var(--space-sm);
988
+ }
989
+
990
+ .player-card {
991
+ margin-bottom: 0;
992
+ }
993
+ }
994
+
995
+ @media (max-width: 480px) {
996
+ .container {
997
+ padding: var(--space-md);
998
+ }
999
+
1000
+ .setup-card {
1001
+ padding: var(--space-lg);
1002
+ }
1003
+
1004
+ .player-count-selector {
1005
+ flex-wrap: wrap;
1006
+ }
1007
+
1008
+ .players-panel {
1009
+ grid-template-columns: 1fr;
1010
+ }
1011
+ }
1012
+
1013
+ /* ============================================
1014
+ UTILITY ANIMATIONS
1015
+ ============================================ */
1016
+ .fade-enter {
1017
+ animation: fadeEnter 0.3s ease;
1018
+ }
1019
+
1020
+ @keyframes fadeEnter {
1021
+ from { opacity: 0; transform: translateY(10px); }
1022
+ to { opacity: 1; transform: translateY(0); }
1023
+ }
1024
+
1025
+ /* Scrollbar styling */
1026
+ ::-webkit-scrollbar {
1027
+ width: 6px;
1028
+ height: 6px;
1029
+ }
1030
+
1031
+ ::-webkit-scrollbar-track {
1032
+ background: var(--background);
1033
+ border-radius: var(--radius-full);
1034
+ }
1035
+
1036
+ ::-webkit-scrollbar-thumb {
1037
+ background: var(--primary-light);
1038
+ border-radius: var(--radius-full);
1039
+ }
1040
+
1041
+ ::-webkit-scrollbar-thumb:hover {
1042
+ background: var(--primary);
1043
+ }
1044
+
1045
+ /* Selection colors */
1046
+ ::selection {
1047
+ background: var(--primary);
1048
+ color: white;
1049
+ }
1050
+ </style>
1051
+ </head>
1052
+ <body>
1053
+ <!-- Header -->
1054
+ <header class="header">
1055
+ <div class="header-content">
1056
+ <div class="logo">
1057
+ <div class="logo-icon">🐍</div>
1058
+ <span>مار و پله</span>
1059
+ </div>
1060
+ <div class="flex gap-md items-center">
1061
+ <button class="theme-toggle" id="themeToggle" title="تغییر تم">
1062
+ <span id="themeIcon">🌙</span>
1063
+ </button>
1064
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
1065
+ Built with anycoder
1066
+ </a>
1067
+ </div>
1068
+ </div>
1069
+ </header>
1070
+
1071
+ <!-- Home Screen -->
1072
+ <section class="screen home-screen active" id="homeScreen">
1073
+ <div class="hero">
1074
+ <div class="game-preview">
1075
+ <div class="preview-board">
1076
+ <div class="preview-cell"></div>
1077
+ <div class="preview-cell"></div>
1078
+ <div class="preview-cell"></div>
1079
+ <div class="preview-cell"></div>
1080
+ <div class="preview-cell"></div>
1081
+ <div class="preview-cell"></div>
1082
+ <div class="preview-cell"></div>
1083
+ <div class="preview-cell"></div>
1084
+ <div class="preview-cell"></div>
1085
+ <div class="preview-cell"></div>
1086
+ <div class="preview-cell"></div>
1087
+ <div class="preview-cell"></div>
1088
+ <div class="preview-cell"></div>
1089
+ <div class="preview-cell"></div>
1090
+ <div class="preview-cell"></div>
1091
+ <div class="preview-cell"></div>
1092
+ <div class="preview-cell"></div>
1093
+ <div class="preview-cell"></div>
1094
+ <div class="preview-cell"></div>
1095
+ <div class="preview-cell"></div>
1096
+ <div class="preview-cell"></div>
1097
+ <div class="preview-cell"></div>
1098
+ <div class="preview-cell"></div>
1099
+ <div class="preview-cell"></div>
1100
+ <div class="preview-cell"></div>
1101
+ </div>
1102
+ </div>
1103
+ <h1 class="hero-title">مار و پله</h1>
1104
+ <p class="hero-subtitle">بازی کلاسیک با طراح�� مینیمال و مدرن. آماده‌اید برای چالش؟</p>
1105
+ <button class="btn btn-primary" onclick="showSetup()">
1106
+ <span>▶</span>
1107
+ شروع بازی
1108
+ </button>
1109
+ </div>
1110
+ </section>
1111
+
1112
+ <!-- Setup Screen -->
1113
+ <section class="screen" id="setupScreen">
1114
+ <div class="setup-card">
1115
+ <h2 class="setup-title">تنظیمات بازی</h2>
1116
+
1117
+ <div class="form-group">
1118
+ <label class="form-label">تعداد بازیکنان</label>
1119
+ <div class="player-count-selector">
1120
+ <button class="count-btn active" data-count="2" onclick="setPlayerCount(2)">2</button>
1121
+ <button class="count-btn" data-count="3" onclick="setPlayerCount(3)">3</button>
1122
+ <button class="count-btn" data-count="4" onclick="setPlayerCount(4)">4</button>
1123
+ </div>
1124
+ </div>
1125
+
1126
+ <div class="form-group">
1127
+ <label class="form-label">نام بازیکنان</label>
1128
+ <div class="player-inputs" id="playerInputs">
1129
+ <!-- Generated by JS -->
1130
+ </div>
1131
+ </div>
1132
+
1133
+ <button class="btn btn-primary" style="width: 100%;" onclick="startGame()">
1134
+ <span>🎮</span>
1135
+ شروع بازی
1136
+ </button>
1137
+ </div>
1138
+ </section>
1139
+
1140
+ <!-- Game Screen -->
1141
+ <section class="screen" id="gameScreen">
1142
+ <div class="game-layout">
1143
+ <!-- Left Panel - Players -->
1144
+ <div class="side-panel">
1145
+ <h3 class="panel-title">بازیکنان</h3>
1146
+ <div class="players-panel" id="playersPanel">
1147
+ <!-- Generated by JS -->
1148
+ </div>
1149
+ </div>
1150
+
1151
+ <!-- Center - Game Board -->
1152
+ <div class="board-container">
1153
+ <div class="game-board" id="gameBoard">
1154
+ <!-- Cells generated by JS -->
1155
+ </div>
1156
+ <svg class="board-overlay" id="boardOverlay">
1157
+ <!-- Snakes and ladders drawn by JS -->
1158
+ </svg>
1159
+ <div id="tokensContainer">
1160
+ <!-- Tokens generated by JS -->
1161
+ </div>
1162
+ </div>
1163
+
1164
+ <!-- Right Panel - Dice & History -->
1165
+ <div class="side-panel">
1166
+ <h3 class="panel-title">نوبت بازی</h3>
1167
+
1168
+ <div class="dice-section">
1169
+ <div class="turn-indicator" id="turnIndicator">
1170
+ <div class="turn-dot" id="turnDot"></div>
1171
+ <span id="turnText">نوبت بازیکن ۱</span>
1172
+ </div>
1173
+
1174
+ <div class="dice-container">
1175
+ <div class="dice" id="dice">
1176
+ <div class="dice-face" data-face="1">
1177
+ <div class="dot"></div>
1178
+ </div>
1179
+ <div class="dice-face" data-face="2">
1180
+ <div class="dot"></div>
1181
+ <div class="dot"></div>
1182
+ </div>
1183
+ <div class="dice-face" data-face="3">
1184
+ <div class="dot"></div>
1185
+ <div class="dot"></div>
1186
+ <div class="dot"></div>
1187
+ </div>
1188
+ <div class="dice-face" data-face="4">
1189
+ <div class="dot"></div>
1190
+ <div class="dot"></div>
1191
+ <div class="dot"></div>
1192
+ <div class="dot"></div>
1193
+ </div>
1194
+ <div class="dice-face" data-face="5">
1195
+ <div class="dot"></div>
1196
+ <div class="dot"></div>
1197
+ <div class="dot"></div>
1198
+ <div class="dot"></div>
1199
+ <div class="dot"></div>
1200
+ </div>
1201
+ <div class="dice-face" data-face="6">
1202
+ <div class="dot"></div>
1203
+ <div class="dot"></div>
1204
+ <div class="dot"></div>
1205
+ <div class="dot"></div>
1206
+ <div class="dot"></div>
1207
+ <div class="dot"></div>
1208
+ </div>
1209
+ </div>
1210
+ </div>
1211
+
1212
+ <button class="btn btn-primary" id="rollBtn" onclick="rollDice()" style="width: 100%;">
1213
+ <span>🎲</span>
1214
+ پرتاب تاس
1215
+ </button>
1216
+ </div>
1217
+
1218
+ <h3 class="panel-title" style="margin-top: var(--space-lg);">تاریخچه حرکات</h3>
1219
+ <div class="history-list" id="historyList">
1220
+ <!-- Generated by JS -->
1221
+ </div>
1222
+ </div>
1223
+ </div>
1224
+ </section>
1225
+
1226
+ <!-- Modals -->
1227
+ <div class="modal-overlay" id="gameModal">
1228
+ <div class="modal">
1229
+ <div class="modal-icon" id="modalIcon">🏆</div>
1230
+ <h3 class="modal-title" id="modalTitle">عنوان</h3>
1231
+ <p class="modal-message" id="modalMessage">پیام</p>
1232
+ <button class="btn btn-primary" id="modalBtn" onclick="closeModal()" style="width: 100%;">
1233
+ ادامه
1234
+ </button>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ <script>
1239
+ /* ============================================
1240
+ GAME CONFIGURATION & STATE
1241
+ ============================================ */
1242
+ const CONFIG = {
1243
+ boardSize: 100,
1244
+ gridSize: 10,
1245
+ snakes: {
1246
+ 16: 6, // Snake 1
1247
+ 47: 26, // Snake 2
1248
+ 49: 11, // Snake 3
1249
+ 62: 19, // Snake 4
1250
+ 64: 60, // Snake 5
1251
+ 87: 24, // Snake 6
1252
+ 93: 73, // Snake 7
1253
+ 95: 75, // Snake 8
1254
+ 98: 78 // Snake 9
1255
+ },
1256
+ ladders: {
1257
+ 4: 14, // Ladder 1
1258
+ 9: 31, // Ladder 2
1259
+ 21: 42, // Ladder 3
1260
+ 28: 84, // Ladder 4
1261
+ 36: 44, // Ladder 5
1262
+ 51: 67, // Ladder 6
1263
+ 71: 91, // Ladder 7
1264
+ 80: 100 // Ladder 8
1265
+ }
1266
+ };
1267
+
1268
+ let gameState = {
1269
+ players: [],
1270
+ currentPlayer: 0,
1271
+ isRolling: false,
1272
+ isMoving: false,
1273
+ gameOver: false,
1274
+ history: []
1275
+ };
1276
+
1277
+ let playerCount = 2;
1278
+
1279
+ /* ============================================
1280
+ THEME MANAGEMENT
1281
+ ============================================ */
1282
+ const themeToggle = document.getElementById('themeToggle');
1283
+ const themeIcon = document.getElementById('themeIcon');
1284
+ let isDark = false;
1285
+
1286
+ themeToggle.addEventListener('click', () => {
1287
+ isDark = !isDark;
1288
+ document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
1289
+ themeIcon.textContent = isDark ? '☀️' : '🌙';
1290
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
1291
+ });
1292
+
1293
+ // Load saved theme
1294
+ const savedTheme = localStorage.getItem('theme');
1295
+ if (savedTheme === 'dark') {
1296
+ isDark = true;
1297
+ document.documentElement.setAttribute('data-theme', 'dark');
1298
+ themeIcon.textContent = '☀️';
1299
+ }
1300
+
1301
+ /* ============================================
1302
+ SCREEN NAVIGATION
1303
+ ============================================ */
1304
+ function showScreen(screenId) {
1305
+ document.querySelectorAll