Import current Voyager console
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Zerafa Infrastructure Portal</title>
|
||||
<meta name="description" content="Zerafa infrastructure and home lab portal.">
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0a0f1d;
|
||||
--panel: rgba(20, 28, 48, 0.88);
|
||||
--panel-hover: rgba(29, 40, 67, 0.96);
|
||||
--text: #f4f7fb;
|
||||
--muted: #9da9bd;
|
||||
--accent: #79aaff;
|
||||
--border: #283550;
|
||||
--green: #45d483;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 15% 0%, rgba(55, 92, 175, .28), transparent 35%),
|
||||
radial-gradient(circle at 100% 10%, rgba(35, 120, 150, .16), transparent 30%),
|
||||
var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
.wrap {
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 56px 0 72px;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
font-size: .78rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2.5rem, 7vw, 5.2rem);
|
||||
line-height: .96;
|
||||
letter-spacing: -.055em;
|
||||
}
|
||||
.subtitle {
|
||||
margin: 18px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
.status {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
background: rgba(14, 22, 39, .75);
|
||||
color: var(--muted);
|
||||
font-size: .92rem;
|
||||
}
|
||||
.dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 18px rgba(69, 212, 131, .75);
|
||||
}
|
||||
section { margin-top: 38px; }
|
||||
.section-title {
|
||||
margin: 0 0 15px;
|
||||
font-size: .82rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .14em;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 150px;
|
||||
padding: 22px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
background: var(--panel);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: transform .16s ease, border-color .16s ease, background .16s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card::after {
|
||||
content: "↗";
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 18px;
|
||||
color: var(--muted);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--accent);
|
||||
background: var(--panel-hover);
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 9px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.card p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin-top: 22px;
|
||||
color: var(--accent);
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
.disabled {
|
||||
opacity: .52;
|
||||
pointer-events: none;
|
||||
}
|
||||
.disabled::after { content: "Soon"; font-size: .76rem; }
|
||||
footer {
|
||||
margin-top: 52px;
|
||||
color: var(--muted);
|
||||
font-size: .88rem;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
header { flex-direction: column; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.wrap { padding-top: 38px; }
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
.card { min-height: 132px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<header>
|
||||
<div>
|
||||
<p class="eyebrow">Operations Portal</p>
|
||||
<h1>Zerafa<br>Infrastructure</h1>
|
||||
<p class="subtitle">VPS services, home lab systems and project tools.</p>
|
||||
</div>
|
||||
<div class="status"><span class="dot"></span> Portal Online</div>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<p class="section-title">VPS Services</p>
|
||||
<div class="grid">
|
||||
<a class="card" href="https://portainer.zerafa.com">
|
||||
<h2>Portainer</h2>
|
||||
<p>Manage Docker containers, stacks, networks and volumes.</p>
|
||||
<span class="tag">Docker</span>
|
||||
</a>
|
||||
|
||||
<a class="card" href="https://git.zerafa.com">
|
||||
<h2>Gitea</h2>
|
||||
<p>Infrastructure repositories, configuration and documentation.</p>
|
||||
<span class="tag">Git</span>
|
||||
</a>
|
||||
|
||||
<a class="card" href="https://edge01.zerafa.com">
|
||||
<h2>Edge01</h2>
|
||||
<p>Primary DreamHost VPS landing page and infrastructure host.</p>
|
||||
<span class="tag">Server</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="section-title">Home Lab</p>
|
||||
<div class="grid">
|
||||
<div class="card disabled">
|
||||
<h2>Home Assistant</h2>
|
||||
<p>Home automation dashboards, devices and integrations.</p>
|
||||
<span class="tag">Tunnel Pending</span>
|
||||
</div>
|
||||
|
||||
<div class="card disabled">
|
||||
<h2>Proxmox</h2>
|
||||
<p>Virtual machines, containers and cluster management.</p>
|
||||
<span class="tag">Tunnel Pending</span>
|
||||
</div>
|
||||
|
||||
<div class="card disabled">
|
||||
<h2>UniFi</h2>
|
||||
<p>Network gateways, switches, access points and clients.</p>
|
||||
<span class="tag">Tunnel Pending</span>
|
||||
</div>
|
||||
|
||||
<div class="card disabled">
|
||||
<h2>Pi-hole</h2>
|
||||
<p>DNS filtering, query statistics and resolver status.</p>
|
||||
<span class="tag">Tunnel Pending</span>
|
||||
</div>
|
||||
|
||||
<div class="card disabled">
|
||||
<h2>ADS-B</h2>
|
||||
<p>Aircraft tracking, receiver statistics and feeder links.</p>
|
||||
<span class="tag">Tunnel Pending</span>
|
||||
</div>
|
||||
|
||||
<div class="card disabled">
|
||||
<h2>Monitoring</h2>
|
||||
<p>Service uptime, alerts and infrastructure health.</p>
|
||||
<span class="tag">Coming Soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>portal.zerafa.com</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user