Spaces:

SEA-AI
/

brain-videoslider

Running

App Files Files Community

kevinconka commited on Apr 3

Commit

6098e79

1 Parent(s): 63eb12d

update index.html to include Google Fonts, enhance layout with tabs for video selection, and improve video source management based on selected tab.

Browse files

Files changed (6) hide show

.gitattributes +1 -0
MOB_NIGHT/FLIR.mp4 +3 -0
MOB_NIGHT/SEA-AI-Brain.mp4 +3 -0
FLIR.mp4 → SAILING_BOAT/FLIR.mp4 +0 -0
SEA.AI-Brain.mp4 → SAILING_BOAT/SEA-AI-Brain.mp4 +0 -0
index.html +66 -8

.gitattributes CHANGED Viewed

@@ -37,3 +37,4 @@ flir_20240905_120243.mp4 filter=lfs diff=lfs merge=lfs -text
 flir_brain_padded.mp4 filter=lfs diff=lfs merge=lfs -text
 FLIR.mp4 filter=lfs diff=lfs merge=lfs -text
 SEA.AI-Brain.mp4 filter=lfs diff=lfs merge=lfs -text

 flir_brain_padded.mp4 filter=lfs diff=lfs merge=lfs -text
 FLIR.mp4 filter=lfs diff=lfs merge=lfs -text
 SEA.AI-Brain.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

MOB_NIGHT/FLIR.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:6d0507b737f7f7305d69c81a74720adc7f58f54dbb2c52501618aebe24698d97
+size 15578650

MOB_NIGHT/SEA-AI-Brain.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:8a7cf1e121ce1bfa8b5bf3257d6d4d15183099ec192d91c0062670b9694516e4
+size 57576011

FLIR.mp4 → SAILING_BOAT/FLIR.mp4 RENAMED Viewed

File without changes

SEA.AI-Brain.mp4 → SAILING_BOAT/SEA-AI-Brain.mp4 RENAMED Viewed

File without changes

index.html CHANGED Viewed

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Video Comparison Slider</title>
     <style>
         :root {
             --container-width: 80vw; /* Define a custom property for width */
@@ -12,10 +13,33 @@
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
             background-color: black;
         }
         .video-container {
             position: relative;
@@ -104,18 +128,57 @@
     </style>
 </head>
 <body>
     <div class="video-container" id="videoContainer">
-        <video id="video1" src="SEA.AI-Brain.mp4" playsinline autoplay loop muted></video>
-        <video id="video2" class="second-video" src="FLIR.mp4" playsinline autoplay loop muted></video>
         <div class="slider" id="slider"></div>
     </div>
     <script>
         const slider = document.getElementById('slider');
         const container = document.getElementById('videoContainer');
         const video2 = document.getElementById('video2');
         let isDragging = false;
         // Mouse events for slider
         slider.addEventListener('mousedown', () => isDragging = true);
         window.addEventListener('mouseup', () => isDragging = false);
@@ -136,13 +199,10 @@
             const rect = container.getBoundingClientRect();
             const offsetX = positionX - rect.left;
             const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
-            // Move slider position
             slider.style.left = `${sliderPosition}px`;
-            // Adjust second video visibility using clip-path
             video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
         }
-        // Function to update clip-path in real-time
         function updateClipPath() {
             const rect = container.getBoundingClientRect();
             const sliderPosition = parseFloat(window.getComputedStyle(slider).left);
@@ -150,7 +210,6 @@
             requestAnimationFrame(updateClipPath);
         }
-        // Enable user control after the animation ends
         slider.addEventListener('animationend', () => {
             slider.classList.add('ready');
             slider.style.animation = 'none';
@@ -158,7 +217,6 @@
             slider.style.pointerEvents = 'auto';
         });
-        // Start updating clip-path once the page loads
         window.onload = () => updateClipPath();
     </script>
 </body>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Video Comparison Slider</title>
+    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --container-width: 80vw; /* Define a custom property for width */
             margin: 0;
             padding: 0;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
+            min-height: 100vh;
             background-color: black;
+            color: white;
+            font-family: 'Saira', sans-serif;
+        }
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .tab {
+            padding: 10px 20px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background 0.3s;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+        .tab:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .tab.active {
+            background: rgb(0, 80, 150);
         }
         .video-container {
             position: relative;
     </style>
 </head>
 <body>
+    <div class="tabs" id="tabs">
+        <div class="tab" data-page="SAILING_BOAT">Sailing Boat</div>
+        <div class="tab" data-page="MOB_NIGHT">MOB Night</div>
+        <div class="tab" data-page="FAR_AWAY_OBJECT">Far Away Object</div>
+        <div class="tab" data-page="BUOYS">Buoys</div>
+    </div>
     <div class="video-container" id="videoContainer">
+        <video id="video1" playsinline autoplay loop muted></video>
+        <video id="video2" class="second-video" playsinline autoplay loop muted></video>
         <div class="slider" id="slider"></div>
     </div>
     <script>
         const slider = document.getElementById('slider');
         const container = document.getElementById('videoContainer');
+        const video1 = document.getElementById('video1');
         const video2 = document.getElementById('video2');
+        const tabs = document.getElementById('tabs');
         let isDragging = false;
+        // Get current page from URL or default to SAILING_BOAT
+        const urlParams = new URLSearchParams(window.location.search);
+        let currentPage = urlParams.get('page') || 'SAILING_BOAT';
+        // Function to update video sources
+        function updateVideos(page) {
+            video1.src = `${page}/SEA-AI-Brain.mp4`;
+            video2.src = `${page}/FLIR.mp4`;
+            currentPage = page;
+            // Update URL without reloading
+            const newUrl = new URL(window.location);
+            newUrl.searchParams.set('page', page);
+            window.history.pushState({}, '', newUrl);
+            // Update active tab
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.toggle('active', tab.dataset.page === page);
+            });
+        }
+        // Tab click handlers
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                updateVideos(tab.dataset.page);
+            });
+        });
+        // Initialize with current page
+        updateVideos(currentPage);
         // Mouse events for slider
         slider.addEventListener('mousedown', () => isDragging = true);
         window.addEventListener('mouseup', () => isDragging = false);
             const rect = container.getBoundingClientRect();
             const offsetX = positionX - rect.left;
             const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
             slider.style.left = `${sliderPosition}px`;
             video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
         }
         function updateClipPath() {
             const rect = container.getBoundingClientRect();
             const sliderPosition = parseFloat(window.getComputedStyle(slider).left);
             requestAnimationFrame(updateClipPath);
         }
         slider.addEventListener('animationend', () => {
             slider.classList.add('ready');
             slider.style.animation = 'none';
             slider.style.pointerEvents = 'auto';
         });
         window.onload = () => updateClipPath();
     </script>
 </body>