From cf03c49d032128847aa8a337c86301727ad79446 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Wed, 17 Jun 2026 00:44:12 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Datetime-Tab=20'In=20X=20Zeit'=20-=20St?=
 =?UTF-8?q?unden+Minuten=20eingeben=20=E2=86=92=20Zieldatum=20anzeigen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/tools/devtools.jsx | 67 ++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index c60def4..fac44fd 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -615,6 +615,22 @@ function DatetimeRechner({ mobile }) {
     });
   }
 
+  // ── Tab 4: In X Stunden/Minuten ──
+  const [inH, setInH] = useState('');
+  const [inM, setInM] = useState('');
+  const inResult = (() => {
+    const h = parseInt(inH) || 0;
+    const m = parseInt(inM) || 0;
+    if (h === 0 && m === 0) return null;
+    const future = new Date(Date.now() + (h * 60 + m) * 60 * 1000);
+    return {
+      de:   future.toLocaleDateString('de-DE', { timeZone:'Europe/Berlin', weekday:'long', day:'2-digit', month:'2-digit', year:'numeric' })
+          + ', ' + future.toLocaleTimeString('de-DE', { timeZone:'Europe/Berlin', hour:'2-digit', minute:'2-digit' }) + ' Uhr',
+      unix: Math.floor(future.getTime() / 1000),
+      total: h * 60 + m,
+    };
+  })();
+
   // ── Tab 3: Zeitdifferenz ──
   const [dtA, setDtA] = useState('');
   const [dtATime, setDtATime] = useState('');
@@ -644,7 +660,7 @@ function DatetimeRechner({ mobile }) {
   const lbl = { color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:10, marginBottom:4 };
 
   const [tab, setTab] = useState('conv');
-  const tabs = [{id:'conv',label:'⇄ Umrechnen'},{id:'bday',label:'🎂 Geburtstag'},{id:'diff',label:'⏱ Differenz'}];
+  const tabs = [{id:'conv',label:'⇄ Umrechnen'},{id:'bday',label:'🎂 Geburtstag'},{id:'diff',label:'⏱ Differenz'},{id:'in',label:'⏩ In X Zeit'}];
 
   return (
     <div>
@@ -783,6 +799,55 @@ function DatetimeRechner({ mobile }) {
           )}
         </div>
       )}
+
+      {tab==='in' && (
+        <div>
+          <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:11,marginBottom:14}}>
+            Ab jetzt in wie vielen Stunden/Minuten?
+          </div>
+          <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:16,flexWrap:'wrap'}}>
+            <div style={{display:'flex',alignItems:'center',gap:6}}>
+              <input
+                type="number" min="0" max="999"
+                value={inH} onChange={e=>setInH(e.target.value)}
+                placeholder="0"
+                style={{...inp, width:70, textAlign:'center'}}
+              />
+              <span style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:12}}>Stunden</span>
+            </div>
+            <div style={{display:'flex',alignItems:'center',gap:6}}>
+              <input
+                type="number" min="0" max="59"
+                value={inM} onChange={e=>setInM(e.target.value)}
+                placeholder="0"
+                style={{...inp, width:70, textAlign:'center'}}
+              />
+              <span style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:12}}>Minuten</span>
+            </div>
+          </div>
+          {inResult && (
+            <div style={{background:'rgba(255,255,255,0.03)',border:'1px solid rgba(255,255,255,0.08)',
+              borderRadius:10,padding:'14px 16px'}}>
+              <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:10,marginBottom:6}}>
+                IN {inResult.total} MINUTEN ({Math.floor(inResult.total/60)}h {inResult.total%60}m) IST ES:
+              </div>
+              <div style={{color:'#4ecdc4',fontFamily:'monospace',fontSize:18,fontWeight:700,marginBottom:8}}>
+                {inResult.de}
+              </div>
+              <div style={{display:'flex',gap:8,alignItems:'center'}}>
+                <span style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:11}}>
+                  Unix: {inResult.unix}
+                </span>
+                <button onClick={()=>navigator.clipboard?.writeText(inResult.de)}
+                  style={{background:'rgba(78,205,196,0.1)',border:'1px solid rgba(78,205,196,0.3)',
+                    borderRadius:6,padding:'3px 10px',color:'#4ecdc4',fontFamily:'monospace',fontSize:10,cursor:'pointer'}}>
+                  📋 Kopieren
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }