Timer fix2

src/components/Stopwatch.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { useStopwatch } from '@/hooks/useStopwatch';
+
+function formatStopwatch(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+const Stopwatch: React.FC = () => {
+  const { status, elapsedMs, start, pause, reset } = useStopwatch();
+  const isRunning = status === 'running';
+
+  return (
+    <div className="stopwatch">
+      <div className="time">{formatStopwatch(elapsedMs)}</div>
+      <div className="buttons">
+        <button type="button" onClick={isRunning ? pause : start}>
+          {isRunning ? 'Stop' : 'Go'}
+        </button>
+        <button type="button" className="reset" onClick={reset}>
+          Reset
+        </button>
+      </div>
+
+      <style jsx>{`
+        .stopwatch {
+          position: absolute;
+          right: 1rem;
+          bottom: 1rem;
+          background: linear-gradient(145deg, #2b2b2b, #202020);
+          border: 1px solid #3a3a3a;
+          border-radius: 14px;
+          padding: 1rem 1.25rem;
+          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          z-index: 1000;
+          color: #f1f1f1;
+        }
+
+        .time {
+          font-family: 'Courier New', monospace;
+          font-size: 2.2rem;
+          font-weight: 700;
+          letter-spacing: 1.5px;
+          min-width: 5rem;
+          text-align: center;
+        }
+
+        .buttons {
+          display: flex;
+          gap: 0.6rem;
+        }
+
+        button {
+          padding: 0.55rem 1rem;
+          border: none;
+          border-radius: 8px;
+          font-size: 1rem;
+          cursor: pointer;
+          font-weight: 500;
+          color: white;
+          background: #0070f3;
+        }
+
+        button:hover {
+          background: #005fcc;
+        }
+
+        button.reset {
+          background: #555;
+        }
+
+        button.reset:hover {
+          background: #666;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Stopwatch;

src/components/panels/TimerCard.tsx

@@ -5,6 +5,30 @@ import { useCountdown } from '@/hooks/useCountdown';
 
 const DEFAULT_PRESET_MS = 4 * 60 * 1000;
 
+type TimerVariant = 'order' | 'ingredient';
+
+const DEFAULT_COLOR = '#00ffcc';
+const FINISHED_COLOR = '#ff5566';
+
+// Ordered smallest-threshold-first so the first match wins.
+const COLOR_THRESHOLDS_MS: Record<TimerVariant, { maxMs: number; color: string }[]> = {
+  order: [
+    { maxMs: 42 * 1000, color: '#ff5566' }, // red
+    { maxMs: 90 * 1000, color: '#ff8c1a' }, // orange
+    { maxMs: 4 * 60 * 1000, color: '#ffcc00' }, // yellow
+  ],
+  ingredient: [
+    { maxMs: 35 * 1000, color: '#ff5566' }, // red
+    { maxMs: 60 * 1000, color: '#ffcc00' }, // yellow
+  ],
+};
+
+function countdownColorFor(variant: TimerVariant, remainingMs: number, isFinished: boolean): string {
+  if (isFinished) return FINISHED_COLOR;
+  const threshold = COLOR_THRESHOLDS_MS[variant].find((t) => remainingMs <= t.maxMs);
+  return threshold?.color ?? DEFAULT_COLOR;
+}
+
 function formatMmSs(ms: number): string {
   const totalSeconds = Math.max(0, Math.round(ms / 1000));
   const minutes = Math.floor(totalSeconds / 60);
@@ -28,9 +52,10 @@ interface TimerCardProps {
   label: string;
   onLabelChange?: (label: string) => void;
   onRemove?: () => void;
+  variant?: TimerVariant;
 }
 
-const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove }) => {
+const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove, variant = 'ingredient' }) => {
   const { status, remainingMs, start, pause, resume, reset } = useCountdown();
 
   const [presetMs, setPresetMs] = useState(DEFAULT_PRESET_MS);
@@ -42,13 +67,7 @@ const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove })
   const isPaused = status === 'paused';
   const isFinished = status === 'finished';
 
-  const countdownColor = isFinished
-    ? '#ff5566'
-    : remainingMs <= 30 * 1000
-      ? '#ff5566'
-      : remainingMs <= 60 * 1000
-        ? '#ffcc00'
-        : '#00ffcc';
+  const countdownColor = countdownColorFor(variant, remainingMs, isFinished);
 
   const handleGo = () => {
     const parsedMs = parseMmSs(inputText);
@@ -165,7 +184,7 @@ const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove })
         .label-input {
           margin: 0;
           padding: 0.15rem 0.3rem;
-          font-size: 0.95rem;
+          font-size: 1.5rem;
           font-weight: 600;
           color: #eaeaea;
           background: transparent;