@extends('layouts.app')
@section('title', 'Unix Timestamp Rechner – Unixzeit umwandeln | kotsch.tech')
@section('meta_description', 'Unix Timestamp online umwandeln: Sekunden seit 1970 in Datum und zurück. Live-Uhr, Zeitzone, ISO 8601, relative Zeit und Vergleich zweier Timestamps.')
@section('meta_extra')
<meta name="keywords" content="Unix Timestamp, Unixzeit, Timestamp umwandeln, Epoch Zeit, Unix Time, Timestamp Konverter, ISO 8601">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.live-ts { font-family:'JetBrains Mono',monospace; font-size:2.2rem; font-weight:900; color:var(--accent); letter-spacing:-1px; }
.ts-row { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; background:var(--bg); margin-bottom:8px; }
.ts-lbl { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); min-width:130px; flex-shrink:0; }
.ts-val { font-family:'JetBrains Mono',monospace; font-size:0.88rem; flex:1; color:var(--ink); word-break:break-all; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-clock"></i> Developer</span>
        <h1 class="tool-h1">Unix<span>zeit.</span></h1>
        <p class="tool-sub">Timestamps umwandeln, live verfolgen und zwei Werte vergleichen.</p>
    </div>

    <div class="t-panel" style="text-align:center">
        <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px">Aktuelle Unix-Zeit (Sekunden)</div>
        <div class="live-ts" id="live-ts">–</div>
        <div style="font-size:0.82rem;color:var(--muted);margin-top:6px" id="live-date">–</div>
        <div style="display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap">
            <button class="t-btn ghost sm" onclick="useNow()"><i class="fas fa-arrow-down"></i> Jetzt verwenden</button>
            <button class="t-btn ghost sm" onclick="copyField('live-ts')"><i class="fas fa-copy"></i> Kopieren</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-arrow-right"></i> Timestamp → Datum</div>
        <div class="t-field">
            <label class="t-label">Unix Timestamp (Sekunden oder Millisekunden)</label>
            <div class="t-copy-wrap">
                <input type="number" class="t-input" id="ts-inp" placeholder="z.B. 1716239022" oninput="fromTs()">
                <button class="t-copy-btn" onclick="copyField('ts-inp')"><i class="fas fa-copy"></i></button>
            </div>
        </div>
        <div id="ts-result" style="display:none">
            <div class="ts-row"><span class="ts-lbl">Datum & Uhrzeit</span><span class="ts-val" id="ts-local">–</span></div>
            <div class="ts-row"><span class="ts-lbl">ISO 8601</span><span class="ts-val" id="ts-iso">–</span></div>
            <div class="ts-row"><span class="ts-lbl">UTC</span><span class="ts-val" id="ts-utc">–</span></div>
            <div class="ts-row"><span class="ts-lbl">Relativ</span><span class="ts-val" id="ts-rel">–</span></div>
            <div class="ts-row"><span class="ts-lbl">Wochentag</span><span class="ts-val" id="ts-day">–</span></div>
            <div class="ts-row"><span class="ts-lbl">KW</span><span class="ts-val" id="ts-week">–</span></div>
            <div class="ts-row"><span class="ts-lbl">Millisekunden</span><span class="ts-val" id="ts-ms">–</span></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-arrow-left"></i> Datum → Timestamp</div>
        <div class="t-field">
            <label class="t-label">Datum und Uhrzeit</label>
            <input type="datetime-local" class="t-input" id="dt-inp" oninput="fromDate()">
        </div>
        <div id="dt-result" style="display:none">
            <div class="ts-row"><span class="ts-lbl">Unix (Sek.)</span><span class="ts-val" id="dt-ts">–</span><button class="t-btn ghost sm" style="flex-shrink:0" onclick="navigator.clipboard.writeText(document.getElementById('dt-ts').textContent)"><i class="fas fa-copy"></i></button></div>
            <div class="ts-row"><span class="ts-lbl">Unix (Ms.)</span><span class="ts-val" id="dt-ms">–</span></div>
            <div class="ts-row"><span class="ts-lbl">ISO 8601</span><span class="ts-val" id="dt-iso">–</span></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-not-equal"></i> Zwei Timestamps vergleichen</div>
        <div class="t-grid-2" style="gap:12px;margin-bottom:12px">
            <div class="t-field">
                <label class="t-label">Timestamp A</label>
                <input type="number" class="t-input" id="cmp-a" placeholder="Timestamp A" oninput="compareTs()">
            </div>
            <div class="t-field">
                <label class="t-label">Timestamp B</label>
                <input type="number" class="t-input" id="cmp-b" placeholder="Timestamp B" oninput="compareTs()">
            </div>
        </div>
        <div id="cmp-result" style="display:none">
            <div class="ts-row"><span class="ts-lbl">Differenz</span><span class="ts-val" id="cmp-diff">–</span></div>
            <div class="ts-row"><span class="ts-lbl">In Tagen</span><span class="ts-val" id="cmp-days">–</span></div>
            <div class="ts-row"><span class="ts-lbl">In Stunden</span><span class="ts-val" id="cmp-hours">–</span></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const DAYS = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];

