From 60f8a89c87247272f0433037de50bf001572581d Mon Sep 17 00:00:00 2001
From: tim <tim@stack.local>
Date: Wed, 22 Jul 2026 19:15:30 -0700
Subject: [PATCH] Landing page: always use absolute http:// service URLs

Show full http://host:port links on every card, fall back from localhost
to the LAN IP, and warn about HTTPS-only browsers breaking plain HTTP.
---
 landing/site/index.html | 155 +++++++++++++++++++++++++++++++---------
 1 file changed, 120 insertions(+), 35 deletions(-)

diff --git a/landing/site/index.html b/landing/site/index.html
index f76a1bb..5742518 100644
--- a/landing/site/index.html
+++ b/landing/site/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Homelab · Resource map</title>
   <meta name="color-scheme" content="dark" />
+  <!-- These services are plain HTTP on the LAN (no TLS certs). Do not use https:// -->
   <style>
     :root {
       --bg: #0c0e12;
@@ -17,6 +18,7 @@
       --dim: #5c667a;
       --accent: #6ea8fe;
       --accent-soft: rgba(110, 168, 254, 0.12);
+      --warn: #f0b429;
       --media: #7dd3a0;
       --download: #f0b429;
       --ai: #c4a1ff;
@@ -79,7 +81,23 @@
 
     .host-pill span { color: var(--dim); }
 
-    /* Visual map lanes */
+    .http-note {
+      margin-top: 0.85rem;
+      padding: 0.65rem 0.85rem;
+      border-radius: 10px;
+      border: 1px solid rgba(240, 180, 41, 0.35);
+      background: rgba(240, 180, 41, 0.08);
+      color: var(--warn);
+      font-size: 0.88rem;
+      max-width: 44rem;
+    }
+
+    .http-note code {
+      font-family: var(--mono);
+      font-size: 0.85em;
+      color: var(--text);
+    }
+
     .map {
       display: flex;
       flex-direction: column;
@@ -131,7 +149,7 @@
 
     .grid {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
       gap: 0.75rem;
     }
 
@@ -171,13 +189,14 @@
 
     .card-url {
       font-family: var(--mono);
-      font-size: 0.75rem;
+      font-size: 0.72rem;
       color: var(--accent);
       background: var(--accent-soft);
-      padding: 0.25rem 0.45rem;
+      padding: 0.3rem 0.45rem;
       border-radius: 6px;
-      display: inline-block;
+      display: block;
       word-break: break-all;
+      line-height: 1.35;
     }
 
     .card-howto {
@@ -188,11 +207,6 @@
       color: var(--dim);
     }
 
-    .card.offline {
-      opacity: 0.55;
-      pointer-events: none;
-    }
-
     section.guide {
       margin-top: 2.5rem;
       background: var(--bg-elev);
@@ -230,6 +244,8 @@
       color: var(--dim);
     }
 
+    noscript .grid { margin-top: 0.75rem; }
+
     @media (max-width: 560px) {
       .lane-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
     }
@@ -243,11 +259,49 @@
         Everything below is available to PCs on this home network.
         Click a card to open it. New here? Read the short guide at the bottom.
       </p>
-      <div class="host-pill"><span>server</span> <strong id="host">…</strong></div>
+      <div class="host-pill"><span>server</span> <strong id="host">192.168.8.123</strong></div>
+      <p class="http-note">
+        All service links use plain <code>http://</code> (no HTTPS certificates on the LAN).
+        If a link fails, check the browser is not forcing HTTPS / “HTTPS-Only mode” for local IPs.
+      </p>
     </header>
 
     <div class="map" id="map">
-      <!-- filled by JS so host IP stays correct on any LAN address -->
+      <!-- Static fallback (no JS): explicit http:// URLs -->
+      <noscript>
+        <section class="lane media">
+          <div class="lane-head"><h2><span class="dot"></span>Watch &amp; enjoy</h2></div>
+          <div class="grid">
+            <a class="card" href="http://192.168.8.123:8096/"><div class="card-title">Jellyfin</div><span class="card-url">http://192.168.8.123:8096/</span></a>
+          </div>
+        </section>
+        <section class="lane download">
+          <div class="lane-head"><h2><span class="dot"></span>Find &amp; download</h2></div>
+          <div class="grid">
+            <a class="card" href="http://192.168.8.123:8989/"><div class="card-title">Sonarr</div><span class="card-url">http://192.168.8.123:8989/</span></a>
+            <a class="card" href="http://192.168.8.123:7878/"><div class="card-title">Radarr</div><span class="card-url">http://192.168.8.123:7878/</span></a>
+            <a class="card" href="http://192.168.8.123:8686/"><div class="card-title">Lidarr</div><span class="card-url">http://192.168.8.123:8686/</span></a>
+            <a class="card" href="http://192.168.8.123:9696/"><div class="card-title">Prowlarr</div><span class="card-url">http://192.168.8.123:9696/</span></a>
+            <a class="card" href="http://192.168.8.123:6767/"><div class="card-title">Bazarr</div><span class="card-url">http://192.168.8.123:6767/</span></a>
+            <a class="card" href="http://192.168.8.123:8080/"><div class="card-title">qBittorrent</div><span class="card-url">http://192.168.8.123:8080/</span></a>
+            <a class="card" href="http://192.168.8.123:8085/"><div class="card-title">SABnzbd</div><span class="card-url">http://192.168.8.123:8085/</span></a>
+          </div>
+        </section>
+        <section class="lane ai">
+          <div class="lane-head"><h2><span class="dot"></span>Local AI</h2></div>
+          <div class="grid">
+            <a class="card" href="http://192.168.8.123:3000/"><div class="card-title">Open WebUI</div><span class="card-url">http://192.168.8.123:3000/</span></a>
+            <a class="card" href="http://192.168.8.123:8081/v1"><div class="card-title">Bonsai API</div><span class="card-url">http://192.168.8.123:8081/v1</span></a>
+            <a class="card" href="http://192.168.8.123:3001/"><div class="card-title">OpenHands</div><span class="card-url">http://192.168.8.123:3001/</span></a>
+          </div>
+        </section>
+        <section class="lane code">
+          <div class="lane-head"><h2><span class="dot"></span>Code &amp; git</h2></div>
+          <div class="grid">
+            <a class="card" href="http://192.168.8.123:3002/"><div class="card-title">Forgejo</div><span class="card-url">http://192.168.8.123:3002/</span></a>
+          </div>
+        </section>
+      </noscript>
     </div>
 
     <section class="guide">
@@ -257,23 +311,37 @@
         <li><strong>Request / automate media</strong> — use <em>Sonarr</em> (TV), <em>Radarr</em> (movies), <em>Lidarr</em> (music). They search via <em>Prowlarr</em> and download with torrents or Usenet.</li>
         <li><strong>Downloads</strong> — <em>qBittorrent</em> is for torrents (goes through the VPN). <em>SABnzbd</em> is for Usenet/NZB files. You usually don’t open these unless something is stuck.</li>
         <li><strong>Talk to the local AI</strong> — <em>Open WebUI</em> is the chat box. The model runs on this mini PC (private, no cloud).</li>
-        <li><strong>Code &amp; git</strong> — <em>Forgejo</em> is our GitHub-like site. <em>OpenHands</em> is an AI coding agent (optional; start it if the link fails).</li>
-        <li><strong>Only on this Wi‑Fi / LAN</strong> — these links use the server’s local address. They won’t work from the mobile internet unless you set up remote access later.</li>
+        <li><strong>Code &amp; git</strong> — <em>Forgejo</em> is our GitHub-like site. <em>OpenHands</em> is an AI coding agent.</li>
+        <li><strong>HTTP only</strong> — use <code>http://</code> links as shown. There are no TLS certificates on these ports yet; <code>https://</code> will fail.</li>
+        <li><strong>Only on this Wi‑Fi / LAN</strong> — these links won’t work from mobile data unless you set up remote access later.</li>
       </ol>
     </section>
 
     <footer>
-      Served by Caddy · arr-stack · dark map for LAN browsers
+      Served by Caddy · arr-stack · plain HTTP on the LAN
     </footer>
   </div>
 
   <script>
     (function () {
-      const host = location.hostname || "192.168.8.123";
+      // Prefer the host you used to open this page; never upgrade to https.
+      // If opened via localhost on the server, fall back to the LAN IP.
+      const DEFAULT_HOST = "192.168.8.123";
+      let host = (location.hostname || DEFAULT_HOST).trim();
+      if (!host || host === "localhost" || host === "127.0.0.1" || host === "::1") {
+        host = DEFAULT_HOST;
+      }
       document.getElementById("host").textContent = host;
 
-      const u = (port, path) =>
-        "http://" + host + ":" + port + (path || "");
+      /** Always absolute plain-HTTP URL with trailing slash for UIs */
+      function httpUrl(port, path) {
+        path = path || "/";
+        if (path.charAt(0) !== "/") path = "/" + path;
+        // APIs like /v1 should not force trailing slash doubling
+        var base = "http://" + host + ":" + String(port);
+        if (path === "/") return base + "/";
+        return base + path;
+      }
 
       const lanes = [
         {
@@ -285,6 +353,7 @@
               name: "Jellyfin",
               what: "TV, movies & music player (like Netflix at home)",
               port: 8096,
+              path: "/",
               how: "Open → pick a library → play. Best starting point for family.",
             },
           ],
@@ -298,42 +367,49 @@
               name: "Sonarr",
               what: "TV show manager — finds and downloads episodes",
               port: 8989,
+              path: "/",
               how: "Add a series → it searches and grabs new episodes automatically.",
             },
             {
               name: "Radarr",
               what: "Movie manager — finds and downloads films",
               port: 7878,
+              path: "/",
               how: "Add a movie → it searches and downloads when available.",
             },
             {
               name: "Lidarr",
               what: "Music manager — albums & artists",
               port: 8686,
+              path: "/",
               how: "Add an artist/album → downloads to the music library.",
             },
             {
               name: "Prowlarr",
               what: "Search hub — talks to torrent/Usenet indexers",
               port: 9696,
+              path: "/",
               how: "Usually leave alone; Sonarr/Radarr use it under the hood.",
             },
             {
               name: "Bazarr",
               what: "Subtitles for TV & movies",
               port: 6767,
+              path: "/",
               how: "Fetches subs once Sonarr/Radarr have the files.",
             },
             {
               name: "qBittorrent",
               what: "Torrent downloads (VPN-protected)",
               port: 8080,
+              path: "/",
               how: "Check the queue if a torrent is stuck. Login: admin (see server docs).",
             },
             {
               name: "SABnzbd",
               what: "Usenet / NZB downloads",
               port: 8085,
+              path: "/",
               how: "Queue for NZB jobs from Prowlarr/Sonarr. SSL to the provider.",
             },
           ],
@@ -347,6 +423,7 @@
               name: "Open WebUI",
               what: "Chat with the local AI (docs, questions, coding help)",
               port: 3000,
+              path: "/",
               how: "Create an account on first visit. Chat stays on your network.",
             },
             {
@@ -358,9 +435,10 @@
             },
             {
               name: "OpenHands",
-              what: "AI coding agent (optional service)",
+              what: "AI coding agent",
               port: 3001,
-              how: "AI coding agent — always on with this stack. Point it at /workspace for projects.",
+              path: "/",
+              how: "Always on with this stack. Point it at /workspace for projects.",
             },
           ],
         },
