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.
This commit is contained in:
tim
parent
7e5444a177
commit
60f8a89c87
1 changed files with 120 additions and 35 deletions
|
|
@ -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 & 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 & 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 & 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 & 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 & 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, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
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 +
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue