feat(theme): 左下角公路车也换成简约扁平风插画
- 用图像生成（同一套扁平风格）+ Pillow 抠底，替换自绘线稿 deco-bicycle.svg - 新素材 public/assets/shiroko-bike.webp（341x200，27KB，透明底） - 页脚下方装饰带（公路车 / 光环水印 / 人物立绘）视觉语言统一 - README 同步更新元素表、素材来源表与目录树 验证：四套脚本 81 项全通过；1440 宽下 0 横向溢出
tamakyi
@@ -66,8 +66,8 @@ shiroko-monitor/
|
||||
│ ├── shiroko-figure.webp # 简约风立绘（AI 生成后抠底，见「主题」章节）
|
||||
│ ├── shiroko-icon.webp # 简约风半身头像（同上）
|
||||
│ ├── favicon-shiroko.png # 白子主题图标（由头像生成）
|
||||
│ ├── shiroko-bike.webp # 简约风公路车插画（AI 生成后抠底）
|
||||
│ ├── deco-scarf.svg # 自绘：天蓝围巾飘带
|
||||
│ ├── deco-bicycle.svg # 自绘：公路车
|
||||
│ ├── app.js # 数据源解析 / 渲染 / 浏览器直连探测 / 主题切换
|
||||
│ └── favicon.svg # 默认主题图标
|
||||
├── prober/node/ # Node 探针（本地 / CI 用）
|
||||
@@ -310,7 +310,7 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
| 状态点 | **迷你光环**（外圈 + 中心点，在线时缓慢脉冲外扩） | 光环是基沃托斯学生的标志 |
|
||||
| 分组标题 | **青色倒十字发饰**（旋转 45°，自绘） | 她左侧刘海上别的青色十字发夹 |
|
||||
| 刷新按钮加载态 | **公路车轮**（轮圈 + 辐条 + 花鼓）旋转 | 她最爱的公路车（Bianchi ARIA 原型） |
|
||||
| 左下角 | 公路车侧影（自绘） | 同上 |
|
||||
| 左下角 | 公路车插画（简约扁平风，与人物同一套视觉语言） | 她最爱的公路车（Bianchi ARIA 原型） |
|
||||
| 配色 | 天蓝 / 青 + 藏蓝 + 灰白；「正常」色改为青绿（`#12b0a2`） | 阿拜多斯藏蓝校服 + 天蓝围巾 + 灰白发色 |
|
||||
|
||||
左下公路车、页脚光环、右下立绘构成页脚下方的一条装饰带，三者互不遮挡。
|
||||
@@ -319,8 +319,8 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
|
||||
| 类别 | 内容 | 来源 |
|
||||
| --- | --- | --- |
|
||||
| **插画（人物形象）** | `shiroko-figure.webp`（249×560）、`shiroko-icon.webp`（180×180）、`favicon-shiroko.png`（64×64） | **AI 生成**：按白子的设定要素（灰发狼耳 / 倾斜椭圆光环 / 天蓝围巾 / 藏蓝校服 / 简约扁平风）描述生成，再用 Pillow 抠掉白底转为透明。**不是**官方美术素材，可自由替换或商用自行判断 |
|
||||
| 自绘装饰（SVG/CSS） | 围巾飘带 `deco-scarf.svg`、公路车 `deco-bicycle.svg`、光环水印、迷你光环状态点、倒十字图标、车轮加载图标 | 本仓库原创，按公开设定还原 |
|
||||
| **插画（人物形象 + 座驾）** | `shiroko-figure.webp`（249×560）、`shiroko-icon.webp`（180×180）、`favicon-shiroko.png`（64×64）、`shiroko-bike.webp`（341×200） | **AI 生成**：按白子的设定要素（灰发狼耳 / 倾斜椭圆光环 / 天蓝围巾 / 藏蓝校服 / 公路车）描述生成，再用 Pillow 抠掉白底转为透明。**不是**官方美术素材，可自由替换或商用自行判断 |
|
||||
| 自绘装饰（SVG/CSS） | 围巾飘带 `deco-scarf.svg`、光环水印、迷你光环状态点、倒十字图标、车轮加载图标 | 本仓库原创，按公开设定还原 |
|
||||
| 设定资料（光环形状、发饰、围巾、配色、车型） | 设计依据 | [萌娘百科 · 砂狼白子](https://mzh.moegirl.org.cn/%E7%A0%82%E7%8B%BC%E7%99%BD%E5%AD%90)、[Blue Archive Wiki](https://bluearchive.fandom.com/zh/wiki/%E7%A0%82%E7%8B%BC%E7%99%BD%E5%AD%90)、[百度百科](https://baike.baidu.com/item/%E7%A0%82%E7%8B%BC%E7%99%BD%E5%AD%90/62839164) |
|
||||
| 曾用素材（已移除） | 最早一版用过官方立绘与头像，为改成简约形象已从仓库删除 | [SchaleDB](https://schaledb.com)：`images/student/portrait/10010.webp`、`images/student/icon/10010.webp`（Id `10010` = 砂狼白子），版权归 NEXON Games / Yostar；想换回官方图可再从该地址取 |
|
||||
|
||||
@@ -441,6 +441,10 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
- [x] 页脚改为展示「数据更新于 … + 下次检查 Ns」，tooltip 内含服务端更新节奏与快照生成时间
|
||||
- [x] `scripts/verify.cjs` 适配纯外部数据源部署（自动跳过不适用的探测类断言），并新增「倒计时对齐服务端」断言
|
||||
|
||||
### v0.8.2 已实现
|
||||
|
||||
- [x] 左下角公路车换成**简约扁平风插画**（AI 生成 + 抠底，与人物同一套视觉语言），替换掉此前自绘的线稿 SVG；页脚下方装饰带（公路车 / 光环 / 人物）风格统一
|
||||
|
||||
### v0.8.1 已实现
|
||||
|
||||
- [x] **修复移动端顶栏塌陷**：窄屏（≤820px）改为「标题 / 统计 / 控件」三行布局，统计均分视口宽度，页脚改纵向堆叠 —— 此前统计数字会挤成竖排并压住标题
|
||||
|
||||
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 262 KiB |
|
Before Width: | Height: | Size: 423 KiB After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 453 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 246 KiB After Width: | Height: | Size: 311 KiB |
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 264 KiB |
@@ -11,7 +11,7 @@
|
||||
|
||||
import { connect } from 'cloudflare:sockets';
|
||||
|
||||
const VERSION = '0.8.1';
|
||||
const VERSION = '0.8.2';
|
||||
const HISTORY_LIMIT = 48;
|
||||
const UPTIME_DAYS = 90;
|
||||
const USER_AGENT = 'shiroko-monitor/0.3 (lightweight uptime panel)';
|
||||
|
||||
@@ -35,7 +35,7 @@ const CONCURRENCY = 8;
|
||||
const WRITE_DEBOUNCE_MS = 300;
|
||||
const DEFAULT_INTERVAL_SEC = 60;
|
||||
const PORT = Number(process.env.PORT || 8787);
|
||||
const VERSION = '0.8.1';
|
||||
const VERSION = '0.8.2';
|
||||
const UR_DEFAULT_POLL_SEC = 300;
|
||||
const UR_MIN_REFRESH_GAP_MS = 60000;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const VERSION = '0.8.1';
|
||||
const VERSION = '0.8.2';
|
||||
const HB_LIMIT = 48;
|
||||
const UPTIME_DAYS = 90;
|
||||
const BROWSER_CONCURRENCY = 6;
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 150" fill="none">
|
||||
<title>公路车（简笔画 · 自绘，白子的爱车意象）</title>
|
||||
<g stroke="#2ea8dc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- 车轮 -->
|
||||
<circle cx="58" cy="96" r="42"/>
|
||||
<circle cx="58" cy="96" r="4" fill="#2ea8dc" stroke="none"/>
|
||||
<circle cx="202" cy="96" r="42"/>
|
||||
<circle cx="202" cy="96" r="4" fill="#2ea8dc" stroke="none"/>
|
||||
</g>
|
||||
<g stroke="#8fd3f2" stroke-width="1.6" stroke-linecap="round">
|
||||
<!-- 辐条 -->
|
||||
<line x1="58" y1="56" x2="58" y2="136"/><line x1="18" y1="96" x2="98" y2="96"/>
|
||||
<line x1="30" y1="68" x2="86" y2="124"/><line x1="86" y1="68" x2="30" y2="124"/>
|
||||
<line x1="202" y1="56" x2="202" y2="136"/><line x1="162" y1="96" x2="242" y2="96"/>
|
||||
<line x1="174" y1="68" x2="230" y2="124"/><line x1="230" y1="68" x2="174" y2="124"/>
|
||||
</g>
|
||||
<g stroke="#1c2f4d" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- 车架 -->
|
||||
<path d="M58 96 L110 96 L142 52 L202 96"/>
|
||||
<path d="M110 96 L142 52"/>
|
||||
<path d="M110 96 L146 100"/>
|
||||
<!-- 前叉 + 车把 -->
|
||||
<path d="M202 96 L176 46"/>
|
||||
<path d="M164 40 L190 46"/>
|
||||
<!-- 座管 + 车座 -->
|
||||
<path d="M142 52 L130 34"/>
|
||||
<path d="M118 32 L142 34"/>
|
||||
<!-- 曲柄 + 脚踏 -->
|
||||
<circle cx="146" cy="100" r="10"/>
|
||||
<path d="M146 100 L162 116"/>
|
||||
</g>
|
||||
<g stroke="#2ea8dc" stroke-width="3" stroke-linecap="round">
|
||||
<path d="M96 100 L104 100" opacity="0.9"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 28 KiB |
@@ -79,18 +79,18 @@ body[data-theme="shiroko"]::after {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 130'><g stroke='%232ea8dc' stroke-opacity='0.11' fill='none' stroke-linecap='round'><ellipse cx='120' cy='64' rx='86' ry='38' stroke-width='11'/><ellipse cx='120' cy='70' rx='48' ry='21' stroke-width='6'/><g stroke-width='7'><line x1='22' y1='64' x2='6' y2='64'/><line x1='218' y1='64' x2='234' y2='64'/><line x1='120' y1='18' x2='120' y2='2'/><line x1='120' y1='110' x2='120' y2='126'/></g></g><g fill='%232ea8dc' fill-opacity='0.11'><circle cx='6' cy='64' r='4.6'/><circle cx='234' cy='64' r='4.6'/><circle cx='120' cy='2' r='4.6'/><circle cx='120' cy='126' r='4.6'/></g></svg>");
|
||||
}
|
||||
|
||||
/* 左下角：公路车（自绘） */
|
||||
/* 左下角：简约风公路车插画（与人物同一套扁平风格） */
|
||||
body[data-theme="shiroko"]::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 14px;
|
||||
bottom: 10px;
|
||||
width: 156px;
|
||||
height: 90px;
|
||||
left: 8px;
|
||||
bottom: 2px;
|
||||
width: 158px;
|
||||
height: 93px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.5;
|
||||
background: url("deco-bicycle.svg") no-repeat center / contain;
|
||||
opacity: 0.85;
|
||||
background: url("shiroko-bike.webp") no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* ---------- 顶栏：天蓝到白 + 底部围巾飘带 ---------- */
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<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.1</span>
|
||||
<span class="footer-item version">shiroko-monitor v0.8.2</span>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="assets/app.js"></script>
|
||||
|
||||