From 69659f00be1c314c7d1c1a3f16c974149f276291 Mon Sep 17 00:00:00 2001
From: ethan-CCY <ethanchuangtw@gmail.com>
Date: Mon, 22 Dec 2025 15:04:02 +0800
Subject: [PATCH 1/2] Update countdown visuals and controls

---
 src/App.jsx                    | 16 ++++--
 src/components/Controls.jsx    |  4 +-
 src/components/TimeDisplay.jsx | 11 +++--
 src/components/WaterGauge.jsx  | 27 +++++-----
 src/styles.css                 | 90 +++++++++++++++++++++++++++++-----
 5 files changed, 111 insertions(+), 37 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 752fc09..2526f83 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,7 @@ import { useCountdown, useStopwatch } from "./lib/hooks.js";
 export default function App() {
   const [mode, setMode] = useState("stopwatch"); // "stopwatch" | "countdown"
   const sw = useStopwatch();
-  const cd = useCountdown(5 * 60 * 1000);
+  const cd = useCountdown(0);
 
   const [laps, setLaps] = useState([]);
 
@@ -53,6 +53,8 @@ export default function App() {
     mode === "stopwatch"
       ? formatHMS(sw.elapsedMs, { showMs: true })
       : formatHMS(cd.remainingMs, { showMs: true });
+  const isCountdownFinalSeconds =
+    mode === "countdown" && cd.totalMs > 0 && cd.remainingMs <= 5000;
 
   const onReset = () => {
     if (mode === "stopwatch") {
@@ -134,7 +136,11 @@ export default function App() {
                 <WaterGauge level={viz.waterLevel} variant={viz.waterVariant} size={260} />
                 <div className="vizOverlay">
                   <div className="modeTitle">{viz.title}</div>
-                  <TimeDisplay primary={primaryTime} secondary={viz.subtitle} />
+                  <TimeDisplay
+                    primary={primaryTime}
+                    secondary={viz.subtitle}
+                    primaryClassName={isCountdownFinalSeconds ? "timePrimaryAlert" : ""}
+                  />
                 </div>
               </div>
 
@@ -155,14 +161,14 @@ export default function App() {
 
             <section className="card sideCard" aria-label="Countdown presets">
               <div className="countdownTools">
+                <div className="hint countdownHint">
+                  按多次可累加時間，或按「清除」重新設定。
+                </div>
                 <CountdownPresets
                   disabled={cd.isRunning}
                   onPick={onPickPreset}
                   onClear={onClearPreset}
                 />
-                <div className="hint">
-                  按多次可累加時間，或按「清除」重新設定。
-                </div>
               </div>
             </section>
           </div>
diff --git a/src/components/Controls.jsx b/src/components/Controls.jsx
index f8f9c2a..cad50a1 100644
--- a/src/components/Controls.jsx
+++ b/src/components/Controls.jsx
@@ -19,8 +19,8 @@ export default function Controls({
         >
           {isRunning ? "暫停" : "開始"}
         </button>
-        <button className="btn btnReset" onClick={onReset} aria-label="重設">
-          重設
+        <button className="btn btnReset" onClick={onReset} aria-label="重新計時">
+          重新計時
         </button>
         {extraRight}
       </div>
diff --git a/src/components/TimeDisplay.jsx b/src/components/TimeDisplay.jsx
index 2c84fa2..b39b36a 100644
--- a/src/components/TimeDisplay.jsx
+++ b/src/components/TimeDisplay.jsx
@@ -1,11 +1,16 @@
 import React from "react";
 
-export default function TimeDisplay({ primary, secondary }) {
+export default function TimeDisplay({
+  primary,
+  secondary,
+  className = "",
+  primaryClassName = "",
+}) {
   const [main, ms] = String(primary || "").split(".");
 
   return (
-    <div className="timeDisplay">
-      <div className="timePrimary">
+    <div className={`timeDisplay ${className}`}>
+      <div className={`timePrimary ${primaryClassName}`}>
         <span className="timeMain">{main}</span>
         {ms ? <span className="timeMs">.{ms}</span> : null}
       </div>
diff --git a/src/components/WaterGauge.jsx b/src/components/WaterGauge.jsx
index 80d8118..649fa56 100644
--- a/src/components/WaterGauge.jsx
+++ b/src/components/WaterGauge.jsx
@@ -3,34 +3,29 @@ import { clamp } from "../lib/time.js";
 
 /**
  * WaterGauge: soothing water level + slow wave drift (countdown),
- * or static dark plate for stopwatch.
+ * or static wavy water for stopwatch.
  * level: 0..1 (1 = full) for animated mode
  */
 export default function WaterGauge({ level = 0.5, variant = "countdown", size = 220 }) {
-  if (variant === "stopwatch") {
-    return (
-      <div
-        className="waterGauge waterGaugeStatic"
-        aria-hidden="true"
-        style={{ width: size, height: size }}
-      >
-        <div className="waterPlate" />
-      </div>
-    );
-  }
-
   const l = clamp(level, 0, 1);
   const y = `${(1 - l) * 100}%`;
+  const isCountdown = variant === "countdown";
+  const isStopwatch = variant === "stopwatch";
 
   return (
     <div
-      className={`waterGauge ${variant === "countdown" ? "waterGaugeCountdown" : ""}`}
+      className={`waterGauge ${isCountdown ? "waterGaugeCountdown" : ""} ${
+        isStopwatch ? "waterGaugeStopwatch" : ""
+      }`}
       aria-hidden="true"
       style={{ width: size, height: size }}
     >
-      <div className="waterSurface" style={{ top: y }} />
       <div
-        className="waterFill"
+        className={`waterSurface ${isStopwatch ? "waterSurfaceWave" : ""}`}
+        style={{ top: y }}
+      />
+      <div
+        className={`waterFill ${isStopwatch ? "waterFillStatic" : ""}`}
         style={{ "--water-shift": `${(1 - l) * 100}%` }}
       >
         <div className="wave wave1" />
diff --git a/src/styles.css b/src/styles.css
index 05ee41f..803c59d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -15,17 +15,17 @@
   --water-surface: rgba(255,255,255,0.24);
   --cta-start: #7fcf7c;
   --cta-pause: #e25656;
-  --cta-reset: #a5724b;
+  --cta-reset: #FF9224;
 }
 
 .app.mode-countdown {
-  --bg1: #9d6bdc;
-  --bg2: #6b40a4;
-  --bg-highlight1: rgba(255, 255, 255, 0.10);
-  --bg-highlight2: rgba(255, 255, 255, 0.08);
-  --water-top: rgba(0, 128, 255, 0.7);
-  --water-bottom: rgba(0, 128, 255, 0.55);
-  --water-surface: rgba(255,255,255,0.42);
+  --bg1: #02F78E;
+  --bg2: #02F78E;
+  --bg-highlight1: rgba(255, 255, 255, 0.12);
+  --bg-highlight2: rgba(255, 255, 255, 0.10);
+  --water-top: rgba(0, 128, 255, 0.75);
+  --water-bottom: rgba(0, 128, 255, 0.60);
+  --water-surface: rgba(255,255,255,0.50);
 }
 
 * { box-sizing: border-box; }
@@ -170,6 +170,18 @@ a { color: inherit; }
   font-variant-numeric: tabular-nums;
 }
 .timeSecondary { font-size: 13px; color: var(--muted); }
+.timePrimaryAlert {
+  color: #FF2D2D;
+  animation: countdownFlash 1s steps(2, start) infinite;
+}
+.timePrimaryAlert .timeMs {
+  color: #FF2D2D;
+}
+@keyframes countdownFlash {
+  0% { opacity: 1; }
+  50% { opacity: 0.25; }
+  100% { opacity: 1; }
+}
 
 .stopwatchGrid .timerCard {
   max-width: 700px;
@@ -218,11 +230,11 @@ a { color: inherit; }
 .btnPause:hover { background: #d84c4c; }
 .btnReset {
   background: var(--cta-reset);
-  border-color: #8b5f3f;
+  border-color: #f78b1f;
   color: #fff;
-  box-shadow: 0 12px 26px rgba(165, 114, 75, 0.32);
+  box-shadow: 0 12px 26px rgba(255, 146, 36, 0.32);
 }
-.btnReset:hover { background: #9b6946; }
+.btnReset:hover { background: #ff9f3c; }
 .btnLap {
   background: #84C1FF;
   border-color: #6ca7e5;
@@ -262,6 +274,36 @@ a { color: inherit; }
   color: var(--muted2);
   text-align: center;
 }
+.countdownHint {
+  font-size: 18px;
+  margin-top: 0;
+  margin-bottom: 12px;
+  color: rgba(255,255,255,0.92);
+}
+.countdownTools {
+  display: flex;
+  flex-direction: column;
+}
+.app.mode-countdown .chip {
+  background: #ffffff;
+  color: #35135d;
+  border-color: rgba(255,255,255,0.95);
+}
+.app.mode-countdown .chip:hover {
+  background: #f2f2f2;
+  color: #35135d;
+}
+.app.mode-countdown .chip:disabled {
+  color: #35135d;
+}
+.app.mode-countdown .chipClear {
+  background: #ffd580;
+  border-color: #ffc568;
+  color: #3f1a68;
+}
+.app.mode-countdown .chipClear:hover {
+  background: #ffce91;
+}
 
 .laps {
   margin-top: 14px;
@@ -360,6 +402,9 @@ a { color: inherit; }
   transition: transform 180ms linear;
   background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
 }
+.waterFillStatic {
+  animation: none;
+}
 .waterGaugeCountdown .waterFill {
   background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
   animation: sway 6s ease-in-out infinite;
@@ -384,6 +429,29 @@ a { color: inherit; }
   transition: top 180ms linear;
   opacity: 0.8;
 }
+.waterGaugeStopwatch {
+  background: radial-gradient(200px 140px at 50% 30%, rgba(255,255,255,0.12), rgba(0,0,0,0.08));
+  border: 1px solid rgba(255,255,255,0.12);
+  box-shadow: inset 0 -30px 60px rgba(0,0,0,0.18);
+}
+.waterGaugeStopwatch .waterFill {
+  background: linear-gradient(180deg, rgba(136, 210, 255, 0.5), rgba(72, 158, 230, 0.34));
+}
+.waterGaugeStopwatch .wave {
+  animation: none;
+  opacity: 0.6;
+}
+.waterGaugeStopwatch .wave2 {
+  opacity: 0.38;
+}
+.waterSurfaceWave {
+  height: 10px;
+  background-image: radial-gradient(circle at 20px 8px, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.65) 55%, transparent 65%);
+  background-size: 60px 14px;
+  background-repeat: repeat-x;
+  opacity: 0.9;
+  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
+}
 
 /* Waves */
 .wave {

From 60e10630356da0a0d82834d439af0bab7f3161b9 Mon Sep 17 00:00:00 2001
From: ethan-CCY <ethanchuangtw@gmail.com>
Date: Mon, 22 Dec 2025 15:28:11 +0800
Subject: [PATCH 2/2] Refine countdown visuals per feedback

---
 src/App.jsx                   |  4 +--
 src/components/WaterGauge.jsx | 27 +++++++++-------
 src/styles.css                | 59 ++++++-----------------------------
 3 files changed, 27 insertions(+), 63 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2526f83..d9aecb1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -54,7 +54,7 @@ export default function App() {
       ? formatHMS(sw.elapsedMs, { showMs: true })
       : formatHMS(cd.remainingMs, { showMs: true });
   const isCountdownFinalSeconds =
-    mode === "countdown" && cd.totalMs > 0 && cd.remainingMs <= 5000;
+    mode === "countdown" && cd.totalMs > 0 && cd.remainingMs <= 10000;
 
   const onReset = () => {
     if (mode === "stopwatch") {
@@ -131,7 +131,7 @@ export default function App() {
         ) : (
           <div className="stopwatchGrid">
             <section className="card breathe timerCard countdownCard" aria-label="Countdown">
-              <div className="vizWrap">
+              <div className={`vizWrap ${isCountdownFinalSeconds ? "countdownAlert" : ""}`}>
                 <Ring progress={viz.ringProgress} size={300} />
                 <WaterGauge level={viz.waterLevel} variant={viz.waterVariant} size={260} />
                 <div className="vizOverlay">
diff --git a/src/components/WaterGauge.jsx b/src/components/WaterGauge.jsx
index 649fa56..80d8118 100644
--- a/src/components/WaterGauge.jsx
+++ b/src/components/WaterGauge.jsx
@@ -3,29 +3,34 @@ import { clamp } from "../lib/time.js";
 
 /**
  * WaterGauge: soothing water level + slow wave drift (countdown),
- * or static wavy water for stopwatch.
+ * or static dark plate for stopwatch.
  * level: 0..1 (1 = full) for animated mode
  */
 export default function WaterGauge({ level = 0.5, variant = "countdown", size = 220 }) {
+  if (variant === "stopwatch") {
+    return (
+      <div
+        className="waterGauge waterGaugeStatic"
+        aria-hidden="true"
+        style={{ width: size, height: size }}
+      >
+        <div className="waterPlate" />
+      </div>
+    );
+  }
+
   const l = clamp(level, 0, 1);
   const y = `${(1 - l) * 100}%`;
-  const isCountdown = variant === "countdown";
-  const isStopwatch = variant === "stopwatch";
 
   return (
     <div
-      className={`waterGauge ${isCountdown ? "waterGaugeCountdown" : ""} ${
-        isStopwatch ? "waterGaugeStopwatch" : ""
-      }`}
+      className={`waterGauge ${variant === "countdown" ? "waterGaugeCountdown" : ""}`}
       aria-hidden="true"
       style={{ width: size, height: size }}
     >
+      <div className="waterSurface" style={{ top: y }} />
       <div
-        className={`waterSurface ${isStopwatch ? "waterSurfaceWave" : ""}`}
-        style={{ top: y }}
-      />
-      <div
-        className={`waterFill ${isStopwatch ? "waterFillStatic" : ""}`}
+        className="waterFill"
         style={{ "--water-shift": `${(1 - l) * 100}%` }}
       >
         <div className="wave wave1" />
diff --git a/src/styles.css b/src/styles.css
index 803c59d..51b833f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -19,8 +19,8 @@
 }
 
 .app.mode-countdown {
-  --bg1: #02F78E;
-  --bg2: #02F78E;
+  --bg1: #02C874;
+  --bg2: #02C874;
   --bg-highlight1: rgba(255, 255, 255, 0.12);
   --bg-highlight2: rgba(255, 255, 255, 0.10);
   --water-top: rgba(0, 128, 255, 0.75);
@@ -177,9 +177,14 @@ a { color: inherit; }
 .timePrimaryAlert .timeMs {
   color: #FF2D2D;
 }
+.countdownAlert .ringProgress,
+.countdownAlert .ringTrack {
+  animation: countdownFlash 1s steps(2, start) infinite;
+  stroke: rgba(255,255,255,0.9);
+}
 @keyframes countdownFlash {
   0% { opacity: 1; }
-  50% { opacity: 0.25; }
+  50% { opacity: 0.18; }
   100% { opacity: 1; }
 }
 
@@ -275,7 +280,7 @@ a { color: inherit; }
   text-align: center;
 }
 .countdownHint {
-  font-size: 18px;
+  font-size: 16px;
   margin-top: 0;
   margin-bottom: 12px;
   color: rgba(255,255,255,0.92);
@@ -284,26 +289,6 @@ a { color: inherit; }
   display: flex;
   flex-direction: column;
 }
-.app.mode-countdown .chip {
-  background: #ffffff;
-  color: #35135d;
-  border-color: rgba(255,255,255,0.95);
-}
-.app.mode-countdown .chip:hover {
-  background: #f2f2f2;
-  color: #35135d;
-}
-.app.mode-countdown .chip:disabled {
-  color: #35135d;
-}
-.app.mode-countdown .chipClear {
-  background: #ffd580;
-  border-color: #ffc568;
-  color: #3f1a68;
-}
-.app.mode-countdown .chipClear:hover {
-  background: #ffce91;
-}
 
 .laps {
   margin-top: 14px;
@@ -402,9 +387,6 @@ a { color: inherit; }
   transition: transform 180ms linear;
   background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
 }
-.waterFillStatic {
-  animation: none;
-}
 .waterGaugeCountdown .waterFill {
   background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
   animation: sway 6s ease-in-out infinite;
@@ -429,29 +411,6 @@ a { color: inherit; }
   transition: top 180ms linear;
   opacity: 0.8;
 }
-.waterGaugeStopwatch {
-  background: radial-gradient(200px 140px at 50% 30%, rgba(255,255,255,0.12), rgba(0,0,0,0.08));
-  border: 1px solid rgba(255,255,255,0.12);
-  box-shadow: inset 0 -30px 60px rgba(0,0,0,0.18);
-}
-.waterGaugeStopwatch .waterFill {
-  background: linear-gradient(180deg, rgba(136, 210, 255, 0.5), rgba(72, 158, 230, 0.34));
-}
-.waterGaugeStopwatch .wave {
-  animation: none;
-  opacity: 0.6;
-}
-.waterGaugeStopwatch .wave2 {
-  opacity: 0.38;
-}
-.waterSurfaceWave {
-  height: 10px;
-  background-image: radial-gradient(circle at 20px 8px, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.65) 55%, transparent 65%);
-  background-size: 60px 14px;
-  background-repeat: repeat-x;
-  opacity: 0.9;
-  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
-}
 
 /* Waves */
 .wave {