Correct webpage styling (#469)

bakito · Dec 18, 2024 · e31a8c8 · e31a8c8
1 parent 31cc27d
commit e31a8c8
Showing 1 changed file with 12 additions and 16 deletions.
diff --git a/pkg/sync/index.html b/pkg/sync/index.html
@@ -7,9 +7,9 @@
     <link rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.min.css"
           crossorigin="anonymous">
     {{- else }}
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
-          crossOrigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+          crossorigin="anonymous">
     {{- end }}
     <script type="text/javascript">
         $(document).ready(function () {
@@ -47,7 +47,6 @@
     <link rel="shortcut icon" href="favicon.ico">
     <style>
         .stat-card {
-            background-color: rgb(43, 43, 43);
             border-radius: 8px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
             padding: 15px;
@@ -58,19 +57,13 @@
             height: 100%;
         }
         {{- if .Metrics }}
-        body {
-            background-color: rgb(30, 30, 30);
-            color: rgb(255, 255, 255);
-            font-family: Arial, sans-serif;
-        }
         .stat-card h3 {
             margin: 0;
             font-size: 2rem;
         }
         .stat-card p {
             margin: 5px 0;
             font-size: 0.9rem;
-            color: rgb(78, 141, 245);
         }
         .percentage {
             font-size: 0.9rem;
@@ -142,7 +135,7 @@ <h3 style="color: rgb(232, 198, 78);">{{.Stats.TotalAdult}}</h3>
             <div class="btn-group" role="group">
                 <button type="button" class="btn btn-success" id="sync">Synchronize</button>
                 <button type="button" class="btn btn-secondary" id="showLogs">Update Logs</button>
-                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 </button>
                 <div class="dropdown-menu">
                     <a class="dropdown-item" href="#" id="clearLogs">Clear Logs</a>
@@ -171,14 +164,17 @@ <h3 style="color: rgb(232, 198, 78);">{{.Stats.TotalAdult}}</h3>
         </div>
     </div>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
-        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
+<!-- openssl dgst -sha384 -binary popper.min.js | openssl base64 -A  -->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
 </script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
-        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
+    integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous">
 </script>
 {{- if .Metrics }}
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"ŝ
+    integrity="sha384-vsrfeLOOY6KuIYKDlmVH5UiBmgIdB1oEf7p01YgWHuqmOHfZr374+odEv96n9tNC" crossorigin="anonymous">
+</script>
 <script>
     // Function to create minimal line charts
     function createChart(canvasId, data) {