Enhanced ui

ParisNeo · Jul 15, 2024 · b34b138 · b34b138
1 parent 92c10e8
commit b34b138
Showing 1 changed file with 39 additions and 12 deletions.
diff --git a/level_app/index.html b/level_app/index.html
@@ -52,6 +52,9 @@
             margin-top: 20px;
         }
         .button-container button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             margin: 0 10px;
             padding: 10px 20px;
             background: #28a745;
@@ -65,6 +68,9 @@
         .button-container button.btn-danger {
             background: #dc3545;
         }
+        .button-container svg {
+            margin-right: 8px;
+        }
         #orientation_info {
             margin-top: 20px;
             text-align: center;
@@ -76,9 +82,6 @@
             color: #fff;
             font-weight: bold;
         }
-        svg {
-            margin-top: 20px;
-        }
     </style>
 </head>
 <body>
@@ -91,20 +94,34 @@
         <div id="bubble"></div>
     </div>
     <div class="button-container">
-        <button id="start_demo" class="btn-success">Start demo</button>
-        <button id="calibrate" class="btn-success">Calibrate</button>
-        <button id="reset_calibration" class="btn-success">Reset Calibration</button>
+        <button id="start_demo" class="btn-success">
+            <svg width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
+                <path d="M11.596 8.697l-6.363 3.692A.5.5 0 0 1 4 12.5V3.5a.5.5 0 0 1 .757-.429l6.363 3.692a.5.5 0 0 1 0 .866z"/>
+            </svg>
+            Start
+        </button>
+        <button id="calibrate" class="btn-success">
+            <svg width="16" height="16" fill="currentColor" class="bi bi-compass" viewBox="0 0 16 16">
+                <path d="M8 16a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z"/>
+                <path d="M8.93 6.588l-2.29 5.385-1.196-1.196 5.385-2.29-1.9-1.9zm.707-.707l1.9 1.9a.5.5 0 0 1-.707.707l-1.9-1.9a.5.5 0 0 1 .707-.707z"/>
+            </svg>
+            Calibrate
+        </button>
+        <button id="reset_calibration" class="btn-success">
+            <svg width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 1 1 .908-.418A6 6 0 1 1 8 2v1z"/>
+                <path d="M8 1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4A.5.5 0 0 1 8 1z"/>
+                <path d="M8 4.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
+            </svg>
+            Reset Calibration
+        </button>
     </div>
     <div id="orientation_info">
         <p>Alpha (α): <span id="alpha">0</span>°</p>
         <p>Beta (β): <span id="beta">0</span>°</p>
         <p>Gamma (γ): <span id="gamma">0</span>°</p>
     </div>
     <div id="status">Hold your phone horizontally</div>
-    <svg width="100" height="100">
-        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
-        Sorry, your browser does not support inline SVG.
-    </svg>
     <script>
         let alphaOffset = 0;
         let betaOffset = 0;
@@ -154,13 +171,23 @@
 
             if (is_running){
                 window.removeEventListener("deviceorientation", handleOrientation);
-                demo_button.innerHTML = "Start demo";
+                demo_button.innerHTML = `
+                    <svg width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
+                        <path d="M11.596 8.697l-6.363 3.692A.5.5 0 0 1 4 12.5V3.5a.5.5 0 0 1 .757-.429l6.363 3.692a.5.5 0 0 1 0 .866z"/>
+                    </svg>
+                    Start demo
+                `;
                 demo_button.classList.add('btn-success');
                 demo_button.classList.remove('btn-danger');
                 is_running = false;
             } else {
                 window.addEventListener("deviceorientation", handleOrientation);
-                demo_button.innerHTML = "Stop demo";
+                demo_button.innerHTML = `
+                    <svg width="16" height="16" fill="currentColor" class="bi bi-stop-fill" viewBox="0 0 16 16">
+                        <path d="M5.5 3.5A.5.5 0 0 1 6 3h4a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5v-9z"/>
+                    </svg>
+                    Stop
+                `;
                 demo_button.classList.remove('btn-success');
                 demo_button.classList.add('btn-danger');
                 is_running = true;