Initial commit

Lts/Tools/TimelineParticipant/js/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+        crossorigin=""/>
+        <link rel="stylesheet" href="/style.css">
+        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
+        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+        crossorigin=""></script>
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity=
+        "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
+        crossorigin="anonymous">
+        </script>
+
+        <title>Participant Timeline </title>
+    </head>
+    <body>
+        <h1>Participant Timeline</h1>
+        <div id="controlsContainer">
+            <div id = "controls">
+                <div id= "toolBox">
+                    <input type="checkbox" name="Auto Center View" id="autoCenterView" checked>
+                    <label for="autoCenterView">Auto Center View</label>
+                    <button id="btn_centerView" > 
+                        Center View
+                    </button>
+                    <select name="ddExersises" id="ddExersises">
+                    </select>
+                    <select name="ddParticipants" id="ddParticipants">
+                        <option value="">--Select Participant--</option>
+                    </select>
+                </div>
+                <div id="filterLabel"><label>Filter:</label></div>
+                <div id = "filterToggles" style="width: 600px; height: 60px; display: inline-block;">
+                    
+                </div>
+            </div>
+        </div>
+        <div id="mapContainer">
+            <div id="map" style="width: 80%; height: 580px; margin-left: 10%"></div>
+        </div>
+        <div id="slidersContainer">
+            <div class= "sliderDiv">
+                <label for="coarseTimeRange" class= "sliderLabel">Coarse</label>
+                <input type="range" min="0" max="300" value="0" class="slider" id="coarseTimeRange">
+            </div>
+            <div class= "sliderDiv">
+                <label for="fineTimeRange" class= "sliderLabel">Fine</label>
+                <input type="range" min="-300" max="300" value="0" class="slider" id="fineTimeRange">    
+            </div>
+            
+        </div>
+        
+
+        
+        
+        
+        
+        
+        <script src="/script.js"></script>
+        <script src="/events.js"></script>
+        <script src="/ui.js"></script>
+        <script src="/slider.js"></script>
+        
+                
+    </body>
+
+</html>