Tergent DevOps
651 lines
22 KiB
HTML
651 lines
22 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Tergent — 终端风格界面参考</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0d1117;
|
|
--surface: #161b22;
|
|
--border: #30363d;
|
|
--fg: #e6edf3;
|
|
--muted: #8b949e;
|
|
--accent: #58a6ff;
|
|
--green: #3fb950;
|
|
--orange: #d29922;
|
|
--red: #f85149;
|
|
--purple: #bc8cff;
|
|
--cyan: #39d2c0;
|
|
--term-bg: #0d1117;
|
|
--prompt: #3fb950;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font: 13px/1.5 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
padding: 32px 0 4px;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: var(--accent);
|
|
letter-spacing: 2px;
|
|
}
|
|
h1::before { content: '# '; color: var(--muted); }
|
|
.sub {
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.sub::before { content: '// '; }
|
|
|
|
.grid {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 0 16px 48px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
.card-header {
|
|
padding: 8px 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
background: #010409;
|
|
}
|
|
.tag {
|
|
display: inline-block;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.tag-p0 { background: var(--green); color: #0d1117; }
|
|
.tag-p1 { background: var(--orange); color: #0d1117; }
|
|
.tag-p2 { background: var(--muted); color: #0d1117; }
|
|
|
|
.phone {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 9 / 19;
|
|
max-height: 520px;
|
|
background: var(--term-bg);
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* terminal-style status bar */
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
font-size: 10px;
|
|
background: #010409;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-family: monospace;
|
|
}
|
|
.status-bar .time { color: var(--fg); }
|
|
.status-bar .indicators span { margin-left: 4px; }
|
|
|
|
/* terminal prompt line */
|
|
.prompt-line {
|
|
padding: 6px 10px;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
background: #010409;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.prompt-line .prompt {
|
|
color: var(--prompt);
|
|
font-weight: 600;
|
|
}
|
|
.prompt-line .cmd {
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* content area */
|
|
.screen-content {
|
|
padding: 6px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1;
|
|
font-size: 11px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* terminal-like output lines */
|
|
.line { line-height: 1.6; }
|
|
.line-green { color: var(--green); }
|
|
.line-red { color: var(--red); }
|
|
.line-accent { color: var(--accent); }
|
|
.line-muted { color: var(--muted); }
|
|
.line-orange { color: var(--orange); }
|
|
.line-purple { color: var(--purple); }
|
|
.line-cyan { color: var(--cyan); }
|
|
.line-indent { padding-left: 12px; }
|
|
|
|
/* chat bubbles - terminal style */
|
|
.chat-bubble {
|
|
max-width: 85%;
|
|
padding: 6px 10px;
|
|
margin: 2px 0;
|
|
line-height: 1.4;
|
|
}
|
|
.chat-bubble.user {
|
|
align-self: flex-end;
|
|
border: 1px solid var(--accent);
|
|
border-radius: 6px;
|
|
color: var(--accent);
|
|
}
|
|
.chat-bubble.agent {
|
|
align-self: flex-start;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--fg);
|
|
}
|
|
.chat-bubble .label {
|
|
font-size: 9px;
|
|
color: var(--muted);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* input line - terminal style */
|
|
.input-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: auto;
|
|
background: #010409;
|
|
}
|
|
.input-line .dollar { color: var(--prompt); font-weight: 600; }
|
|
.input-line .cursor {
|
|
flex: 1;
|
|
height: 18px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 11px;
|
|
outline: none;
|
|
}
|
|
.input-line .cursor:focus { outline: none; }
|
|
|
|
/* tab bar */
|
|
.tab-bar {
|
|
display: flex;
|
|
border-top: 1px solid var(--border);
|
|
background: #010409;
|
|
margin-top: auto;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 6px 0;
|
|
font-size: 9px;
|
|
color: var(--muted);
|
|
font-family: monospace;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.tab-item.active {
|
|
color: var(--accent);
|
|
border-top: 2px solid var(--accent);
|
|
background: rgba(88,166,255,0.05);
|
|
}
|
|
|
|
/* settings rows */
|
|
.setting-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid rgba(48,54,61,0.5);
|
|
font-size: 11px;
|
|
}
|
|
.setting-row .switch {
|
|
width: 32px; height: 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
position: relative;
|
|
}
|
|
.setting-row .switch.on {
|
|
background: var(--green);
|
|
border-color: var(--green);
|
|
}
|
|
.setting-row .switch.on::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 2px; top: 2px;
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
background: #0d1117;
|
|
}
|
|
.setting-row .switch.off::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 2px; top: 2px;
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--muted);
|
|
}
|
|
.setting-row .arrow { color: var(--muted); }
|
|
|
|
/* status badge */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
.status-badge .dot.green { background: var(--green); }
|
|
.status-badge .dot.yellow { background: var(--orange); }
|
|
|
|
/* button */
|
|
.term-btn {
|
|
padding: 6px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 10px;
|
|
cursor: default;
|
|
}
|
|
.term-btn.primary {
|
|
background: var(--accent);
|
|
color: #0d1117;
|
|
border-color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* qr placeholder */
|
|
.qr-box {
|
|
width: 88px; height: 88px;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* voice orb */
|
|
.vorb {
|
|
width: 64px; height: 64px;
|
|
border: 2px solid var(--accent);
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: var(--accent);
|
|
}
|
|
.vorb.active {
|
|
border-color: var(--green);
|
|
color: var(--green);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.4); }
|
|
50% { box-shadow: 0 0 0 12px rgba(63,185,80,0); }
|
|
}
|
|
|
|
/* canvas */
|
|
.canvas-area {
|
|
flex: 1;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
background: rgba(1,4,9,0.5);
|
|
min-height: 120px;
|
|
}
|
|
|
|
/* log lines */
|
|
.log-line {
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
color: var(--muted);
|
|
white-space: pre;
|
|
}
|
|
|
|
/* device item */
|
|
.dev-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid rgba(48,54,61,0.3);
|
|
font-size: 11px;
|
|
}
|
|
.dev-item .dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
.dev-item .online { background: var(--green); }
|
|
.dev-item .offline { background: var(--muted); }
|
|
.dev-item .name { flex: 1; }
|
|
.dev-item .info { color: var(--muted); font-size: 10px; }
|
|
|
|
.screen-content.center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: 12px;
|
|
}
|
|
</style>
|
|
|
|
<h1>Tergent — 终端风格界面参考</h1>
|
|
<p class="sub">基于 Linux 终端设计语言 · 深色主题 · 9 个主要页面</p>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- 1. Onboarding -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p0">P0</span> 1. Onboarding</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi <span class="line-green">●</span> 95%</span></div>
|
|
<div class="screen-content center" style="flex:1">
|
|
<div style="font-size:24px;color:var(--accent);letter-spacing:4px">TERGENT</div>
|
|
<div style="font-size:10px;color:var(--muted)">v0.1.0 — Android companion node</div>
|
|
<div class="qr-box">[ SCAN QR ]</div>
|
|
<div class="line-muted" style="font-size:10px">$ setup-code or manual</div>
|
|
<div style="display:flex;gap:6px;margin-top:4px">
|
|
<span class="term-btn primary">[ Connect ]</span>
|
|
<span class="term-btn">[ Manual ]</span>
|
|
</div>
|
|
<div class="line-muted" style="font-size:9px;margin-top:8px">_ 首次使用请扫码配对</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Connect -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p0">P0</span> 2. Connect</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="line-green">tergent</span><span class="line-muted">@</span><span class="line-accent">node</span> ~ $ <span class="cmd">gateway status</span></div>
|
|
<div class="screen-content" style="gap:4px">
|
|
<div class="line"><span class="status-badge"><span class="dot green"></span> CONNECTED</span></div>
|
|
<div class="line line-muted">├─ host: hdtime.space:443 (wss)</div>
|
|
<div class="line line-muted">├─ session: operator + node</div>
|
|
<div class="line line-muted">└─ peer: <span class="line-green">茂之钳</span> · main</div>
|
|
<div style="border:1px solid var(--border);border-radius:4px;padding:8px;margin-top:4px">
|
|
<div class="line line-muted">$ cat /etc/gateway.conf</div>
|
|
<div class="line line-indent">host: hdtime.space</div>
|
|
<div class="line line-indent">port: 443</div>
|
|
<div class="line line-indent">tls: true</div>
|
|
<div class="line line-indent">status: <span class="line-green">online</span></div>
|
|
</div>
|
|
<div style="display:flex;gap:6px;margin-top:4px">
|
|
<span class="term-btn">switch</span>
|
|
<span class="term-btn">re-pair</span>
|
|
<span class="term-btn primary">refresh</span>
|
|
</div>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<div class="tab-item active">[ conn ]</div>
|
|
<div class="tab-item">chat</div>
|
|
<div class="tab-item">voice</div>
|
|
<div class="tab-item">screen</div>
|
|
<div class="tab-item">sys</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Chat -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p0">P0</span> 3. Chat</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="line-green">tergent</span><span class="line-muted">@</span><span class="line-accent">node</span> ~ $ <span class="cmd">session attach main</span></div>
|
|
<div class="screen-content" style="gap:3px;justify-content:flex-end">
|
|
<div class="chat-bubble agent">
|
|
<div class="label">agent@main:~$</div>
|
|
你好！有什么需要帮忙的？
|
|
</div>
|
|
<div class="chat-bubble user">
|
|
<div class="label" style="color:var(--accent)">you@phone:~$</div>
|
|
查一下今天的股票热点
|
|
</div>
|
|
<div class="chat-bubble agent">
|
|
<div class="label">agent@main:~$</div>
|
|
<span class="line-muted">fetching market data...</span>
|
|
<div style="margin-top:2px">A股三大指数震荡，电力板块领涨，长鑫科技上市在即。</div>
|
|
</div>
|
|
<div class="chat-bubble user">
|
|
<div class="label" style="color:var(--accent)">you@phone:~$</div>
|
|
好的，谢谢
|
|
</div>
|
|
<div class="line line-muted" style="text-align:center;font-size:9px">
|
|
<span style="animation:pulse 1.5s infinite">_</span> tergent is processing
|
|
</div>
|
|
</div>
|
|
<div class="input-line">
|
|
<span class="dollar">$</span>
|
|
<span class="cursor">输入消息...</span>
|
|
<span style="color:var(--muted);font-size:10px">⏎ send</span>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<div class="tab-item">conn</div>
|
|
<div class="tab-item active">[ chat ]</div>
|
|
<div class="tab-item">voice</div>
|
|
<div class="tab-item">screen</div>
|
|
<div class="tab-item">sys</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. Settings -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p0">P0</span> 4. System Settings</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="line-green">tergent</span><span class="line-muted">@</span><span class="line-accent">node</span> ~ $ <span class="cmd">systemctl config</span></div>
|
|
<div class="screen-content" style="gap:2px">
|
|
<div class="setting-row"><span>notification-forward</span><span class="switch on"></span></div>
|
|
<div class="setting-row"><span>camera-permit</span><span class="switch on"></span></div>
|
|
<div class="setting-row"><span>location-permit</span><span class="switch on"></span></div>
|
|
<div class="setting-row"><span>voice-wake</span><span class="switch off"></span></div>
|
|
<div class="setting-row"><span>dark-mode</span><span class="switch on"></span></div>
|
|
<div class="setting-row" style="border:none">
|
|
<span>connection</span>
|
|
<span class="arrow">→</span>
|
|
</div>
|
|
<div class="setting-row" style="border:none">
|
|
<span>about</span>
|
|
<span class="line-muted">v0.1.0</span>
|
|
</div>
|
|
<div style="border-top:1px solid var(--border);padding:6px 0;margin-top:4px">
|
|
<div class="line line-muted"># uname -a</div>
|
|
<div class="line" style="font-size:10px">Tergent v0.1.0 Android 15 (API 36)</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<div class="tab-item">conn</div>
|
|
<div class="tab-item">chat</div>
|
|
<div class="tab-item">voice</div>
|
|
<div class="tab-item">screen</div>
|
|
<div class="tab-item active">[ sys ]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5. Voice -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p1">P1</span> 5. Voice</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🎤 <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="cmd">talk --mode listen</span></div>
|
|
<div class="screen-content center" style="flex:1;gap:10px">
|
|
<div class="line-muted" style="font-size:10px">$ say something...</div>
|
|
<div class="vorb active">▶</div>
|
|
<div class="line" style="font-size:10px;letter-spacing:2px">▁▃▅▇██▇▅▃▁</div>
|
|
<div class="line-accent" style="font-size:11px;background:rgba(88,166,255,0.08);padding:4px 8px;border-radius:4px;width:100%">
|
|
"帮我查一下今天的日程"
|
|
</div>
|
|
<div class="line" style="font-size:10px;border:1px solid var(--border);padding:6px 8px;border-radius:4px;width:100%">
|
|
<span class="line-muted">tergent:</span> 你有2个会议，下午3点设计评审
|
|
</div>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<div class="tab-item">conn</div>
|
|
<div class="tab-item">chat</div>
|
|
<div class="tab-item active">[ voice ]</div>
|
|
<div class="tab-item">screen</div>
|
|
<div class="tab-item">sys</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 6. Canvas -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p1">P1</span> 6. Screen (Canvas)</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="cmd">canvas open</span></div>
|
|
<div style="flex:1;padding:6px 10px;display:flex;flex-direction:column;gap:4px">
|
|
<div style="display:flex;gap:4px;font-size:9px">
|
|
<span class="term-btn">▣ capture</span>
|
|
<span class="term-btn">⊞ zoom</span>
|
|
<span class="term-btn">↻ reload</span>
|
|
<span class="term-btn">⌂ home</span>
|
|
</div>
|
|
<div class="canvas-area">
|
|
<span class="line-muted">[ WebView: agent canvas ]</span>
|
|
</div>
|
|
<div class="line line-muted" style="font-size:9px">url: http://host:18789/__openclaw__/canvas/</div>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<div class="tab-item">conn</div>
|
|
<div class="tab-item">chat</div>
|
|
<div class="tab-item">voice</div>
|
|
<div class="tab-item active">[ screen ]</div>
|
|
<div class="tab-item">sys</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 7. Devices -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p1">P1</span> 7. Nodes</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="cmd">nodes list</span></div>
|
|
<div class="screen-content" style="gap:2px">
|
|
<div class="line"><span class="line-green">● ONLINE</span> <span class="line-muted">1 active</span></div>
|
|
<div class="dev-item">
|
|
<span class="dot online"></span>
|
|
<span class="name line-green">hdtime.space</span>
|
|
<span class="info">main · op+node</span>
|
|
<span class="info">18789</span>
|
|
</div>
|
|
<div class="dev-item">
|
|
<span class="dot offline"></span>
|
|
<span class="name" style="color:var(--muted)">local-gw</span>
|
|
<span class="info">192.168.1.100</span>
|
|
<span class="info">—</span>
|
|
</div>
|
|
<div style="margin-top:6px">
|
|
<span class="term-btn">+ add gateway</span>
|
|
</div>
|
|
<div style="margin-top:6px">
|
|
<div class="line line-muted">$ nmap --scan</div>
|
|
<div class="line line-indent line-muted">scanning _tergent-gw._tcp...</div>
|
|
<div class="line line-indent line-muted">1 gateway found</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<div class="tab-item">conn</div>
|
|
<div class="tab-item">chat</div>
|
|
<div class="tab-item">voice</div>
|
|
<div class="tab-item">screen</div>
|
|
<div class="tab-item active">[ sys ]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 8. Notifications -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p2">P2</span> 8. Notifications</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔔 <span class="line-green">●</span> 95%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="cmd">journalctl -f</span></div>
|
|
<div class="screen-content" style="gap:1px;padding:4px 10px">
|
|
<div class="log-line"><span class="line-green">[14:30]</span> 📩 <span class="line-accent">weixin</span> 收到一条消息</div>
|
|
<div class="log-line"><span class="line-green">[14:28]</span> 📩 <span class="line-accent">slack</span> #general: 新消息</div>
|
|
<div class="log-line"><span class="line-orange">[14:25]</span> ⚡ <span>system</span> 电池电量低 (15%)</div>
|
|
<div class="log-line"><span class="line-green">[14:20]</span> 📩 <span class="line-accent">email</span> 设计评审会议提醒</div>
|
|
<div class="log-line"><span class="line-muted">[14:15]</span> 🔔 <span class="line-muted">system</span> WiFi 重连</div>
|
|
<div class="log-line" style="margin-top:6px"><span class="line-muted">_ waiting for events ...</span></div>
|
|
<div class="setting-row" style="margin-top:4px">
|
|
<span>forwarding</span>
|
|
<span class="switch on"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 9. Diagnostics -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="tag tag-p2">P2</span> 9. Diagnostics</div>
|
|
<div class="phone">
|
|
<div class="status-bar"><span class="time">14:30</span><span class="indicators">🔒 wifi ⚠ 82%</span></div>
|
|
<div class="prompt-line"><span class="prompt">◆</span> <span class="cmd">diag run</span></div>
|
|
<div class="screen-content" style="gap:2px">
|
|
<div class="status-badge" style="border-color:var(--orange);color:var(--orange)">
|
|
<span class="dot yellow"></span> WARNING — latency high
|
|
</div>
|
|
<div class="log-line" style="margin-top:4px">
|
|
<span class="line-muted">$ ping gateway</span>
|
|
</div>
|
|
<div class="log-line line-indent">64 bytes: <span class="line-orange">342ms</span></div>
|
|
<div class="log-line line-indent">64 bytes: <span class="line-orange">328ms</span></div>
|
|
<div class="log-line line-indent">64 bytes: <span class="line-orange">356ms</span></div>
|
|
<div class="log-line"><span class="line-muted">$ tls check</span></div>
|
|
<div class="log-line line-indent line-green">OK (TOFU fingerprint match)</div>
|
|
<div class="log-line"><span class="line-muted">$ ws upgrade</span></div>
|
|
<div class="log-line line-indent line-green">OK</div>
|
|
<div class="log-line" style="margin-top:4px">
|
|
<div style="display:flex;gap:4px">
|
|
<span class="term-btn primary">run all</span>
|
|
<span class="term-btn">export log</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|