feat(frontend): replace native time input with custom hour/minute selects and optimize typography

1 day ago · 2832b197d0
2 changed files with 75 additions and 14 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -6,6 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>دیدبان دیوار - سامانه کرالر هوشمند</title>
    <!-- Fonts: Vazirmatn for Persian, Inter for English -->
+    <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=Inter:wght@300;400;500;600;700&family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet" />
  </head>
  <body>
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -15,6 +15,9 @@ import {
  ExternalLink
 } from 'lucide-react';

+const HOURS_LIST = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
+const MINUTES_LIST = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
+
 function App() {
  const [activeTab, setActiveTab] = useState('crawlers');
  const [crawlers, setCrawlers] = useState([]);
@ -47,6 +50,34 @@ function App() {
  const [formIsActive, setFormIsActive] = useState(true);
  const [formError, setFormError] = useState('');

+  // Parse hour and minute from form time states
+  const [startH, startM] = (formStartHour || '08:00').split(':');
+  const [endH, endM] = (formEndHour || '23:00').split(':');
+
+  const updateStartHour = (h) => {
+    const parts = (formStartHour || '08:00').split(':');
+    const m = parts.length > 1 ? parts[1] : '00';
+    setFormStartHour(`${h}:${m}`);
+  };
+
+  const updateStartMinute = (m) => {
+    const parts = (formStartHour || '08:00').split(':');
+    const h = parts.length > 0 ? parts[0] : '08';
+    setFormStartHour(`${h}:${m}`);
+  };
+
+  const updateEndHour = (h) => {
+    const parts = (formEndHour || '23:00').split(':');
+    const m = parts.length > 1 ? parts[1] : '00';
+    setFormEndHour(`${h}:${m}`);
+  };
+
+  const updateEndMinute = (m) => {
+    const parts = (formEndHour || '23:00').split(':');
+    const h = parts.length > 0 ? parts[0] : '23';
+    setFormEndHour(`${h}:${m}`);
+  };
+
  // Toast alert
  const [toast, setToast] = useState(null);

@ -710,24 +741,52 @@ function App() {
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-gray-400 font-medium">ساعت شروع پنجره مجاز</label>
-                  <input 
-                    type="time" 
-                    value={formStartHour} 
-                    onChange={(e) => setFormStartHour(e.target.value)}
-                    className="bg-black/20 border border-white/5 rounded-lg px-4 py-2 text-white text-sm outline-none focus:border-purple-500"
-                    required 
-                  />
+                  <div className="flex flex-row-reverse items-center gap-2">
+                    <select 
+                      value={startH || '08'} 
+                      onChange={(e) => updateStartHour(e.target.value)}
+                      className="flex-1 bg-[#1a1625] border border-white/5 rounded-lg px-3 py-2 text-white text-sm outline-none focus:border-purple-500 cursor-pointer"
+                    >
+                      {HOURS_LIST.map(h => (
+                        <option key={h} value={h} className="bg-slate-900 text-white">{h}</option>
+                      ))}
+                    </select>
+                    <span className="text-gray-500 font-bold">:</span>
+                    <select 
+                      value={startM || '00'} 
+                      onChange={(e) => updateStartMinute(e.target.value)}
+                      className="flex-1 bg-[#1a1625] border border-white/5 rounded-lg px-3 py-2 text-white text-sm outline-none focus:border-purple-500 cursor-pointer"
+                    >
+                      {MINUTES_LIST.map(m => (
+                        <option key={m} value={m} className="bg-slate-900 text-white">{m}</option>
+                      ))}
+                    </select>
+                  </div>
                </div>
                
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-gray-400 font-medium">ساعت پایان پنجره مجاز</label>
-                  <input 
-                    type="time" 
-                    value={formEndHour} 
-                    onChange={(e) => setFormEndHour(e.target.value)}
-                    className="bg-black/20 border border-white/5 rounded-lg px-4 py-2 text-white text-sm outline-none focus:border-purple-500"
-                    required 
-                  />
+                  <div className="flex flex-row-reverse items-center gap-2">
+                    <select 
+                      value={endH || '23'} 
+                      onChange={(e) => updateEndHour(e.target.value)}
+                      className="flex-1 bg-[#1a1625] border border-white/5 rounded-lg px-3 py-2 text-white text-sm outline-none focus:border-purple-500 cursor-pointer"
+                    >
+                      {HOURS_LIST.map(h => (
+                        <option key={h} value={h} className="bg-slate-900 text-white">{h}</option>
+                      ))}
+                    </select>
+                    <span className="text-gray-500 font-bold">:</span>
+                    <select 
+                      value={endM || '00'} 
+                      onChange={(e) => updateEndMinute(e.target.value)}
+                      className="flex-1 bg-[#1a1625] border border-white/5 rounded-lg px-3 py-2 text-white text-sm outline-none focus:border-purple-500 cursor-pointer"
+                    >
+                      {MINUTES_LIST.map(m => (
+                        <option key={m} value={m} className="bg-slate-900 text-white">{m}</option>
+                      ))}
+                    </select>
+                  </div>
                </div>
              </div>