feat(branding): rename project to DebTik (Debian Linux Router) and integrate new high-tech logo

internal/web/static/app.js

@@ -1,4 +1,4 @@
-// Proxmox RouterOS Frontend Application Logic
+// DebTik - Debian Linux Router Frontend Application Logic
 let state = {
   interfaces: [],
   vlans: [],

internal/web/static/debtik-emblem.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="none">
+  <defs>
+    <linearGradient id="debGradEmblem" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff2a6d" />
+      <stop offset="100%" stop-color="#d70a53" />
+    </linearGradient>
+    <linearGradient id="tikGradEmblem" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="100%" stop-color="#0284c7" />
+    </linearGradient>
+    <linearGradient id="shieldBorder" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff2a6d" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.9"/>
+    </linearGradient>
+    <filter id="glowEmblem" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="1.8" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+
+  <rect x="4" y="4" width="56" height="56" rx="16" fill="#0f172a" stroke="url(#shieldBorder)" stroke-width="2" />
+
+  <!-- Networking Circuit & Nodes -->
+  <path d="M8 32h12M44 32h12M32 8v12M32 44v12" stroke="#334155" stroke-width="1.8" stroke-linecap="round" />
+  
+  <!-- Debian Swirl -->
+  <path d="M 28 17 
+           C 37 16, 46 22, 46 32 
+           C 46 41, 38 48, 29 48 
+           C 20 48, 15 40, 16 32 
+           C 17 25, 23 22, 29 23 
+           C 34 24, 36 29, 35 33 
+           C 34 37, 30 38, 28 37 
+           C 26 36, 26 34, 27 32" 
+        fill="none" 
+        stroke="url(#debGradEmblem)" 
+        stroke-width="3.5" 
+        stroke-linecap="round" 
+        filter="url(#glowEmblem)" />
+
+  <!-- Router Arrow Cross (MikroTik Cross) -->
+  <path d="M 24 32 L 40 32 M 32 24 L 32 40" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" />
+  <polygon points="40,32 36,29 36,35" fill="#38bdf8" />
+  <polygon points="24,32 28,29 28,35" fill="#ff2a6d" />
+  <polygon points="32,24 29,28 35,28" fill="#38bdf8" />
+  <polygon points="32,40 29,36 35,36" fill="#ff2a6d" />
+
+  <!-- Dots -->
+  <circle cx="8" cy="32" r="2.5" fill="#38bdf8" />
+  <circle cx="56" cy="32" r="2.5" fill="#ff2a6d" />
+  <circle cx="32" cy="8" r="2.5" fill="#38bdf8" />
+  <circle cx="32" cy="56" r="2.5" fill="#ff2a6d" />
+</svg>

internal/web/static/debtik-logo.svg

@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 64" width="260" height="64" fill="none">
+  <defs>
+    <linearGradient id="debGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff2a6d" />
+      <stop offset="100%" stop-color="#d70a53" />
+    </linearGradient>
+    <linearGradient id="tikGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="100%" stop-color="#0284c7" />
+    </linearGradient>
+    <linearGradient id="nodeGlow" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ff2a6d" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.8"/>
+    </linearGradient>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="2" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+
+  <!-- Emblem Background Hexagon / Rounded Shield -->
+  <rect x="6" y="8" width="48" height="48" rx="14" fill="#131d35" stroke="url(#nodeGlow)" stroke-width="1.5" />
+
+  <!-- Networking Circuit & Nodes -->
+  <path d="M12 32h10M42 32h6M30 14v8M30 42v8" stroke="#334155" stroke-width="1.5" stroke-linecap="round" />
+  
+  <!-- Debian Swirl + Router Synergy Emblem -->
+  <!-- Debian iconic spiral stylized with geometric routing endpoints -->
+  <path d="M 27 18 
+           C 35 17, 43 23, 43 32 
+           C 43 40, 36 46, 28 46 
+           C 20 46, 16 39, 17 32 
+           C 18 26, 23 23, 28 24 
+           C 32 25, 34 29, 33 33 
+           C 32 36, 29 37, 27 36 
+           C 25 35, 25 33, 26 31" 
+        fill="none" 
+        stroke="url(#debGrad)" 
+        stroke-width="3" 
+        stroke-linecap="round" 
+        filter="url(#glow)" />
+
+  <!-- Router Arrow Cross (MikroTik / Router symbol cross) -->
+  <path d="M 24 32 L 36 32 M 30 26 L 30 38" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" />
+  <polygon points="36,32 33,30 33,34" fill="#38bdf8" />
+  <polygon points="24,32 27,30 27,34" fill="#ff2a6d" />
+  <polygon points="30,26 28,29 32,29" fill="#38bdf8" />
+  <polygon points="30,38 28,35 32,35" fill="#ff2a6d" />
+
+  <!-- Glowing Interface Port Dots -->
+  <circle cx="12" cy="32" r="2" fill="#38bdf8" />
+  <circle cx="48" cy="32" r="2" fill="#ff2a6d" />
+  <circle cx="30" cy="14" r="2" fill="#38bdf8" />
+  <circle cx="30" cy="50" r="2" fill="#ff2a6d" />
+
+  <!-- Brand Typography -->
+  <!-- Primary Title: DebTik -->
+  <text x="66" y="32" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="22" font-weight="800" letter-spacing="-0.5">
+    <tspan fill="#ffffff">Deb</tspan><tspan fill="url(#debGrad)">T</tspan><tspan fill="url(#tikGrad)">ik</tspan>
+  </text>
+
+  <!-- OS / LXC Badge Pill -->
+  <rect x="146" y="17" width="34" height="15" rx="4" fill="#d70a53" fill-opacity="0.15" stroke="#d70a53" stroke-width="0.8" stroke-opacity="0.4" />
+  <text x="151" y="28" font-family="'JetBrains Mono', monospace, sans-serif" font-size="8.5" font-weight="700" fill="#ff4b82">OS v7</text>
+
+  <!-- Subtitle: DEBIAN LINUX ROUTER -->
+  <text x="66" y="47" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="9.5" font-weight="700" fill="#94a3b8" letter-spacing="1.2">
+    DEBIAN LINUX ROUTER
+  </text>
+  
+  <!-- Subtle networking indicator line -->
+  <rect x="66" y="52" width="135" height="1.5" rx="1" fill="url(#nodeGlow)" fill-opacity="0.4" />
+</svg>

internal/web/static/index.html

@@ -3,8 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Proxmox RouterOS | Network Appliance</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'><path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/></svg>">
+  <title>DebTik | Debian Linux Router</title>
+  <link rel="icon" type="image/svg+xml" href="debtik-emblem.svg">
+  <link rel="alternate icon" type="image/png" href="debtik-logo.png">
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {
@@ -40,19 +41,15 @@
     <!-- Sidebar -->
     <aside id="sidebar" class="w-64 bg-[#0f172a]/95 border-r border-slate-800 flex flex-col flex-shrink-0 transition-all duration-300 z-30">
       <!-- Brand Header -->
-      <div class="h-16 flex items-center px-5 border-b border-slate-800 justify-between">
+      <div class="h-16 flex items-center px-4 border-b border-slate-800 justify-between bg-slate-950/60">
         <div class="flex items-center space-x-3">
-          <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-brand-600 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/20 text-white font-bold">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <div>
-            <div class="font-bold text-sm tracking-wide text-white flex items-center gap-1.5">
-              <span>RouterOS</span>
-              <span class="text-[10px] bg-brand-500/20 text-brand-400 font-mono px-1.5 py-0.5 rounded border border-brand-500/30">LXC</span>
+          <img src="debtik-emblem.svg" alt="DebTik" class="w-9 h-9 rounded-xl shadow-lg shadow-rose-900/40 object-contain p-0.5 bg-slate-900 border border-slate-800 flex-shrink-0" />
+          <div class="leading-tight">
+            <div class="font-black text-sm tracking-wide text-white flex items-center gap-1.5">
+              <span>Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
+              <span class="text-[9px] bg-rose-500/20 text-rose-300 font-mono px-1.5 py-0.5 rounded border border-rose-500/30 font-bold">ROUTER</span>
             </div>
-            <div class="text-[11px] text-slate-400">Proxmox Gateway</div>
+            <div class="text-[10px] text-slate-400 font-medium">Debian Linux Router</div>
           </div>
         </div>
       </div>
@@ -342,9 +339,20 @@
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
             </svg>
           </button>
-          <div>
-            <h1 id="page-title" class="text-lg font-bold text-white tracking-tight">Dashboard Overview</h1>
-            <p id="page-subtitle" class="text-xs text-slate-400">Live router performance and interface management</p>
+          <div class="flex items-center gap-3">
+            <img src="debtik-emblem.svg" alt="DebTik" class="w-7 h-7 sm:hidden" />
+            <div>
+              <h1 id="page-title" class="text-lg font-bold text-white tracking-tight">Dashboard Overview</h1>
+              <p id="page-subtitle" class="text-xs text-slate-400">DebTik - Debian Linux Router appliance management</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <div class="hidden sm:flex items-center gap-2 px-3 py-1 bg-slate-900/90 border border-slate-800 rounded-xl shadow-sm">
+            <img src="debtik-emblem.svg" alt="DebTik" class="w-5 h-5" />
+            <span class="text-xs font-black text-white tracking-wide">Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
+            <span class="text-[10px] text-slate-400 font-mono">Debian Linux Router</span>
           </div>
         </div>
       </header>
@@ -354,6 +362,33 @@
 
         <!-- ================= SECTION: DASHBOARD ================= -->
         <section id="section-dashboard" class="space-y-6">
+          <!-- DebTik Hero Brand Banner -->
+          <div class="bg-gradient-to-r from-slate-900 via-[#0f172a] to-slate-900 border border-slate-800 rounded-2xl p-5 flex flex-wrap items-center justify-between gap-4 shadow-xl relative overflow-hidden">
+            <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-rose-500/5 rounded-full blur-3xl pointer-events-none"></div>
+            <div class="flex items-center gap-4 z-10">
+              <img src="debtik-logo.png" alt="DebTik - Debian Linux Router" class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl shadow-2xl border border-slate-700/80 object-cover" />
+              <div>
+                <div class="flex items-center gap-2 mb-1">
+                  <h2 class="text-xl sm:text-2xl font-black text-white tracking-tight flex items-center gap-2">
+                    <span>Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
+                  </h2>
+                  <span class="px-2 py-0.5 text-[10px] font-mono font-bold rounded-full bg-rose-500/15 text-rose-300 border border-rose-500/30">Debian Linux Router</span>
+                  <span class="px-2 py-0.5 text-[10px] font-mono font-bold rounded-full bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">v7 Engine</span>
+                </div>
+                <p class="text-xs text-slate-400 max-w-xl">Enterprise-grade network routing appliance combining the rock-solid stability of Debian Linux with RouterOS v7 dynamic routing & policy engine.</p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-3 z-10">
+              <div class="px-3 py-2 bg-slate-950/80 border border-slate-800 rounded-xl text-right">
+                <div class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Engine</div>
+                <div class="text-xs font-mono font-bold text-white flex items-center gap-1.5 justify-end">
+                  <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
+                  <span>BIRD 2 + nftables</span>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
 
             <!-- CPU Usage -->

internal/web/static/style.css

@@ -1,4 +1,4 @@
-/* Custom styling & animations for Proxmox RouterOS */
+/* Custom styling & animations for DebTik - Debian Linux Router */
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
 
 :root {