DevTools: Datetime-Tool (Umrechner/Geburtstag/Differenz), dunkle Texte in DevTools+Skizze aufgehellt

frontend/src/tools/devtools.jsx

@@ -99,7 +99,7 @@ function CronExplainer() {
           <button key={ex} onClick={()=>setInput(ex)} style={{padding:'4px 10px',borderRadius:6,
             fontFamily:'monospace',fontSize:10,cursor:'pointer',
             background:'rgba(255,255,255,0.05)',border:'1px solid rgba(255,255,255,0.1)',color:'rgba(255,255,255,0.5)'}}>
-            <code>{ex}</code> <span style={{color:'rgba(255,255,255,0.25)',fontSize:9}}>({l})</span>
+            <code>{ex}</code> <span style={{color:'rgba(255,255,255,0.5)',fontSize:9}}>({l})</span>
           </button>
         ))}
       </div>
@@ -107,7 +107,7 @@ function CronExplainer() {
         <div>
           <div style={{background:'rgba(78,205,196,0.08)',border:'1px solid rgba(78,205,196,0.2)',
             borderRadius:10,padding:'14px 16px',marginBottom:12}}>
-            <div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,marginBottom:5}}>BEDEUTET</div>
+            <div style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:9,marginBottom:5}}>BEDEUTET</div>
             <div style={{color:'#fff',fontFamily:'monospace',fontSize:16,fontWeight:700}}>{result.human}</div>
           </div>
           {result.fields && (
@@ -274,7 +274,7 @@ function CronBuilder() {
 function ElektroInp({ vals, setVals, k, label, unit, placeholder }) {
   return (
     <div style={{ flex:1, minWidth:100 }}>
-      <div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
+      <div style={{ color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
         {label} [{unit}]
       </div>
       <input type="number" value={vals[k]||''} onChange={e=>setVals(p=>({...p,[k]:e.target.value}))}
@@ -368,7 +368,7 @@ function ElektroRechner({ mobile }) {
   return (
     <div>
       {/* Info */}
-      <div style={{ color:'rgba(255,255,255,0.2)', fontFamily:'monospace', fontSize:9,
+      <div style={{ color:'rgba(255,255,255,0.5)', fontFamily:'monospace', fontSize:9,
         marginBottom:16, lineHeight:1.8 }}>
         Felder ausfüllen → Ergebnis erscheint automatisch · Mindestens 2 bekannte Größen eingeben
       </div>
@@ -400,7 +400,7 @@ function ElektroRechner({ mobile }) {
               <ElektroResult label="U – Spannung"   value={fmt(leistRes.U,'V')}   highlight={!U2}/>
               <ElektroResult label="I – Strom"      value={fmt(leistRes.I,'A')}   highlight={!I2}/>
               <ElektroResult label="R – Widerstand" value={fmt(leistRes.R,'Ω')}   highlight={!R2}/>
-            </> : <div style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:11}}>Mindestens 2 Werte eingeben</div>}
+            </> : <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:11}}>Mindestens 2 Werte eingeben</div>}
           </ElektroSection>
 
           {/* Wirkungsgrad */}
@@ -423,7 +423,7 @@ function ElektroRechner({ mobile }) {
               <ElektroInp vals={vals} setVals={setVals} k="tage" label="Tage/Monat"     unit="d"   placeholder="30"/>
             </div>
             <div style={{ marginBottom:8 }}>
-              <div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
+              <div style={{ color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
                 Strompreis [€/kWh]
               </div>
               <input type="number" value={preis} onChange={e=>setPreis(e.target.value)}
@@ -477,6 +477,236 @@ function ElektroRechner({ mobile }) {
   );
 }
 
+// ─────────────────────────────────────────────────────────────── Datetime ──
+const MOSES_EPOCH = new Date('1970-01-01T00:00:00Z'); // Moseszeit = Unix time (Sekunden)
+
+function pad2(n){ return String(n).padStart(2,'0'); }
+
+function toLocalISO(d){
+  return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+function formatDE(d){
+  return `${pad2(d.getDate())}.${pad2(d.getMonth()+1)}.${d.getFullYear()} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+function DtRow({ label, value, muted }) {
+  return (
+    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',
+      padding:'7px 10px',borderRadius:7,background:'rgba(255,255,255,0.03)',marginBottom:4}}>
+      <span style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:11}}>{label}</span>
+      <code style={{color: muted ? 'rgba(255,255,255,0.55)' : '#4ecdc4',fontFamily:"'Courier New',monospace",fontSize:13,fontWeight:700}}>{value}</code>
+    </div>
+  );
+}
+
+function DatetimeRechner({ mobile }) {
+  const now = new Date();
+
+  // ── Tab 1: Umrechner ──
+  const [conv, setConv] = useState({ unix:'', local:'', de:'' });
+  const [convResult, setConvResult] = useState(null);
+
+  function convFromUnix(val) {
+    const n = parseInt(val);
+    if (isNaN(n)) { setConvResult(null); return; }
+    const d = new Date(n * 1000);
+    setConvResult({
+      de:    formatDE(d),
+      local: toLocalISO(d),
+      unix:  String(n),
+      wday:  WEEKDAYS[d.getDay()],
+      kw:    getKW(d),
+    });
+  }
+
+  function convFromLocal(val) {
+    if (!val) { setConvResult(null); return; }
+    const d = new Date(val);
+    if (isNaN(d)) { setConvResult(null); return; }
+    setConvResult({
+      de:    formatDE(d),
+      local: toLocalISO(d),
+      unix:  String(Math.floor(d.getTime()/1000)),
+      wday:  WEEKDAYS[d.getDay()],
+      kw:    getKW(d),
+    });
+  }
+
+  function getKW(d) {
+    const tmp = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    tmp.setUTCDate(tmp.getUTCDate() + 4 - (tmp.getUTCDay()||7));
+    const y = new Date(Date.UTC(tmp.getUTCFullYear(),0,1));
+    return Math.ceil((((tmp-y)/86400000)+1)/7);
+  }
+
+  // ── Tab 2: Geburtstag ──
+  const [bday, setBday] = useState('');
+  const [bdayResult, setBdayResult] = useState(null);
+
+  function calcBday(val) {
+    setBday(val);
+    if (!val) { setBdayResult(null); return; }
+    const birth = new Date(val);
+    if (isNaN(birth)) { setBdayResult(null); return; }
+    const today = new Date();
+    let age = today.getFullYear() - birth.getFullYear();
+    const hadBday = today.getMonth() > birth.getMonth() ||
+      (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate());
+    if (!hadBday) age--;
+
+    const nextBday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
+    if (nextBday <= today) nextBday.setFullYear(today.getFullYear()+1);
+    const diffMs = nextBday - today;
+    const diffD  = Math.ceil(diffMs / 86400000);
+    const totalD = Math.floor((today - birth) / 86400000);
+
+    setBdayResult({ age, diffD, totalD, wday: WEEKDAYS[birth.getDay()],
+      geburtstag: `${pad2(birth.getDate())}.${pad2(birth.getMonth()+1)}.${birth.getFullYear()}`,
+      nextDate: `${pad2(nextBday.getDate())}.${pad2(nextBday.getMonth()+1)}.${nextBday.getFullYear()}`,
+    });
+  }
+
+  // ── Tab 3: Zeitdifferenz ──
+  const [dtA, setDtA] = useState('');
+  const [dtB, setDtB] = useState('');
+  const [diffResult, setDiffResult] = useState(null);
+
+  function calcDiff(a, b) {
+    if (!a || !b) { setDiffResult(null); return; }
+    const dA = new Date(a), dB = new Date(b);
+    if (isNaN(dA)||isNaN(dB)) { setDiffResult(null); return; }
+    const ms = Math.abs(dB - dA);
+    const s  = Math.floor(ms/1000);
+    const m  = Math.floor(s/60);
+    const h  = Math.floor(m/60);
+    const d  = Math.floor(h/24);
+    const weeks = Math.floor(d/7);
+    const months = Math.abs(dB.getMonth()-dA.getMonth() + (dB.getFullYear()-dA.getFullYear())*12);
+    setDiffResult({ ms, s, m, h, d, weeks, months });
+  }
+
+  const inp = { ...S.inp, fontSize:13, padding:'7px 9px', width:'100%', boxSizing:'border-box' };
+  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'}];
+
+  return (
+    <div>
+      <div style={{display:'flex',gap:6,marginBottom:18,flexWrap:'wrap'}}>
+        {tabs.map(t=>(
+          <button key={t.id} onClick={()=>setTab(t.id)} style={{
+            padding:'6px 16px',borderRadius:20,fontFamily:'monospace',fontSize:11,cursor:'pointer',
+            background:tab===t.id?'#4ecdc4':'rgba(255,255,255,0.05)',
+            color:      tab===t.id?'#0d0d0f':'rgba(255,255,255,0.65)',
+            border:     tab===t.id?'none':'1px solid rgba(255,255,255,0.12)',
+            fontWeight: tab===t.id?700:400}}>{t.label}</button>
+        ))}
+      </div>
+
+      {tab==='conv' && (
+        <div>
+          <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:12,marginBottom:16}}>
+            <div>
+              <div style={lbl}>Unix / Moseszeit (Sekunden)</div>
+              <input style={inp} type="number" placeholder="z.B. 1685554093"
+                value={conv.unix} onChange={e=>{ setConv(p=>({...p,unix:e.target.value})); convFromUnix(e.target.value); }}/>
+            </div>
+            <div>
+              <div style={lbl}>Datum & Uhrzeit</div>
+              <input style={inp} type="datetime-local"
+                value={conv.local} onChange={e=>{ setConv(p=>({...p,local:e.target.value})); convFromLocal(e.target.value); }}/>
+            </div>
+          </div>
+          <button style={{...S.btn('#4ecdc4',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
+            onClick={()=>{ const d=new Date(); const v=String(Math.floor(d.getTime()/1000)); setConv({unix:v,local:toLocalISO(d),de:''}); convFromUnix(v); }}>
+            Jetzt verwenden
+          </button>
+          {convResult && (
+            <div>
+              <DtRow label="Deutsch (DE)" value={convResult.de}/>
+              <DtRow label="ISO lokal" value={convResult.local}/>
+              <DtRow label="Unix / Moseszeit" value={convResult.unix}/>
+              <DtRow label="Wochentag" value={convResult.wday}/>
+              <DtRow label="Kalenderwoche" value={`KW ${convResult.kw}`} muted/>
+            </div>
+          )}
+          {!convResult && (
+            <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:11,padding:'10px 0'}}>
+              Unix-Timestamp oder Datum eingeben → alle Formate werden berechnet
+            </div>
+          )}
+          <div style={{marginTop:14,padding:'10px 12px',borderRadius:8,background:'rgba(255,255,255,0.03)',
+            border:'1px solid rgba(255,255,255,0.07)'}}>
+            <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:9,marginBottom:6}}>BEISPIEL</div>
+            <div style={{color:'rgba(255,255,255,0.6)',fontFamily:'monospace',fontSize:11}}>
+              Moseszeit <code style={{color:'#4ecdc4'}}>1685554093</code> = <code style={{color:'#4ecdc4'}}>31.05.2026 17:28:13</code>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {tab==='bday' && (
+        <div>
+          <div style={{marginBottom:16}}>
+            <div style={lbl}>Geburtsdatum</div>
+            <input style={{...inp, maxWidth:220}} type="date" value={bday}
+              onChange={e=>calcBday(e.target.value)}/>
+          </div>
+          {bdayResult && (
+            <div>
+              <DtRow label="Geburtsdatum" value={`${bdayResult.geburtstag} (${bdayResult.wday})`}/>
+              <DtRow label="Alter" value={`${bdayResult.age} Jahre`}/>
+              <DtRow label="Nächster Geburtstag" value={bdayResult.nextDate}/>
+              <DtRow label="Tage bis Geburtstag" value={`${bdayResult.diffD} Tage`}/>
+              <DtRow label="Gelebte Tage" value={`${bdayResult.totalD.toLocaleString('de-DE')} Tage`} muted/>
+            </div>
+          )}
+          {!bdayResult && (
+            <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:11}}>
+              Geburtsdatum eingeben
+            </div>
+          )}
+        </div>
+      )}
+
+      {tab==='diff' && (
+        <div>
+          <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:12,marginBottom:16}}>
+            <div>
+              <div style={lbl}>Von</div>
+              <input style={inp} type="datetime-local" value={dtA}
+                onChange={e=>{ setDtA(e.target.value); calcDiff(e.target.value, dtB); }}/>
+            </div>
+            <div>
+              <div style={lbl}>Bis</div>
+              <input style={inp} type="datetime-local" value={dtB}
+                onChange={e=>{ setDtB(e.target.value); calcDiff(dtA, e.target.value); }}/>
+            </div>
+          </div>
+          {diffResult && (
+            <div>
+              <DtRow label="Millisekunden" value={diffResult.ms.toLocaleString('de-DE')} muted/>
+              <DtRow label="Sekunden" value={diffResult.s.toLocaleString('de-DE')}/>
+              <DtRow label="Minuten" value={diffResult.m.toLocaleString('de-DE')}/>
+              <DtRow label="Stunden" value={diffResult.h.toLocaleString('de-DE')}/>
+              <DtRow label="Tage" value={diffResult.d.toLocaleString('de-DE')}/>
+              <DtRow label="Wochen" value={`~${diffResult.weeks}`} muted/>
+              <DtRow label="Monate" value={`~${diffResult.months}`} muted/>
+            </div>
+          )}
+          {!diffResult && (
+            <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:11}}>
+              Zwei Zeitpunkte eingeben
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 const TOOL_DEFS = [
   {id:'cron',    label:'⏱ Crontab',   desc:'Crontab erklären und erstellen', ready:true,
    tabs:[{id:'explain',label:'Erklären'},{id:'build',label:'Erstellen'}],
@@ -487,7 +717,7 @@ const TOOL_DEFS = [
   {id:'regex',     label:'🔍 Regex',       desc:'Regex testen',                 ready:false},
   {id:'diff',      label:'± Text Diff',   desc:'Texte vergleichen',            ready:false},
   {id:'jwt',       label:'🔑 JWT',        desc:'JWT dekodieren',               ready:false},
-  {id:'timestamp', label:'🕐 Timestamp',  desc:'Unix Timestamps umrechnen',    ready:false},
+  {id:'datetime',  label:'📅 Datetime',   desc:'Zeiten umrechnen · Geburtstag · Differenz', ready:true, component:DatetimeRechner},
   {id:'color',     label:'🎨 Farben',     desc:'HEX/RGB/HSL umrechnen',        ready:false},
 ];
 
@@ -501,7 +731,7 @@ export default function DevTools({ toast, mobile }) {
     <div style={{padding:mobile?'14px 14px 90px':'36px 44px',maxWidth:860}}>
       <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:20,flexWrap:'wrap'}}>
         <h1 style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:mobile?17:22,margin:0}}>Dev-Tools</h1>
-        <span style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
+        <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
       </div>
       <div style={{display:'flex',gap:7,flexWrap:'wrap',marginBottom:20}}>
         {TOOL_DEFS.map(t=>(
@@ -509,7 +739,7 @@ export default function DevTools({ toast, mobile }) {
             onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
             style={{padding:'8px 14px',borderRadius:10,fontFamily:'monospace',fontSize:11,cursor:t.ready?'pointer':'default',
               background:activeTool===t.id?'#4ecdc4':t.ready?'rgba(255,255,255,0.06)':'rgba(255,255,255,0.02)',
-              color:      activeTool===t.id?'#0d0d0f':t.ready?'rgba(255,255,255,0.65)':'rgba(255,255,255,0.2)',
+              color:      activeTool===t.id?'#0d0d0f':t.ready?'rgba(255,255,255,0.65)':'rgba(255,255,255,0.4)',
               border:     activeTool===t.id?'none':t.ready?'1px solid rgba(255,255,255,0.1)':'1px solid rgba(255,255,255,0.05)',
               fontWeight: activeTool===t.id?700:400}}>
             {t.label}{!t.ready&&<span style={{marginLeft:4,fontSize:8,opacity:0.4}}>bald</span>}
@@ -519,7 +749,7 @@ export default function DevTools({ toast, mobile }) {
       <div style={{...S.card}}>
         <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14,flexWrap:'wrap'}}>
           <div style={{...S.head,marginBottom:0}}>{active?.label}</div>
-          <span style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:10}}>{active?.desc}</span>
+          <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>{active?.desc}</span>
         </div>
         {active?.tabs&&(
           <div style={{display:'flex',gap:6,marginBottom:16}}>

frontend/src/tools/skizze.jsx

@@ -158,7 +158,7 @@ function Shape({ s, selected, onClick }) {
 // ── Properties Panel ──────────────────────────────────────────────────────────
 function PropsPanel({ shape, onChange, onDelete, vars, scale, onScaleChange }) {
   if (!shape) return (
-    <div style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:10,padding:'14px 0',textAlign:'center',lineHeight:1.8}}>
+    <div style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10,padding:'14px 0',textAlign:'center',lineHeight:1.8}}>
       Form auswählen oder zeichnen.<br/>
       <span style={{fontSize:9,opacity:0.6}}>V=Auswählen R=Rect L=Linie C=Kreis</span>
     </div>
@@ -207,7 +207,7 @@ function PropsPanel({ shape, onChange, onDelete, vars, scale, onScaleChange }) {
         <div style={{display:'flex',gap:6,alignItems:'center'}}>
           <input type="number" value={scale} onChange={e=>onScaleChange(parseFloat(e.target.value)||1)}
             step={0.1} min={0.1} style={{...S.inp,flex:1,fontSize:12,padding:'5px 8px'}}/>
-          <span style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9}}>mm/px</span>
+          <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:9}}>mm/px</span>
         </div>
       </div>
     </div>
@@ -386,7 +386,7 @@ export default function Skizze({ toast, mobile }) {
             border:     tool===t.id?'none':'1px solid rgba(255,255,255,0.1)',
           }}>{t.label}</button>
         ))}
-        <span style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:9,alignSelf:'center',marginLeft:4}}>
+        <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:9,alignSelf:'center',marginLeft:4}}>
           {TOOLS.find(t=>t.id===tool)?.title}
         </span>
       </div>
@@ -433,7 +433,7 @@ export default function Skizze({ toast, mobile }) {
             {Object.entries(vars).map(([k,v])=>(
               <span key={k} style={{cursor:'pointer'}} onClick={()=>{setFormula(f=>f+k);formulaRef.current?.focus();}}>
                 <code style={{color:'#4ecdc4',fontSize:10}}>{k}</code>
-                <span style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:10}}>={typeof v==='number'?v.toFixed(2):v}</span>
+                <span style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:10}}>={typeof v==='number'?v.toFixed(2):v}</span>
               </span>
             ))}
           </div>
@@ -463,7 +463,7 @@ export default function Skizze({ toast, mobile }) {
 
         {/* Ergebnisse */}
         {results.length===0&&Object.keys(vars).length===0&&(
-          <div style={{color:'rgba(255,255,255,0.15)',fontFamily:'monospace',fontSize:11,textAlign:'center',padding:'8px 0'}}>
+          <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:11,textAlign:'center',padding:'8px 0'}}>
             Formen zeichnen → benennen → hier rechnen
           </div>
         )}
@@ -482,7 +482,7 @@ export default function Skizze({ toast, mobile }) {
               </code>
               <button onClick={()=>setResults(p=>p.filter(x=>x.id!==r.id))}
                 style={{background:'transparent',border:'none',cursor:'pointer',
-                  color:'rgba(255,255,255,0.2)',fontSize:12,padding:'0 2px',lineHeight:1}}>✕</button>
+                  color:'rgba(255,255,255,0.5)',fontSize:12,padding:'0 2px',lineHeight:1}}>✕</button>
             </div>
           </div>
         ))}