2026-07-22 13:00:21 -07:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > Homelab · Resource map< / title >
< meta name = "color-scheme" content = "dark" / >
2026-07-22 19:15:30 -07:00
<!-- These services are plain HTTP on the LAN (no TLS certs). Do not use https:// -->
2026-07-22 13:00:21 -07:00
< style >
:root {
--bg: #0c0e12;
--bg-elev: #141820;
--bg-card: #1a1f2a;
--bg-card-hover: #222936;
--border: #2a3344;
--text: #e8ecf4;
--muted: #8b95a8;
--dim: #5c667a;
--accent: #6ea8fe;
--accent-soft: rgba(110, 168, 254, 0.12);
2026-07-22 19:15:30 -07:00
--warn: #f0b429;
2026-07-22 13:00:21 -07:00
--media: #7dd3a0;
--download: #f0b429;
--ai: #c4a1ff;
--code: #5eead4;
--radius: 14px;
--font: "Segoe UI", system-ui, -apple-system, sans-serif;
--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.5;
background-image:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(110, 168, 254, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(196, 161, 255, 0.06), transparent);
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.25rem 4rem;
}
header {
margin-bottom: 2rem;
border-bottom: 1px solid var(--border);
padding-bottom: 1.5rem;
}
header h1 {
font-size: 1.65rem;
font-weight: 650;
letter-spacing: -0.02em;
}
header p {
color: var(--muted);
margin-top: 0.4rem;
max-width: 42rem;
}
.host-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.85rem;
padding: 0.35rem 0.75rem;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.85rem;
color: var(--accent);
}
.host-pill span { color: var(--dim); }
2026-07-22 19:15:30 -07:00
.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);
}
2026-07-22 13:00:21 -07:00
.map {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.lane {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 4px);
padding: 1.15rem 1.15rem 1.25rem;
}
.lane-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.9rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--border);
}
.lane-head h2 {
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.lane-head h2 .dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
margin-right: 0.45rem;
vertical-align: middle;
}
.lane.media h2 .dot { background: var(--media); box-shadow: 0 0 10px var(--media); }
.lane.download h2 .dot { background: var(--download); box-shadow: 0 0 10px var(--download); }
.lane.ai h2 .dot { background: var(--ai); box-shadow: 0 0 10px var(--ai); }
.lane.code h2 .dot { background: var(--code); box-shadow: 0 0 10px var(--code); }
.lane-head .hint {
font-size: 0.8rem;
color: var(--dim);
}
.grid {
display: grid;
2026-07-22 19:15:30 -07:00
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
2026-07-22 13:00:21 -07:00
gap: 0.75rem;
}
a.card {
display: block;
text-decoration: none;
color: inherit;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.05rem;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
a.card:hover {
background: var(--bg-card-hover);
border-color: var(--accent);
transform: translateY(-1px);
}
a.card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.card-title {
font-weight: 600;
font-size: 1.02rem;
margin-bottom: 0.2rem;
}
.card-what {
font-size: 0.88rem;
color: var(--muted);
margin-bottom: 0.55rem;
}
.card-url {
font-family: var(--mono);
2026-07-22 19:15:30 -07:00
font-size: 0.72rem;
2026-07-22 13:00:21 -07:00
color: var(--accent);
background: var(--accent-soft);
2026-07-22 19:15:30 -07:00
padding: 0.3rem 0.45rem;
2026-07-22 13:00:21 -07:00
border-radius: 6px;
2026-07-22 19:15:30 -07:00
display: block;
2026-07-22 13:00:21 -07:00
word-break: break-all;
2026-07-22 19:15:30 -07:00
line-height: 1.35;
2026-07-22 13:00:21 -07:00
}
.card-howto {
margin-top: 0.65rem;
padding-top: 0.55rem;
border-top: 1px dashed var(--border);
font-size: 0.8rem;
color: var(--dim);
}
section.guide {
margin-top: 2.5rem;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 4px);
padding: 1.35rem 1.4rem 1.5rem;
}
section.guide h2 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
section.guide ol {
padding-left: 1.25rem;
color: var(--muted);
font-size: 0.95rem;
}
section.guide li { margin-bottom: 0.55rem; }
section.guide li strong { color: var(--text); }
section.guide code {
font-family: var(--mono);
font-size: 0.85em;
background: var(--bg-card);
padding: 0.1rem 0.35rem;
border-radius: 4px;
color: var(--accent);
}
footer {
margin-top: 2rem;
text-align: center;
font-size: 0.8rem;
color: var(--dim);
}
2026-07-22 19:15:30 -07:00
noscript .grid { margin-top: 0.75rem; }
2026-07-22 13:00:21 -07:00
@media (max-width: 560px) {
.lane-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}
< / style >
< / head >
< body >
< div class = "wrap" >
< header >
< h1 > Homelab resource map< / h1 >
< p >
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 >
2026-07-22 19:15:30 -07:00
< 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 >
2026-07-22 13:00:21 -07:00
< / header >
< div class = "map" id = "map" >
2026-07-22 19:15:30 -07:00
<!-- 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 >
2026-07-22 13:00:21 -07:00
< / div >
< section class = "guide" >
< h2 > Quick start for humans< / h2 >
< ol >
< li > < strong > Watch movies & shows< / strong > — open < em > Jellyfin< / em > . Create a user if asked. Libraries are already on the server.< / li >
< 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’ < / 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 >
2026-07-22 19:15:30 -07:00
< 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‑ < / strong > — these links won’ < / li >
2026-07-22 13:00:21 -07:00
< / ol >
< / section >
< footer >
2026-07-22 19:15:30 -07:00
Served by Caddy · arr-stack · plain HTTP on the LAN
2026-07-22 13:00:21 -07:00
< / footer >
< / div >
< script >
(function () {
2026-07-22 19:15:30 -07:00
// 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;
}
2026-07-22 13:00:21 -07:00
document.getElementById("host").textContent = host;
2026-07-22 19:15:30 -07:00
/** 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;
}
2026-07-22 13:00:21 -07:00
const lanes = [
{
id: "media",
title: "Watch & enjoy",
hint: "Day-to-day media",
items: [
{
name: "Jellyfin",
what: "TV, movies & music player (like Netflix at home)",
port: 8096,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Open → pick a library → play. Best starting point for family.",
},
],
},
{
id: "download",
title: "Find & download",
hint: "Automation + grabbers",
items: [
{
name: "Sonarr",
what: "TV show manager — finds and downloads episodes",
port: 8989,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Add a series → it searches and grabs new episodes automatically.",
},
{
name: "Radarr",
what: "Movie manager — finds and downloads films",
port: 7878,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Add a movie → it searches and downloads when available.",
},
{
name: "Lidarr",
what: "Music manager — albums & artists",
port: 8686,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Add an artist/album → downloads to the music library.",
},
{
name: "Prowlarr",
what: "Search hub — talks to torrent/Usenet indexers",
port: 9696,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Usually leave alone; Sonarr/Radarr use it under the hood.",
},
{
name: "Bazarr",
what: "Subtitles for TV & movies",
port: 6767,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Fetches subs once Sonarr/Radarr have the files.",
},
{
name: "qBittorrent",
what: "Torrent downloads (VPN-protected)",
port: 8080,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Check the queue if a torrent is stuck. Login: admin (see server docs).",
},
{
name: "SABnzbd",
what: "Usenet / NZB downloads",
port: 8085,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Queue for NZB jobs from Prowlarr/Sonarr. SSL to the provider.",
},
],
},
{
id: "ai",
title: "Local AI",
hint: "Runs on this mini PC",
items: [
{
name: "Open WebUI",
what: "Chat with the local AI (docs, questions, coding help)",
port: 3000,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Create an account on first visit. Chat stays on your network.",
},
{
name: "Bonsai API",
what: "Raw AI API for apps (OpenAI-compatible)",
port: 8081,
path: "/v1",
how: "For developers: base URL ends with /v1. Not a chat UI.",
},
{
name: "OpenHands",
2026-07-22 19:15:30 -07:00
what: "AI coding agent",
2026-07-22 13:00:21 -07:00
port: 3001,
2026-07-22 19:15:30 -07:00
path: "/",
how: "Always on with this stack. Point it at /workspace for projects.",
2026-07-22 13:00:21 -07:00
},
],
},
{
id: "code",
title: "Code & git",
hint: "Repos and projects",
items: [
{
name: "Forgejo",
what: "Git hosting — our private GitHub",
port: 3002,
2026-07-22 19:15:30 -07:00
path: "/",
2026-07-22 13:00:21 -07:00
how: "Sign in → browse repos (e.g. tim/stack). Clone over HTTP or SSH port 2222.",
},
],
},
];
2026-07-22 19:15:30 -07:00
function esc(s) {
return String(s)
.replace(/& /g, "& ")
.replace(/< /g, "< ")
.replace(/>/g, "> ")
.replace(/"/g, "" ");
}
2026-07-22 13:00:21 -07:00
const map = document.getElementById("map");
map.innerHTML = lanes
2026-07-22 19:15:30 -07:00
.map(function (lane) {
2026-07-22 13:00:21 -07:00
const cards = lane.items
2026-07-22 19:15:30 -07:00
.map(function (item) {
const href = httpUrl(item.port, item.path);
2026-07-22 13:00:21 -07:00
return (
'< a class = "card" href = "' +
2026-07-22 19:15:30 -07:00
esc(href) +
'" target="_blank" rel="noopener noreferrer">' +
2026-07-22 13:00:21 -07:00
'< div class = "card-title" > ' +
2026-07-22 19:15:30 -07:00
esc(item.name) +
2026-07-22 13:00:21 -07:00
"< / div > " +
'< div class = "card-what" > ' +
2026-07-22 19:15:30 -07:00
esc(item.what) +
2026-07-22 13:00:21 -07:00
"< / div > " +
2026-07-22 19:15:30 -07:00
'< span class = "card-url" > ' +
esc(href) +
2026-07-22 13:00:21 -07:00
"< / span > " +
'< div class = "card-howto" > ' +
2026-07-22 19:15:30 -07:00
esc(item.how) +
2026-07-22 13:00:21 -07:00
"< / div > " +
"< / a > "
);
})
.join("");
return (
'< section class = "lane ' +
2026-07-22 19:15:30 -07:00
esc(lane.id) +
2026-07-22 13:00:21 -07:00
'">' +
'< div class = "lane-head" > < h2 > < span class = "dot" > < / span > ' +
2026-07-22 19:15:30 -07:00
esc(lane.title) +
2026-07-22 13:00:21 -07:00
'< / h2 > < span class = "hint" > ' +
2026-07-22 19:15:30 -07:00
esc(lane.hint) +
2026-07-22 13:00:21 -07:00
"< / span > < / div > " +
'< div class = "grid" > ' +
cards +
"< / div > < / section > "
);
})
.join("");
})();
< / script >
< / body >
< / html >
