RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Master Gold Rack - 16-Band Professional Station</title>
    <style>
        :root {
            --bg: #050505;
            --panel: #1c1c1c;
            --accent: #f39c12;
            --danger: #ff2e2e;
            --vu-bg: radial-gradient(circle, #fdfcf0 0%, #d1c894 100%);
            --fader-bg: #333;
        }

body {
            background-color: var(--bg);
            color: #eee;
            font-family: 'Segoe UI', Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

.rack-unit {
            background: var(--panel);
            border: 4px solid #333;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 0 80px rgba(0,0,0,1);
            width: 1100px;
            position: relative;
        }

.brand-name {
            position: absolute;
            top: 10px;
            left: 25px;
            font-size: 12px;
            letter-spacing: 3px;
            color: #444;
            font-weight: bold;
        }

/* --- DISPLAY SUPERIOR --- */
        .display-row {
            display: flex;
            background: #000;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #333;
            margin-bottom: 20px;
            gap: 15px;
            align-items: center;
        }

.spectrum-box { flex: 2; height: 110px; }
        .vu-group { flex: 1.2; display: flex; gap: 10px; height: 110px; align-items: flex-end; }

canvas { border-radius: 3px; border: 1px solid #222; }
        canvas.analog-vu { background: var(--vu-bg); border: 2px solid #000; }
        canvas.spectrum { background: #020202; width: 100%; height: 100px; }

.vu-container { position: relative; text-align: center; }
        .clip-led {
            width: 8px; height: 8px; border-radius: 50%;
            background: #200; margin: 0 auto 4px auto;
            border: 1px solid #000;
        }
        .clip-on { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
        .label { font-size: 9px; color: #555; text-transform: uppercase; font-weight: bold; }

/* --- PROGRESS BAR & TIME --- */
        .playback-bar-container {
            background: #111;
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border: 1px solid #222;
        }

#progress-slider {
            flex-grow: 1;
            accent-color: var(--accent);
            cursor: pointer;
            height: 4px;
        }

.time-display {
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            color: var(--accent);
            min-width: 110px;
            text-align: center;
            background: #000;
            padding: 2px 8px;
            border-radius: 3px;
            border: 1px solid #333;
        }

/* --- EQ SECTION CON ESTILO --- */
        .eq-section {
            display: flex;
            justify-content: space-between;
            background: #0f0f0f;
            padding: 25px 10px;
            border-radius: 6px;
            height: 250px;
            border: 1px inset #222;
        }

.eq-channel { display: flex; flex-direction: column; align-items: center; width: 100%; }
        .meter-and-slider { display: flex; align-items: flex-end; gap: 6px; height: 180px; }

.band-meter { width: 3px; height: 100%; background: #1a1a1a; position: relative; }
        .band-meter-fill {
            position: absolute; bottom: 0; width: 100%;
            background: linear-gradient(to top, #2ecc71, #f1c40f, #e74c3c);
            height: 0%;
        }

/* Estilizando los sliders de EQ */
        .eq-fader {
            -webkit-appearance: slider-vertical;
            width: 20px;
            height: 100%;
            background: transparent;
            cursor: pointer;
        }

/* Personalizaci�n est�tica del fader */
        .eq-fader::-webkit-slider-runnable-track {
            background: #222;
            border-radius: 10px;
            width: 4px;
        }
        .eq-fader::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 10px;
            background: var(--accent);
            border-radius: 2px;
            margin-left: -7px;
            box-shadow: 0 0 5px #000;
        }

.freq-text { font-size: 9px; color: #444; margin-top: 15px; transform: rotate(-45deg); font-weight: bold; }

/* --- CONTROLES --- */
        .master-controls {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            background: #252525;
            padding: 15px;
            border-radius: 8px;
        }

button { padding: 10px 20px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: 0.2s; }
        .btn-play { background: var(--accent); color: #000; width: 100px; }
        .btn-stop { background: #444; color: #fff; }
        .vol-group { flex-grow: 1; display: flex; align-items: center; gap: 15px; background: #111; padding: 10px; border-radius: 5px; border: 1px solid #333; }
        
        input[type=file] { color: #666; font-size: 12px; }
    </style>
</head>
<body>

<div class="rack-unit">
    <div class="brand-name">TRISHA PRO-AUDIO MASTER 1600 v2</div>
    
    <div class="display-row">
        <div class="spectrum-box">
            <canvas id="spectrum-canvas" class="spectrum" height="100"></canvas>
            <div class="label">Spectral Analyzer</div>
        </div>
        <div class="vu-group">
            <div class="vu-container">
                <div id="led-l" class="clip-led"></div>
                <canvas id="vu-left" class="analog-vu" width="160" height="90"></canvas>
                <div class="label">L-Output</div>
            </div>
            <div class="vu-container">
                <div id="led-r" class="clip-led"></div>
                <canvas id="vu-right" class="analog-vu" width="160" height="90"></canvas>
                <div class="label">R-Output</div>
            </div>
        </div>
    </div>

<div class="master-controls">
        <input type="file" id="audio-file" accept="audio/*">
        <button id="btn-play" class="btn-play">Play</button>
        <button id="btn-stop" class="btn-stop">Stop</button>
        <div class="vol-group">
            <label style="font-size: 10px; color: var(--accent); font-weight: bold;">MASTER GAIN</label>
            <input type="range" id="vol-master" min="0" max="1.5" step="0.01" value="0.7" style="flex-grow:1; accent-color: var(--accent);">
            <span id="vol-txt" style="font-family: monospace; color: var(--accent); min-width: 40px;">70%</span>
        </div>
    </div>
</div>

let source, masterGain, spectrumAnal, analL, analR, filters = [];
let isInitialized = false;

function renderNeedle(id, value) {
    const canvas = document.getElementById(id);
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(80, 85, 75, Math.PI * 1.15, Math.PI * 1.85);
    ctx.strokeStyle = "rgba(0,0,0,0.1)"; ctx.lineWidth = 5; ctx.stroke();
    let angle = (Math.PI * 1.15) + (value * (Math.PI * 0.7));
    ctx.save();
    ctx.translate(80, 85); ctx.rotate(angle + Math.PI/2);
    ctx.beginPath(); ctx.moveTo(0, 5); ctx.lineTo(0, -75);
    ctx.strokeStyle = "#111"; ctx.lineWidth = 4; ctx.stroke();
    ctx.restore();
    ctx.beginPath(); ctx.arc(80, 85, 4, 0, Math.PI*2); ctx.fillStyle = "#222"; ctx.fill();
}

function initAudioEngine() {
    source = audioCtx.createMediaElementSource(audioEl);
    masterGain = audioCtx.createGain();
    masterGain.gain.value = document.getElementById('vol-master').value;
    spectrumAnal = audioCtx.createAnalyser();
    spectrumAnal.fftSize = 256;
    const splitter = audioCtx.createChannelSplitter(2);
    analL = audioCtx.createAnalyser();
    analR = audioCtx.createAnalyser();

let lastNode = source;
    freqs.forEach((f, i) => {
        const filter = audioCtx.createBiquadFilter();
        filter.type = "peaking";
        filter.frequency.value = f;
        filters.push(filter);
        lastNode.connect(filter);
        lastNode = filter;
    });

lastNode.connect(masterGain);
    masterGain.connect(spectrumAnal);
    masterGain.connect(splitter);
    splitter.connect(analL, 0);
    splitter.connect(analR, 1);
    masterGain.connect(audioCtx.destination);
    animate();
}

function formatTime(seconds) {
    const min = Math.floor(seconds / 60);
    const sec = Math.floor(seconds % 60);
    return (min < 10 ? '0' : '') + min + ':' + (sec < 10 ? '0' : '') + sec;
}

function animate() {
    const dL = new Uint8Array(analL.frequencyBinCount);
    const dR = new Uint8Array(analR.frequencyBinCount);
    const dS = new Uint8Array(spectrumAnal.frequencyBinCount);
    let sL = 0, sR = 0;

function loop() {
        // VU y Clipping
        analL.getByteTimeDomainData(dL); analR.getByteTimeDomainData(dR);
        let vL = 0, vR = 0;
        for(let i=0; i<dL.length; i++){ vL += Math.pow((dL[i]-128)/128, 2); vR += Math.pow((dR[i]-128)/128, 2); }
        let rL = Math.sqrt(vL/dL.length), rR = Math.sqrt(vR/dR.length);
        sL = rL > sL ? rL : sL * 0.9; sR = rR > sR ? rR : sR * 0.9;
        renderNeedle('vu-left', Math.min(sL * 4, 1));
        renderNeedle('vu-right', Math.min(sR * 4, 1));
        document.getElementById('led-l').className = sL * 4 > 0.85 ? 'clip-led clip-on' : 'clip-led';
        document.getElementById('led-r').className = sR * 4 > 0.85 ? 'clip-led clip-on' : 'clip-led';

// Espectro y Mini-metros
        const sc = document.getElementById('spectrum-canvas');
        const sctx = sc.getContext('2d');
        spectrumAnal.getByteFrequencyData(dS);
        sctx.fillStyle = '#020202'; sctx.fillRect(0, 0, sc.width, sc.height);
        let bw = sc.width / dS.length;
        for(let i=0; i<dS.length; i++) {
            let h = (dS[i] / 255) * sc.height;
            sctx.fillStyle = `hsl(${i * 1.8}, 70%, 50%)`;
            sctx.fillRect(i * bw, sc.height - h, bw - 1, h);
            let eqIdx = Math.floor((i / dS.length) * freqs.length);
            if(document.getElementById(`meter-${eqIdx}`)) {
                document.getElementById(`meter-${eqIdx}`).style.height = (dS[i]/255*100) + '%';
            }
        }

// Actualizar barra de progreso y tiempo
        if(!audioEl.paused) {
            progressSlider.value = audioEl.currentTime;
            document.getElementById('time-curr').innerText = formatTime(audioEl.currentTime);
        }

requestAnimationFrame(loop);
    }
    loop();
}

// Eventos de barra de progreso
audioEl.onloadedmetadata = () => {
    progressSlider.max = audioEl.duration;
    document.getElementById('time-total').innerText = formatTime(audioEl.duration);
};

progressSlider.oninput = () => {
    audioEl.currentTime = progressSlider.value;
};