add ui-mockup tab

danielgilbers · Feb 20, 2024 · 3e46e5b · 3e46e5b
1 parent a22cfaf
commit 3e46e5b
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Indoor Navigation</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="./css/style.css">
@@ -22,12 +23,13 @@ <h2 class="px-2">Leaflet-Map</h2>
                 <div class="flex-grow-1" id="map"></div>
             </div>
 
-            <div class="tab-pane fade position-absolute container" id="nav-sensor" role="tabpanel" aria-labelledby="nav-sensor-tab"
-                tabindex="0">
+            <div class="tab-pane fade position-absolute container" id="nav-sensor" role="tabpanel"
+                aria-labelledby="nav-sensor-tab" tabindex="0">
                 <h2>Sensor-Test</h2>
                 <div class="p-3 bg-secondary" id="demo-div">
                     <a id="start_demo" class="btn btn-lg btn-success py-1" href="#" role="button">Start the demo</a>
-                    <p style="margin-top:1rem;">Num. of datapoints: <span class="badge text-bg-warning" id="num-observed-events">0</span></p>
+                    <p style="margin-top:1rem;">Num. of datapoints: <span class="badge text-bg-warning"
+                            id="num-observed-events">0</span></p>
 
 
                     <h4 style="margin-top:0.75rem;">Orientation</h4>
@@ -61,6 +63,12 @@ <h4>Gyroscope</h4>
                     </ul>
                 </div>
             </div>
+
+            <div class="tab-pane fade position-absolute" id="nav-ui" role="tabpanel"
+                aria-labelledby="nav-sensor-tab" tabindex="0">
+                <h2 class="px-2">UI-Mockup</h2>
+                <!-- Insert UI Mockup here -->
+            </div>
         </div>
 
         <nav class="p-2 navbar bg-dark" data-bs-theme="dark">
@@ -69,6 +77,8 @@ <h4>Gyroscope</h4>
                     type="button" role="tab" aria-controls="nav-leaflet" aria-selected="true">Leaflet-Map</button>
                 <button class="nav-link" id="nav-sensor-tab" data-bs-toggle="tab" data-bs-target="#nav-sensor"
                     type="button" role="tab" aria-controls="nav-sensor" aria-selected="false">Sensor-Test</button>
+                <button class="nav-link" id="nav-ui-tab" data-bs-toggle="tab" data-bs-target="#nav-ui" type="button"
+                    role="tab" aria-controls="nav-ui" aria-selected="false">UI-Mockup</button>
             </div>
         </nav>
     </div>