Update index.html

index.html

@@ -22,23 +22,23 @@
 
         h1 {
             color: gold;
-            text-shadow: 2px 2px 4px rgba(255,215,0,0.5);
+            text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.5);
         }
 
         .main-container {
             display: flex;
             width: 100%;
-            max-width: 1400px;
+            max-width: 1500px;
         }
 
         .episode-list {
             width: 150px;
-            margin-right: 20px;
+            margin-right: 0px;
         }
 
         .episode-list label {
             display: block;
-            margin-bottom: 5px;
+            margin-bottom: 10px;
             color: #ddd;
         }
 
@@ -53,8 +53,8 @@
         }
 
         #plotDiv {
-            width: 48%;
-            height: 400px;
+            width: 440px;
+            height: 600px;
         }
 
         video {
@@ -65,7 +65,7 @@
         .controls {
             display: flex;
             justify-content: center;
-            margin-top: 10px;
+            margin-top: 2px;
         }
 
         button {
@@ -78,7 +78,8 @@
             cursor: pointer;
         }
 
-        .checkbox-container {
+        .checkbox-container label {
+            display: block;
             margin-bottom: 20px;
         }
 
@@ -89,7 +90,7 @@
             left: 50%;
             transform: translate(-50%, -50%);
             background-color: rgba(0, 0, 0, 0.7);
-            color: white;
+            color: rgb(255, 255, 255);
             padding: 20px;
             border-radius: 5px;
             z-index: 1000;
@@ -113,6 +114,7 @@
 
         <div class="content-container">
             <div class="checkbox-container">
+                <h3>Tasks</h3>
                 <label>
                     <input type="radio" name="videoOption" value="fold_towels" checked> Fold towels
                 </label>
@@ -197,7 +199,7 @@
         let frames;
         function processData(results) {
             console.log("Processing data:", results);
-            const motion_capture_data = results.data.filter((_, index) => index % 5 === 0);
+            const motion_capture_data = results.data.filter((_, index) => index % 3 === 0);
             frames = motion_capture_data.map((row, index) => ({
                 name: index.toString(),
                 data: [{
@@ -206,7 +208,7 @@
                     z: getCoordinates(row, 'z'),
                     mode: 'markers',
                     type: 'scatter3d',
-                    marker: { size: 5, color: 'blue' }
+                    marker: { size: 4, color: 'blue' }
                 }]
             }));
             if (frames.length === 0) {
@@ -289,4 +291,4 @@
     </script>
 </body>
 
-</html>
+</html>