RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es"><center>
<FONT COLOR="#D4AF37">T.A.R.S - USAR TECLADO PARA NAVEGAR BOTONES WASD Y FLECHAS PARA SUBIR BAJAR INCLINACION
<br>play/pause con barra de espacio
</center>
<head>
    <meta charset="UTF-8">
    <title>Trisha - Recon V12 FINAL HUD FIXED</title>
    <style>
        :root { --gold: #e3a465; --bg: #000; }
        
        html, body { 
            background: var(--bg); color: white; font-family: 'Segoe UI', sans-serif; 
            margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; 
            -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
            cursor: default;
        }

#splash { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: #000; display: flex; flex-direction: column; 
            justify-content: center; align-items: center; z-index: 9999; 
            transition: opacity 1s ease-out; 
        }
        .splash-logo { 
            font-size: 40px; font-weight: bold; color: var(--gold); 
            letter-spacing: 12px; margin-bottom: 25px; font-family: 'Courier New', monospace;
            text-shadow: 0 0 20px rgba(227, 164, 101, 0.3);
            text-transform: uppercase;
        }
        .splash-loader { width: 200px; height: 1px; background: #111; position: relative; overflow: hidden; }
        .splash-loader::after { 
            content: ''; position: absolute; left: -100%; width: 100%; height: 100%; 
            background: var(--gold); animation: load-vault 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
        }
        @keyframes load-vault { 100% { left: 100%; } }

.master { 
            position: absolute; left: 50%; transform: translateX(-50%); top: 50px; 
            display: flex; gap: 15px; background: rgba(10,10,10,0.95); padding: 20px; 
            border-radius: 8px; border: 1px solid #222; width: 1120px; height: 580px; 
            z-index: 10; box-shadow: 0 0 50px rgba(0,0,0,1);
            opacity: 0; transition: opacity 1.5s ease-in;
        }
        
        .center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .viewport { 
            position: relative; width: 650px; height: 330px; background: #000; border: 1px solid #333; overflow: hidden; perspective: 160px; 
            background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 30% 50%, #fff, rgba(0,0,0,0));
            background-size: 100% 100%;
        }
        
        #canvasMuestra { position: absolute; top: 0; left: 50%; width: 1200px; height: 4000px; margin-left: -600px; will-change: transform; transform-style: preserve-3d; }
        .alt-scale { position: absolute; right: 15px; top: 40px; width: 4px; height: 250px; background: rgba(227,164,101,0.1); border-radius: 2px; z-index: 30; }
        #alt-pointer { position: absolute; right: -5px; width: 14px; height: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
        .audio-controls-block { width: 650px; display: flex; flex-direction: column; align-items: center; }
        #vuMeter { background: rgba(0,0,0,0.3); border-radius: 4px; width: 650px; height: 35px; }
        #prog { width: 100%; accent-color: var(--gold); cursor: pointer; margin-top: 10px; }
        .sidebar { width: 170px; display: flex; flex-direction: column; gap: 10px; }
        .btn-load { display: block; background: #1a1a1a; color: var(--gold); padding: 12px; text-align: center; cursor: pointer; font-size: 11px; border: 2px solid var(--gold); border-radius: 4px; font-weight: bold; text-transform: uppercase;}
        .list-container { background: #000; border: 1px solid #222; overflow-y: auto; flex-grow: 1; border-radius: 4px; }
        #lista { list-style: none; padding: 0; margin: 0; font-size: 10px; }
        #lista li { padding: 8px; border-bottom: 1px solid #111; cursor: pointer; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;}
        #lista li.playing { color: var(--gold); background: #0f0b08; border-left: 3px solid var(--gold); }
        .controls-right { width: 180px; display: flex; flex-direction: column; gap: 10px; }
        .eq-box { background: #000; padding: 12px; border: 1px solid #222; border-radius: 4px; }
        .t-btn { width: 100%; background: #111; border: 1px solid var(--gold); color: var(--gold); padding: 10px; font-size: 10px; cursor: pointer; margin-bottom: 5px; font-weight: bold; text-transform: uppercase;}
        #contador { font-family: monospace; font-size: 20px; color: var(--gold); text-align: center; margin: 5px 0 0 0; }
        #alt-digital { font-family: monospace; font-size: 12px; color: var(--gold); text-align: center; margin-bottom: 5px; }
        .sl { font-size: 9px; color: #777; margin-bottom: 10px; text-transform: uppercase;}
        .sl input { width: 100%; accent-color: var(--gold); height: 3px; }
    </style>
</head>
<body oncontextmenu="return false;" ondragstart="return false;" onselectstart="return false;">

<div id="splash">
        <div class="splash-logo"><center>T.A.R.S. <br> <font size="3"> 
<br>Tactical Audio Reconnaissance System <br>(Sistema Táctico de Reconocimiento de Audio)
</div>
        <div class="splash-loader"></div>
    </div>

<div class="master" id="ui-master">
        <div class="sidebar">
            <label class="btn-load">CARGAR CARPETA <br>y click en la lista<input type="file" id="archivos" multiple accept="audio/*" style="display:none"></label>
            <div class="list-container"><ul id="lista"></ul></div>
        </div>
        
        <div class="center">
            <div class="viewport">
                <div style="position:absolute; left:10px; top:10px; font-size:8px; color:var(--gold); z-index:20; letter-spacing: 2px;">RECON V12 // HUD READY</div>
                <div id="currentTrack" style="position:absolute; left:10px; top:22px; font-size:8px; color:orange; z-index:20; font-family:monospace; text-transform:uppercase; font-weight:bold;">TRACK: ESPERANDO ARCHIVO...</div>
                
                <div style="position:absolute; right:12px; top:25px; font-size: 9px; color: var(--gold); font-weight: bold;">ALT</div>
                <div class="alt-scale"><div id="alt-pointer"></div></div>
                <canvas id="canvasMuestra"></canvas>
            </div>
            
            <div class="audio-controls-block">
                <canvas id="vuMeter" width="650" height="35"></canvas>
                <div id="contador">00:00 / 00:00</div>
                <div id="alt-digital">ALT: 800m</div>
                <input type="range" id="prog" min="0" max="100" step="0.01" value="0">
            </div>
        </div>

<div class="controls-right">
            <div class="eq-box">
                <button class="t-btn" onclick="play()">PLAY / RESUME</button>
                <button class="t-btn" onclick="stopAudio()">STOP</button>
                <div class="sl"><span>VOLUMEN</span><input type="range" id="vol" min="0" max="1.5" step="0.01" value="0.7"></div>
                <div class="sl"><span>BASS</span><input type="range" id="bass" min="-20" max="20" value="0"></div>
                <div class="sl"><span>MID</span><input type="range" id="mid" min="-20" max="20" value="0"></div>
                <div class="sl"><span>TREBLE</span><input type="range" id="treble" min="-20" max="20" value="0"></div>
            <button class="t-btn" style="margin-top:20px; border-color: #555; color: #888;" onclick="document.getElementById('modalInfo').style.display='flex'">ACERCA DE...</button>
<div style="margin-top: 15px; display: flex; flex-direction: column; gap: 8px;">
    
    <button class="t-btn" style="border-color: #25D366; color: #25D366; font-size: 9px;" 
        onclick="window.open('https://wa.me/5491123022158', '_blank')">
        COMM-LINK [WHATSAPP]
    </button>

<button class="t-btn" style="border-color: #009EE3; color: #009EE3; font-size: 9px;" 
        onclick="window.open('https://link.mercadopago.com.ar/c5d', '_blank')">
        SUPPORT [MERCADO PAGO]
    </button>
    
</div>
          </div>
        </div>
    </div>

window.addEventListener('load', () => {
    setTimeout(() => {
        const splash = document.getElementById('splash');
        const ui = document.getElementById('ui-master');
        if(splash) splash.style.opacity = '0';
        if(ui) ui.style.opacity = '1';
        setTimeout(() => splash.remove(), 1000);
    }, 5500);
});

let audioCtx, player = new Audio(), playlist = [], currentIndex = -1, isPlaying = false;
let gainNode, bassF, midF, trebF, analyser, dataArray;
let shipX = 0, targetShipX = 0, alturaZ = 800, spacePressed = false;

const canvasM = document.getElementById('canvasMuestra'), ctxM = canvasM.getContext('2d');
canvasM.width = 1200; canvasM.height = 4000;

player.onended = () => { if (currentIndex < playlist.length - 1) load(currentIndex + 1); else load(0); };

function initAudio() {
    if(audioCtx) return;
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    gainNode = audioCtx.createGain();
    analyser = audioCtx.createAnalyser(); analyser.fftSize = 128;
    dataArray = new Uint8Array(analyser.frequencyBinCount);
    bassF = audioCtx.createBiquadFilter(); bassF.type = "lowshelf";
    midF = audioCtx.createBiquadFilter(); midF.type = "peaking";
    trebF = audioCtx.createBiquadFilter(); trebF.type = "highshelf";
    const source = audioCtx.createMediaElementSource(player);
    source.connect(bassF).connect(midF).connect(trebF).connect(gainNode).connect(analyser).connect(audioCtx.destination);
    document.getElementById('vol').oninput = e => gainNode.gain.value = e.target.value;
    document.getElementById('bass').oninput = e => bassF.gain.value = e.target.value;
    document.getElementById('mid').oninput = e => midF.gain.value = e.target.value;
    document.getElementById('treble').oninput = e => trebF.gain.value = e.target.value;
    document.getElementById('prog').oninput = e => player.currentTime = e.target.value;
}

document.getElementById('archivos').onchange = e => {
    initAudio();
    for(let f of e.target.files) playlist.push({ name: f.name, url: URL.createObjectURL(f) });
    renderList();
};

async function load(idx) {
    stopAudio(); 
    currentIndex = idx; 
    player.src = playlist[idx].url;
    
    // ACTUALIZACIÓN DE TRACK EN HUD
    document.getElementById('currentTrack').innerText = `TRACK: ${playlist[idx].name.toUpperCase()}`;

const response = await fetch(playlist[idx].url), ab = await response.arrayBuffer(), buf = await audioCtx.decodeAudioData(ab), raw = buf.getChannelData(0);
    ctxM.clearRect(0,0,1200,4000);
    const res = 800;
    for (let f = 0; f < res; f++) {
        let inicio = Math.floor(f * (raw.length / res));
        ctxM.beginPath(); ctxM.moveTo(0, f * 5);
        for (let i = 0; i < 40; i++) { 
            let h = Math.pow(Math.abs(raw[inicio+i]), 1.4) * 750; 
            ctxM.lineTo(i * 30, (f * 5) - h); 
        }
        ctxM.lineTo(1200, f * 5);
        let p = Math.abs(raw[inicio]) * 255;
        ctxM.fillStyle = p > 90 ? "#fff" : (p > 30 ? "#e3a465" : "#1a120a"); 
        ctxM.fill();
    }
    play(); renderList();
}

function play() { if(currentIndex !== -1) { audioCtx.resume(); player.play(); isPlaying = true; window.focus(); } }
function stopAudio() { player.pause(); isPlaying = false; }

function renderList() {
    const lista = document.getElementById('lista'); lista.innerHTML = "";
    playlist.forEach((itm, i) => { 
        const li = document.createElement('li'); li.innerText = itm.name; 
        li.className = i === currentIndex ? "playing" : ""; li.onclick = () => load(i); 
        lista.appendChild(li); 
    });
}