Update index.html

index.html

@@ -22,6 +22,75 @@
             position: relative;
             overflow-x: hidden;
             scroll-behavior: smooth;
+            /* Prevent pull-to-refresh on mobile */
+            overscroll-behavior-y: contain;
+        }
+        
+        /* Disable touch gestures globally except on specific elements */
+        * {
+            touch-action: pan-y;
+        }
+        
+        /* Enable horizontal swipe only on card container */
+        .card-3d-container {
+            touch-action: pan-y pinch-zoom;
+        }
+        
+        /* Swipe indicator overlay */
+        .swipe-indicator {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(255, 255, 255, 0.9);
+            padding: 8px 12px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 600;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 100;
+            white-space: nowrap;
+        }
+        
+        .swipe-indicator.left {
+            left: 20px;
+        }
+        
+        .swipe-indicator.right {
+            right: 20px;
+        }
+        
+        .swipe-indicator.active {
+            opacity: 1;
+        }
+        
+        /* Touch feedback */
+        .touch-feedback {
+            position: fixed;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
+            pointer-events: none;
+            opacity: 0;
+            transform: translate(-50%, -50%) scale(0);
+            transition: opacity 0.3s, transform 0.3s;
+            z-index: 9999;
+        }
+        
+        .touch-feedback.active {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+        }
+        
+        /* Disable text selection on interactive elements */
+        .no-select {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            -webkit-touch-callout: none;
         }
         
         /* Card art background with subtle blur */
@@ -35,10 +104,10 @@
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
-            filter: blur(10px) brightness(0.7); /* Reduced blur and adjusted brightness */
+            filter: blur(10px) brightness(0.7);
             z-index: 0;
-            opacity: 0.4; /* Reduced opacity for subty */
-            transform: scale(1.1); /* Reduced scale to prevent edge issues */
+            opacity: 0.4;
+            transform: scale(1.1);
         }
         
         /* Static glass panel overlay */
@@ -49,15 +118,13 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(255, 255, 255, 0.1); /* 20% opacity white overlay */
-            backdrop-filter: blur(10px); /* Subtle blur effect */
-            -webkit-backdrop-filter: blur(10px); /* Safari support */
-            z-index: 1; /* Above background but below content */
-            pointer-events: none; /* Allow interactions to pass through */
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            z-index: 1;
+            pointer-events: none;
         }
         
