Added favicons (iconset && auto-detection)

webassets/css/styles.css

@@ -18,7 +18,7 @@ body {
 
 main {
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 20px 50px 1fr 50px 20px;
     grid-column-gap: 1rem;
     grid-row-gap: 1rem;
 
@@ -30,6 +30,14 @@ h1 {
     text-shadow: 0 0 8px #888;
 }
 
+.header {
+    grid-column: 2/5;
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-column-gap: 1rem;
+}
+
 .loader_left,
 .loader_right{
     display: flex;
@@ -38,14 +46,39 @@ h1 {
     align-items: center;
 }
 
+.loader_left img {
+    width: 24px;
+    height: 24px;
+
+    margin-bottom: 4px;
+
+    cursor: pointer;
+    transition: transform 0.15s ease-in-out,
+    opacity   0.10s ease-in-out;
+
+    opacity: 0;
+}
+
+.loader_left img:hover {
+    transform: scale(1.2, 1.2);
+    opacity: 1.0;
+}
+
+.header:hover .loader_left img {
+    opacity: 0.5;
+}
+
+.header:hover .loader_left img:hover {
+    opacity: 1.0;
+}
+
+
 #maincontent {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 
-    padding: 0 2rem;
-
-    grid-column: 2;
+    grid-column: 1/-1;
 }
 
 .server {
@@ -71,10 +104,18 @@ h1 {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    text-align: left;
 }
 
-.server .txt_icon {
-    text-align: left;
+.server .txt_icon img {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+}
+
+.server:not(:hover) .txt_icon img {
+    filter: grayscale(1)
 }
 
 .server .txt_port {

webassets/icons/reload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32s-32 14.3-32 32v35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V432c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>

webassets/index.html

@@ -30,11 +30,11 @@
 
     <main>
 
-        <span class="loader_left"></span>
-        <h1>LocalHostBunny</h1>
-        <span class="loader_right">
-            <span id="loader" class="loader hidden"></span>
-        </span>
+        <div class="header">
+            <span class="loader_left" onclick="autoReload()"><img alt="reload" src="/icons/reload.svg"></span>
+            <h1>LocalHostBunny</h1>
+            <span class="loader_right"><span id="loader" class="loader hidden"></span></span>
+        </div>
 
         <div id="maincontent"></div>
 

webassets/scripts/script.js

@@ -7,6 +7,8 @@ function now() { return (new Date()).getTime(); }
 
 function enc(v) { return `${v}`.replace(/[\u00A0-\u9999<>&]/g, i => '&#'+i.charCodeAt(0)+';') }
 
+function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
+
 function updateHTML(servers) {
 
     const main = document.getElementById('maincontent')
@@ -16,21 +18,30 @@ function updateHTML(servers) {
     for (const srv of servers) {
 
         html += `<a class="server" href="${srv['protocol'].toLowerCase()}://localhost:${srv['port']}" target="_blank">`;
-        html += `<span class="txt_icon"><img src="/icons/microchip-sharp-solid.svg" alt="process"></span>`
+        if (srv['icon'] === null) {
+            html += `<span class="txt_icon"><img src="/icons/microchip-sharp-solid.svg" alt="icon"></span>`
+        } else {
+            html += `<span class="txt_icon"><img src="/api/v1/icon/${srv['icon']}" alt="icon"></span>`
+        }
         html += `<span class="txt_name">${enc(srv['name'])}</span>`
         html += `<span class="txt_port">${enc(srv['port'])}</span>`
         html += `</a>`;
 
     }
     main.innerHTML = html;
-
 }
 
 function onVisibilityChange() {
-    if (!document.hidden && (now() - last_refresh) > refresh_delay) autoReload();
+    console.log('[I] Visibility changed to ' + document.hidden)
+
+    if (!document.hidden && (now() - last_refresh) > refresh_delay) {
+        sleep(300).then(async () => await autoReload());
+    }
 }
 
 async function autoReload() {
+    console.log('[I] AutoReload')
+
     try {
         document.getElementById('loader').classList.remove('hidden');