Hugging Face's logo

Spaces:
hologramicon
/
roulette
Paused

App Files Community
hologramicon commited on
Commit
3e1b707
·
verified ·
1 Parent(s): 48ed516

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +109 -31
index.html CHANGED
@@ -3,9 +3,10 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
6
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" xintegrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9
  <style>
10
  body {
11
  font-family: 'Inter', sans-serif;
@@ -26,36 +27,62 @@
26
  width: 100%;
27
  height: 100%;
28
  border-radius: 50%;
29
- /* Roulette wheel colors remain as per original game design */
30
  background-image: conic-gradient(
31
- #000000 0deg, #000000 7.5deg, #f44336 7.5deg, #f44336 15deg,
32
- #000000 15deg, #000000 22.5deg, #f44336 22.5deg, #f44336 30deg,
33
- #000000 30deg, #000000 37.5deg, #f44336 37.5deg, #f44336 45deg,
34
- #000000 45deg, #000000 52.5deg, #f44336 52.5deg, #f44336 60deg,
35
- #000000 60deg, #000000 67.5deg, #8e24aa 67.5deg, #8e24aa 75deg, /* Purple */
36
- #000000 75deg, #000000 82.5deg, #f44336 82.5deg, #f44336 90deg,
37
- #000000 90deg, #000000 97.5deg, #f44336 97.5deg, #f44336 105deg,
38
- #000000 105deg, #000000 112.5deg, #f44336 112.5deg, #f44336 120deg,
39
- #000000 120deg, #000000 127.5deg, #f44336 127.5deg, #f44336 135deg,
40
- #000000 135deg, #000000 142.5deg, #f44336 142.5deg, #f44336 150deg,
41
- #000000 150deg, #000000 157.5deg, #f44336 157.5deg, #f44336 165deg,
42
- #000000 165deg, #000000 172.5deg, #f44336 172.5deg, #f44336 180deg,
43
- #000000 180deg, #000000 187.5deg, #f44336 187.5deg, #f44336 195deg,
44
- #000000 195deg, #000000 202.5deg, #f44336 202.5deg, #f44336 210deg,
45
- #000000 210deg, #000000 217.5deg, #00bcd4 217.5deg, #00bcd4 225deg, /* Cyan */
46
- #000000 225deg, #000000 232.5deg, #f44336 232.5deg, #f44336 240deg,
47
- #000000 240deg, #000000 247.5deg, #f44336 247.5deg, #f44336 255deg,
48
- #000000 255deg, #000000 262.5deg, #f44336 262.5deg, #f44336 270deg,
49
- #000000 270deg, #000000 277.5deg, #f44336 277.5deg, #f44336 285deg,
50
- #000000 285deg, #000000 292.5deg, #f44336 292.5deg, #f44336 300deg,
51
- #000000 300deg, #000000 307.5deg, #008000 307.5deg, #008000 315deg, /* Green */
52
- #000000 315deg, #000000 322.5deg, #f44336 322.5deg, #f44336 330deg,
53
- #000000 330deg, #000000 337.5deg, #f44336 337.5deg, #f44336 345deg,
54
- #000000 345deg, #000000 352.5deg, #ffc107 352.5deg, #ffc107 360deg /* Yellow */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  );
56
  transform: rotate(0deg);
57
  transition: transform 4s ease-out;
58
  border: 8px solid #4a4a4a; /* Darker border for wheel */
 
 
59
  }
60
  #spinButtonEl { /* Renamed to avoid conflict if multiple buttons */
61
  position: absolute;
@@ -68,6 +95,7 @@
68
  border: none; cursor: pointer;
69
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
70
  transition: background-color 0.3s, transform 0.2s;
 
71
  }
72
  #spinButtonEl:hover:not(:disabled) {
73
  background-color: #4cae4c; /* Darker muted green */
@@ -169,6 +197,25 @@
169
  }
170
  .modal-close-button:hover { color: #d9534f; }
171
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  </style>
173
  </head>
174
  <body>
@@ -348,6 +395,42 @@
348
  }
349
  });
350
  // --- END IMPORTANT INITIALIZATION ---
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
351
  });
352
 
353
  // Event listener for the "Deposit via QR" button
@@ -379,16 +462,12 @@
379
  multiBetColorBoxes.forEach(colorBox => {
380
  colorBox.addEventListener('click', () => {
381
  const color = colorBox.dataset.color;
382
- // You can remove the colorPreview.classList.toggle if you want the visual only on the main box
383
- // const colorPreview = colorBox.querySelector('.color-preview');
384
  if (selectedColors.has(color)) {
385
  selectedColors.delete(color);
386
  colorBox.classList.remove('selected'); // Toggle on the main color-box
387
- // colorPreview.classList.remove('selected'); // Keep if you want inner preview to toggle
388
  } else {
389
  selectedColors.add(color);
390
  colorBox.classList.add('selected'); // Toggle on the main color-box
391
- // colorPreview.classList.add('selected'); // Keep if you want inner preview to toggle
392
  }
393
  });
394
  });
