@extends('layouts.app')
@section('title', 'Zufallszahl Generator – Würfeln, Münzwurf & Lotto | kotsch.tech')
@section('meta_description', 'Zufallszahl Generator kostenlos: Zufällige Zahl generieren, würfeln mit verschiedenen Würfeln, Münze werfen und Lotto-Zahlen. Alles auf einmal.')
@section('meta_extra')
<meta name="keywords" content="Zufallszahl Generator, Zufällige Zahl, Zufallsgenerator, Würfeln online, Münzwurf, Lotto Zahlen, random number generator">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.big-result { text-align:center; font-size:clamp(3rem,12vw,5rem); font-weight:900; letter-spacing:-3px; color:var(--accent); margin:20px 0 4px; line-height:1; cursor:pointer; transition:transform 0.1s; user-select:none; }
.big-result:active { transform:scale(0.95); }
.dice-display { font-size:3rem; cursor:pointer; transition:transform 0.2s; display:inline-block; }
.dice-display:active { transform:rotate(20deg) scale(0.9); }
.lotto-balls { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.lotto-ball { width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:0.9rem; }
.lotto-ball.super { background:var(--accent); }
.history-list { max-height:120px; overflow-y:auto; }
.history-item { font-size:0.82rem; color:var(--muted); padding:4px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-dice"></i> Spaß & Zufall</span>
        <h1 class="tool-h1">Zufalls<span>generator.</span></h1>
        <p class="tool-sub">Zufallszahlen, Würfeln, Münzwurf, Lotto und Listenauswahl – alles auf einmal.</p>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-hashtag"></i> Zufallszahl im Bereich</div>
        <div class="t-grid-3">
            <div class="t-field"><label class="t-label">Von</label><input type="number" class="t-input" id="rmin" value="1"></div>
            <div class="t-field"><label class="t-label">Bis</label><input type="number" class="t-input" id="rmax" value="100"></div>
            <div class="t-field"><label class="t-label">Anzahl</label><input type="number" class="t-input" id="rcount" value="1" min="1" max="20"></div>
        </div>
        <button class="t-btn accent full" onclick="generate()"><i class="fas fa-random"></i> Generieren</button>
        <div class="big-result" id="r-result" onclick="generate()" title="Klicken für neu">?</div>
        <p style="text-align:center;font-size:0.78rem;color:var(--muted)">Klick auf die Zahl für neues Ergebnis</p>
        <div class="history-list" id="history"></div>
    </div>

    <div class="t-grid-2">
        <div class="t-panel">
            <div class="t-panel-title"><i class="fas fa-dice-six"></i> Würfeln</div>
            <div style="margin-bottom:10px">
                <label class="t-label">Würfeltyp</label>
                <select class="t-select" id="dice-type">
                    <option value="6">W6 (Standard)</option>
                    <option value="4">W4</option>
                    <option value="8">W8</option>
                    <option value="10">W10</option>
                    <option value="12">W12</option>
                    <option value="20">W20</option>
                    <option value="100">W100</option>
                </select>
            </div>
            <button class="t-btn full" onclick="rollDice()"><i class="fas fa-dice"></i> Würfeln</button>
            <div class="dice-display" id="dice-res" onclick="rollDice()">🎲</div>
        </div>

        <div class="t-panel">
            <div class="t-panel-title"><i class="fas fa-coins"></i> Münzwurf</div>
            <button class="t-btn full" onclick="flipCoin()"><i class="fas fa-sync"></i> Werfen</button>
            <div style="text-align:center;font-size:3rem;margin:16px 0;cursor:pointer" id="coin-res" onclick="flipCoin()">🪙</div>
            <div style="text-align:center;font-weight:900;color:var(--muted)" id="coin-label"></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-star"></i> Lotto 6 aus 49</div>
        <button class="t-btn accent full" onclick="lotto()"><i class="fas fa-ticket-alt"></i> Zahlen generieren</button>
        <div class="lotto-balls" id="lotto-res"></div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-list"></i> Zufälligen Listeneintrag auswählen</div>
        <div class="t-field">
            <label class="t-label">Einträge (eine pro Zeile)</label>
            <textarea class="t-textarea" id="list-input" placeholder="Option A&#10;Option B&#10;Option C" style="min-height:100px"></textarea>
        </div>
        <button class="t-btn full" onclick="pickFromList()"><i class="fas fa-hand-pointer"></i> Auswählen</button>
        <div id="list-result" class="t-result" style="display:none;margin-top:12px;text-align:center">
            <div class="t-result-big" id="list-pick" style="font-size:1.5rem"></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const DICE_FACES={6:['⚀','⚁','⚂','⚃','⚄','⚅']};
let history=[];
function rnd(min,max){return Math.floor(Math.random()*(max-min+1))+min;}

function generate(){
    const min=parseInt(document.getElementById('rmin').value);
    const max=parseInt(document.getElementById('rmax').value);
    const count=Math.min(20,parseInt(document.getElementById('rcount').value)||1);
    if(min>max)return;
    const nums=Array.from({length:count},()=>rnd(min,max));
    const result=count===1?nums[0].toLocaleString('de-DE'):nums.join(' · ');
    document.getElementById('r-result').textContent=result;
    history.unshift({label:`${min}–${max} (${count}x)`,result});
    if(history.length>10)history.pop();
    renderHistory();
}

function renderHistory(){
    document.getElementById('history').innerHTML=history.map(h=>`<div class="history-item"><span>${h.label}</span><span style="font-weight:900">${h.result}</span></div>`).join('');
}

function rollDice(){
    const sides=parseInt(document.getElementById('dice-type').value);
    const val=rnd(1,sides);
    const disp=document.getElementById('dice-res');
    if(sides===6&&DICE_FACES[6]){disp.textContent=DICE_FACES[6][val-1];}
    else{disp.textContent=val;}
    disp.style.transform='rotate('+rnd(-20,20)+'deg)';
    setTimeout(()=>disp.style.transform='',300);
}

function flipCoin(){
    const heads=Math.random()<0.5;
    document.getElementById('coin-res').textContent=heads?'🪙':'🪙';
    document.getElementById('coin-label').textContent=heads?'Kopf':'Zahl';
    document.getElementById('coin-label').style.color=heads?'var(--accent)':'var(--ink)';
}

function lotto(){
    const nums=new Set();
    while(nums.size<6)nums.add(rnd(1,49));
    const sorted=[...nums].sort((a,b)=>a-b);
    const super_num=rnd(0,9);
    document.getElementById('lotto-res').innerHTML=
        sorted.map(n=>`<div class="lotto-ball">${n}</div>`).join('')+
        `<div class="lotto-ball super">${super_num}</div>`;
}

function pickFromList(){
    const lines=document.getElementById('list-input').value.split('\n').map(l=>l.trim()).filter(Boolean);
    if(!lines.length)return;
    const pick=lines[rnd(0,lines.length-1)];
    document.getElementById('list-pick').textContent=pick;
    document.getElementById('list-result').style.display='';
}
</script>

@include('tools._seo_content', ['toolSlug' => 'zufallszahl', 'toolName' => 'Zufallszahl Generator'])

@endsection