@extends('layouts.app')
@section('title', 'CSS Gradient Generator – Farbverläufe erstellen & kopieren | kotsch.tech')
@section('meta_description', 'CSS-Farbverläufe online erstellen: Linear, Radial und Conic. Mehrere Farbstopps, Winkel-Slider, Presets und sofort kopierbarer CSS-Code.')
@section('meta_extra')
<meta name="keywords" content="CSS Gradient Generator, CSS Farbverlauf, Linear Gradient, Radial Gradient, CSS Generator, Gradient Tool">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.gradient-preview { width:100%; height:200px; border-radius:var(--radius-sm); border:1px solid var(--line); transition:background 0.2s; }
.stop-row { display:flex; gap:8px; align-items:center; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; }
.stop-swatch { width:36px; height:36px; border-radius:8px; border:2px solid var(--line); cursor:pointer; flex-shrink:0; }
.stop-pos { width:70px; }
.preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-top:10px; }
.preset-item { height:60px; border-radius:var(--radius-sm); border:2px solid var(--line); cursor:pointer; transition:transform 0.1s,border-color 0.15s; }
.preset-item:hover { transform:scale(1.04); border-color:var(--accent); }
.type-btn { padding:8px 16px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.type-btn.active { border-color:var(--accent); background:var(--accent); color:#fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-paint-brush"></i> Design</span>
        <h1 class="tool-h1">CSS<span> Gradient.</span></h1>
        <p class="tool-sub">Linear, Radial und Conic – beliebig viele Farbstopps, Winkel-Slider, Presets und CSS-Code.</p>
    </div>

    <div class="t-panel">
        <div class="gradient-preview" id="preview"></div>
        <div class="t-copy-wrap" style="margin-top:12px">
            <input type="text" class="t-input" id="css-out" readonly style="font-family:'JetBrains Mono',monospace;font-size:0.82rem">
            <button class="t-copy-btn" onclick="copyCSS()"><i class="fas fa-copy"></i></button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-sliders-h"></i> Einstellungen</div>

        <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px">
            <button class="type-btn active" id="btn-linear" onclick="setType('linear',this)">Linear</button>
            <button class="type-btn" id="btn-radial" onclick="setType('radial',this)">Radial</button>
            <button class="type-btn" id="btn-conic" onclick="setType('conic',this)">Conic</button>
        </div>

        <div id="angle-wrap" class="t-field">
            <label class="t-label">Winkel: <span id="angle-val">135</span>°</label>
            <input type="range" class="t-input" id="angle" min="0" max="360" value="135" oninput="document.getElementById('angle-val').textContent=this.value;render()">
        </div>

        <div id="radial-shape-wrap" class="t-field" style="display:none">
            <label class="t-label">Form</label>
            <select class="t-select" id="radial-shape" onchange="render()">
                <option value="circle">Kreis</option>
                <option value="ellipse">Ellipse</option>
            </select>
        </div>

        <div class="t-panel-title" style="margin-top:8px"><i class="fas fa-palette"></i> Farbstopps</div>
        <div id="stops-list"></div>
        <button class="t-btn ghost sm" onclick="addStop()"><i class="fas fa-plus"></i> Farbe hinzufügen</button>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-star"></i> Presets</div>
        <div class="preset-grid" id="presets"></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let gradType='linear';
let stops=[
    {color:'#10b981',pos:0},
    {color:'#6366f1',pos:100},
];

const PRESETS=[
    {n:'Ozean',s:[{c:'#0ea5e9',p:0},{c:'#06b6d4',p:100}]},
    {n:'Sunset',s:[{c:'#f97316',p:0},{c:'#ec4899',p:100}]},
    {n:'Forest',s:[{c:'#10b981',p:0},{c:'#065f46',p:100}]},
    {n:'Galaxy',s:[{c:'#1e1b4b',p:0},{c:'#7c3aed',p:50},{c:'#ec4899',p:100}]},
    {n:'Gold',s:[{c:'#fbbf24',p:0},{c:'#92400e',p:100}]},
    {n:'Candy',s:[{c:'#f9a8d4',p:0},{c:'#a78bfa',p:50},{c:'#67e8f9',p:100}]},
    {n:'Nacht',s:[{c:'#0f172a',p:0},{c:'#1e3a5f',p:100}]},
    {n:'Fire',s:[{c:'#ef4444',p:0},{c:'#fbbf24',p:100}]},
    {n:'Mint',s:[{c:'#d1fae5',p:0},{c:'#10b981',p:100}]},
    {n:'Violett',s:[{c:'#8b5cf6',p:0},{c:'#ec4899',p:100}]},
];

function setType(t,btn){
    gradType=t;
    document.querySelectorAll('.type-btn').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('angle-wrap').style.display=(t==='linear'||t==='conic')?'':'none';
    document.getElementById('radial-shape-wrap').style.display=t==='radial'?'':'none';
    render();
}

function addStop(){
    stops.push({color:'#ffffff',pos:stops.length>0?Math.round((stops[stops.length-1].pos+100)/2):50});
    renderStops();render();
}

function removeStop(i){
    if(stops.length<=2)return;
    stops.splice(i,1);
    renderStops();render();
}

function renderStops(){
    const list=document.getElementById('stops-list');
    list.innerHTML=stops.map((s,i)=>`
        <div class="stop-row" id="stop-${i}">
            <input type="color" class="stop-swatch" value="${s.color}" oninput="stops[${i}].color=this.value;render()" title="Farbe wählen">
            <input type="text" class="t-input" value="${s.color}" oninput="if(/^#[0-9a-fA-F]{6}$/.test(this.value)){stops[${i}].color=this.value;document.querySelectorAll('.stop-swatch')[${i}].value=this.value;render();}" style="font-family:monospace;width:90px">
            <input type="number" class="t-input stop-pos" value="${s.pos}" min="0" max="100" oninput="stops[${i}].pos=parseInt(this.value)||0;render()"> %
            ${stops.length>2?`<button class="t-btn ghost sm" onclick="removeStop(${i})" style="padding:6px 10px"><i class="fas fa-times"></i></button>`:''}
        </div>`).join('');
}

function render(){
    const sorted=[...stops].sort((a,b)=>a.pos-b.pos);
    const stopStr=sorted.map(s=>`${s.color} ${s.pos}%`).join(', ');
    const angle=document.getElementById('angle').value;
    let css;
    if(gradType==='linear') css=`linear-gradient(${angle}deg, ${stopStr})`;
    else if(gradType==='radial'){
        const shape=document.getElementById('radial-shape').value;
        css=`radial-gradient(${shape} at center, ${stopStr})`;
    } else {
        css=`conic-gradient(from ${angle}deg, ${stopStr})`;
    }
    document.getElementById('preview').style.background=css;
    document.getElementById('css-out').value=`background: ${css};`;
}

function copyCSS(){
    const val=document.getElementById('css-out').value;
    navigator.clipboard.writeText(val).then(()=>{
        const btn=document.querySelector('.t-copy-btn');
        btn.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i>',2000);
    });
}

function buildPresets(){
    const grid=document.getElementById('presets');
    grid.innerHTML=PRESETS.map((p,i)=>{
        const bg=`linear-gradient(135deg,${p.s.map(s=>`${s.c} ${s.p}%`).join(',')})`;
        return`<div class="preset-item" style="background:${bg}" title="${p.n}" onclick="loadPreset(${i})"></div>`;
    }).join('');
}

function loadPreset(i){
    const p=PRESETS[i];
    stops=p.s.map(s=>({color:s.c,pos:s.p}));
    gradType='linear';
    document.querySelectorAll('.type-btn').forEach(b=>b.classList.remove('active'));
    document.getElementById('btn-linear').classList.add('active');
    document.getElementById('angle-wrap').style.display='';
    document.getElementById('radial-shape-wrap').style.display='none';
    renderStops();render();
}

buildPresets();
renderStops();
render();
</script>

@include('tools._seo_content', ['toolSlug' => 'css-gradient', 'toolName' => 'CSS Gradient Generator'])

@endsection