-        /* Remove the additional blur overlay */
-        
         @keyframes gradientShift {
             0%, 100% { transform: rotate(0deg) scale(1.2); }
             25% { transform: rotate(90deg) scale(1.5); }
@@ -121,7 +188,7 @@
         @media (max-width: 768px) {
             body::before {
                 animation-duration: 30s;
-                filter: blur(80px) brightness(0.6); /* Reduced blur but kept darkening */
+                filter: blur(80px) brightness(0.6);
             }
             
             .orb {
@@ -147,19 +214,19 @@
         
         /* Enhanced glass panel effect with better mobile support */
         .glass {
-            background: rgba(0, 0, 0, 0.4); /* Darker background */
+            background: rgba(0, 0, 0, 0.4);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             border: 1px solid rgba(255, 255, 255, 0.08);
             box-shadow: 
-                0 8px 32px 0 rgba(0, 0, 0, 0.6), /* Darker shadow */
-                inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Reduced inner glow */
-                inset 0 -1px 0 0 rgba(255, 255, 255, 0.03); /* Reduced inner highlight */
+                0 8px 32px 0 rgba(0, 0, 0, 0.6),
+                inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+                inset 0 -1px 0 0 rgba(255, 255, 255, 0.03);
             transition: all 0.3s ease;
         }
         
         .glass-hover:hover {
-            background: rgba(0, 0, 0, 0.5); /* Darker on hover */
+            background: rgba(0, 0, 0, 0.5);
             border-color: rgba(255, 255, 255, 0.15);
             box-shadow: 
                 0 8px 32px 0 rgba(0, 0, 0, 0.7),
@@ -172,16 +239,16 @@
         /* Mobile-first glass card design - Much darker */
         .glass-card {
             background: linear-gradient(135deg, 
-                rgba(0, 0, 0, 0.8) 0%, /* Much darker gradient */
+                rgba(0, 0, 0, 0.8) 0%,
                 rgba(0, 0, 0, 0.7) 100%);
             backdrop-filter: blur(min(40px, 20px));
             -webkit-backdrop-filter: blur(min(40px, 20px));
-            border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
+            border: 1px solid rgba(255, 255, 255, 0.08);
             border-radius: min(24px, 16px);
             box-shadow: 
-                0 20px 40px -15px rgba(0, 0, 0, 0.8), /* Much darker shadow */
-                inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Minimal inner glow */
-                inset 0 0 30px rgba(0, 0, 0, 0.3); /* Dark inner shadow instead of light */
+                0 20px 40px -15px rgba(0, 0, 0, 0.8),
+                inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+                inset 0 0 30px rgba(0, 0, 0, 0.3);
             overflow: hidden;
             position: relative;
         }
@@ -209,7 +276,7 @@
         
         /* Responsive button styles */
         .glass-button {
-            background: rgba(0, 0, 0, 0.4); /* Darker button background */
+            background: rgba(0, 0, 0, 0.4);
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.1);
             color: rgba(255, 255, 255, 0.9);
@@ -227,7 +294,7 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            min-height: 44px; /* iOS minimum tap target */
+            min-height: 44px;
             white-space: nowrap;
         }
         
@@ -272,7 +339,7 @@
         
         .glass-button:hover,
         .glass-button:focus {
-            background: rgba(0, 0, 0, 0.5); /* Darker on hover */
+            background: rgba(0, 0, 0, 0.5);
             border-color: rgba(255, 255, 255, 0.2);
             transform: translateY(-2px);
             box-shadow: 
@@ -291,6 +358,7 @@
             width: 100%;
             max-width: min(420px, 90vw);
             margin: 0 auto;
+            position: relative;
         }
         
         .card-3d {
@@ -341,8 +409,8 @@
         }
         
         .stat-box {
-            background: rgba(0, 0, 0, 0.6); /* Much darker stat boxes */
-            border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.08);
             border-radius: min(12px, 3vw);
             padding: min(1rem, 4vw);
             transition: all 0.3s;
@@ -350,18 +418,18 @@
             display: flex;
             flex-direction: column;
             justify-content: center;
-            font-size: 1.2em; /* Increased font size */
+            font-size: 1.2em;
         }
         
         .stat-box:hover {
-            background: rgba(0, 0, 0, 0.7); /* Darker on hover */
+            background: rgba(0, 0, 0, 0.7);
             border-color: rgba(255, 255, 255, 0.15);
             transform: translateY(-2px);
         }
         
         /* Increase font size for info labels and values */
         .info-label {
-            font-size: 0.85rem; /* Increased from 0.75rem */
+            font-size: 0.85rem;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.05em;
@@ -372,7 +440,7 @@
         .info-value {
             color: rgba(255, 255, 255, 0.9);
             font-weight: 500;
-            font-size: 1.2em; /* Increased font size */
+            font-size: 1.2em;
         }
         
         /* Mobile-optimized gallery */
@@ -394,7 +462,7 @@
             overflow: hidden;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             cursor: pointer;
-            background: rgba(0, 0, 0, 0.4); /* Darker gallery items */
+            background: rgba(0, 0, 0, 0.4);
             border: 1px solid rgba(255, 255, 255, 0.05);
             touch-action: manipulation;
             -webkit-tap-highlight-color: transparent;
@@ -414,7 +482,7 @@
             position: absolute;
             inset: 0;
             background: linear-gradient(to top, 
-                rgba(0, 0, 0, 0.95) 0%, /* Much darker gradient */
+                rgba(0, 0, 0, 0.95) 0%,
                 rgba(0, 0, 0, 0.6) 40%, 
                 transparent 100%);
             opacity: 0;
@@ -510,12 +578,12 @@
         }
         
         ::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.3); /* Darker scrollbar track */
+            background: rgba(0, 0, 0, 0.3);
             border-radius: min(10px, 2vw);
         }
         
         ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.15); /* Slightly brighter thumb */
+            background: rgba(255, 255, 255, 0.15);
             border-radius: min(10px, 2vw);
             border: 1px solid transparent;
             background-clip: content-box;
@@ -804,6 +872,9 @@
     <div class="orb orb2" aria-hidden="true"></div>
     <div class="orb orb3" aria-hidden="true"></div>
     
+    <!-- Touch feedback element -->
+    <div class="touch-feedback" id="touch-feedback"></div>
+    
     <div class="container mx-auto py-4 md:py-8">
         <!-- Header -->
         <header class="text-center mb-8 md:mb-16 relative px-4">