@@ -548,7 +627,6 @@
548
  sidebar.classList.add('-translate-x-full');
549
  sidebarOverlay.classList.add('hidden');
550
  });
551
-
552
  </script>
553
  </body>
554
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Roulette Wheel</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
10
  <style>
11
  body {
12
  font-family: 'Inter', sans-serif;
 
27
  width: 100%;
28
  height: 100%;
29
  border-radius: 50%;
30
+ /* Conic gradient with subtle gradients for non-black colors */
31
  background-image: conic-gradient(
32
+ #000000 0deg, #000000 7.5deg, /* Black */
33
+ #f44336 7.5deg, #e53935 15deg, /* Red with subtle gradient */
34
+ #000000 15deg, #000000 22.5deg, /* Black */
35
+ #f44336 22.5deg, #e53935 30deg, /* Red with subtle gradient */
36
+ #000000 30deg, #000000 37.5deg, /* Black */
37
+ #f44336 37.5deg, #e53935 45deg, /* Red with subtle gradient */
38
+ #000000 45deg, #000000 52.5deg, /* Black */
39
+ #f44336 52.5deg, #e53935 60deg, /* Red with subtle gradient */
40
+ #000000 60deg, #000000 67.5deg, /* Black */
41
+ #8e24aa 67.5deg, #7b1fa2 75deg, /* Purple with subtle gradient */
42
+ #000000 75deg, #000000 82.5deg, /* Black */
43
+ #f44336 82.5deg, #e53935 90deg, /* Red with subtle gradient */
44
+ #000000 90deg, #000000 97.5deg, /* Black */
45
+ #f44336 97.5deg, #e53935 105deg, /* Red with subtle gradient */
46
+ #000000 105deg, #000000 112.5deg, /* Black */
47
+ #f44336 112.5deg, #e53935 120deg, /* Red with subtle gradient */
48
+ #000000 120deg, #000000 127.5deg, /* Black */
49
+ #f44336 127.5deg, #e53935 135deg, /* Red with subtle gradient */
50
+ #000000 135deg, #000000 142.5deg, /* Black */
51
+ #f44336 142.5deg, #e53935 150deg, /* Red with subtle gradient */
52
+ #000000 150deg, #000000 157.5deg, /* Black */
53
+ #f44336 157.5deg, #e53935 165deg, /* Red with subtle gradient */
54
+ #000000 165deg, #000000 172.5deg, /* Black */
55
+ #f44336 172.5deg, #e53935 180deg, /* Red with subtle gradient */
56
+ #000000 180deg, #000000 187.5deg, /* Black */
57
+ #f44336 187.5deg, #e53935 195deg, /* Red with subtle gradient */
58
+ #000000 195deg, #000000 202.5deg, /* Black */
59
+ #f44336 202.5deg, #e53935 210deg, /* Red with subtle gradient */
60
+ #000000 210deg, #000000 217.5deg, /* Black */
61
+ #00bcd4 217.5deg, #00acc1 225deg, /* Cyan with subtle gradient */
62
+ #000000 225deg, #000000 232.5deg, /* Black */
63
+ #f44336 232.5deg, #e53935 240deg, /* Red with subtle gradient */
64
+ #000000 240deg, #000000 247.5deg, /* Black */
65
+ #f44336 247.5deg, #e53935 255deg, /* Red with subtle gradient */
66
+ #000000 255deg, #000000 262.5deg, /* Black */
67
+ #f44336 262.5deg, #e53935 270deg, /* Red with subtle gradient */
68
+ #000000 270deg, #000000 277.5deg, /* Black */
69
+ #f44336 277.5deg, #e53935 285deg, /* Red with subtle gradient */
70
+ #000000 285deg, #000000 292.5deg, /* Black */
71
+ #f44336 292.5deg, #e53935 300deg, /* Red with subtle gradient */
72
+ #000000 300deg, #000000 307.5deg, /* Black */
73
+ #008000 307.5deg, #006400 315deg, /* Green with subtle gradient */
74
+ #000000 315deg, #000000 322.5deg, /* Black */
75
+ #f44336 322.5deg, #e53935 330deg, /* Red with subtle gradient */
76
+ #000000 330deg, #000000 337.5deg, /* Black */
77
+ #f44336 337.5deg, #e53935 345deg, /* Red with subtle gradient */
78
+ #000000 345deg, #000000 352.5deg, /* Black */
79
+ #ffc107 352.5deg, #ffb300 360deg /* Yellow with subtle gradient */
80
  );
81
  transform: rotate(0deg);
82
  transition: transform 4s ease-out;
83
  border: 8px solid #4a4a4a; /* Darker border for wheel */
84
+ position: relative; /* Added for icon positioning */
85
+ overflow: hidden; /* Hide icons overflowing the wheel */
86
  }
