TVHRMAGAZINE

<div id="central-transmissao-hr" style="background: #000; color: #FFF; font-family: 'Times New Roman', serif; border: 10px double #D4AF37; padding: 0; margin: 20px auto; max-width: 1100px; min-height: 90vh; position: relative; overflow: hidden;">

    <style>
        :root { --OURO: #D4AF37; --BRILHO: #FFD700; --FUNDO: #000; --TEXTO: #FFF; --ALERTA: #FF0000; }
        #central-transmissao-hr * { box-sizing: border-box; }
        
        .topo-estacao { border-bottom: 4px double var(--OURO); height: 100px; display: flex; justify-content: space-between; align-items: center; background: #050505; padding: 0 30px; }
        .corpo-estacao { display: grid; grid-template-columns: 280px 1fr 280px; gap: 20px; padding: 20px; min-height: 550px; }
        
        .tela-principal { 
            background: #000; border: 4px double var(--OURO); position: relative; 
            min-height: 450px; display: flex; justify-content: center; align-items: center;
            box-shadow: inset 0 0 60px #000;
        }

        .lista-suspensa { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.99); z-index: 9999; 
            display: none; flex-direction: column; padding: 30px;
        }

        .caixa-rolagem { flex: 1; overflow-y: auto; border: 1px solid var(--OURO); background: #080808; }
        .tabela-dados { width: 100%; border-collapse: collapse; color: var(--TEXTO); font-size: 1.1rem; }
        .tabela-dados th { background: #1a1a1a; color: var(--BRILHO); padding: 18px; border-bottom: 2px solid var(--OURO); position: sticky; top: 0; text-align: left; }
        .tabela-dados td { border: 1px solid #333; padding: 15px; transition: 0.3s; }
        .tabela-dados tr:hover td { background: var(--OURO); color: #000; cursor: pointer; font-weight: bold; }

        .botao-comando { width: 100%; padding: 18px; background: #000; border: 2px solid var(--OURO); color: var(--BRILHO); font-weight: bold; cursor: pointer; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; }
        .botao-comando:hover { background: var(--BRILHO); color: #000; }
        .iframe-video { width: 100%; height: 100%; border: none; min-height: 450px; }
        
        .painel-lateral { text-align: center; border: 4px double var(--OURO); padding: 25px; display: flex; flex-direction: column; justify-content: center; }
    </style>

    <div class="topo-estacao">
        <div id="data-display" style="color: var(--OURO); font-size: 1.2rem;">--/--/----</div>
        <div style="font-size: 2.2rem; font-weight: 900; letter-spacing: 8px; color: var(--OURO); text-shadow: 2px 2px 4px #000;">TVHRMAGAZINE</div>
        <div id="hora-display" style="color: var(--OURO); font-size: 1.2rem;">--:--:--</div>
    </div>
    
    <div class="corpo-estacao">
        <div class="menu-esquerda">
            <button class="botao-comando" onclick="motor_v259.abrir_lista()">📂 LISTAR VÍDEOS</button>
            <button class="botao-comando" onclick="location.reload()">🔄 REINICIAR</button>
        </div>
        
        <div class="tela-principal">
            <div id="visao-player" style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
                <div style="text-align: center;">
                    <h2 style="color:var(--OURO); letter-spacing:6px; margin-bottom: 10px;">ESTAÇÃO EM ESPERA</h2>
                    <p style="color: #666; font-size: 0.8em; text-transform: uppercase;">Protocolo de Segurança Ativo v259.4</p>
                </div>
            </div>

            <div id="camada-lista" class="lista-suspensa">
                <h2 style="color:var(--BRILHO); text-align:center; margin-bottom:25px; letter-spacing: 3px; font-style: italic;">ARQUIVO DIGITAL DE ATIVOS</h2>
                <div class="caixa-rolagem">
                    <table id="grade-videos" class="tabela-dados">
                        <thead>
                            <tr>
                                <th style="width:100px;">CÓDIGO</th>
                                <th>TÍTULO DO PROGRAMA</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <button class="botao-comando" style="margin-top:20px; border-color:var(--ALERTA); color:var(--ALERTA);" onclick="motor_v259.fechar_lista()">FECHAR ARQUIVO</button>
            </div>
        </div>

        <div class="painel-lateral">
            <div style="font-size:0.8rem; color:var(--OURO); letter-spacing: 3px; margin-bottom: 10px;">STATUS DA REDE</div>
            <div id="velocidade-link" style="color:var(--BRILHO); font-weight:bold; font-size: 1.4rem;">2.00 Gbps</div>
            <div style="width: 50px; height: 2px; background: var(--OURO); margin: 20px auto;"></div>
            <div style="font-size:0.7rem; color:var(--OURO); text-transform: uppercase;">Conselho Editorial</div>
            <div style="font-size:0.9rem; color:#FFF; margin-top:8px; font-weight: bold;">DR. HELIO REIS</div>
        </div>
    </div>

    <script>
    const motor_v259 = (() => {
        let conexao_db;
        const NOME_BANCO = "videosdoyoutube";

        return {
            ligar: () => {
                const pedido = indexedDB.open(NOME_BANCO, 1);
                pedido.onsuccess = (evento) => { conexao_db = evento.target.result; };
                
                setInterval(() => {
                    const agora = new Date();
                    const d = document.getElementById('data-display');
                    const h = document.getElementById('hora-display');
                    if(d) d.innerText = agora.toLocaleDateString();
                    if(h) h.innerText = agora.toLocaleTimeString();
                }, 1000);
            },

            abrir_lista: () => {
                if (!conexao_db) {
                    alert("Aguarde o sistema carregar a memória...");
                    return;
                }
                const corpo_tabela = document.querySelector("#grade-videos tbody");
                corpo_tabela.innerHTML = ""; 

                try {
                    const transacao = conexao_db.transaction("lista_videos", "readonly");
                    const armazem = transacao.objectStore("lista_videos");
                    const cursor = armazem.openCursor();
                    
                    let indice = 0;
                    cursor.onsuccess = (e) => {
                        const item = e.target.result;
                        if(item) {
                            indice++;
                            const linha = document.createElement('tr');
                            linha.onclick = () => motor_v259.executar(item.value.url);
                            linha.innerHTML = `
                                <td style="color:var(--OURO); font-weight:bold;">${String(indice).padStart(3, '0')}</td>
                                <td>${item.value.titulo}</td>
                            `;
                            corpo_tabela.appendChild(linha);
                            item.continue();
                        } else {
                            document.getElementById('camada-lista').style.display = 'flex';
                        }
                    };
                } catch (erro) {
                    alert("O arquivo de vídeos ainda não foi alimentado.");
                }
            },

            executar: (link) => {
                motor_v259.fechar_lista();
                let id_video = "";
                
                if(link.includes('v=')) {
                    id_video = link.split('v=')[1].split('&')[0];
                } else if(link.includes('youtu.be/')) {
                    id_video = link.split('youtu.be/')[1];
                }

                const endereco_final = `https://www.youtube.com/embed/${id_video}?autoplay=1&mute=1&rel=0&modestbranding=1`;

                document.getElementById('visao-player').innerHTML = 
                    `<iframe src="${endereco_final}" class="iframe-video" allow="autoplay; fullscreen" allowfullscreen></iframe>`;
                
                const status = document.getElementById('velocidade-link');
                status.innerText = "NO AR";
                status.style.color = "#00FF00";
            },

            fechar_lista: () => document.getElementById('camada-lista').style.display = 'none'
        };
    })();

    document.addEventListener("DOMContentLoaded", motor_v259.ligar);
    </script>
</div>