Automated update: 2026-06-08 22:47:39
This commit is contained in:
KiteStacks AutoSync
parent
272480bd80
commit
318136e8a0
19 changed files with 1985 additions and 1 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
apps/kitestacks-portal-test/public/images/icons/discord.png
Normal file
BIN
apps/kitestacks-portal-test/public/images/icons/discord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
Replace this placeholder with a real Discord icon named discord.png.
|
||||
|
||||
Expected path:
|
||||
public/images/icons/discord.png
|
||||
|
|
@ -170,6 +170,16 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel panel-purple">
|
||||
<header class="panel-head"><span class="chevrons">»</span> COMMUNITY</header>
|
||||
<div class="cards cards-2">
|
||||
<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 ───────── -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,253 @@
|
|||
<!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>
|
||||
|
||||
</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>
|
||||
|
|
@ -0,0 +1,678 @@
|
|||
/* ===================================================================
|
||||
KiteStacks.ao — cyberpunk portal stylesheet
|
||||
=================================================================== */
|
||||
|
||||
:root {
|
||||
--bg: #05030f;
|
||||
--panel-bg: rgba(10, 6, 28, 0.72);
|
||||
--panel-bg-solid: #0a061c;
|
||||
|
||||
--cyan: #54e8ff;
|
||||
--cyan-bright: #7df3ff;
|
||||
--magenta: #ff45c8;
|
||||
--magenta-bright: #ff7adb;
|
||||
--purple: #bd6cff;
|
||||
--purple-bright: #d99dff;
|
||||
--pink: #ff5fb1;
|
||||
--green: #39ff7a;
|
||||
--yellow: #ffd84a;
|
||||
--orange: #ff8b3a;
|
||||
|
||||
--text: #e6f3ff;
|
||||
--text-dim: #8aa3c0;
|
||||
|
||||
--font-display: 'Orbitron', sans-serif;
|
||||
--font-ui: 'Rajdhani', sans-serif;
|
||||
--font-mono: 'Share Tech Mono', monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body { margin: 0; padding: 0; min-height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-ui);
|
||||
color: var(--text);
|
||||
background: var(--bg) url('/images/cyberpunk-bg.png') center top / cover no-repeat fixed;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* darkening overlay so neon pops */
|
||||
.bg-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at top, rgba(120, 60, 200, 0.18), transparent 60%),
|
||||
linear-gradient(180deg, rgba(5, 3, 15, 0.55), rgba(5, 3, 15, 0.85));
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.portal {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1700px;
|
||||
margin: 0 auto;
|
||||
padding: 18px 26px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
TOP HUD
|
||||
================================================================= */
|
||||
.hud {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(160px, 1fr)) 2fr;
|
||||
gap: 14px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hud-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, rgba(15, 10, 40, 0.7), rgba(8, 5, 22, 0.85));
|
||||
border: 1px solid rgba(84, 232, 255, 0.35);
|
||||
box-shadow:
|
||||
0 0 12px rgba(84, 232, 255, 0.15),
|
||||
inset 0 0 18px rgba(84, 232, 255, 0.05);
|
||||
color: var(--cyan);
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.hud-icon {
|
||||
width: 30px; height: 30px;
|
||||
flex: 0 0 auto;
|
||||
filter: drop-shadow(0 0 6px currentColor);
|
||||
}
|
||||
|
||||
.hud-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
|
||||
|
||||
.hud-label {
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hud-value {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: var(--cyan-bright);
|
||||
text-shadow: 0 0 8px rgba(84, 232, 255, 0.6);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* per-cell accents */
|
||||
.hud-cpu { border-color: rgba(84, 232, 255, 0.45); color: var(--cyan); }
|
||||
.hud-ram { border-color: rgba(189, 108, 255, 0.45); color: var(--purple); }
|
||||
.hud-storage { border-color: rgba(255, 69, 200, 0.45); color: var(--magenta); }
|
||||
.hud-uptime { border-color: rgba(57, 255, 122, 0.45); color: var(--green); }
|
||||
.hud-weather { border-color: rgba(255, 216, 74, 0.45); color: var(--yellow); }
|
||||
|
||||
.hud-cpu .hud-value { color: #9af0ff; text-shadow: 0 0 8px var(--cyan); }
|
||||
.hud-ram .hud-value { color: #d9b5ff; text-shadow: 0 0 8px var(--purple); }
|
||||
.hud-storage .hud-value { color: #ff9ddc; text-shadow: 0 0 8px var(--magenta); }
|
||||
.hud-uptime .hud-value { color: #9affc1; text-shadow: 0 0 8px var(--green); }
|
||||
.hud-weather .hud-value { color: #ffec9a; text-shadow: 0 0 8px var(--yellow); }
|
||||
|
||||
.hud-temp { font-size: 19px; }
|
||||
|
||||
.hud-search {
|
||||
display: flex; align-items: center;
|
||||
background: linear-gradient(180deg, rgba(15, 10, 40, 0.7), rgba(8, 5, 22, 0.85));
|
||||
border: 1px solid rgba(84, 232, 255, 0.4);
|
||||
border-radius: 10px;
|
||||
padding: 0 14px;
|
||||
box-shadow:
|
||||
0 0 12px rgba(84, 232, 255, 0.18),
|
||||
inset 0 0 18px rgba(84, 232, 255, 0.05);
|
||||
}
|
||||
.hud-search input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 17px;
|
||||
padding: 14px 0;
|
||||
}
|
||||
.hud-search input::placeholder { color: var(--text-dim); }
|
||||
.hud-search button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--cyan);
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
filter: drop-shadow(0 0 6px var(--cyan));
|
||||
}
|
||||
.hud-search button svg { width: 22px; height: 22px; }
|
||||
|
||||
/* =================================================================
|
||||
HERO
|
||||
================================================================= */
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
padding: 8px 12px 4px;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.hero-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.hero-kite {
|
||||
width: 140px; height: 140px;
|
||||
object-fit: contain;
|
||||
filter:
|
||||
drop-shadow(0 0 18px var(--cyan))
|
||||
drop-shadow(0 0 32px rgba(84, 232, 255, 0.6));
|
||||
animation: kite-pulse 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes kite-pulse {
|
||||
0%, 100% { filter: drop-shadow(0 0 14px var(--cyan)) drop-shadow(0 0 28px rgba(84, 232, 255, 0.5)); }
|
||||
50% { filter: drop-shadow(0 0 22px var(--cyan)) drop-shadow(0 0 44px rgba(84, 232, 255, 0.8)); }
|
||||
}
|
||||
|
||||
.hero-titles { display: flex; flex-direction: column; }
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: clamp(48px, 6vw, 92px);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 12px rgba(255, 255, 255, 0.6),
|
||||
0 0 24px var(--cyan),
|
||||
0 0 48px rgba(84, 232, 255, 0.6);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.dot-ao {
|
||||
color: var(--cyan-bright);
|
||||
text-shadow:
|
||||
0 0 12px var(--cyan),
|
||||
0 0 30px rgba(84, 232, 255, 0.8);
|
||||
}
|
||||
.hero-tagline {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: clamp(13px, 1.2vw, 17px);
|
||||
letter-spacing: 0.42em;
|
||||
color: var(--text-dim);
|
||||
margin: 8px 0 0;
|
||||
text-shadow: 0 0 6px rgba(84, 232, 255, 0.4);
|
||||
}
|
||||
|
||||
/* hex badge */
|
||||
.hex-badge { position: relative; width: 180px; height: 200px; }
|
||||
.hex-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px var(--magenta)); }
|
||||
.hex-outer { fill: none; stroke: var(--magenta); stroke-width: 3; }
|
||||
.hex-inner { fill: rgba(20, 8, 32, 0.7); stroke: rgba(255, 69, 200, 0.6); stroke-width: 1.5; }
|
||||
.hex-content {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 2px;
|
||||
font-family: var(--font-display);
|
||||
text-shadow: 0 0 8px var(--magenta);
|
||||
}
|
||||
.hex-l1 { font-size: 13px; letter-spacing: 0.3em; color: var(--magenta-bright); }
|
||||
.hex-l2 { font-size: 22px; font-weight: 700; letter-spacing: 0.15em; color: #ff9ddc; }
|
||||
.hex-l3 {
|
||||
font-size: 38px; font-weight: 900;
|
||||
color: var(--cyan-bright);
|
||||
text-shadow: 0 0 12px var(--cyan);
|
||||
line-height: 1;
|
||||
}
|
||||
.hex-l3 span { font-size: 22px; color: var(--magenta-bright); text-shadow: 0 0 8px var(--magenta); }
|
||||
.hex-pulse {
|
||||
width: 80px; height: 14px; margin-top: 4px;
|
||||
}
|
||||
.hex-pulse polyline {
|
||||
fill: none; stroke: var(--green); stroke-width: 1.5;
|
||||
filter: drop-shadow(0 0 4px var(--green));
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
PANELS
|
||||
================================================================= */
|
||||
.row { display: grid; gap: 18px; }
|
||||
.row-2 { grid-template-columns: 1fr 1fr; }
|
||||
.row-3 { grid-template-columns: 1fr 1fr; }
|
||||
.row-bottom { grid-template-columns: 1.6fr 1fr; align-items: start; }
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
background: var(--panel-bg);
|
||||
border: 1.5px solid var(--panel-border, var(--cyan));
|
||||
border-radius: 10px;
|
||||
padding: 14px 18px 14px;
|
||||
box-shadow:
|
||||
0 0 22px var(--panel-glow, rgba(84, 232, 255, 0.22)),
|
||||
inset 0 0 30px rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.panel-cyan { --panel-border: var(--cyan); --panel-glow: rgba(84, 232, 255, 0.28); --panel-head-color: var(--cyan); }
|
||||
.panel-magenta { --panel-border: var(--magenta); --panel-glow: rgba(255, 69, 200, 0.28); --panel-head-color: var(--magenta); }
|
||||
.panel-purple { --panel-border: var(--purple); --panel-glow: rgba(189, 108, 255, 0.28); --panel-head-color: var(--purple); }
|
||||
.panel-pink { --panel-border: var(--pink); --panel-glow: rgba(255, 95, 177, 0.28); --panel-head-color: var(--pink); }
|
||||
|
||||
.panel-head {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--panel-head-color);
|
||||
text-shadow: 0 0 8px var(--panel-head-color);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.chevrons { color: var(--panel-head-color); font-weight: 700; opacity: 0.85; }
|
||||
|
||||
/* =================================================================
|
||||
CARDS
|
||||
================================================================= */
|
||||
.cards { display: grid; gap: 14px; }
|
||||
.cards-2 { grid-template-columns: 1fr 1fr; }
|
||||
.cards-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.cards-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(84, 232, 255, 0.22);
|
||||
background: linear-gradient(180deg, rgba(20, 10, 40, 0.55), rgba(8, 4, 22, 0.75));
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
|
||||
min-height: 76px;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--panel-border, var(--cyan));
|
||||
box-shadow: 0 0 18px var(--panel-glow, rgba(84, 232, 255, 0.4));
|
||||
background: linear-gradient(180deg, rgba(30, 15, 55, 0.65), rgba(12, 6, 28, 0.8));
|
||||
}
|
||||
|
||||
.card img {
|
||||
width: 44px; height: 44px;
|
||||
object-fit: contain;
|
||||
flex: 0 0 auto;
|
||||
filter: drop-shadow(0 0 6px rgba(84, 232, 255, 0.4));
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: #ffffff;
|
||||
line-height: 1.1;
|
||||
text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.card-sub {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.sc-icon {
|
||||
width: 44px; height: 44px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 22px;
|
||||
color: var(--purple-bright);
|
||||
text-shadow: 0 0 8px var(--purple);
|
||||
background: rgba(189, 108, 255, 0.08);
|
||||
border: 1px solid rgba(189, 108, 255, 0.35);
|
||||
border-radius: 6px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
OVERVIEW
|
||||
================================================================= */
|
||||
.overview {
|
||||
list-style: none;
|
||||
margin: 0; padding: 4px 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.overview li {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 14px 1fr;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ov-key {
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-display);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ov-sep { color: var(--cyan); text-align: center; }
|
||||
.ov-val { color: var(--cyan-bright); text-shadow: 0 0 6px rgba(84, 232, 255, 0.5); }
|
||||
|
||||
/* =================================================================
|
||||
GAUGES
|
||||
================================================================= */
|
||||
.gauges {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
.gauge {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 2px 8px;
|
||||
}
|
||||
.gauge svg:first-child { width: 110px; height: 110px; transform: rotate(-90deg); }
|
||||
.g-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 9; }
|
||||
.g-fill {
|
||||
fill: none;
|
||||
stroke-width: 9;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 301.6; /* 2π·48 */
|
||||
stroke-dashoffset: 301.6;
|
||||
transition: stroke-dashoffset 0.8s cubic-bezier(.2,.8,.2,1);
|
||||
}
|
||||
.gauge[data-color="cyan"] .g-fill { stroke: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
|
||||
.gauge[data-color="green"] .g-fill { stroke: var(--green); filter: drop-shadow(0 0 6px var(--green)); }
|
||||
.gauge[data-color="yellow"] .g-fill { stroke: var(--yellow); filter: drop-shadow(0 0 6px var(--yellow)); }
|
||||
.gauge[data-color="pink"] .g-fill { stroke: var(--pink); filter: drop-shadow(0 0 6px var(--pink)); }
|
||||
|
||||
.gauge .g-label {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.gauge .g-value {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
color: var(--cyan-bright);
|
||||
text-shadow: 0 0 8px currentColor;
|
||||
}
|
||||
.gauge[data-color="green"] .g-value { color: var(--green); }
|
||||
.gauge[data-color="yellow"] .g-value { color: var(--yellow); }
|
||||
|
||||
.gauge .g-sub {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 6px;
|
||||
}
|
||||
.g-wave {
|
||||
width: 100%; height: 16px; margin-top: 4px;
|
||||
}
|
||||
.g-wave polyline {
|
||||
fill: none;
|
||||
stroke: var(--cyan);
|
||||
stroke-width: 1.2;
|
||||
filter: drop-shadow(0 0 3px var(--cyan));
|
||||
}
|
||||
|
||||
.gauge-net {
|
||||
justify-content: flex-start;
|
||||
padding-top: 38px;
|
||||
}
|
||||
.gauge-net .g-label { position: static; margin-bottom: 6px; }
|
||||
.g-net { display: flex; flex-direction: column; gap: 4px; align-items: center; }
|
||||
.net-line {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
.net-line.up { color: var(--green); text-shadow: 0 0 6px var(--green); }
|
||||
.net-line.dn { color: var(--magenta); text-shadow: 0 0 6px var(--magenta); }
|
||||
|
||||
/* =================================================================
|
||||
RECENT ACTIVITY
|
||||
================================================================= */
|
||||
.activity {
|
||||
list-style: none;
|
||||
margin: 0; padding: 4px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.activity li {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(20, 10, 40, 0.35);
|
||||
border: 1px solid rgba(84, 232, 255, 0.12);
|
||||
}
|
||||
.act-ico { font-size: 14px; filter: drop-shadow(0 0 4px currentColor); }
|
||||
.act-txt { font-family: var(--font-ui); font-size: 15px; color: var(--text); }
|
||||
.act-time { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
|
||||
|
||||
/* =================================================================
|
||||
FOOTER
|
||||
================================================================= */
|
||||
.portal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
padding: 18px 0 6px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.foot-text { text-shadow: 0 0 4px rgba(189, 108, 255, 0.4); }
|
||||
.foot-bracket {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.foot-bracket::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--purple) 30%, var(--cyan) 70%, transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.foot-bracket.left::after, .foot-bracket.right::after {
|
||||
content: "";
|
||||
position: absolute; top: 50%;
|
||||
width: 26px; height: 8px;
|
||||
transform: translateY(-50%);
|
||||
background:
|
||||
repeating-linear-gradient(90deg, var(--cyan) 0 3px, transparent 3px 6px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.foot-bracket.left::after { right: 8px; }
|
||||
.foot-bracket.right::after { left: 8px; }
|
||||
|
||||
/* =================================================================
|
||||
RESPONSIVE
|
||||
================================================================= */
|
||||
@media (max-width: 1400px) {
|
||||
.hud { grid-template-columns: repeat(3, 1fr); }
|
||||
.hud-search { grid-column: 1 / -1; }
|
||||
.hero { grid-template-columns: 1fr; }
|
||||
.hero-right { justify-content: center; }
|
||||
.row-3, .row-bottom { grid-template-columns: 1fr; }
|
||||
.row-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.hud { grid-template-columns: 1fr 1fr; }
|
||||
.cards-4, .cards-3 { grid-template-columns: 1fr 1fr; }
|
||||
.hero-title { font-size: 44px; }
|
||||
.hero-kite { width: 96px; height: 96px; }
|
||||
.gauges { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.hud { grid-template-columns: 1fr; }
|
||||
.cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; }
|
||||
.gauges { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
TOAST (coming soon)
|
||||
================================================================= */
|
||||
#ks-toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 40px;
|
||||
transform: translate(-50%, 30px);
|
||||
background: linear-gradient(180deg, rgba(20, 10, 40, 0.95), rgba(8, 4, 22, 0.95));
|
||||
border: 1px solid var(--magenta);
|
||||
border-radius: 8px;
|
||||
padding: 12px 22px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--magenta-bright);
|
||||
text-shadow: 0 0 6px var(--magenta);
|
||||
box-shadow: 0 0 24px rgba(255, 69, 200, 0.5);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
#ks-toast.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
|
||||
/* ─── Activity panel polish ─── */
|
||||
.activity li.act-empty {
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
}
|
||||
.activity li .act-txt {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/* ─── Per-core CPU bars ─── */
|
||||
.cores {
|
||||
margin-top: 14px;
|
||||
padding: 12px 4px 2px;
|
||||
border-top: 1px dashed rgba(255, 69, 200, 0.25);
|
||||
}
|
||||
.cores-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.cores-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--magenta);
|
||||
text-shadow: 0 0 6px var(--magenta);
|
||||
}
|
||||
.cores-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.cores-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 10px;
|
||||
padding: 0 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.cores-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.cores-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
.core {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
background: rgba(20, 10, 40, 0.45);
|
||||
border: 1px solid rgba(84, 232, 255, 0.15);
|
||||
}
|
||||
.core-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.core-label { color: var(--text-dim); }
|
||||
.core-pct {
|
||||
color: var(--cyan-bright);
|
||||
text-shadow: 0 0 4px var(--cyan);
|
||||
font-weight: 700;
|
||||
}
|
||||
.core-track {
|
||||
position: relative;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.core-bar {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--cyan), var(--purple));
|
||||
box-shadow: 0 0 6px var(--cyan);
|
||||
transition: width 0.6s cubic-bezier(.2,.8,.2,1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
/* color shifts as load increases */
|
||||
.core[data-load="med"] .core-bar { background: linear-gradient(90deg, var(--green), var(--yellow)); box-shadow: 0 0 6px var(--yellow); }
|
||||
.core[data-load="med"] .core-pct { color: var(--yellow); text-shadow: 0 0 4px var(--yellow); }
|
||||
.core[data-load="high"] .core-bar { background: linear-gradient(90deg, var(--yellow), var(--magenta)); box-shadow: 0 0 6px var(--magenta); }
|
||||
.core[data-load="high"] .core-pct { color: var(--magenta-bright); text-shadow: 0 0 4px var(--magenta); }
|
||||
Loading…
Add table
Add a link
Reference in a new issue