Promote version fd3aaaf to main

Promoted commit fd3aaaf85e30b9c996d2ac284cc2946a5ef13800 to main branch

index.html

@@ -238,27 +238,10 @@ background: #000;
 animation: spin 3s linear infinite;
         }
         @keyframes spin {
-            0% { transform: translateY(0); }
+0% { transform: translateY(0); }
             100% { transform: translateY(calc(-100% + 80px)); }
         }
-
-        .hovered-element {
-            transition: all 0.3s ease;
-        }
-
-        .hovered-element:hover {
-            transform: scale(1.05);
-        }
-
-        #win-message {
-            animation: pulse 0.5s infinite alternate;
-        }
-
-        @keyframes pulse {
-            from { opacity: 0.5; transform: scale(0.95); }
-            to { opacity: 1; transform: scale(1.05); }
-        }
-/* Header styles */
+        /* Header styles */
         .nav-link {
 position: relative;
             font-weight: 500;
@@ -438,52 +421,56 @@ transition: max-height 0.5s ease-in-out;
                     </div>
                 </div>
             </div>
+
             <!-- Slot Machine Demo -->
-            <div class="slot-machine max-w-md mx-auto hovered-element">
+            <div class="slot-machine max-w-md mx-auto">
                 <h3 class="text-center text-xl font-bold mb-4 gold-text">Попробуй удачу!</h3>
-                <div class="flex justify-center space-x-2 mb-4 hovered-element">
-                    <div class="reel w-20 overflow-hidden hovered-element">
-                        <div class="reel-content" id="reel1">
-                            <div class="h-20 flex items-center justify-center text-3xl hovered-element">🍒</div>
+                <div class="flex justify-center space-x-2 mb-4">
+                    <div class="reel w-20 overflow-hidden">
+                        <div class="reel-content">
+                            <div class="h-20 flex items-center justify-center text-3xl">🍒</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍋</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍊</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍇</div>
                             <div class="h-20 flex items-center justify-center text-3xl">💎</div>
                             <div class="h-20 flex items-center justify-center text-3xl">7️⃣</div>
+                            <!-- Duplicate first symbol for smooth loop -->
                             <div class="h-20 flex items-center justify-center text-3xl">🍒</div>
                         </div>
                     </div>
-                    <div class="reel w-20 overflow-hidden hovered-element">
-                        <div class="reel-content" id="reel2">
-                            <div class="h-20 flex items-center justify-center text-3xl hovered-element">🍋</div>
+                    <div class="reel w-20 overflow-hidden">
+                        <div class="reel-content">
+                            <div class="h-20 flex items-center justify-center text-3xl">🍋</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍊</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍇</div>
                             <div class="h-20 flex items-center justify-center text-3xl">💎</div>
                             <div class="h-20 flex items-center justify-center text-3xl">7️⃣</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍒</div>
+                            <!-- Duplicate first symbol for smooth loop -->
                             <div class="h-20 flex items-center justify-center text-3xl">🍋</div>
                         </div>
                     </div>
-                    <div class="reel w-20 overflow-hidden hovered-element">
-                        <div class="reel-content" id="reel3">
-                            <div class="h-20 flex items-center justify-center text-3xl hovered-element">🍊</div>
+                    <div class="reel w-20 overflow-hidden">
+                        <div class="reel-content">
+                            <div class="h-20 flex items-center justify-center text-3xl">🍊</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍇</div>
                             <div class="h-20 flex items-center justify-center text-3xl">💎</div>
                             <div class="h-20 flex items-center justify-center text-3xl">7️⃣</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍒</div>
                             <div class="h-20 flex items-center justify-center text-3xl">🍋</div>
+                            <!-- Duplicate first symbol for smooth loop -->
                             <div class="h-20 flex items-center justify-center text-3xl">🍊</div>
                         </div>
                     </div>
-                </div>
-                <button id="spin-button" class="w-full btn-gold font-bold mt-4 hovered-element">
-                    КРУТИТЬ (БЕСПЛАТНО)
-                </button>
-                <p class="text-center text-xs text-yellow-300 mt-2 hovered-element">
-                    Попробуйте удачу! Совпадение 3 символов - выигрыш!
-                </p>
-            </div>
 </div>
+                    <button class="w-full btn-gold font-bold mt-4">
+                        КРУТИТЬ (БЕСПЛАТНО)
+                    </button>
+                    <p class="text-center text-xs text-yellow-300 mt-2">
+                        Попробуйте удачу! Совпадение 3 символов - выигрыш!
+                    </p>
+</div>
+        </div>
     </section>
 
     <!-- Bonuses Section -->
@@ -889,59 +876,50 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                 }
             });
         });
