Update index.html

index.html

@@ -39,7 +39,7 @@
             position: absolute;
             top: 0;
             left: 30%;
-            width: 2px;
+            width: 10px; /* Increase width to make dragging easier */
             height: 100%;
             background: rgb(0, 80, 150);
             cursor: ew-resize;
@@ -51,40 +51,41 @@
 
         .slider::before,
         .slider::after {
-            content: '';
+            content: attr(data-arrow); /* Use the data-arrow attribute to show the arrow */
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
-            width: 20px;
-            height: 20px;
-            background-size: contain;
-            background-repeat: no-repeat;
-            transition: opacity 0.3s;
+            width: 30px; /* Increase width for easier hover */
+            height: 30px; /* Increase height for easier hover */
+            font-size: 20px; /* Increase font size for visibility */
+            color: rgb(0, 80, 150); /* Arrow color */
+            background: transparent;
+            text-align: center;
+            line-height: 30px; /* Center text vertically */
+            transition: opacity 0.3s, transform 0.3s; /* Smooth transition */
         }
 
         .slider::before {
-            left: -22px;
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(0, 80, 150)"><path d="M15.41,7.41 L14,6 L8,12 L14,18 L15.41,16.59 L11.83,13 L20,13 L20,11 L11.83,11 L15.41,7.41 Z"/></svg>');
+            left: -40px; /* Move left to create more hover space */
         }
 
         .slider::after {
-            right: -22px;
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(0, 80, 150)"><path d="M8.59,7.41 L13.17,11 L4,11 L4,13 L13.17,13 L8.59,16.59 L10,18 L16,12 L10,6 L8.59,7.41 Z"/></svg>');
+            right: -40px; /* Move right to create more hover space */
         }
 
         .slider.ready:hover::before,
         .slider.ready:hover::after {
-            transform: translateY(-50%) scale(1.2);
+            transform: translateY(-50%) scale(1.3); /* Increase size on hover */
         }
 
         .slider.ready::before,
         .slider.ready::after {
-            opacity: 0.7;
+            opacity: 0.5; /* Initial opacity */
         }
 
         .slider.ready:hover::before,
         .slider.ready:hover::after {
-            opacity: 1;
+            opacity: 1; /* Full opacity on hover */
         }
 
         @keyframes slide-animation {
@@ -113,7 +114,7 @@
     <div class="video-container" id="videoContainer">
         <video id="video1" src="flir_brain_padded.mp4" playsinline autoplay loop muted></video>
         <video id="video2" class="second-video" src="flir_20240905_120243.mp4" playsinline autoplay loop muted></video>
-        <div class="slider" id="slider"></div>
+        <div class="slider" id="slider" data-arrow=">"></div> <!-- Add 'data-arrow' attribute for arrows -->
     </div>
 
     <script>
@@ -185,6 +186,7 @@
             slider.style.animation = 'none';
             slider.style.cursor = 'ew-resize';
             slider.style.pointerEvents = 'auto';
+            slider.setAttribute('data-arrow', '<'); // Set left arrow after animation ends
         });
 
         // Start updating clip-path once the page loads