Complete Ghaymah Internship Assessment

2026-07-27 19:30:45 +02:00
--- a/deploy-monitor/dashboard.html
+++ b/deploy-monitor/dashboard.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>API Dashboard</title>
+
+<style>
+
+body{
+    font-family:Arial,sans-serif;
+    background:#f5f5f5;
+    text-align:center;
+    margin-top:80px;
+}
+
+.card{
+    width:350px;
+    margin:auto;
+    padding:30px;
+    background:white;
+    border-radius:10px;
+    box-shadow:0 0 10px rgba(0,0,0,.2);
+}
+
+h2{
+    color:#333;
+}
+
+.status{
+    font-size:25px;
+    margin:20px;
+    font-weight:bold;
+}
+
+.response{
+    font-size:20px;
+    margin:15px;
+}
+
+.requests{
+    font-size:20px;
+    margin:15px;
+}
+
+</style>
+
+</head>
+
+<body>
+
+<div class="card">
+
+<h2>API Monitoring Dashboard</h2>
+
+<div class="status" id="status">Checking...</div>
+
+<div class="response" id="response"></div>
+
+<div class="requests" id="requests"></div>
+
+</div>
+
+<script>
+
+async function checkHealth(){
+
+let start=performance.now();
+
+try{
+
+const res=await fetch("http://localhost:8000/health");
+
+const data=await res.json();
+
+let end=performance.now();
+
+document.getElementById("status").innerHTML="🟢 UP";
+
+document.getElementById("status").style.color="green";
+
+document.getElementById("response").innerHTML="Response Time : "+(end-start).toFixed(2)+" ms";
+
+document.getElementById("requests").innerHTML="Requests : "+data.requests;
+
+}
+
+catch{
+
+document.getElementById("status").innerHTML="🔴 DOWN";
+
+document.getElementById("status").style.color="red";
+
+document.getElementById("response").innerHTML="-";
+
+document.getElementById("requests").innerHTML="-";
+
+}
+
+}
+
+checkHealth();
+
+setInterval(checkHealth,30000);
+
+</script>
+
+</body>
+</html>