RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ADV DEMOS</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    color:white;
    font-family:Arial, sans-serif;
    overflow:hidden;
}

/* CONTENEDOR GENERAL */

#contenedor{
    display:flex;
    width:100vw;
    height:100vh;
}

/* COLUMNA IZQUIERDA */

#sidebar{
    width:280px;
    background:#0a0a0a;
    border-right:1px solid #222;
    overflow-y:auto;
    padding:15px;
}

/* TITULO */

#titulo{
    font-size:22px;
    margin-bottom:20px;
    color:#00ffaa;
    letter-spacing:2px;
}

/* ITEMS */

.demo{
    background:#111;
    border:1px solid #222;
    padding:12px;
    margin-bottom:10px;
    cursor:pointer;
    transition:0.2s;
    border-left:5px solid #00ffaa;
}

.demo:hover{
    background:#1b1b1b;
    transform:translateX(3px);
}

/* COLORES PERSONALIZADOS */

.demo.red{
    border-left-color:#ff3c3c;
}

.demo.blue{
    border-left-color:#00aaff;
}

.demo.green{
    border-left-color:#00ff99;
}

.demo.purple{
    border-left-color:#bb66ff;
}

/* VISOR */

#visor{
    flex:1;
    background:#111;
    position:relative;
}

/* IFRAME */

#preview{
    width:100%;
    height:100%;
    border:none;
    background:black;
}

/* BARRA SUPERIOR */

#topbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:rgba(0,0,0,0.7);
    border-bottom:1px solid #222;
    display:flex;
    align-items:center;
    padding-left:15px;
    z-index:10;
    font-size:14px;
    color:#00ffaa;
    backdrop-filter:blur(5px);
}

</style>
</head>
<body>

<div id="sidebar">

<div id="titulo">
            DEMOS
        </div>

<div class="demo red"
        onclick="cargarDemo('https://dorix.com.co/mitienda','Tiendapps')">
            Tiendapps
        </div>

<div class="demo blue"
        onclick="cargarDemo('https://dorix.com.co/tt/t.html','TRISHA TINY -VERSION CELULAR - REPRODUCTOR DE AUDIO, PODCASTER')">
            TRISHA TINY - CELULAR
        </div>
      
      <div class="demo blue"
        onclick="cargarDemo('TRISHA-OK.html','TRISHA TINY PARA PC REP. AUDIO-RADIO-PODCASTER-EDITOR')">
            TRISHA TINY - PARA PC 
        </div>

<div class="demo red"
        onclick="cargarDemo('pm.html','PICTURE MUSIC - CARGÁ UNA IMAGEN Y PULSA PLAY - EXPERIENCIA SONORA RELAJANTE')">
            PICTURE MUSIC
        </div>

</div>

<div id="visor">

<div id="topbar">
            SIN DEMO CARGADA
        </div>

</div>

function cargarDemo(ruta,nombre){

// CARGA EL DEMO
    document.getElementById("preview").src = ruta;

// CAMBIA EL TITULO
    document.getElementById("topbar").innerText = nombre;

}

</script>

</body>
</html>