myron/web-dashboard
1
0
Fork 0
mirror of https://github.com/myronblair/web-dashboard synced 2026-06-30 17:50:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit: personal links dashboard

Browse Source 
Blair HQ — categorized link dashboard for all home lab and hosting resources.
Password protected via nginx Basic Auth on web.orbishosting.com.
This commit is contained in:
Myron Blair
2026-06-21 03:45:56 +00:00
commit 93a2d1f47a
1 changed files with 410 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+410
View File
@@ -0,0 +1,410 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Myron's Dashboard</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f1117;
--surface: #1a1d27;
--surface2: #22263a;
--border: #2e3350;
--accent: #4f8ef7;
--accent2: #7c5af7;
--green: #22c55e;
--yellow: #eab308;
--red: #ef4444;
--orange: #f97316;
--pink: #ec4899;
--cyan: #06b6d4;
--text: #e2e4f0;
--muted: #8b90a8;
--radius: 12px;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
min-height: 100vh;
padding: 2rem 1.5rem;
}
header {
text-align: center;
margin-bottom: 2.5rem;
}
header h1 {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
}
header p {
color: var(--muted);
font-size: 0.85rem;
margin-top: 0.35rem;
letter-spacing: 0.5px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
max-width: 1400px;
margin: 0 auto;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-header {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1rem;
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
.card-header .icon {
font-size: 1.1rem;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
flex-shrink: 0;
}
.card-header h2 {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
}
.links { padding: 0.5rem 0; }
.link-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
text-decoration: none;
color: var(--text);
font-size: 0.9rem;
transition: background 0.15s;
border-radius: 0;
}
.link-item:hover { background: var(--surface2); }
.link-item .dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.link-item .name { flex: 1; font-weight: 500; }
.link-item .sub {
font-size: 0.75rem;
color: var(--muted);
}
.link-item .arrow {
color: var(--muted);
font-size: 0.7rem;
opacity: 0;
transition: opacity 0.15s;
}
.link-item:hover .arrow { opacity: 1; }
.dot-blue { background: var(--accent); }
.dot-purple { background: var(--accent2); }
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red { background: var(--red); }
.dot-orange { background: var(--orange); }
.dot-pink { background: var(--pink); }
.dot-cyan { background: var(--cyan); }
.dot-gray { background: var(--muted); }
.icon-blue { background: rgba(79,142,247,0.15); }
.icon-purple { background: rgba(124,90,247,0.15); }
.icon-green { background: rgba(34,197,94,0.15); }
.icon-yellow { background: rgba(234,179,8,0.15); }
.icon-orange { background: rgba(249,115,22,0.15); }
.icon-pink { background: rgba(236,72,153,0.15); }
.icon-cyan { background: rgba(6,182,212,0.15); }
.icon-red { background: rgba(239,68,68,0.15); }
.divider {
height: 1px;
background: var(--border);
margin: 0.25rem 1rem;
}
@media (max-width: 600px) {
body { padding: 1rem; }
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header>
<h1>⚡ Blair HQ</h1>
<p id="clock"></p>
</header>
<div class="grid">
<!-- INFRASTRUCTURE -->
<div class="card">
<div class="card-header">
<div class="icon icon-blue">🖥️</div>
<h2>Infrastructure</h2>
</div>
<div class="links">
<a class="link-item" href="https://10.48.200.90:8006" target="_blank">
<span class="dot dot-blue"></span><span class="name">Proxmox PVE1</span><span class="sub">Primary</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://10.48.200.91:8006" target="_blank">
<span class="dot dot-blue"></span><span class="name">Proxmox PVE2</span><span class="sub">Secondary</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.201:81" target="_blank">
<span class="dot dot-cyan"></span><span class="name">Nginx Proxy Manager</span><span class="sub">10.48.200.201</span><span class="arrow">↗</span>
</a>
<div class="divider"></div>
<a class="link-item" href="http://10.48.200.210:11434" target="_blank">
<span class="dot dot-purple"></span><span class="name">Ollama</span><span class="sub">Local LLM</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.249:5000" target="_blank">
<span class="dot dot-gray"></span><span class="name">Synology NAS</span><span class="sub">10.48.200.249</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- JARVIS -->
<div class="card">
<div class="card-header">
<div class="icon icon-blue">🤖</div>
<h2>JARVIS</h2>
</div>
<div class="links">
<a class="link-item" href="http://jarvis.orbishosting.com:1972" target="_blank">
<span class="dot dot-blue"></span><span class="name">JARVIS Dashboard</span><span class="sub">Main UI</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://jarvis.orbishosting.com:1972/admin" target="_blank">
<span class="dot dot-purple"></span><span class="name">JARVIS Admin</span><span class="sub">Admin panel</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.211/phpmyadmin" target="_blank">
<span class="dot dot-orange"></span><span class="name">phpMyAdmin</span><span class="sub">JARVIS DB</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- HOME AUTOMATION -->
<div class="card">
<div class="card-header">
<div class="icon icon-green">🏠</div>
<h2>Home Automation</h2>
</div>
<div class="links">
<a class="link-item" href="https://hoa.orbishosting.com" target="_blank">
<span class="dot dot-green"></span><span class="name">Home Assistant</span><span class="sub">hoa.orbishosting.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.18:8581" target="_blank">
<span class="dot dot-orange"></span><span class="name">HomeBridge</span><span class="sub">10.48.200.18</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.97:8123" target="_blank">
<span class="dot dot-cyan"></span><span class="name">HA (Direct LAN)</span><span class="sub">10.48.200.97</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- MEDIA -->
<div class="card">
<div class="card-header">
<div class="icon icon-purple">🎬</div>
<h2>Media</h2>
</div>
<div class="links">
<a class="link-item" href="http://10.48.200.33:8096" target="_blank">
<span class="dot dot-purple"></span><span class="name">Jellyfin</span><span class="sub">Media server</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.35:8989" target="_blank">
<span class="dot dot-blue"></span><span class="name">Sonarr</span><span class="sub">TV shows</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.35:7878" target="_blank">
<span class="dot dot-yellow"></span><span class="name">Radarr</span><span class="sub">Movies</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.35:9696" target="_blank">
<span class="dot dot-orange"></span><span class="name">Prowlarr</span><span class="sub">Indexers</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.35:8080" target="_blank">
<span class="dot dot-green"></span><span class="name">qBittorrent</span><span class="sub">Downloads</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- HOSTING PANEL -->
<div class="card">
<div class="card-header">
<div class="icon icon-cyan">⚙️</div>
<h2>NovaCPX Panel</h2>
</div>
<div class="links">
<a class="link-item" href="https://admin.novacpx.orbishosting.com" target="_blank">
<span class="dot dot-red"></span><span class="name">Admin Panel</span><span class="sub">Root access</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://reseller.novacpx.orbishosting.com" target="_blank">
<span class="dot dot-orange"></span><span class="name">Reseller Panel</span><span class="sub">Reseller access</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://panel.novacpx.orbishosting.com" target="_blank">
<span class="dot dot-green"></span><span class="name">Client Panel</span><span class="sub">End user access</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://novacpx.orbishosting.com" target="_blank">
<span class="dot dot-blue"></span><span class="name">Client Panel (alt)</span><span class="sub">novacpx.orbishosting.com</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- WEBSITES -->
<div class="card">
<div class="card-header">
<div class="icon icon-pink">🌐</div>
<h2>Websites</h2>
</div>
<div class="links">
<a class="link-item" href="https://orbishosting.com" target="_blank">
<span class="dot dot-blue"></span><span class="name">Orbis Hosting</span><span class="sub">orbishosting.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://orbis.orbishosting.com" target="_blank">
<span class="dot dot-cyan"></span><span class="name">Orbis Portal</span><span class="sub">orbis.orbishosting.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://tomsjavajive.com" target="_blank">
<span class="dot dot-yellow"></span><span class="name">Tom's Java Jive</span><span class="sub">tomsjavajive.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://tomtomgames.com" target="_blank">
<span class="dot dot-purple"></span><span class="name">Tom Tom Games</span><span class="sub">tomtomgames.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://epictravelexpeditions.com" target="_blank">
<span class="dot dot-green"></span><span class="name">Epic Travel</span><span class="sub">epictravelexpeditions.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://parkerslingshotrentals.com" target="_blank">
<span class="dot dot-red"></span><span class="name">Parker Slingshot Rentals</span><span class="sub">parkerslingshotrentals.com</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- COMMUNICATIONS -->
<div class="card">
<div class="card-header">
<div class="icon icon-orange">📞</div>
<h2>Communications</h2>
</div>
<div class="links">
<a class="link-item" href="https://fusion.orbishosting.com" target="_blank">
<span class="dot dot-orange"></span><span class="name">FusionPBX</span><span class="sub">fusion.orbishosting.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://fusion.orbishosting.com/app/settings" target="_blank">
<span class="dot dot-yellow"></span><span class="name">PBX Settings</span><span class="sub">Extensions &amp; trunks</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- NETWORKING -->
<div class="card">
<div class="card-header">
<div class="icon icon-yellow">🔒</div>
<h2>Networking</h2>
</div>
<div class="links">
<a class="link-item" href="https://10.48.200.1" target="_blank">
<span class="dot dot-yellow"></span><span class="name">FortiGate</span><span class="sub">10.48.200.1</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.80" target="_blank">
<span class="dot dot-cyan"></span><span class="name">WB610H Bridge</span><span class="sub">10.48.200.80</span><span class="arrow">↗</span>
</a>
<div class="divider"></div>
<a class="link-item" href="http://10.48.200.250" target="_blank">
<span class="dot dot-green"></span><span class="name">Goalake Switch 1</span><span class="sub">10.48.200.250</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.251" target="_blank">
<span class="dot dot-green"></span><span class="name">Goalake Switch 2</span><span class="sub">10.48.200.251</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://10.48.200.19" target="_blank">
<span class="dot dot-green"></span><span class="name">WireGuard CT</span><span class="sub">10.48.200.19</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://login.tailscale.com" target="_blank">
<span class="dot dot-blue"></span><span class="name">Tailscale</span><span class="sub">login.tailscale.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://dash.cloudflare.com" target="_blank">
<span class="dot dot-orange"></span><span class="name">Cloudflare</span><span class="sub">DNS &amp; CDN</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- GITHUB -->
<div class="card">
<div class="card-header">
<div class="icon icon-purple">🐙</div>
<h2>GitHub Repos</h2>
</div>
<div class="links">
<a class="link-item" href="https://github.com/myronblair/novacpx" target="_blank">
<span class="dot dot-cyan"></span><span class="name">NovaCPX</span><span class="sub">myronblair/novacpx</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://github.com/myronblair/jarvis" target="_blank">
<span class="dot dot-blue"></span><span class="name">JARVIS</span><span class="sub">myronblair/jarvis</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://github.com/myronblair/infra" target="_blank">
<span class="dot dot-gray"></span><span class="name">Infra</span><span class="sub">myronblair/infra</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="https://github.com/myronblair" target="_blank">
<span class="dot dot-purple"></span><span class="name">All Repos</span><span class="sub">github.com/myronblair</span><span class="arrow">↗</span>
</a>
</div>
</div>
<!-- DO SERVER -->
<div class="card">
<div class="card-header">
<div class="icon icon-blue">🌊</div>
<h2>DigitalOcean</h2>
</div>
<div class="links">
<a class="link-item" href="https://cloud.digitalocean.com" target="_blank">
<span class="dot dot-blue"></span><span class="name">DO Dashboard</span><span class="sub">cloud.digitalocean.com</span><span class="arrow">↗</span>
</a>
<a class="link-item" href="http://165.22.1.228:8090" target="_blank">
<span class="dot dot-cyan"></span><span class="name">CyberPanel</span><span class="sub">165.22.1.228:8090</span><span class="arrow">↗</span>
</a>
</div>
</div>
</div>
<script>
function tick() {
const now = new Date();
document.getElementById('clock').textContent =
now.toLocaleDateString('en-US', {weekday:'long',year:'numeric',month:'long',day:'numeric'}) +
' · ' +
now.toLocaleTimeString('en-US', {hour:'2-digit',minute:'2-digit',second:'2-digit'});
}
tick(); setInterval(tick, 1000);
</script>
</body>
</html>