210 lines
8.5 KiB
HTML
210 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="liooil 的个人主页与 Homelab 动态服务目录。">
|
|
<meta name="color-scheme" content="light">
|
|
<meta name="theme-color" content="#f0c94b">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="Xiteng">
|
|
<title>liooil / xiteng.site</title>
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="/icons/favicon-32.png" sizes="32x32" type="image/png">
|
|
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
|
|
<link rel="manifest" href="/manifest.webmanifest">
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<script src="/app.js?v=7" defer></script>
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<nav class="shell nav" aria-label="主导航">
|
|
<a class="brand" href="#top">liooil / xiteng.site</a>
|
|
<div class="nav-links">
|
|
<a href="#services">服务</a>
|
|
<a href="#infrastructure">基础设施</a>
|
|
<a href="#now">Now</a>
|
|
<a href="/account">我的凭据</a>
|
|
<a href="/admin">管理</a>
|
|
<a href="https://github.com/liooil" rel="me">GitHub</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="top">
|
|
<section class="hero shell">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">PERSONAL INDEX / HOMELAB CATALOG</p>
|
|
<h1>一个入口，<br>完整呈现。</h1>
|
|
<p class="intro">
|
|
服务是否存在与谁能使用它是两件事。这里公开展示全部应用与基础设施；
|
|
登录、密钥和内网边界仍由各组件自己负责。
|
|
</p>
|
|
<div class="actions">
|
|
<a class="button primary" href="#services">浏览全部服务</a>
|
|
<a class="button" href="#infrastructure">查看系统组成</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-panel" aria-label="动态目录状态">
|
|
<div class="hero-panel-head">
|
|
<span>LIVE CATALOG</span>
|
|
<span class="live-dot" aria-hidden="true"></span>
|
|
</div>
|
|
<dl class="hero-stats">
|
|
<div>
|
|
<dt id="component-count">—</dt>
|
|
<dd>已声明组件</dd>
|
|
</div>
|
|
<div>
|
|
<dt id="running-count">—</dt>
|
|
<dd>服务可用</dd>
|
|
</div>
|
|
<div>
|
|
<dt id="restricted-count">—</dt>
|
|
<dd>受控入口</dd>
|
|
</div>
|
|
</dl>
|
|
<p id="catalog-updated" class="catalog-updated" aria-live="polite">正在读取 Docker Label…</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="device-status" aria-labelledby="device-heading">
|
|
<div class="shell">
|
|
<div class="device-heading-row">
|
|
<div>
|
|
<p class="section-kicker">DEVICE STATUS / <span id="device-hostname">HOMELAB</span></p>
|
|
<h2 id="device-heading">设备状态</h2>
|
|
</div>
|
|
<p id="metrics-updated" class="metrics-updated" aria-live="polite">正在读取主机指标…</p>
|
|
</div>
|
|
|
|
<div class="metric-grid">
|
|
<article class="metric-card metric-cpu">
|
|
<div class="metric-card-head"><span>CPU</span><span>PROCESSOR</span></div>
|
|
<strong id="cpu-value" class="metric-value">—</strong>
|
|
<progress id="cpu-progress" max="100" value="0">0%</progress>
|
|
<p id="cpu-detail" class="metric-detail">正在读取处理器状态…</p>
|
|
<p id="cpu-secondary" class="metric-secondary">LOAD —</p>
|
|
</article>
|
|
|
|
<article class="metric-card metric-memory">
|
|
<div class="metric-card-head"><span>MEM</span><span>MEMORY</span></div>
|
|
<strong id="memory-value" class="metric-value">—</strong>
|
|
<progress id="memory-progress" max="100" value="0">0%</progress>
|
|
<p id="memory-detail" class="metric-detail">正在读取内存状态…</p>
|
|
<p id="memory-secondary" class="metric-secondary">AVAILABLE —</p>
|
|
</article>
|
|
|
|
<article class="metric-card metric-disk">
|
|
<div class="metric-card-head"><span>DISK</span><span>ROOT FS</span></div>
|
|
<strong id="disk-value" class="metric-value">—</strong>
|
|
<progress id="disk-progress" max="100" value="0">0%</progress>
|
|
<p id="disk-detail" class="metric-detail">正在读取磁盘状态…</p>
|
|
<p id="disk-secondary" class="metric-secondary">/</p>
|
|
</article>
|
|
|
|
<article class="metric-card metric-gpu">
|
|
<div class="metric-card-head"><span>GPU</span><span>NVIDIA</span></div>
|
|
<strong id="gpu-value" class="metric-value">—</strong>
|
|
<progress id="gpu-progress" max="100" value="0">0%</progress>
|
|
<p id="gpu-detail" class="metric-detail">正在读取显卡状态…</p>
|
|
<p id="gpu-secondary" class="metric-secondary">VRAM —</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="principles">
|
|
<div class="shell principle-grid">
|
|
<article>
|
|
<span class="principle-number">01</span>
|
|
<strong>存在是公开信息</strong>
|
|
<p>组件名称、用途、技术栈、入口和运行状态对所有访客可见。</p>
|
|
</article>
|
|
<article>
|
|
<span class="principle-number">02</span>
|
|
<strong>授权保护数据与操作</strong>
|
|
<p>SSO、Access Key、SSH Key 或内网边界在进入组件时生效。</p>
|
|
</article>
|
|
<article>
|
|
<span class="principle-number">03</span>
|
|
<strong>Label 决定目录内容</strong>
|
|
<p>容器自行声明展示信息；页面不维护硬编码服务清单。</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="catalog-section shell">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker">APPLICATIONS / ENDPOINTS</p>
|
|
<h2>服务目录</h2>
|
|
</div>
|
|
<p>所有可使用的应用和协议入口。需要认证的服务会在卡片上明确标注。</p>
|
|
</div>
|
|
|
|
<div class="filters" role="group" aria-label="筛选组件">
|
|
<button class="filter active" type="button" data-filter="all">全部</button>
|
|
<button class="filter" type="button" data-filter="public">无需登录</button>
|
|
<button class="filter" type="button" data-filter="restricted">受控访问</button>
|
|
<button class="filter" type="button" data-filter="online">服务可用</button>
|
|
</div>
|
|
|
|
<div id="services-catalog" class="catalog" aria-live="polite">
|
|
<div class="loading-card">正在发现服务…</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="infrastructure" class="catalog-section infrastructure-section">
|
|
<div class="shell">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker">EDGE / IDENTITY / DATA / OPS</p>
|
|
<h2>基础设施</h2>
|
|
</div>
|
|
<p>公开系统的组成与职责；不公开密码、Token、私钥和其他秘密值。</p>
|
|
</div>
|
|
<div id="infrastructure-catalog" class="catalog" aria-live="polite">
|
|
<div class="loading-card">正在发现基础设施…</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="now" class="now-section shell">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker">OPERATING MODEL</p>
|
|
<h2>Now</h2>
|
|
</div>
|
|
</div>
|
|
<div class="now-grid">
|
|
<article class="now-card accent-yellow">
|
|
<span>DISCOVERY</span>
|
|
<h3>统一入口</h3>
|
|
<p><code>xiteng.site</code> 是唯一目录；组件由 Docker Label 自动加入或移除。</p>
|
|
</article>
|
|
<article class="now-card accent-blue">
|
|
<span>ACCESS</span>
|
|
<h3>按服务授权</h3>
|
|
<p>门户保持公开，受控服务在点击后交给 Authentik 或对应凭据系统。</p>
|
|
</article>
|
|
<article class="now-card accent-green">
|
|
<span>TRANSPARENCY</span>
|
|
<h3>架构默认公开</h3>
|
|
<p>公开组件、镜像与状态；环境变量、挂载、原始 Label 和秘密值不进入目录 API。</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="shell footer-inner">
|
|
<span>xiteng.site · <span id="year">2026</span> · liooil</span>
|
|
<span>Docker labels → catalog + monitoring</span>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|