function pad(n) { return String(n).padStart(2,'0'); }

function getWeek(d) {
    const date = new Date(d.getTime());
    date.setHours(0,0,0,0);
    date.setDate(date.getDate()+3-(date.getDay()+6)%7);
    const week1 = new Date(date.getFullYear(),0,4);
    return 1+Math.round(((date-week1)/86400000-3+(week1.getDay()+6)%7)/7);
}

function relative(d) {
    const diff = (Date.now()-d.getTime())/1000;
    if (Math.abs(diff)<60) return 'gerade eben';
    if (Math.abs(diff)<3600) return Math.round(Math.abs(diff)/60)+' Min. '+(diff>0?'her':'in der Zukunft');
    if (Math.abs(diff)<86400) return Math.round(Math.abs(diff)/3600)+' Std. '+(diff>0?'her':'in der Zukunft');
    return Math.round(Math.abs(diff)/86400)+' Tage '+(diff>0?'her':'in der Zukunft');
}

function fromTs() {
    let v = document.getElementById('ts-inp').value.trim();
    if (!v) { document.getElementById('ts-result').style.display='none'; return; }
    let n = parseInt(v);
    if (isNaN(n)) return;
    if (n > 1e12) n = Math.round(n/1000); // milliseconds input
    const d = new Date(n*1000);
    if (isNaN(d)) return;
    document.getElementById('ts-local').textContent = d.toLocaleString('de-DE',{dateStyle:'full',timeStyle:'long'});
    document.getElementById('ts-iso').textContent = d.toISOString();
    document.getElementById('ts-utc').textContent = d.toUTCString();
    document.getElementById('ts-rel').textContent = relative(d);
    document.getElementById('ts-day').textContent = DAYS[d.getDay()];
    document.getElementById('ts-week').textContent = 'KW '+getWeek(d)+' / '+d.getFullYear();
    document.getElementById('ts-ms').textContent = (n*1000).toLocaleString('de-DE');
    document.getElementById('ts-result').style.display = '';
}

function fromDate() {
    const v = document.getElementById('dt-inp').value;
    if (!v) { document.getElementById('dt-result').style.display='none'; return; }
    const d = new Date(v);
    if (isNaN(d)) return;
    const ts = Math.floor(d.getTime()/1000);
    document.getElementById('dt-ts').textContent = ts;
    document.getElementById('dt-ms').textContent = d.getTime().toLocaleString('de-DE');
    document.getElementById('dt-iso').textContent = d.toISOString();
    document.getElementById('dt-result').style.display = '';
}

function compareTs() {
    const a = parseInt(document.getElementById('cmp-a').value)||0;
    const b = parseInt(document.getElementById('cmp-b').value)||0;
    if (!document.getElementById('cmp-a').value || !document.getElementById('cmp-b').value) {
        document.getElementById('cmp-result').style.display='none'; return;
    }
    const diff = Math.abs(a-b);
    document.getElementById('cmp-diff').textContent = diff.toLocaleString('de-DE') + ' Sekunden';
    document.getElementById('cmp-days').textContent = (diff/86400).toFixed(4) + ' Tage';
    document.getElementById('cmp-hours').textContent = (diff/3600).toFixed(2) + ' Stunden';
    document.getElementById('cmp-result').style.display = '';
}

function useNow() {
    const ts = Math.floor(Date.now()/1000);
    document.getElementById('ts-inp').value = ts;
    fromTs();
}

function copyField(id) {
    const el = document.getElementById(id);
    const val = el.value !== undefined ? el.value : el.textContent;
    navigator.clipboard.writeText(val.trim());
}

// Live clock
function updateLive() {
    const now = new Date();
    const ts = Math.floor(now/1000);
    document.getElementById('live-ts').textContent = ts;
    document.getElementById('live-date').textContent = now.toLocaleString('de-DE',{dateStyle:'full',timeStyle:'medium'});
}
updateLive();
setInterval(updateLive, 1000);

// Default: now
const tom = new Date();
const iso = tom.getFullYear()+'-'+pad(tom.getMonth()+1)+'-'+pad(tom.getDate())+'T'+pad(tom.getHours())+':'+pad(tom.getMinutes());
document.getElementById('dt-inp').value = iso;
document.getElementById('ts-inp').value = Math.floor(tom/1000);
fromTs(); fromDate();
</script>

@include('tools._seo_content', ['toolSlug' => 'unixzeit-rechner', 'toolName' => 'Unix-Zeit Rechner'])

@endsection