starred/godoxy-yusing
1
0
Fork 0
mirror of https://github.com/yusing/godoxy.git synced 2026-04-27 18:57:04 +02:00
Code Issues 18 Packages Projects Releases 10 Wiki Activity

feat(idlewatcher): restyle loading page and style SSE log levels

Browse Source 
Restyle the idle watcher loading UI with design tokens, light and dark
variants via `prefers-color-scheme`, and system font stacks (drop
Google Fonts). Tighten layout, animations, and console presentation.

In `loading.js`, pass event `level` into `addConsoleLine` and apply
`level-*` classes so log lines can reflect debug, info, warn, and
error. On the HTML side, set `color-scheme`, add an empty `alt` on the
logo, and mark the loading dots as `aria-hidden` for assistive
technology.
This commit is contained in:
yusing
2026-04-23 10:05:28 +08:00
parent 01ca378bce
commit 5dc286f4a9
3 changed files with 224 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
internal/idlewatcher/html/loading_page.html
View File

@@ -1,17 +1,12 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>{{.Title}}</title>
<link rel="stylesheet" href="{{.LoadingPageCSSPath}}" />
<link rel="icon" href="{{.FavIconPath}}" />
<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=Fira+Code:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<script>
@@ -20,8 +15,8 @@
<script src="{{.LoadingPageJSPath}}" defer></script>
<div class="container">
<!-- icon handled by waker_http -->
<img class="logo" src="{{.FavIconPath}}" />
<div id="loading-dots" class="loading-dots">
<img class="logo" src="{{.FavIconPath}}" alt="" />
<div id="loading-dots" class="loading-dots" aria-hidden="true">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>