-        // Slot Machine Functionality
-        document.addEventListener('DOMContentLoaded', function() {
-            const spinButton = document.getElementById('spin-button');
-            const reels = [document.getElementById('reel1'), 
-                          document.getElementById('reel2'), 
-                          document.getElementById('reel3')];
-            const symbols = ['🍒', '🍋', '🍊', '🍇', '💎', '7️⃣'];
+        // Interactive slot machine with null checks
+        const slotButton = document.querySelector('.slot-machine button');
+        if(slotButton) {
+            slotButton.addEventListener('click', function() {
+const reels = document.querySelectorAll('.reel-content');
+            const reelSymbols = ['🍒', '🍋', '🍊', '🍇', '💎', '7️⃣'];
             
-            function getRandomSymbol() {
-                return symbols[Math.floor(Math.random() * symbols.length)];
-            }
-
-            spinButton.addEventListener('click', function() {
-                spinButton.disabled = true;
-                spinButton.textContent = 'КРУТИМ...';
-
-                // Stop any current animations
-                reels.forEach(reel => {
-                    reel.style.animation = 'none';
-                    reel.offsetHeight; // Trigger reflow
-                });
-
-                // Spin each reel with different durations
-                reels.forEach((reel, index) => {
-                    // Randomize symbols temporarily during spin
-                    const reelSymbols = reel.querySelectorAll('div');
-                    reelSymbols.forEach(symbol => {
-                        symbol.textContent = getRandomSymbol();
-                    });
+            this.disabled = true;
+            this.textContent = 'КРУТИМ...';
+            
+            // Reset animation
+            reels.forEach(reel => {
+                reel.style.animation = 'none';
+                reel.offsetHeight; // Trigger reflow
+            });
 
-                    // Start spinning animation
-                    reel.style.animation = `spin ${2 + Math.random()}s ease-out forwards`;
+            // Randomize symbols
+            reels.forEach(reel => {
+                const symbols = reel.querySelectorAll('div');
+                symbols.forEach((symbol, index) => {
+                    symbol.textContent = reelSymbols[Math.floor(Math.random() * reelSymbols.length)];
                 });
+            });
 
-                // After spinning, check for win
-                setTimeout(() => {
-                    spinButton.disabled = false;
-                    spinButton.textContent = 'КРУТИТЬ (БЕСПЛАТНО)';
-
-                    const results = reels.map(reel => {
-                        return reel.querySelector('div').textContent;
-                    });
-
-                    if (results[0] === results[1] && results[1] === results[2]) {
-                        document.getElementById('win-message').classList.remove('hidden');
-                        setTimeout(() => {
-                            document.getElementById('win-message').classList.add('hidden');
-                        }, 3000);
-                    }
-                }, 3000);
+            // Start spinning animation
+            reels.forEach((reel, index) => {
+                reel.style.animation = `spin 3s cubic-bezier(0.1, 0.7, 0.1, 1) ${index * 0.3}s forwards`;
             });
+            
+            setTimeout(() => {
+                this.disabled = false;
+                this.textContent = 'КРУТИТЬ';
+                
+                // Check for win
+                const finalSymbols = Array.from(reels).map(reel => {
+                    return reel.querySelector('div').textContent;
+                });
+                
+                if (new Set(finalSymbols).size === 1) { // All symbols match
+                    alert(`Поздравляем! Вы выиграли с комбинацией ${finalSymbols[0]}!`);
+                }
+            }, 3500);
         });
-// Header scroll effect with null check
+        // Header scroll effect with null check
         const header = document.getElementById('main-header');
         if(header) {
             window.addEventListener('scroll', function() {