@@ -821,7 +892,15 @@
         <div class="responsive-grid max-w-7xl mx-auto">
             <!-- Card Display Section -->
             <div class="flex flex-col items-center order-1 lg:order-none">
-                <div class="card-3d-container mb-4 md:mb-6">
+                <div class="card-3d-container mb-4 md:mb-6 no-select">
+                    <!-- Swipe indicators -->
+                    <div class="swipe-indicator left" id="swipe-left">
+                        <i class="fas fa-chevron-left mr-1"></i> Previous
+                    </div>
+                    <div class="swipe-indicator right" id="swipe-right">
+                        Next <i class="fas fa-chevron-right ml-1"></i>
+                    </div>
+                    
                     <div class="card-3d" id="card-3d">
                         <!-- Card Front -->
                         <div class="card-face">
@@ -980,18 +1059,34 @@
             const cardFaceNav = document.getElementById('card-face-nav');
             const faceCounter = document.getElementById('face-counter');
             const card3d = document.getElementById('card-3d');
+            const card3dContainer = document.querySelector('.card-3d-container');
             const errorToast = document.getElementById('error-toast');
             const successToast = document.getElementById('success-toast');
+            const touchFeedback = document.getElementById('touch-feedback');
+            const swipeLeftIndicator = document.getElementById('swipe-left');
+            const swipeRightIndicator = document.getElementById('swipe-right');
             
             let currentCardFace = 0;
             let currentCardData = null;
             let isLoading = false;
             
+            // Touch gesture state
+            let touchStartX = 0;
+            let touchStartY = 0;
+            let touchStartTime = 0;
+            let isSwiping = false;
+            let swipeThreshold = 100; // Increased from 50px to prevent accidental swipes
+            let swipeVelocityThreshold = 0.3; // pixels per millisecond
+            let lastSwipeTime = 0;
+            let swipeDebounceTime = 500; // Prevent multiple swipes in quick succession
+            
             // Event listeners with debouncing
             randomBtn.addEventListener('click', debounce(() => {
-                currentCardFace = 0;
-                fetchRandomCard();
-            }, 500));
+                if (!isLoading) {
+                    currentCardFace = 0;
+                    fetchRandomCard();
+                }
+            }, 300));
             
             flipBtn.addEventListener('click', handleFlipButton);
             prevFaceBtn.addEventListener('click', () => switchFace(-1));
@@ -1000,12 +1095,18 @@
             // Keyboard navigation
             document.addEventListener('keydown', handleKeydown);
             
-            // Touch gestures for mobile
-            let touchStartX = 0;
-            let touchStartY = 0;
+            // Improved touch gesture handling - only on card container
+            card3dContainer.addEventListener('touchstart', handleTouchStart, { passive: false });
+            card3dContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
+            card3dContainer.addEventListener('touchend', handleTouchEnd, { passive: false });
+            card3dContainer.addEventListener('touchcancel', handleTouchCancel, { passive: false });
             
-            cardImage.addEventListener('touchstart', handleTouchStart, { passive: true });
-            cardImage.addEventListener('touchend', handleTouchEnd, { passive: true });
+            // Prevent default touch behavior on buttons
+            [randomBtn, flipBtn, prevFaceBtn, nextFaceBtn].forEach(btn => {
+                btn.addEventListener('touchstart', (e) => {
+                    e.stopPropagation();
+                }, { passive: false });
+            });
             
             // Initialize
             fetchRandomCard();
@@ -1049,7 +1150,7 @@
                     case 'Enter':
                         if (e.target === flipBtn || e.target === randomBtn) return;
                         e.preventDefault();
-                        fetchRandomCard();
+                        if (!isLoading) fetchRandomCard();
                         break;
                     case 'f':
                     case 'F':
