Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the timer page UI/theme system and refactors the timing logic to improve layout responsiveness, reduce button ambiguity, and introduce a more explicit pause/resume flow.
Changes:
- Added a “Theme Embed API” via expanded
:rootCSS variables and refreshed layout/styling for title/timer/manual panels. - Refactored the timer implementation to a timestamp-based state machine (IDLE/RUNNING/PAUSED), removed
eval, and added a unifiedloadStage()helper. - Updated UI structure: added corner logo placement, title edit button, and reorganized controls (including a central pause/resume button and simplified right panel buttons).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
title.js |
Updates the default title text exposed via window.APP_TITLE_TEXT. |
index.html |
Major UI/CSS overhaul + timer engine refactor (state machine, pause/resume, stage loader, ResizeObserver-based text fitting). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function togglePauseState() { | ||
| if (state === 'RUNNING') { | ||
| var now = Date.now(); | ||
| pausedTimeLeft = Math.ceil((endTime - now) / 1000); | ||
| if (pausedTimeLeft < 0) pausedTimeLeft = 0; | ||
| state = 'PAUSED'; | ||
| clearInterval(intervalId); | ||
| } else if (state === 'PAUSED' || state === 'IDLE') { | ||
| if (state === 'IDLE' && pausedTimeLeft <= 0) return; // 无剩余时间不可继续 | ||
| endTime = Date.now() + pausedTimeLeft * 1000; | ||
| state = 'RUNNING'; |
There was a problem hiding this comment.
#time-pause-btn is labeled “开始” when state === 'IDLE', but togglePauseState() returns early in that state when pausedTimeLeft <= 0, so the button does nothing on initial load and typically does nothing after a timer finishes. Also, because pausedTimeLeft isn’t reset on startTimer()/finish, clicking “开始” in IDLE can resume a stale leftover from a previous pause. Consider making IDLE-click restart the current stage (e.g., startTimer(currentStageDuration)), and reset pausedTimeLeft on new starts and when reaching 0.
| function getDialStyle() { | ||
| return { | ||
| element: '', | ||
| textResponsive: 2, | ||
| seconds: { | ||
| gauge: { | ||
| thickness: 1, | ||
| bgColor: getCssVariable('--dial-gauge-bg') || "rgba(118,88,60,0.18)", | ||
| fgColor: getCssVariable('--dial-gauge-fg') || "#1e66d0" | ||
| }, |
There was a problem hiding this comment.
The “theme API” defines --theme-dial-danger, but the countdown dial color will still switch to hard-coded #FF0000 under 10 seconds due to js/jquery.classycountdown.js logic. Since getDialStyle() always returns the normal --dial-gauge-fg, the final 10-second color is effectively not themeable. To keep theming consistent, override the knob fgColor after each update based on timeLeft (normal vs --theme-dial-danger), or adjust the plugin to use a configurable value instead of a literal.
| radial-gradient(circle at 85% 8%, var(--bg-grad-circle-5), var(--bg-grad-circle-0) 42%), | ||
| linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 46%, var(--bg-grad-3) 100%); | ||
| overflow-x: hidden; | ||
| overflow-y: hidden; |
There was a problem hiding this comment.
body { overflow-y: hidden; } combined with a fixed .app { height: calc(100vh - 20px); grid-template-rows: 20vh 60vh 20vh; } can make content inaccessible on short-height but wide screens (no scrolling possible, and the grid can clip). Consider allowing vertical scrolling by default (e.g., overflow-y: auto) and only hiding overflow for specific containers that must not scroll.
| overflow-y: hidden; | |
| overflow-y: auto; |
| <button id="recover">重置</button> | ||
| <button id="next" style="grid-column: span 2;">下一环节</button> | ||
| </div> |
There was a problem hiding this comment.
The style="grid-column: span 2;" inline style on the “下一环节” button makes layout harder to maintain alongside the rest of the CSS-driven grid rules. Consider moving this into a dedicated CSS selector/class (e.g., for #next) so layout stays centralized in the stylesheet.
显示调整
按键调整
分辨率测试
在常见分辨率条件下均能正常显示;
在非16：9分辨率时，计时圆盘可能不与文字对齐，有一点点不美观
颜色设置在index.html的开头root部分
目前颜色是因为还没有好的配色想法所以先用黑白了
p.s. 刚才写的pull request被刷新掉了所以重写:(