get better names

webassets/css/styles.css

@@ -10,6 +10,8 @@ html, body {
 body {
     display: flex;
     justify-content: center;
+
+    background-color: #EFEFEF;
 }
 
 main {
@@ -20,7 +22,9 @@ main {
 }
 
 h1 {
+    font-size: 3em;
     margin-bottom: 1rem;
+    text-shadow: 0 0 8px #888;
 }
 
 #maincontent {
@@ -28,12 +32,11 @@ h1 {
     flex-direction: column;
     gap: 0.5rem;
 
-    padding: 0 1rem;
+    padding: 0 2rem;
 }
 
 .server {
     background-color: #CCC;
-    text-align: center;
     padding: 2px 0.5rem;
 
     color: black;
@@ -45,11 +48,29 @@ h1 {
     box-shadow: 0 0 4px #888;
 
     transition: all 0.2s;
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-column-gap: 1rem;
+}
+
+.server .txt_icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.server .txt_icon {
+    text-align: left;
+}
+
+.server .txt_port {
+    opacity: 0.6;
 }
 
 .server:hover {
     box-shadow: 0 0 4px #000;
     background-color: #AAA;
-    color: #00F;
+    color: #00A;
 }
 

webassets/icons/microchip-sharp-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.--><path d="M176 24V0H128V24 64H64v64H24 0v48H24 64v56H24 0v48H24 64v56H24 0v48H24 64v64h64v40 24h48V488 448h56v40 24h48V488 448h56v40 24h48V488 448h64V384h40 24V336H488 448V280h40 24V232H488 448V176h40 24V128H488 448V64H384V24 0H336V24 64H280V24 0H232V24 64H176V24zM352 160H160V352H352V160zM160 128H352h32v32V352v32H352 160 128V352 160 128h32z"/></svg>

webassets/index.html

@@ -16,10 +16,8 @@
     <main>
 
         <h1>LocalHostBunny</h1>
+        <div id="maincontent"></div>
 
-        <div id="maincontent">
-
-        </div>
     </main>
 
     <script type="text/javascript">

webassets/scripts/script.js

@@ -1,4 +1,6 @@
 
+function enc(v) { return `${v}`.replace(/[\u00A0-\u9999<>&]/g, i => '&#'+i.charCodeAt(0)+';') }
+
 function updateHTML() {
 
     const main = document.getElementById('maincontent')
@@ -7,7 +9,11 @@ function updateHTML() {
 
     for (const srv of servers) {
 
-        html += `<a class="server" href="${srv['protocol'].toLowerCase()}://localhost:${srv['port']}">${encodeURIComponent(srv['process'])} @ ${encodeURIComponent(srv['port'])}</a>`
+        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>`
+        html += `<span class="txt_name">${enc(srv['name'])}</span>`
+        html += `<span class="txt_port">${enc(srv['port'])}</span>`
+        html += `</a>`;
 
     }
     main.innerHTML = html;

webassets/website.go

@@ -18,6 +18,7 @@ import (
 //go:embed css/*.css
 //go:embed fonts/*.woff
 //go:embed fonts/*.woff2
+//go:embed icons/*.svg
 var _assets embed.FS
 
 type templateCacheEntry struct {