Files
shiroko-monitor/public/index.html
T
tamakyi 6f9a2d33ce fix(theme): 补抠封闭白区(光环/车架/轮圈内),人物与单车加渐隐遮罩
问题(用户发现):
1. 光环环内是白块 —— 此前只用「边界洪泛」抠底,被图形围起来的封闭白色
   区域(光环内圈、单车车架三角、轮圈内扇形)与边界不连通,没被处理
2. 人物与单车直接贴在页面上显得突兀

修复:
- 对三张图再补一次「封闭白色区域」清理(按面积阈值):
  人物抠 3675px(含光环 2665)、单车抠 19657px、图标抠 308px;并同步重生成 favicon
  已验证脸部 / 袜子 / 衣服等服装白未被误抠(保留 34px 噪点级)
- 立绘 opacity .92 + 上下渐隐遮罩;单车 opacity .8 + 两端渐隐 + saturate(.92)

验证:四套脚本 81 项全通过;1440 宽 0 横向溢出;局部放大确认光环内圈可透出背景
2026-10-13 21:06:29 +08:00

65 lines
2.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="轻量级服务监控面板:HTTP 可用性与 TCP 端口探测">
<title>Shiroko Monitor</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/theme-shiroko.css">
</head>
<body>
<header class="topbar">
<div class="brand">
<span class="logo" aria-hidden="true"></span>
<div class="brand-text">
<h1 id="site-title">Shiroko Monitor</h1>
<p id="site-desc">轻量级服务监控面板</p>
</div>
</div>
<div class="summary">
<span id="overall-pill" class="pill pending">检测中…</span>
<div class="stats">
<div class="stat"><b id="stat-total">–</b><label>监控数</label></div>
<div class="stat stat-up"><b id="stat-up">–</b><label>在线</label></div>
<div class="stat stat-down"><b id="stat-down">–</b><label>离线</label></div>
<div class="stat"><b id="stat-latency">–</b><label>平均延迟</label></div>
<div class="stat"><b id="stat-uptime">–</b><label>90天可用率</label></div>
</div>
<div class="controls">
<div class="view-switch" id="view-switch" role="group" aria-label="视图切换"></div>
<button id="theme-btn" type="button" class="icon-btn" title="切换主题">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle cx="50" cy="50" r="31" fill="none" stroke="currentColor" stroke-width="8"/>
<circle cx="50" cy="50" r="15" fill="none" stroke="currentColor" stroke-width="4" opacity="0.7"/>
<polygon points="46.4,4 53.6,4 51.2,15 48.8,15" fill="currentColor"/>
<polygon points="46.4,96 53.6,96 51.2,85 48.8,85" fill="currentColor"/>
<polygon points="4,46.4 4,53.6 15,51.2 15,48.8" fill="currentColor"/>
<polygon points="96,46.4 96,53.6 85,51.2 85,48.8" fill="currentColor"/>
</svg>
</button>
<button id="refresh-btn" type="button">刷新</button>
</div>
</div>
</header>
<nav class="group-tabs" id="group-tabs" aria-label="分组筛选"></nav>
<main class="grid" id="monitor-grid">
<div class="empty">正在加载监控配置…</div>
</main>
<footer class="footer">
<span id="source-badge" class="footer-item">数据源:–</span>
<span id="demo-chip" class="footer-item demo-chip" hidden>演示数据</span>
<span id="ur-chip" class="footer-item warn-chip" hidden>UptimeRobot 同步异常</span>
<span id="updated-at" class="footer-item">–</span>
<span id="countdown" class="footer-item">–</span>
<span class="footer-item version">shiroko-monitor v0.8.3</span>
</footer>
<script type="module" src="assets/app.js"></script>
</body>
</html>