Trying to get html images to work.

web/logic/interactive.py

@@ -6,10 +6,10 @@ import sys
 ### Variables -->
 SECRET_PATH = "/run/user/{}/numbus".format(os.getuid()) if os.path.exists("/run/user/{}".format(os.getuid())) else "../secrets"
 os.makedirs(SECRET_PATH, exist_ok=True)
-LOGS_DIR = "../web/logs/"
-PAGES_DIR = "../web/pages/"
-CONFIG_DIR = "../web/config/"
-SIGNALS_DIR = "../web/signal/"
+LOGS_DIR = "logs/"
+PAGES_DIR = "pages/"
+CONFIG_DIR = "config/"
+SIGNALS_DIR = "signal/"
 ### <-- Variables
 
 class BridgeHandler(http.server.SimpleHTTPRequestHandler):

web/pages/configuration.html

@@ -63,7 +63,7 @@
       <p class="p-5 text-xl text-slate-300">Select the <strong>device type</strong> for your new Numbus machine that matches <strong>your needs</strong>.</p>
       <div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
         <button @click="" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-server-light.svg" alt="Numbus Server icon">
+          <img class="w-12 h-12 flex-shrink-0" src="/media/light/numbus-server-light.svg" alt="Numbus Server icon">
           <div>
             <h1 class="font-bold text-2xl mb-1">Numbus Server</h1>
             <p class="text-sm transition-colors">Your own Cloud at Home.</p>
@@ -71,21 +71,21 @@
         </button>
         <button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
           <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-backup-server-light.svg" alt="Numbus Server icon">
-          <div>
+          <div> 
             <h1 class="font-bold text-2xl mb-1">Numbus Backup Server</h1>
             <p class="text-sm transition-colors">Backup all Numbus devices and monitor your servers.</p>
           </div>
         </button>
         <button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
           <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-computer-light.svg" alt="Numbus Server icon">
-          <div>
+          <div> 
             <h1 class="font-bold text-2xl mb-1">Numbus Computer</h1>
             <p class="text-sm transition-colors">Backup all Numbus devices and monitor your servers.</p>
           </div>
         </button>
         <button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
           <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-tv-light.svg" alt="Numbus Server icon">
-          <div>
+          <div> 
             <h1 class="font-bold text-2xl mb-1">Numbus TV</h1>
             <p class="text-sm transition-colors">Your TV, your way. No spying on you.</p>
           </div>

web/pages/index.html

@@ -12,7 +12,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
     <!-- Material Design Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
-    <link rel="icon" href="./media/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="../media/favicon.ico" type="image/x-icon">
 </head>
 
 <style>
@@ -28,7 +28,7 @@
   
   <!-- Welcome screen -->
   <div class="p-12 justify-center flex flex-col items-center">
-    <img class="w-64 h-64 auto drop-shadow-2xl animate-pulse-slow" src="../media/logo.png" alt="Numbus Logo">
+    <img class="w-64 h-64 auto drop-shadow-2xl animate-pulse-slow" src="/media/logo.png" alt="Numbus Logo">
     <h1 class="p-8 text-center text-6xl font-extrabold tracking-tight">Welcome to <span class="text-sky-400 animate-pulse-slow text-shadow-glow">NUMBUS</span></h1>
     <p class="text-center text-2xl p-2">Transform your device into a <strong>secure, reliable and private</strong> appliance <br> using the power of open-soure software.</p>
     <p class="text-center text-2xl p-2 pb-10">You will be <strong>guided</strong> through the configuration process.</p>

web/pages/preparation.html

@@ -177,7 +177,7 @@
       <p class="p-5 text-xl text-slate-300">Select the <b>device type</b> for your new Numbus machine that matches <b>your needs</b>.</p>
       <div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
         <button @click="formData[2].deviceType = 'server'" :class="formData[2].deviceType === 'server' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-server-light.svg" alt="Numbus Server icon">
+          <img class="w-12 h-12 flex-shrink-0" src="/media/light/numbus-server-light.svg" alt="Numbus Server icon">
           <div x-data="{ infoBubbleOpen: false }">
             <div class="items-center gap-2 flex">
               <span class="font-bold text-2xl">Numbus Server</span>
@@ -200,7 +200,7 @@
           </div>
         </button>
         <button @click="formData[2].deviceType = 'backup-server'" :class="formData[2].deviceType === 'backup-server' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-backup-server-light.svg" alt="Numbus Backup Server icon">
+          <img class="w-12 h-12 flex-shrink-0" src="/media/light/numbus-backup-server-light.svg" alt="Numbus Backup Server icon">
           <div x-data="{ infoBubbleOpen: false }">
             <div class="items-center flex gap-2">
                 <span class="font-bold text-2xl mb-1">Numbus Backup Server</span>
@@ -223,7 +223,7 @@
           </div>
         </button>
         <button @click="formData[2].deviceType = 'computer'" :class="formData[2].deviceType === 'computer' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-computer-light.svg" alt="Numbus Computer icon">
+          <img class="w-12 h-12 flex-shrink-0" src="/media/light/numbus-computer-light.svg" alt="Numbus Computer icon">
           <div x-data="{ infoBubbleOpen: false }">
             <div class="items-center flex gap-2">
               <span class="font-bold text-2xl mb-1">Numbus Computer</span>
@@ -246,7 +246,7 @@
           </div>
         </button>
         <button @click="formData[2].deviceType = 'tv'" :class="formData[2].deviceType === 'tv' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-tv-light.svg" alt="Numbus TV icon">
+          <img class="w-12 h-12 flex-shrink-0" src="/media/light/numbus-tv-light.svg" alt="Numbus TV icon">
           <div x-data="{ infoBubbleOpen: false }">
             <div class="items-center flex gap-2">
               <span class="font-bold text-2xl mb-1">Numbus TV</span>