Hugging Face's logo

Spaces:
matthewspring
/
anycoder-609cacf6
Running

App Files Community
matthewspring commited on
Commit
32c4078
·
verified ·
1 Parent(s): a1e4000

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +608 -19
index.html CHANGED
@@ -1,19 +1,608 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rock Paper Scissors Game</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
+ --primary: #4a6fa5;
11
+ --secondary: #166088;
12
+ --accent: #4fc3f7;
13
+ --background: #f5f7fa;
14
+ --text: #333;
15
+ --light: #fff;
16
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17
+ --transition: all 0.3s ease;
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ }
26
+
27
+ body {
28
+ background-color: var(--background);
29
+ color: var(--text);
30
+ min-height: 100vh;
31
+ display: flex;
32
+ flex-direction: column;
33
+ align-items: center;
34
+ padding: 2rem;
35
+ line-height: 1.6;
36
+ }
37
+
38
+ header {
39
+ width: 100%;
40
+ max-width: 800px;
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ margin-bottom: 2rem;
45
+ }
46
+
47
+ h1 {
48
+ color: var(--secondary);
49
+ font-size: 2.5rem;
50
+ text-align: center;
51
+ margin-bottom: 0.5rem;
52
+ }
53
+
54
+ .logo {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 0.5rem;
58
+ font-weight: bold;
59
+ color: var(--primary);
60
+ }
61
+
62
+ .logo i {
63
+ font-size: 1.5rem;
64
+ }
65
+
66
+ .built-with {
67
+ font-size: 0.9rem;
68
+ color: var(--secondary);
69
+ text-decoration: none;
70
+ transition: var(--transition);
71
+ }
72
+
73
+ .built-with:hover {
74
+ color: var(--accent);
75
+ }
76
+
77
+ .game-container {
78
+ background-color: var(--light);
79
+ border-radius: 12px;
80
+ box-shadow: var(--shadow);
81
+ padding: 2rem;
82
+ width: 100%;
83
+ max-width: 800px;
84
+ display: flex;
85
+ flex-direction: column;
86
+ gap: 2rem;
87
+ }
88
+
89
+ .scoreboard {
90
+ display: flex;
91
+ justify-content: space-between;
92
+ align-items: center;
93
+ padding: 1rem;
94
+ background-color: rgba(74, 111, 165, 0.1);
95
+ border-radius: 8px;
96
+ }
97
+
98
+ .score {
99
+ display: flex;
100
+ flex-direction: column;
101
+ align-items: center;
102
+ gap: 0.5rem;
103
+ }
104
+
105
+ .score-value {
106
+ font-size: 2rem;
107
+ font-weight: bold;
108
+ color: var(--secondary);
109
+ }
110
+
111
+ .score-label {
112
+ font-size: 0.9rem;
113
+ color: var(--primary);
114
+ text-transform: uppercase;
115
+ letter-spacing: 1px;
116
+ }
117
+
118
+ .vs {
119
+ font-size: 1.5rem;
120
+ font-weight: bold;
121
+ color: var(--accent);
122
+ }
123
+
124
+ .choices {
125
+ display: flex;
126
+ justify-content: space-between;
127
+ gap: 1rem;
128
+ }
129
+
130
+ .choice {
131
+ flex: 1;
132
+ display: flex;
133
+ flex-direction: column;
134
+ align-items: center;
135
+ gap: 1rem;
136
+ }
137
+
138
+ .choice-title {
139
+ font-size: 1.2rem;
140
+ font-weight: bold;
141
+ color: var(--primary);
142
+ }
143
+
144
+ .choice-icon {
145
+ width: 100px;
146
+ height: 100px;
147
+ border-radius: 50%;
148
+ background-color: var(--light);
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ font-size: 3rem;
153
+ box-shadow: var(--shadow);
154
+ transition: var(--transition);
155
+ border: 4px solid transparent;
156
+ }
157
+
158
+ .user-choice .choice-icon {
159
+ cursor: pointer;
160
+ }
161
+
162
+ .user-choice .choice-icon:hover {
163
+ transform: scale(1.05);
164
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
165
+ }
166
+
167
+ .user-choice .choice-icon.active {
168
+ border-color: var(--accent);
169
+ background-color: rgba(79, 195, 247, 0.1);
170
+ }
171
+
172
+ .computer-choice .choice-icon {
173
+ background-color: rgba(22, 96, 136, 0.1);
174
+ }
175
+
176
+ .options {
177
+ display: flex;
178
+ justify-content: center;
179
+ gap: 1rem;
180
+ margin-top: 1rem;
181
+ }
182
+
183
+ .btn {
184
+ padding: 0.8rem 1.5rem;
185
+ border: none;
186
+ border-radius: 8px;
187
+ background-color: var(--primary);
188
+ color: var(--light);
189
+ font-weight: bold;
190
+ cursor: pointer;
191
+ transition: var(--transition);
192
+ box-shadow: var(--shadow);
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 0.5rem;
196
+ }
197
+
198
+ .btn:hover {
199
+ background-color: var(--secondary);
200
+ transform: translateY(-2px);
201
+ }
202
+
203
+ .btn:active {
204
+ transform: translateY(0);
205
+ }
206
+
207
+ .btn-reset {
208
+ background-color: #e74c3c;
209
+ }
210
+
211
+ .btn-reset:hover {
212
+ background-color: #c0392b;
213
+ }
214
+
215
+ .result {
216
+ text-align: center;
217
+ font-size: 1.5rem;
218
+ font-weight: bold;
219
+ min-height: 2rem;
220
+ margin-top: 1rem;
221
+ color: var(--secondary);
222
+ transition: var(--transition);
223
+ }
224
+
225
+ .result.win {
226
+ color: #27ae60;
227
+ }
228
+
229
+ .result.lose {
230
+ color: #e74c3c;
231
+ }
232
+
233
+ .stats {
234
+ margin-top: 2rem;
235
+ display: flex;
236
+ flex-direction: column;
237
+ gap: 1rem;
238
+ }
239
+
240
+ .stats-title {
241
+ font-size: 1.2rem;
242
+ color: var(--primary);
243
+ border-bottom: 2px solid var(--accent);
244
+ padding-bottom: 0.5rem;
245
+ }
246
+
247
+ .stats-grid {
248
+ display: grid;
249
+ grid-template-columns: repeat(3, 1fr);
250
+ gap: 1rem;
251
+ }
252
+
253
+ .stat-item {
254
+ background-color: rgba(74, 111, 165, 0.1);
255
+ padding: 1rem;
256
+ border-radius: 8px;
257
+ text-align: center;
258
+ }
259
+
260
+ .stat-value {
261
+ font-size: 1.5rem;
262
+ font-weight: bold;
263
+ color: var(--secondary);
264
+ }
265
+
266
+ .stat-label {
267
+ font-size: 0.8rem;
268
+ color: var(--primary);
269
+ text-transform: uppercase;
270
+ letter-spacing: 1px;
271
+ }
272
+
273
+ @media (max-width: 768px) {
274
+ .game-container {
275
+ padding: 1.5rem;
276
+ }
277
+
278
+ .choices {
279
+ flex-direction: column;
280
+ }
281
+
282
+ .scoreboard {
283
+ flex-direction: column;
284
+ gap: 1rem;
285
+ }
286
+
287
+ .stats-grid {
288
+ grid-template-columns: 1fr;
289
+ }
290
+ }
291
+
292
+ @media (max-width: 480px) {
293
+ h1 {
294
+ font-size: 2rem;
295
+ }
296
+
297
+ .choice-icon {
298
+ width: 80px;
299
+ height: 80px;
300
+ font-size: 2.5rem;
301
+ }
302
+
303
+ .options {
304
+ flex-direction: column;
305
+ }
306
+
307
+ .btn {
308
+ width: 100%;
309
+ justify-content: center;
310
+ }
311
+ }
312
+
313
+ /* Animation classes */
314
+ @keyframes bounce {
315
+ 0%, 100% { transform: translateY(0); }
316
+ 50% { transform: translateY(-10px); }
317
+ }
318
+
319
+ .bounce {
320
+ animation: bounce 0.5s ease infinite;
321
+ }
322
+
323
+ @keyframes pulse {
324
+ 0% { transform: scale(1); }
325
+ 50% { transform: scale(1.05); }
326
+ 100% { transform: scale(1); }
327
+ }
328
+
329
+ .pulse {
330
+ animation: pulse 1s ease infinite;
331
+ }
332
+
333
+ @keyframes shake {
334
+ 0%, 100% { transform: translateX(0); }
335
+ 25% { transform: translateX(-5px); }
336
+ 75% { transform: translateX(5px); }
337
+ }
338
+
339
+ .shake {
340
+ animation: shake 0.5s ease infinite;
341
+ }
342
+ </style>
343
+ </head>
344
+ <body>
345
+ <header>
346
+ <div class="logo">
347
+ <i class="fas fa-hand-scissors"></i>
348
+ <span>Rock Paper Scissors</span>
349
+ </div>
350
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
351
+ </header>
352
+
353
+ <div class="game-container">
354
+ <h1>Choose Your Weapon!</h1>
355
+
356
+ <div class="scoreboard">
357
+ <div class="score">
358
+ <div class="score-value" id="user-score">0</div>
359
+ <div class="score-label">You</div>
360
+ </div>
361
+ <div class="vs">VS</div>
362
+ <div class="score">
363
+ <div class="score-value" id="computer-score">0</div>
364
+ <div class="score-label">Computer</div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="choices">
369
+ <div class="choice user-choice">
370
+ <div class="choice-title">Your Choice</div>
371
+ <div class="choice-icon" data-choice="rock"><i class="fas fa-hand-rock"></i></div>
372
+ <div class="choice-icon" data-choice="paper"><i class="fas fa-hand-paper"></i></div>
373
+ <div class="choice-icon" data-choice="scissors"><i class="fas fa-hand-scissors"></i></div>
374
+ </div>
375
+ <div class="choice computer-choice">
376
+ <div class="choice-title">Computer's Choice</div>
377
+ <div class="choice-icon" id="computer-choice"><i class="fas fa-question"></i></div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="result" id="result">Make your move!</div>
382
+
383
+ <div class="options">
384
+ <button class="btn" id="play-btn"><i class="fas fa-play"></i> Play</button>
385
+ <button class="btn btn-reset" id="reset-btn"><i class="fas fa-redo"></i> Reset</button>
386
+ </div>
387
+
388
+ <div class="stats">
389
+ <div class="stats-title">Game Statistics</div>
390
+ <div class="stats-grid">
391
+ <div class="stat-item">
392
+ <div class="stat-value" id="games-played">0</div>
393
+ <div class="stat-label">Games Played</div>
394
+ </div>
395
+ <div class="stat-item">
396
+ <div class="stat-value" id="win-rate">0%</div>
397
+ <div class="stat-label">Win Rate</div>
398
+ </div>
399
+ <div class="stat-item">
400
+ <div class="stat-value" id="last-5">0-0-0</div>
401
+ <div class="stat-label">Last 5 Games</div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <script>
408
+ document.addEventListener('DOMContentLoaded', function() {
409
+ // Game elements
410
+ const userChoiceIcons = document.querySelectorAll('.user-choice .choice-icon');
411
+ const computerChoiceIcon = document.getElementById('computer-choice');
412
+ const resultDisplay = document.getElementById('result');
413
+ const userScoreDisplay = document.getElementById('user-score');
414
+ const computerScoreDisplay = document.getElementById('computer-score');
415
+ const playBtn = document.getElementById('play-btn');
416
+ const resetBtn = document.getElementById('reset-btn');
417
+
418
+ // Stats elements
419
+ const gamesPlayedDisplay = document.getElementById('games-played');
420
+ const winRateDisplay = document.getElementById('win-rate');
421
+ const last5Display = document.getElementById('last-5');
422
+
423
+ // Game state
424
+ let userChoice = null;
425
+ let computerChoice = null;
426
+ let userScore = 0;
427
+ let computerScore = 0;
428
+ let gamesPlayed = 0;
429
+ let wins = 0;
430
+ let losses = 0;
431
+ let draws = 0;
432
+ let last5Results = [];
433
+
434
+ // Icon mappings
435
+ const choiceIcons = {
436
+ rock: '<i class="fas fa-hand-rock"></i>',
437
+ paper: '<i class="fas fa-hand-paper"></i>',
438
+ scissors: '<i class="fas fa-hand-scissors"></i>',
439
+ unknown: '<i class="fas fa-question"></i>'
440
+ };
441
+
442
+ // Initialize the game
443
+ initGame();
444
+
445
+ function initGame() {
446
+ // Set up event listeners
447
+ userChoiceIcons.forEach(icon => {
448
+ icon.addEventListener('click', function() {
449
+ // Remove active class from all icons
450
+ userChoiceIcons.forEach(i => i.classList.remove('active'));
451
+
452
+ // Add active class to clicked icon
453
+ this.classList.add('active');
454
+
455
+ // Set user choice
456
+ userChoice = this.getAttribute('data-choice');
457
+
458
+ // Enable play button
459
+ playBtn.disabled = false;
460
+ });
461
+ });
462
+
463
+ playBtn.addEventListener('click', playGame);
464
+ resetBtn.addEventListener('click', resetGame);
465
+
466
+ // Disable play button initially
467
+ playBtn.disabled = true;
468
+ }
469
+
470
+ function playGame() {
471
+ if (!userChoice) return;
472
+
473
+ // Generate computer choice
474
+ computerChoice = generateComputerChoice();
475
+ computerChoiceIcon.innerHTML = choiceIcons[computerChoice];
476
+
477
+ // Determine winner
478
+ const result = determineWinner(userChoice, computerChoice);
479
+
480
+ // Update scores and display result
481
+ updateGame(result);
482
+
483
+ // Update statistics
484
+ updateStats(result);
485
+
486
+ // Disable play button until new choice is made
487
+ playBtn.disabled = true;
488
+ }
489
+
490
+ function generateComputerChoice() {
491
+ const choices = ['rock', 'paper', 'scissors'];
492
+ const randomIndex = Math.floor(Math.random() * choices.length);
493
+ return choices[randomIndex];
494
+ }
495
+
496
+ function determineWinner(user, computer) {
497
+ if (user === computer) {
498
+ return 'draw';
499
+ }
500
+
501
+ if (
502
+ (user === 'rock' && computer === 'scissors') ||
503
+ (user === 'paper' && computer === 'rock') ||
504
+ (user === 'scissors' && computer === 'paper')
505
+ ) {
506
+ return 'win';
507
+ }
508
+
509
+ return 'lose';
510
+ }
511
+
512
+ function updateGame(result) {
513
+ gamesPlayed++;
514
+
515
+ // Update scores and result display
516
+ switch (result) {
517
+ case 'win':
518
+ userScore++;
519
+ resultDisplay.textContent = 'You Win!';
520
+ resultDisplay.className = 'result win';
521
+ computerChoiceIcon.classList.add('shake');
522
+ break;
523
+ case 'lose':
524
+ computerScore++;
525
+ resultDisplay.textContent = 'You Lose!';
526
+ resultDisplay.className = 'result lose';
527
+ computerChoiceIcon.classList.add('bounce');
528
+ break;
529
+ case 'draw':
530
+ resultDisplay.textContent = "It's a Draw!";
531
+ resultDisplay.className = 'result';
532
+ computerChoiceIcon.classList.add('pulse');
533
+ break;
534
+ }
535
+
536
+ // Update score displays
537
+ userScoreDisplay.textContent = userScore;
538
+ computerScoreDisplay.textContent = computerScore;
539
+
540
+ // Remove animations after they complete
541
+ setTimeout(() => {
542
+ computerChoiceIcon.className = 'choice-icon';
543
+ computerChoiceIcon.innerHTML = choiceIcons[computerChoice];
544
+ }, 1000);
545
+ }
546
+
547
+ function updateStats(result) {
548
+ // Update win/loss/draw counts
549
+ if (result === 'win') wins++;
550
+ else if (result === 'lose') losses++;
551
+ else draws++;
552
+
553
+ // Update last 5 results
554
+ last5Results.unshift(result);
555
+ if (last5Results.length > 5) {
556
+ last5Results.pop();
557
+ }
558
+
559
+ // Calculate win rate
560
+ const winRate = gamesPlayed > 0 ? Math.round((wins / gamesPlayed) * 100) : 0;
561
+
562
+ // Update displays
563
+ gamesPlayedDisplay.textContent = gamesPlayed;
564
+ winRateDisplay.textContent = `${winRate}%`;
565
+
566
+ // Format last 5 results
567
+ const last5Formatted = last5Results.map(r => {
568
+ if (r === 'win') return 'W';
569
+ if (r === 'lose') return 'L';
570
+ return 'D';
571
+ }).join('-');
572
+
573
+ last5Display.textContent = last5Results.length > 0 ? last5Formatted : '0-0-0';
574
+ }
575
+
576
+ function resetGame() {
577
+ // Reset game state
578
+ userChoice = null;
579
+ computerChoice = null;
580
+ userScore = 0;
581
+ computerScore = 0;
582
+ gamesPlayed = 0;
583
+ wins = 0;
584
+ losses = 0;
585
+ draws = 0;
586
+ last5Results = [];
587
+
588
+ // Reset displays
589
+ userScoreDisplay.textContent = '0';
590
+ computerScoreDisplay.textContent = '0';
591
+ resultDisplay.textContent = 'Make your move!';
592
+ resultDisplay.className = 'result';
593
+ computerChoiceIcon.innerHTML = choiceIcons.unknown;
594
+ computerChoiceIcon.className = 'choice-icon';
595
+
596
+ // Reset stats
597
+ gamesPlayedDisplay.textContent = '0';
598
+ winRateDisplay.textContent = '0%';
599
+ last5Display.textContent = '0-0-0';
600
+
601
+ // Reset UI
602
+ userChoiceIcons.forEach(icon => icon.classList.remove('active'));
603
+ playBtn.disabled = true;
604
+ }
605
+ });
606
+ </script>
607
+ </body>
608
+ </html>