Spaces:

Tigersman
/

visionsnap-ocr-wizard

Running

App Files Files Community

Tigersman commited on Nov 26, 2025

Commit

6b3df27

verified ·

1 Parent(s): 9e7e31e

The user must be able to move from tab to another by clicking or swapping

Browse files

Files changed (3) hide show

index.html +2 -2
script.js +79 -10
style.css +2 -1

index.html CHANGED Viewed

@@ -12,8 +12,8 @@
 </head>
 <body>
     <div class="mobile-frame">
-        <div class="app-container">
-            <div class="app-header">
                 <div class="header-content">
                     <h1><i class="fas fa-camera-retro"></i> VisionSnap</h1>
                     <p class="header-subtitle">OCR Wizard</p>

 </head>
 <body>
     <div class="mobile-frame">
+        <div class="app-container" id="appContainer">
+<div class="app-header">
                 <div class="header-content">
                     <h1><i class="fas fa-camera-retro"></i> VisionSnap</h1>
                     <p class="header-subtitle">OCR Wizard</p>

script.js CHANGED Viewed

@@ -4,25 +4,94 @@ document.addEventListener('DOMContentLoaded', function() {
     const scanResults = [];
     // Tab switching functionality
-const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
     tabButtons.forEach(button => {
         button.addEventListener('click', function(e) {
             e.preventDefault();
             const tabId = this.getAttribute('data-tab');
-            // Remove active class from all tabs and buttons
-            tabButtons.forEach(btn => btn.classList.remove('active'));
-            tabContents.forEach(content => content.classList.remove('active'));
-            // Add active class to clicked tab and button
-            this.classList.add('active');
-            document.getElementById(tabId).classList.add('active');
         });
     });
     // Scan buttons functionality
-    const uploadButton = document.querySelector('.upload-button');
     const captureButton = document.querySelector('.capture-button');
     const textPreview = document.querySelector('.text-preview');
     uploadButton.addEventListener('click', function() {

     const scanResults = [];
     // Tab switching functionality
+    const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
+    const appContainer = document.querySelector('.app-container');
+    let startX = 0;
+    let currentTab = 'home';
+    const tabs = ['home', 'history', 'settings'];
+    // Track touch start position
+    appContainer.addEventListener('touchstart', (e) => {
+        startX = e.touches[0].clientX;
+    }, { passive: true });
+    // Handle swipe gesture
+    appContainer.addEventListener('touchend', (e) => {
+        const endX = e.changedTouches[0].clientX;
+        const diffX = startX - endX;
+        if (Math.abs(diffX) > 50) { // Minimum swipe distance
+            const currentIndex = tabs.indexOf(currentTab);
+            let newIndex = currentIndex;
+            if (diffX > 0 && currentIndex < tabs.length - 1) {
+                // Swipe left - move to next tab
+                newIndex = currentIndex + 1;
+            } else if (diffX < 0 && currentIndex > 0) {
+                // Swipe right - move to previous tab
+                newIndex = currentIndex - 1;
+            }
+            if (newIndex !== currentIndex) {
+                switchTab(tabs[newIndex]);
+            }
+        }
+    }, { passive: true });
+    // Click handler for tab buttons
     tabButtons.forEach(button => {
         button.addEventListener('click', function(e) {
             e.preventDefault();
             const tabId = this.getAttribute('data-tab');
+            switchTab(tabId);
         });
     });
+    // Function to handle tab switching
+    function switchTab(tabId) {
+        // Remove active class from all tabs and buttons
+        tabButtons.forEach(btn => btn.classList.remove('active'));
+        tabContents.forEach(content => content.classList.remove('active'));
+        // Add active class to clicked tab and button
+        const activeButton = document.querySelector(`.tab-button[data-tab="${tabId}"]`);
+        const activeTab = document.getElementById(tabId);
+        if (activeButton && activeTab) {
+            activeButton.classList.add('active');
+            activeTab.classList.add('active');
+            currentTab = tabId;
+        }
+    }
+    // Initialize first tab
+    switchTab('home');
+    // Add swipe indicator animation
+    const swipeStyle = document.createElement('style');
+    swipeStyle.textContent = `
+        .tab-content {
+            transition: transform 0.3s ease-out;
+        }
+        .swipe-left {
+            animation: swipeLeft 0.3s ease-out;
+        }
+        .swipe-right {
+            animation: swipeRight 0.3s ease-out;
+        }
+        @keyframes swipeLeft {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(0); }
+        }
+        @keyframes swipeRight {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(0); }
+        }
+    `;
+    document.head.appendChild(swipeStyle);
     // Scan buttons functionality
+const uploadButton = document.querySelector('.upload-button');
     const captureButton = document.querySelector('.capture-button');
     const textPreview = document.querySelector('.text-preview');
     uploadButton.addEventListener('click', function() {

style.css CHANGED Viewed

@@ -126,8 +126,9 @@ body {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
 }
 .tab-content.active {
     display: block;
 }

     flex: 1;
     overflow-y: auto;
     padding: 20px;
+    touch-action: pan-y;
+    will-change: transform;
 }
 .tab-content.active {
     display: block;
 }