Added an on hover history button to display history chart.

app/flask_app/static/history.svg

@@ -0,0 +1 @@
+<!-- icon666.com - MILLIONS OF FREE VECTOR ICONS --><svg id="Layer_1" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18 24h-12c-3.3 0-6-2.7-6-6v-12c0-3.3 2.7-6 6-6h12c3.3 0 6 2.7 6 6v12c0 3.3-2.7 6-6 6z" fill="#00adff" style="fill: rgb(82, 82, 82);"></path><path d="m12 3.8c4.5 0 8.2 3.7 8.2 8.2s-3.7 8.2-8.2 8.2-8.2-3.7-8.2-8.2h1.6c0 3.6 3 6.6 6.6 6.6s6.6-3 6.6-6.6-3-6.6-6.6-6.6c-2.1 0-3.9.9-5 2.4l1.7 1.7h-4.9v-4.9l2 2c1.5-1.7 3.7-2.8 6.2-2.8zm.8 4.1v3.8l2.6 2.6-1.1 1.1-3.1-3.1v-4.4z" fill="#fff"></path></svg>

app/flask_app/templates/home.html

@@ -30,12 +30,12 @@
 
     const interval = 5000; // 5 seconds between requests
     const progressBar = document.getElementById('progressBar');
+    const chartURL = "{{ url_for("main.chart", id=0) }}"
 
     function fetchData() {
         fetch(url, { cache: 'no-store' })
             .then(response => response.json())
             .then(data => {
-                console.log(data)
                 updateWebpage(data)
             })
             .catch(error => console.error("Error fetching data", error))
@@ -75,8 +75,8 @@
 
         // Build all service divs as a single string
         main_body.innerHTML = services.map(s => `
-        <a href="${s.url}" class="d-block text-body text-decoration-none m-2 border border-3 ${s.ping ? 'border-success' : 'border-danger'}" style="width: 175px">
-            <div class="bg-body-tertiary d-flex flex-column align-items-center">
+        <div class="service-tile position-relative m-2" style="width: 175px">
+            <a href="${s.url}" class="text-body text-decoration-none bg-body-tertiary d-flex flex-column align-items-center border border-3 ${s.ping ? 'border-success' : 'border-danger'}">
                 <div class="bg-dark w-100">
                     <h4 class="text-center text-truncate m-0 p-1">${s.label}</h4>
                 </div>
@@ -89,14 +89,33 @@
                         <div class="position-absolute bottom-0 text-body bg-dark bg-opacity-75 px-1 rounded">${s.ping ? s.ping + "ms" : ""}</div>
                     </div>
                 </div>
-            </div>
-        </a>
+            </a>
+            <a href="${chartURL.replace("0", s.service_id)}" class="overlay position-absolute bottom-0 end-0 m-1" style="width:40px;">
+                <img src="{{ url_for('static', filename='history.svg') }}">
+            </a>
+        </div>
     `).join(''); // join into a single string
     }
 
     fetchData(); // start the loop
 </script>
 
+<!-- Add this CSS once (in your stylesheet or in a <style> block) -->
+<style>
+    /* make overlay invisible and non-interactive by default */
+    .service-tile .overlay {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity .18s ease;
+    }
+
+    /* reveal overlay on hover (and make it clickable) */
+    .service-tile:hover .overlay {
+        opacity: 1;
+        pointer-events: auto;
+    }
+</style>
+
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
     crossorigin="anonymous"></script>