@extends('layouts.app')
@section('title', 'Online Timer & Stoppuhr – Countdown kostenlos | kotsch.tech')
@section('meta_description', 'Online Timer und Stoppuhr kostenlos: Countdown einstellen, Stoppuhr mit Rundenzeiten starten. Alarm-Ton beim Ablauf. Direkt im Browser.')
@section('meta_extra')
<meta name="keywords" content="Online Timer, Stoppuhr online, Countdown Timer, Timer kostenlos, Online Stoppuhr, Pomodoro Timer, Küchen Timer">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.timer-display { text-align:center; font-size:clamp(4rem,15vw,7rem); font-weight:900; letter-spacing:-4px; color:var(--ink); line-height:1; margin:24px 0; font-variant-numeric:tabular-nums; }
.timer-display.done { color:#ef4444; animation:blink 0.5s infinite alternate; }
@keyframes blink { to { opacity:0.5; } }
.time-inputs { display:flex; justify-content:center; gap:16px; margin-bottom:20px; }
.time-unit { display:flex; flex-direction:column; align-items:center; gap:6px; }
.time-unit label { font-size:0.72rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.time-unit input { width:80px; text-align:center; font-size:1.8rem; font-weight:900; padding:12px 8px; }
.time-sep { font-size:2.5rem; font-weight:900; color:var(--muted); align-self:center; padding-bottom:14px; }
.btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.lap-list { max-height:200px; overflow-y:auto; margin-top:14px; }
.lap-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:0.88rem; }
.lap-row:last-child { border-bottom:none; }
.progress-ring-wrap { display:flex; justify-content:center; margin:8px 0; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-clock"></i> Produktivität</span>
        <h1 class="tool-h1">Timer &<br><span>Stoppuhr.</span></h1>
        <p class="tool-sub">Countdown mit Alarm oder Stoppuhr mit Rundenzeiten – direkt im Browser.</p>
    </div>

    <div class="t-panel">
        <div class="t-tabs">
            <button class="t-tab active" onclick="switchMode('timer',this)">Timer</button>
            <button class="t-tab" onclick="switchMode('stopwatch',this)">Stoppuhr</button>
        </div>

        <!-- TIMER -->
        <div id="mode-timer">
            <div class="time-inputs">
                <div class="time-unit"><label>Stunden</label><input type="number" class="t-input" id="t-h" value="0" min="0" max="99" oninput="timerReset()"></div>
                <span class="time-sep">:</span>
                <div class="time-unit"><label>Minuten</label><input type="number" class="t-input" id="t-m" value="5" min="0" max="59" oninput="timerReset()"></div>
                <span class="time-sep">:</span>
                <div class="time-unit"><label>Sekunden</label><input type="number" class="t-input" id="t-s" value="0" min="0" max="59" oninput="timerReset()"></div>
            </div>
            <div class="timer-display" id="timer-disp">05:00</div>
            <div class="btns">
                <button class="t-btn accent" id="timer-btn" onclick="timerToggle()" style="min-width:120px">Start</button>
                <button class="t-btn ghost" onclick="timerReset()">Reset</button>
            </div>
            <div class="t-quick-row" style="justify-content:center;margin-top:16px">
                <button class="t-quick-btn" onclick="setTimer(0,1,0)">1 Min</button>
                <button class="t-quick-btn" onclick="setTimer(0,3,0)">3 Min</button>
                <button class="t-quick-btn" onclick="setTimer(0,5,0)">5 Min</button>
                <button class="t-quick-btn" onclick="setTimer(0,10,0)">10 Min</button>
                <button class="t-quick-btn" onclick="setTimer(0,25,0)">25 Min (Pomodoro)</button>
                <button class="t-quick-btn" onclick="setTimer(1,0,0)">1 Std</button>
            </div>
        </div>

        <!-- STOPWATCH -->
        <div id="mode-stopwatch" style="display:none">
            <div class="timer-display" id="sw-disp">00:00.0</div>
            <div class="btns">
                <button class="t-btn accent" id="sw-btn" onclick="swToggle()" style="min-width:120px">Start</button>
                <button class="t-btn ghost" onclick="swLap()">Runde</button>
                <button class="t-btn ghost" onclick="swReset()">Reset</button>
            </div>
            <div class="lap-list" id="lap-list"></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
function switchMode(m,btn){
    document.querySelectorAll('.t-tab').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('mode-timer').style.display=m==='timer'?'':'none';
    document.getElementById('mode-stopwatch').style.display=m==='stopwatch'?'':'none';
}

function playAlarm(){
    try{
        const ctx=new(window.AudioContext||window.webkitAudioContext)();
        [0,0.3,0.6].forEach(o=>{
            const osc=ctx.createOscillator(),g=ctx.createGain();
            osc.connect(g);g.connect(ctx.destination);
            osc.frequency.value=880;osc.type='sine';
            g.gain.setValueAtTime(0.6,ctx.currentTime+o);
            g.gain.exponentialRampToValueAtTime(0.001,ctx.currentTime+o+0.25);
            osc.start(ctx.currentTime+o);osc.stop(ctx.currentTime+o+0.25);
        });
    }catch(e){}
}

// Timer
let timerInterval=null,timerRemaining=0,timerRunning=false;
function pad(n,l=2){return String(n).padStart(l,'0');}
function fmtTimer(tenths){
    const tot=Math.max(0,Math.ceil(tenths/10));
    const h=Math.floor(tot/3600),m=Math.floor((tot%3600)/60),s=tot%60;
    return h>0?`${pad(h)}:${pad(m)}:${pad(s)}`:`${pad(m)}:${pad(s)}`;
}
function setTimer(h,m,s){
    document.getElementById('t-h').value=h;
    document.getElementById('t-m').value=m;
    document.getElementById('t-s').value=s;
    timerReset();
}
function timerToggle(){
    if('Notification'in window&&Notification.permission==='default')Notification.requestPermission();
    if(!timerRunning){
        if(timerRemaining===0){
            const h=parseInt(document.getElementById('t-h').value)||0,m=parseInt(document.getElementById('t-m').value)||0,s=parseInt(document.getElementById('t-s').value)||0;
            timerRemaining=(h*3600+m*60+s)*10;
        }
        if(timerRemaining<=0)return;
        timerRunning=true;
        document.getElementById('timer-btn').textContent='Pause';
        document.getElementById('timer-disp').classList.remove('done');
        timerInterval=setInterval(()=>{
            timerRemaining--;
            if(timerRemaining<=0){
                timerRemaining=0;clearInterval(timerInterval);timerRunning=false;
                document.getElementById('timer-btn').textContent='Start';
                document.getElementById('timer-disp').textContent='00:00';
                document.getElementById('timer-disp').classList.add('done');
                playAlarm();
                if('Notification'in window&&Notification.permission==='granted')new Notification('⏰ Timer abgelaufen!',{body:'Dein Countdown ist beendet.'});
            } else {
                document.getElementById('timer-disp').textContent=fmtTimer(timerRemaining);
            }
        },100);
    } else {
        clearInterval(timerInterval);timerRunning=false;
        document.getElementById('timer-btn').textContent='Weiter';
    }
}
function timerReset(){
    clearInterval(timerInterval);timerRunning=false;timerRemaining=0;
    document.getElementById('timer-btn').textContent='Start';
    document.getElementById('timer-disp').classList.remove('done');
    const h=parseInt(document.getElementById('t-h').value)||0,m=parseInt(document.getElementById('t-m').value)||0,s=parseInt(document.getElementById('t-s').value)||0;
    document.getElementById('timer-disp').textContent=fmtTimer((h*3600+m*60+s)*10);
}

// Stopwatch
let swInterval=null,swTenths=0,swRunning=false,lapStart=0,lapCount=0;
function fmtSw(t){
    const h=Math.floor(t/36000),m=Math.floor((t%36000)/600),s=Math.floor((t%600)/10),d=t%10;
    return h>0?`${pad(h)}:${pad(m)}:${pad(s)}.${d}`:`${pad(m)}:${pad(s)}.${d}`;
}
function swDisplay(){document.getElementById('sw-disp').textContent=fmtSw(swTenths);}
function swToggle(){
    if(!swRunning){
        swRunning=true;document.getElementById('sw-btn').textContent='Pause';
        swInterval=setInterval(()=>{swTenths++;swDisplay();},100);
    } else {
        clearInterval(swInterval);swRunning=false;document.getElementById('sw-btn').textContent='Weiter';
    }
}
function swLap(){
    if(!swRunning&&swTenths===0)return;
    lapCount++;
    const lapTime=swTenths-lapStart;lapStart=swTenths;
    const list=document.getElementById('lap-list');
    const row=document.createElement('div');row.className='lap-row';
    row.innerHTML=`<span style="color:var(--muted);font-weight:700">Runde ${lapCount}</span><span>${fmtSw(lapTime)}</span><span style="font-weight:900">${fmtSw(swTenths)}</span>`;
    list.insertBefore(row,list.firstChild);
}
function swReset(){
    clearInterval(swInterval);swRunning=false;swTenths=0;lapStart=0;lapCount=0;
    document.getElementById('sw-btn').textContent='Start';
    document.getElementById('lap-list').innerHTML='';
    swDisplay();
}
</script>

@include('tools._seo_content', ['toolSlug' => 'timer', 'toolName' => 'Timer & Stoppuhr'])

@endsection