@@ -1072,40 +1173,132 @@
             }
             
             function handleTouchStart(e) {
-                touchStartX = e.touches[0].clientX;
-                touchStartY = e.touches[0].clientY;
+                if (isLoading) return;
+                
+                // Get the first touch point
+                const touch = e.touches[0];
+                touchStartX = touch.clientX;
+                touchStartY = touch.clientY;
+                touchStartTime = Date.now();
+                isSwiping = false;
+                
+                // Show touch feedback
+                showTouchFeedback(touchStartX, touchStartY);
+            }
+            
+            function handleTouchMove(e) {
+                if (!touchStartX || !touchStartY || isLoading) return;
+                
+                const touch = e.touches[0];
+                const deltaX = touch.clientX - touchStartX;
+                const deltaY = touch.clientY - touchStartY;
+                
+                // Determine if this is a horizontal swipe
+                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 20) {
+                    isSwiping = true;
+                    e.preventDefault(); // Prevent scrolling only when swiping horizontally
+                    
+                    // Show swipe indicators
+                    if (deltaX > 30) {
+                        swipeLeftIndicator.classList.add('active');
+                        swipeRightIndicator.classList.remove('active');
+                    } else if (deltaX < -30) {
+                        swipeRightIndicator.classList.add('active');
+                        swipeLeftIndicator.classList.remove('active');
+                    }
+                }
+                
+                // Update touch feedback position
+                updateTouchFeedback(touch.clientX, touch.clientY);
             }
             
             function handleTouchEnd(e) {
-                if (!touchStartX || !touchStartY) return;
+                if (!touchStartX || !touchStartY || isLoading) {
+                    resetTouchState();
+                    return;
+                }
                 
+                const touchEndTime = Date.now();
+                const touchDuration = touchEndTime - touchStartTime;
                 const touchEndX = e.changedTouches[0].clientX;
                 const touchEndY = e.changedTouches[0].clientY;
                 
-                const deltaX = touchStartX - touchEndX;
-                const deltaY = touchStartY - touchEndY;
+                const deltaX = touchEndX - touchStartX;
+                const deltaY = touchEndY - touchStartY;
+                const velocity = Math.abs(deltaX) / touchDuration;
+                
+                // Hide swipe indicators
+                swipeLeftIndicator.classList.remove('active');
+                swipeRightIndicator.classList.remove('active');
+                hideTouchFeedback();
                 
-                // Minimum swipe distance
-                const minSwipe = 50;
+                // Check if enough time has passed since last swipe
+                const now = Date.now();
+                if (now - lastSwipeTime < swipeDebounceTime) {
+                    resetTouchState();
+                    return;
+                }
                 
-                // Horizontal swipe
-                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipe) {
+                // Horizontal swipe detection with velocity check
+                if (isSwiping && Math.abs(deltaX) > swipeThreshold && velocity > swipeVelocityThreshold) {
+                    lastSwipeTime = now;
+                    
                     if (currentCardData && currentCardData.card_faces) {
                         if (deltaX > 0) {
+                            switchFace(-1); // Swipe right - previous face
+                            showSuccess('Previous face');
+                        } else {
                             switchFace(1); // Swipe left - next face
+                            showSuccess('Next face');
+                        }
+                    } else {
+                        // No multiple faces, could show a message
+                        if (deltaX > 0) {
+                            showError('No previous face');
                         } else {
-                            switchFace(-1); // Swipe right - previous face
+                            showError('No next face');
                         }
                     }
                 }
-                
-                // Vertical swipe up for random card
-                if (deltaY > minSwipe && Math.abs(deltaY) > Math.abs(deltaX)) {
+                // Vertical swipe down for random card (increased threshold)
+                else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 150 && !isSwiping) {
+                    lastSwipeTime = now;
                     fetchRandomCard();
+                    showSuccess('Loading random card...');
                 }
                 
+                resetTouchState();
+            }
+            
+            function handleTouchCancel(e) {
+                resetTouchState();
+                swipeLeftIndicator.classList.remove('active');
+                swipeRightIndicator.classList.remove('active');
+                hideTouchFeedback();
+            }
+            
+            function resetTouchState() {
                 touchStartX = 0;
                 touchStartY = 0;
+                touchStartTime = 0;
+                isSwiping = false;
+            }
+            
+            function showTouchFeedback(x, y) {
+                touchFeedback.style.left = x + 'px';
+                touchFeedback.style.top = y + 'px';
+                touchFeedback.classList.add('active');
+            }
+            
+            function updateTouchFeedback(x, y) {
+                if (touchFeedback.classList.contains('active')) {
+                    touchFeedback.style.left = x + 'px';
+                    touchFeedback.style.top = y + 'px';
+                }
+            }
+            
+            function hideTouchFeedback() {
+                touchFeedback.classList.remove('active');
             }
             
             function handleFlipButton() {