87
  #spinButtonEl { /* Renamed to avoid conflict if multiple buttons */
88
  position: absolute;
 
95
  border: none; cursor: pointer;
96
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
97
  transition: background-color 0.3s, transform 0.2s;
98
+ z-index: 10; /* Ensure button is above icons */
99
  }
100
  #spinButtonEl:hover:not(:disabled) {
101
  background-color: #4cae4c; /* Darker muted green */
 
197
  }
198
  .modal-close-button:hover { color: #d9534f; }
199
 
200
+ /* Styling for the crypto icons */
201
+ .crypto-icon {
202
+ position: absolute;
203
+ font-size: 1.2rem; /* Adjust size as needed */
204
+ color: white; /* White color for icons for better visibility */
205
+ width: 30px; /* Size of the icon container */
206
+ height: 30px;
207
+ display: flex;
208
+ align-items: center;
209
+ justify-content: center;
210
+ border-radius: 50%;
211
+ background-color: rgba(0, 0, 0, 0.4); /* Subtle background */
212
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
213
+ /* Initial position at the center, then transformed */
214
+ top: 50%;
215
+ left: 50%;
216
+ transform: translate(-50%, -50%); /* Center the icon div itself */
217
+ z-index: 5; /* Below pointer, above wheel segments */
218
+ }
219
  </style>
220
  </head>
221
  <body>
 
395
  }
396
  });
397
  // --- END IMPORTANT INITIALIZATION ---
398
+
399
+ // Dynamically add crypto icons to the roulette wheel
400
+ const cryptoIcons = [
401
+ { name: 'Bitcoin', class: 'fa-brands fa-bitcoin' },
402
+ { name: 'Ethereum', class: 'fa-brands fa-ethereum' },
403
+ { name: 'Litecoin', class: 'fa-brands fa-litecoin-sign' },
404
+ { name: 'USDT', class: 'fa-solid fa-dollar-sign' } // Using dollar sign for USDT
405
+ ];
406
+
407
+ const numSegments = 48;
408
+ const anglePerSegment = 360 / numSegments;
409
+ // Calculate wheel radius dynamically for icon placement
410
+ // Take into account the border of rouletteWheelEl and half the icon size
411
+ // The icons are 30px wide, so half is 15px. Border is 8px.
412
+ // Let's place them slightly inside the border for better visual.
413
+ const wheelRadius = (rouletteWheelEl.offsetWidth / 2) - 25; // 25px from the edge
414
+
415
+ for (let i = 0; i < numSegments; i++) {
416
+ const iconDiv = document.createElement('div');
417
+ iconDiv.className = 'crypto-icon';
418
+ const icon = document.createElement('i');
419
+ icon.className = cryptoIcons[i % cryptoIcons.length].class;
420
+ iconDiv.appendChild(icon);
421
+
422
+ // Calculate angle for this icon (center of the segment)
423
+ const angle = (i * anglePerSegment) + (anglePerSegment / 2);
424
+
425
+ // Position and rotate the icon
426
+ // The icon is positioned at the center of the wheel (top: 50%, left: 50%)
427
+ // Then translated by -50% to align its own center
428
+ // Then rotated by the segment angle
429
+ // Then translated upwards by the calculated radius to place it on the circumference
430
+ iconDiv.style.transform = `translate(-50%, -50%) rotate(${angle}deg) translateY(-${wheelRadius}px)`;
431
+
432
+ rouletteWheelEl.appendChild(iconDiv);
433
+ }
434
  });
435
 
436
  // Event listener for the "Deposit via QR" button
 
462
  multiBetColorBoxes.forEach(colorBox => {
463
  colorBox.addEventListener('click', () => {
464
  const color = colorBox.dataset.color;
 
 
465
  if (selectedColors.has(color)) {
466
  selectedColors.delete(color);
467
  colorBox.classList.remove('selected'); // Toggle on the main color-box
 
468
  } else {
469
  selectedColors.add(color);
470
  colorBox.classList.add('selected'); // Toggle on the main color-box
 
471
  }
472
  });
473
  });
 
627
  sidebar.classList.add('-translate-x-full');
628
  sidebarOverlay.classList.add('hidden');
629
  });
 
630
  </script>
631
  </body>
632
  </html>