Update templates/index.html

templates/index.html

@@ -7,56 +7,25 @@
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 <style>
-body {
-    background:#0f172a;
-    color:#e5e7eb;
-    font-family:Arial;
-    padding:20px;
-}
-.card {
-    background:#020617;
-    padding:15px;
-    border-radius:10px;
-    margin-bottom:15px;
-    display:flex;
-    align-items:center;
-    gap:10px;
-}
-.up { color:#22c55e }
-.down { color:#ef4444 }
-input,button {
-    width:100%;
-    padding:8px;
-    margin-top:6px;
-    border-radius:6px;
-    border:none;
-}
-input {
-    background:#020617;
-    color:white;
-    border:1px solid #1e293b;
-}
-button {
-    background:#2563eb;
-    color:white;
-}
+body { background:#0f172a; color:#e5e7eb; font-family:Arial; padding:20px; }
+.card { background:#020617; padding:15px; border-radius:10px; margin-bottom:15px; }
+.up { color:#22c55e } .down { color:#ef4444 }
+input,button { width:100%; padding:8px; margin-top:6px; border-radius:6px; border:none; }
+input { background:#020617; color:white; border:1px solid #1e293b; }
+button { background:#2563eb; color:white; }
 canvas { margin-top:10px; }
-.favicon {
-    width:32px;
-    height:32px;
-    border-radius:6px;
-    border:1px solid #1e293b;
-}
+.img-box { width:100px; height:100px; overflow:hidden; margin:10px auto; border-radius:10px; background:#1e293b; display:flex; align-items:center; justify-content:center; }
+.img-box img { width:100%; height:100%; object-fit:cover; }
 </style>
 </head>
 
 <body>
-
-<h2>🕒 Total Uptime: <span id="total_uptime">0d 0h 0m 0s</span></h2>
+<h2>📈 Uptime + Ping Monitor</h2>
 
 <div class="card">
     <input id="name" placeholder="Site name">
     <input id="url" placeholder="https://example.com">
+    <input id="img" placeholder="Image URL (optional)">
     <input id="interval" type="number" placeholder="Interval (seconds)">
     <input id="password" type="password" placeholder="Admin password">
     <button onclick="save()">Save</button>
@@ -65,109 +34,75 @@ canvas { margin-top:10px; }
 <div id="sites"></div>
 
 <script>
-let editId = null;
-const charts = {};
-
-function load() {
-    fetch("/data")
-        .then(r => r.json())
-        .then(data => {
-            document.getElementById("total_uptime").innerText = data.total_uptime;
-            const box = document.getElementById("sites");
-            box.innerHTML = "";
-
-            data.sites.forEach(s => {
-                const cls = s.status === "UP" ? "up" : "down";
-                box.innerHTML += `
-                <div class="card">
-                    <img class="favicon" src="${s.favicon ?? ''}" onerror="this.style.display='none'">
-                    <div style="flex:1">
-                        <b>${s.name}</b><br>
-                        ${s.url}<br>
-                        Status: <b class="${cls}">${s.status}</b><br>
-                        Uptime: ${s.uptime_percent}%<br>
-                        Ping: ${s.last_ping ?? "-"} ms<br>
-                        Next check: ${s.remaining}s
-                        <canvas id="c${s.id}" height="100"></canvas>
-                        <button onclick="edit(${s.id},'${s.name}','${s.url}',${s.interval})">Edit</button>
-                    </div>
-                </div>`;
-            });
-
-            data.sites.forEach(drawChart);
+let editId=null;
+const charts={};
+
+function load(){
+    fetch("/data").then(r=>r.json()).then(data=>{
+        const box=document.getElementById("sites");
+        box.innerHTML="";
+        data.forEach(s=>{
+            const cls=s.status==="UP"?"up":"down";
+            const img_html = s.img ? `<div class="img-box"><img src="${s.img}"></div>`:"";
+            box.innerHTML+=`
+            <div class="card">
+                ${img_html}
+                <b>${s.name}</b><br>${s.url}<br>
+                Status: <b class="${cls}">${s.status}</b><br>
+                Uptime: ${s.uptime_str}<br>
+                Uptime %: ${s.uptime_percent}%<br>
+                Ping: ${s.last_ping ?? "-"} ms<br>
+                Next check: ${s.remaining}s
+                <canvas id="c${s.id}" height="100"></canvas>
+                <button onclick="edit(${s.id},'${s.name}','${s.url}','${s.img}',${s.interval})">Edit</button>
+            </div>`;
         });
+        data.forEach(drawChart);
+    });
 }
 
-function drawChart(site) {
-    const ctx = document.getElementById("c" + site.id);
-    if (!ctx) return;
-
-    const labels = site.history.map(h =>
-        new Date(h.time * 1000).toLocaleTimeString()
-    );
-
-    const uptime = site.history.map(h => h.uptime);
-    const ping = site.history.map(h => h.ping);
-
-    if (charts[site.id]) charts[site.id].destroy();
-
-    charts[site.id] = new Chart(ctx, {
-        type: "line",
-        data: {
+function drawChart(site){
+    const ctx=document.getElementById("c"+site.id);
+    if(!ctx) return;
+    const labels = site.history.map(h=>new Date(h.time*1000).toLocaleTimeString());
+    const uptime = site.history.map(h=>h.uptime);
+    const ping = site.history.map(h=>h.ping);
+    if(charts[site.id]) charts[site.id].destroy();
+    charts[site.id]=new Chart(ctx,{
+        type:"line",
+        data:{
             labels,
-            datasets: [
-                {
-                    label: "Uptime %",
-                    data: uptime,
-                    borderColor: "#22c55e",
-                    yAxisID: "y1",
-                    tension: 0.4
-                },
-                {
-                    label: "Ping (ms)",
-                    data: ping,
-                    borderColor: "#facc15",
-                    yAxisID: "y2",
-                    tension: 0.4
-                }
+            datasets:[
+                {label:"Uptime %", data:uptime, yAxisID:"y1", borderColor:"#22c55e", tension:0.4},
+                {label:"Ping (ms)", data:ping, yAxisID:"y2", borderColor:"#facc15", tension:0.4}
             ]
         },
-        options: {
-            scales: {
-                y1: { min:0, max:100, position:"left" },
-                y2: { min:0, position:"right" }
+        options:{
+            scales:{
+                y1:{type:"linear",position:"left",min:0,max:100},
+                y2:{type:"linear",position:"right",min:0}
             }
         }
     });
 }
 
-function save() {
-    const f = new FormData();
-    ["name","url","interval","password"].forEach(i =>
-        f.append(i, document.getElementById(i).value)
-    );
-
-    fetch(editId ? `/edit/${editId}` : "/add", {
-        method:"POST",
-        body:f
-    }).then(r => {
-        if(r.status===401) alert("Wrong password");
-        editId=null;
-        document.querySelectorAll("input").forEach(i=>i.value="");
-        load();
-    });
+function save(){
+    const f=new FormData();
+    ["name","url","img","interval","password"].forEach(i=>f.append(i,document.getElementById(i).value));
+    fetch(editId?`/edit/${editId}`:"/add",{method:"POST",body:f})
+        .then(r=>{if(r.status===401)alert("Wrong password"); editId=null; document.querySelectorAll("input").forEach(i=>i.value=""); load();});
 }
 
-function edit(id,name,url,intv){
+function edit(id,name,url,img,intv){
     editId=id;
     document.getElementById("name").value=name;
     document.getElementById("url").value=url;
+    document.getElementById("img").value=img;
     document.getElementById("interval").value=intv;
 }
 
 load();
 setInterval(load,5000);
 </script>
-
 </body>
 </html>