Spaces:
Running
Running
BLINK
Browse files
script.js
CHANGED
|
@@ -22,11 +22,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
| 22 |
segment.className = 'wheel-segment';
|
| 23 |
segment.style.transform = `rotate(${segmentAngle * index}deg)`;
|
| 24 |
segment.style.backgroundColor = prize.color;
|
| 25 |
-
|
| 26 |
const text = document.createElement('div');
|
| 27 |
-
text.className = 'transform -rotate-45 translate-x-8 translate-y-8';
|
| 28 |
text.textContent = prize.text;
|
| 29 |
-
|
| 30 |
|
| 31 |
wheel.appendChild(segment);
|
| 32 |
});
|
|
|
|
| 22 |
segment.className = 'wheel-segment';
|
| 23 |
segment.style.transform = `rotate(${segmentAngle * index}deg)`;
|
| 24 |
segment.style.backgroundColor = prize.color;
|
|
|
|
| 25 |
const text = document.createElement('div');
|
| 26 |
+
text.className = prize.text === 'Jackpot' ? 'transform -rotate-45 translate-x-8 translate-y-8 hovered-element' : 'transform -rotate-45 translate-x-8 translate-y-8';
|
| 27 |
text.textContent = prize.text;
|
| 28 |
+
segment.appendChild(text);
|
| 29 |
|
| 30 |
wheel.appendChild(segment);
|
| 31 |
});
|
style.css
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
|
|
| 1 |
/* Base styles */
|
| 2 |
body {
|
| 3 |
font-family: 'Poppins', sans-serif;
|
| 4 |
}
|
| 5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 6 |
/* Wheel animation */
|
| 7 |
@keyframes spin {
|
| 8 |
0% {
|
|
|
|
| 1 |
+
|
| 2 |
/* Base styles */
|
| 3 |
body {
|
| 4 |
font-family: 'Poppins', sans-serif;
|
| 5 |
}
|
| 6 |
|
| 7 |
+
/* Blinking animation */
|
| 8 |
+
@keyframes blink {
|
| 9 |
+
0%, 100% { opacity: 1; }
|
| 10 |
+
50% { opacity: 0; }
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
.hovered-element {
|
| 14 |
+
animation: blink 1.5s infinite;
|
| 15 |
+
}
|
| 16 |
/* Wheel animation */
|
| 17 |
@keyframes spin {
|
| 18 |
0% {
|