From b9764dd61cdb4ef4b37a10738e594d9ef97e183f Mon Sep 17 00:00:00 2001
From: jenz <jenz>
Date: Fri, 11 Sep 2026 14:26:28 +0200
Subject: [PATCH] 24 hour format

---
 .../components/RecurringWindowChart.tsx       | 19 ++-----
 .../components/TimeInput24.tsx                | 51 +++++++++++++++++++
 2 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 discord_verificiation/playtime-frontend/components/TimeInput24.tsx

diff --git a/discord_verificiation/playtime-frontend/components/RecurringWindowChart.tsx b/discord_verificiation/playtime-frontend/components/RecurringWindowChart.tsx
index 9842267..98b732c 100644
--- a/discord_verificiation/playtime-frontend/components/RecurringWindowChart.tsx
+++ b/discord_verificiation/playtime-frontend/components/RecurringWindowChart.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import PlayerTimelineChart from './PlayerTimelineChart';
+import TimeInput24 from './TimeInput24';
 import { formatMinutes, countryCodeToFlag } from '@/lib/steam';
 
 interface RecurringPoint {
@@ -181,22 +182,12 @@ export default function RecurringWindowChart() {
         </div>
 
         <label className="flex flex-col text-xs text-ink-muted gap-1">
-          From
-          <input
-            type="time"
-            value={startTime}
-            onChange={(e) => setStartTime(e.target.value)}
-            className="bg-base border border-base-border rounded px-2 py-1 text-ink text-sm font-mono"
-          />
+          From <span className="text-ink-faint">(24h)</span>
+          <TimeInput24 value={startTime} onChange={setStartTime} />
         </label>
         <label className="flex flex-col text-xs text-ink-muted gap-1">
-          Until
-          <input
-            type="time"
-            value={endTime}
-            onChange={(e) => setEndTime(e.target.value)}
-            className="bg-base border border-base-border rounded px-2 py-1 text-ink text-sm font-mono"
-          />
+          Until <span className="text-ink-faint">(24h)</span>
+          <TimeInput24 value={endTime} onChange={setEndTime} />
         </label>
         <label className="flex flex-col text-xs text-ink-muted gap-1">
           Since
diff --git a/discord_verificiation/playtime-frontend/components/TimeInput24.tsx b/discord_verificiation/playtime-frontend/components/TimeInput24.tsx
new file mode 100644
index 0000000..aa64eb7
--- /dev/null
+++ b/discord_verificiation/playtime-frontend/components/TimeInput24.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+// A deliberately unambiguous 24-hour time picker. Native <input type="time">
+// displays 12-hour AM/PM or 24-hour format depending on the *browser's own
+// locale settings* — completely outside this app's control — which makes
+// "12:00 PM" (noon) easy to misread as "end of day" on a 12-hour-locale
+// browser. Two plain <select> dropdowns sidestep that entirely: every
+// visitor sees the same unambiguous HH:MM regardless of their locale.
+
+const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+const MINUTES = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+
+export default function TimeInput24({
+  value,
+  onChange,
+}: {
+  value: string; // "HH:MM", 24-hour
+  onChange: (value: string) => void;
+}) {
+  const [hh, mm] = value.split(':');
+
+  return (
+    <div className="flex items-center gap-1 bg-base border border-base-border rounded px-1.5 py-1">
+      <select
+        value={hh}
+        onChange={(e) => onChange(`${e.target.value}:${mm}`)}
+        className="bg-transparent text-ink text-sm font-mono focus:outline-none"
+        aria-label="Hour (24-hour)"
+      >
+        {HOURS.map((h) => (
+          <option key={h} value={h} className="bg-base">
+            {h}
+          </option>
+        ))}
+      </select>
+      <span className="text-ink-faint">:</span>
+      <select
+        value={mm}
+        onChange={(e) => onChange(`${hh}:${e.target.value}`)}
+        className="bg-transparent text-ink text-sm font-mono focus:outline-none"
+        aria-label="Minute"
+      >
+        {MINUTES.map((m) => (
+          <option key={m} value={m} className="bg-base">
+            {m}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}