@@ -373,35 +451,42 @@
               name: "Forgejo",
               what: "Git hosting — our private GitHub",
               port: 3002,
+              path: "/",
               how: "Sign in → browse repos (e.g. tim/stack). Clone over HTTP or SSH port 2222.",
             },
           ],
         },
       ];
 
+      function esc(s) {
+        return String(s)
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;");
+      }
+
       const map = document.getElementById("map");
       map.innerHTML = lanes
-        .map((lane) => {
+        .map(function (lane) {
           const cards = lane.items
-            .map((item) => {
-              const href = u(item.port, item.path || "");
-              const pathLabel = item.path ? item.path : "";
+            .map(function (item) {
+              const href = httpUrl(item.port, item.path);
               return (
                 '<a class="card" href="' +
-                href +
-                '" target="_blank" rel="noopener">' +
+                esc(href) +
+                '" target="_blank" rel="noopener noreferrer">' +
                 '<div class="card-title">' +
-                item.name +
+                esc(item.name) +
                 "</div>" +
                 '<div class="card-what">' +
-                item.what +
+                esc(item.what) +
                 "</div>" +
-                '<span class="card-url">:' +
-                item.port +
-                pathLabel +
+                '<span class="card-url">' +
+                esc(href) +
                 "</span>" +
                 '<div class="card-howto">' +
-                item.how +
+                esc(item.how) +
                 "</div>" +
                 "</a>"
               );
@@ -409,12 +494,12 @@
             .join("");
           return (
             '<section class="lane ' +
-            lane.id +
+            esc(lane.id) +
             '">' +
             '<div class="lane-head"><h2><span class="dot"></span>' +
-            lane.title +
+            esc(lane.title) +
             '</h2><span class="hint">' +
-            lane.hint +
+            esc(lane.hint) +
             "</span></div>" +
             '<div class="grid">' +
             cards +