263 lines
12 KiB
HTML
263 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>KiteStacks.ao</title>
|
|
<link rel="icon" type="image/png" href="/images/kitestacks-icon.png" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-overlay"></div>
|
|
|
|
<main class="portal">
|
|
|
|
<!-- ───────── TOP HUD ───────── -->
|
|
<section class="hud">
|
|
<div class="hud-cell hud-cpu">
|
|
<svg class="hud-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></svg>
|
|
<div class="hud-text">
|
|
<span class="hud-label">CPU</span>
|
|
<span class="hud-value" id="hud-cpu">--%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hud-cell hud-ram">
|
|
<svg class="hud-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="10" rx="1"/><path d="M6 11v2M10 11v2M14 11v2M18 11v2"/></svg>
|
|
<div class="hud-text">
|
|
<span class="hud-label">RAM</span>
|
|
<span class="hud-value" id="hud-ram">-- GB / -- GB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hud-cell hud-storage">
|
|
<svg class="hud-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.7 4 3 9 3s9-1.3 9-3V5M3 11v6c0 1.7 4 3 9 3s9-1.3 9-3v-6"/></svg>
|
|
<div class="hud-text">
|
|
<span class="hud-label">STORAGE</span>
|
|
<span class="hud-value" id="hud-storage">-- GB / -- GB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hud-cell hud-uptime">
|
|
<svg class="hud-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
|
|
<div class="hud-text">
|
|
<span class="hud-label">UPTIME</span>
|
|
<span class="hud-value" id="hud-uptime">--d --h --m</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hud-cell hud-weather">
|
|
<svg class="hud-icon" id="weather-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
<div class="hud-text">
|
|
<span class="hud-value hud-temp" id="hud-temp">--°F</span>
|
|
<span class="hud-label" id="hud-weather-desc">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="hud-search" action="https://www.google.com/search" method="get" target="_blank">
|
|
<input type="text" name="q" placeholder="Search Google..." autocomplete="off" />
|
|
<button type="submit" aria-label="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- ───────── HERO ───────── -->
|
|
<section class="hero">
|
|
<div class="hero-center">
|
|
<img src="/images/kitestacks-icon.png" alt="KiteStacks" class="hero-kite" />
|
|
<div class="hero-titles">
|
|
<h1 class="hero-title">KiteStacks<span class="dot-ao">.ao</span></h1>
|
|
<p class="hero-tagline">STACK HIGHER. FLY FURTHER.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- ───────── INFRASTRUCTURE ───────── -->
|
|
<section class="panel panel-cyan">
|
|
<header class="panel-head"><span class="chevrons">»</span> INFRASTRUCTURE</header>
|
|
<div class="cards cards-4">
|
|
<a class="card" href="#" data-coming-soon="1" data-name="Portainer">
|
|
<img src="/images/icons/portainer.png" alt="" />
|
|
<div><div class="card-title">Portainer</div><div class="card-sub">Docker Management</div></div>
|
|
</a>
|
|
<a class="card" href="https://auth.kitestacks.com" target="_blank" rel="noopener" data-name="Authentik">
|
|
<img src="/images/icons/authentik.png" alt="" />
|
|
<div><div class="card-title">Authentik</div><div class="card-sub">Identity & Access</div></div>
|
|
</a>
|
|
<a class="card" href="https://dash.cloudflare.com" target="_blank" rel="noopener" data-name="Cloudflare">
|
|
<img src="/images/icons/cloudflare.png" alt="" />
|
|
<div><div class="card-title">Cloudflare</div><div class="card-sub">DNS & Tunnel</div></div>
|
|
</a>
|
|
<a class="card" href="https://status.kitestacks.com" target="_blank" rel="noopener" data-name="Uptime Kuma">
|
|
<img src="/images/icons/uptime-kuma.png" alt="" />
|
|
<div><div class="card-title">Uptime Kuma</div><div class="card-sub">Service Health</div></div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ───────── MONITORING + AI ───────── -->
|
|
<div class="row row-2">
|
|
<section class="panel panel-magenta">
|
|
<header class="panel-head"><span class="chevrons">»</span> MONITORING</header>
|
|
<div class="cards cards-3">
|
|
<a class="card" href="https://grafana.kitestacks.com" target="_blank" rel="noopener" data-name="Grafana">
|
|
<img src="/images/icons/grafana.png" alt="" />
|
|
<div><div class="card-title">Grafana</div><div class="card-sub">Dashboards</div></div>
|
|
</a>
|
|
<a class="card" href="#" data-coming-soon="1" data-name="Prometheus">
|
|
<img src="/images/icons/prometheus.png" alt="" />
|
|
<div><div class="card-title">Prometheus</div><div class="card-sub">Metrics Database</div></div>
|
|
</a>
|
|
<a class="card" href="#" data-coming-soon="1" data-name="Node Exporter">
|
|
<img src="/images/icons/node-exporter.png" alt="" />
|
|
<div><div class="card-title">Node Exporter</div><div class="card-sub">Host Telemetry</div></div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-purple">
|
|
<header class="panel-head"><span class="chevrons">»</span> AI & AUTOMATION</header>
|
|
<div class="cards cards-3">
|
|
<a class="card" href="https://ai.kitestacks.com" target="_blank" rel="noopener" data-name="Kite AI">
|
|
<img src="/images/icons/artificial-intelligence.png" alt="" />
|
|
<div><div class="card-title">Kite AI</div><div class="card-sub">Private AI Workspace</div></div>
|
|
</a>
|
|
<a class="card" href="#" data-coming-soon="1" data-name="LiteLLM">
|
|
<img src="/images/icons/open-webui.png" alt="" />
|
|
<div><div class="card-title">LiteLLM</div><div class="card-sub">Model Gateway</div></div>
|
|
</a>
|
|
<a class="card" href="https://openrouter.ai" target="_blank" rel="noopener" data-name="OpenRouter">
|
|
<img src="/images/icons/openrouter.png" alt="" />
|
|
<div><div class="card-title">OpenRouter</div><div class="card-sub">AI Models</div></div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- ───────── KB / DEV / SHORTCUTS ───────── -->
|
|
<div class="row row-3">
|
|
<section class="panel panel-pink">
|
|
<header class="panel-head"><span class="chevrons">»</span> KNOWLEDGE BASE</header>
|
|
<div class="cards cards-2">
|
|
<a class="card" href="https://kavita.kitestacks.com" target="_blank" rel="noopener" data-name="Kavita">
|
|
<img src="/images/icons/kavita.png" alt="" />
|
|
<div><div class="card-title">Kavita</div><div class="card-sub">Comics & Books</div></div>
|
|
</a>
|
|
<a class="card" href="https://links.kitestacks.com" target="_blank" rel="noopener" data-name="Shaarli">
|
|
<img src="/images/icons/shaarli.png" alt="" />
|
|
<div><div class="card-title">Shaarli</div><div class="card-sub">Bookmark Library</div></div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-cyan">
|
|
<header class="panel-head"><span class="chevrons">»</span> DEVELOPMENT</header>
|
|
<div class="cards cards-2">
|
|
<a class="card" href="https://gitforge.kitestacks.com" target="_blank" rel="noopener" data-name="Forgejo">
|
|
<img src="/images/icons/forgejo.png" alt="" />
|
|
<div><div class="card-title">Forgejo</div><div class="card-sub">Git Platform</div></div>
|
|
</a>
|
|
<a class="card" href="https://tasks.kitestacks.com" target="_blank" rel="noopener" data-name="OpenProject">
|
|
<img src="/images/icons/openproject.png" alt="" />
|
|
<div><div class="card-title">OpenProject</div><div class="card-sub">Project Management</div></div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-purple">
|
|
<header class="panel-head"><span class="chevrons">»</span> COMMUNITY</header>
|
|
<div class="cards">
|
|
<a class="card" href="#" data-coming-soon="1" data-name="Discord">
|
|
<img src="/images/icons/discord.png" alt="" />
|
|
<div><div class="card-title">Discord</div><div class="card-sub">Request Server Access</div></div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<!-- ───────── OVERVIEW / STATUS / ACTIVITY ───────── -->
|
|
<div class="row row-bottom">
|
|
|
|
<section class="panel panel-magenta">
|
|
<header class="panel-head"><span class="chevrons">»</span> SYSTEM STATUS</header>
|
|
<div class="gauges">
|
|
<div class="gauge" data-color="cyan">
|
|
<svg viewBox="0 0 120 120">
|
|
<circle class="g-track" cx="60" cy="60" r="48"/>
|
|
<circle class="g-fill" cx="60" cy="60" r="48" id="g-cpu"/>
|
|
</svg>
|
|
<div class="g-label">CPU</div>
|
|
<div class="g-value" id="g-cpu-val">--%</div>
|
|
<svg class="g-wave" viewBox="0 0 120 20" preserveAspectRatio="none">
|
|
<polyline id="wave-cpu" points="" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="gauge" data-color="green">
|
|
<svg viewBox="0 0 120 120">
|
|
<circle class="g-track" cx="60" cy="60" r="48"/>
|
|
<circle class="g-fill" cx="60" cy="60" r="48" id="g-ram"/>
|
|
</svg>
|
|
<div class="g-label">RAM</div>
|
|
<div class="g-value" id="g-ram-val">--%</div>
|
|
<div class="g-sub" id="g-ram-sub">-- GB / -- GB</div>
|
|
</div>
|
|
|
|
<div class="gauge" data-color="yellow">
|
|
<svg viewBox="0 0 120 120">
|
|
<circle class="g-track" cx="60" cy="60" r="48"/>
|
|
<circle class="g-fill" cx="60" cy="60" r="48" id="g-storage"/>
|
|
</svg>
|
|
<div class="g-label">STORAGE</div>
|
|
<div class="g-value" id="g-storage-val">--%</div>
|
|
<div class="g-sub" id="g-storage-sub">-- GB / -- GB</div>
|
|
</div>
|
|
|
|
<div class="gauge gauge-net" data-color="cyan">
|
|
<div class="g-label">NETWORK</div>
|
|
<div class="g-net">
|
|
<div class="net-line up">↑ <span id="net-tx">-- KB/s</span></div>
|
|
<div class="net-line dn">↓ <span id="net-rx">-- KB/s</span></div>
|
|
</div>
|
|
<svg class="g-wave" viewBox="0 0 120 20" preserveAspectRatio="none">
|
|
<polyline id="wave-net" points="" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cores">
|
|
<div class="cores-head">
|
|
<span class="cores-title">CPU CORES</span>
|
|
<span class="cores-meta" id="cores-meta">--</span>
|
|
</div>
|
|
<div class="cores-grid" id="cores-grid"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-cyan">
|
|
<header class="panel-head"><span class="chevrons">»</span> RECENT ACTIVITY</header>
|
|
<ul class="activity" id="activity-list">
|
|
<li class="act-empty"><span class="act-ico" style="color:#54e8ff">●</span><span class="act-txt">Loading recent activity…</span></li>
|
|
</ul>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<footer class="portal-footer">
|
|
<span class="foot-bracket left"></span>
|
|
<span class="foot-text">© 2026 KiteStacks. All systems operational.</span>
|
|
<span class="foot-bracket right"></span>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|