Update index.html

index.html

@@ -360,6 +360,18 @@
       background: linear-gradient(135deg, var(--success), #5af78e);
       box-shadow: 0 10px 25px rgba(46, 213, 115, 0.4);
     }
+    .carousel {
+      touch-action: pan-x pan-y;
+      transition: transform 0.6s ease-in-out;
+    }
+
+    .carousel-controls button { 
+      touch-action: manipulation; 
+      user-select: none; }
+    
+    .carousel.dragging {
+      touch-action: none;
+    }
 
     .carousel-container {
       perspective: 1200px;
@@ -877,6 +889,38 @@ function solution() {
 
     // Event listeners setup
     function setupEventListeners() {
+      let startX = 0;
+      let startY = 0;
+      let lastTranslateX = 0;
+      let lastTranslateY = 0;
+      let isDragging = false;
+
+     document.getElementById('carousel').addEventListener('touchstart', (e) => {
+     isDragging = true;
+     startX = e.touches[0].clientX;
+     startY = e.touches[0].clientY;
+     });
+
+     document.getElementById('carousel').addEventListener('touchmove', (e) => {
+  if (!isDragging) return;
+  
+  const dx = e.touches[0].clientX - startX;
+  const dy = e.touches[0].clientY - startY;
+  
+  const newX = lastTranslateX + dx;
+  const newY = lastTranslateY + dy;
+  
+  document.getElementById('carousel').style.transform = `translate3D(${newX}px, ${newY}px, 0)`;
+  
+  startX = e.touches[0].clientX;
+  startY = e.touches[0].clientY;
+}, { passive: false });
+
+     document.getElementById('carousel').addEventListener('touchend', () => {
+     isDragging = false;
+     lastTranslateX = parseFloat(document.getElementById('carousel').style.transform.match(/-?\d+(\.\d+)?px/g)[0]);
+     lastTranslateY = parseFloat(document.getElementById('carousel').style.transform.match(/-?\d+(\.\d+)?px/g)[1]);
+     });
       // Mode toggle
       document.getElementById('carouselModeBtn').addEventListener('click', () => switchMode('carousel'));
       document.getElementById('chatModeBtn').addEventListener('click', () => switchMode('chat'));
@@ -886,8 +930,18 @@ function solution() {
       document.getElementById('settingsToggle').addEventListener('click', toggleSettings);
 
       // Carousel controls
-      document.getElementById('prevCard').addEventListener('click', () => rotateCarousel(-1));
-      document.getElementById('nextCard').addEventListener('click', () => rotateCarousel(1));
+      document.getElementById('prevCard').addEventListener('touchstart', () => rotateCarousel(-1, 0));
+      document.getElementById('nextCard').addEventListener('touchstart', () => rotateCarousel(1, 0));
+
+      document.getElementById('prevCard').addEventListener('touchmove', (e) => {
+       const dx = e.touches[0].clientX - startX;
+       if (dx > 50) rotateCarousel(-1, 0);
+      });
+
+      document.getElementById('nextCard').addEventListener('touchmove', (e) => {
+       const dx = e.touches[0].clientX - startX;
+       if (dx < -50) rotateCarousel(1, 0);
+      });
       document.getElementById('applyPromptBtn').addEventListener('click', applyPromptsAndSwitchToChat);
 
       // Chat controls
@@ -943,7 +997,8 @@ function solution() {
       }
     }
 
-    // Carousel functionality
+    
+  // Carousel functionality
     function setupCarousel() {
       updateCarouselPosition();
     }
@@ -953,7 +1008,23 @@ function solution() {
       currentCarouselIndex = (currentCarouselIndex + direction + totalCards) % totalCards;
       updateCarouselPosition();
     }
-
+    function rotateCarousel(dx, dy) {
+      const totalCards = 6;
+      const cardWidth = 100 / totalCards;
+      const cardHeight = 100 / totalCards;
+  
+    let newIndex = currentCarouselIndex;
+  
+    if (dx > 0) newIndex--;
+    if (dx < 0) newIndex++;
+    if (dy > 0) newIndex++;
+    if (dy < 0) newIndex--;
+  
+    newIndex = (newIndex + totalCards) % totalCards;
+  
+    currentCarouselIndex = newIndex;
+    updateCarouselPosition();
+    }
     function goToCarouselIndex(index) {
       currentCarouselIndex = index;
       updateCarouselPosition();