Blog

<!-- PORTAL DE VÍDEOS TVHRMAGAZINE v259.4 - VERSÃO PARA WORDPRESS -->
<div id="portal-tv-helio" style="background: #000; color: #FFF; font-family: 'Times New Roman', serif; border: 12px double #D4AF37; padding: 0; margin: 20px auto; max-width: 1100px; min-height: 85vh; position: relative; overflow: hidden;">

    <style>
        :root { --OURO: #D4AF37; --OURO-CLARO: #FFD700; --FUNDO: #000; }
        #portal-tv-helio * { box-sizing: border-box; }
        
        .cabecalho-portal { border-bottom: 4px double var(--OURO); height: 100px; display: flex; justify-content: space-between; align-items: center; background: #050505; padding: 0 30px; }
        .area-conteudo { display: grid; grid-template-columns: 250px 1fr 200px; gap: 20px; padding: 20px; min-height: 500px; }
        
        .moldura-video { 
            background: #000; border: 4px double var(--OURO); position: relative; 
            min-height: 400px; display: flex; justify-content: center; align-items: center;
            box-shadow: inset 0 0 50px #000;
        }

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

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

        .botao-comando { width: 100%; padding: 15px; background: #000; border: 2px solid var(--OURO); color: var(--OURO-CLARO); font-weight: bold; cursor: pointer; margin-bottom: 15px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
        .botao-comando:hover { background: var(--OURO-CLARO); color: #000; }
        
        .status-box { text-align: center; border: 2px solid var(--OURO); padding: 15px; height: fit-content; }
    </style>

    <div class="cabecalho-portal">
        <div id="data-portal" style="color: var(--OURO);">--/--/----</div>
        <div style="font-size: 2rem; font-weight: 900; letter-spacing: 6px; color: var(--OURO);">TVHRMAGAZINE</div>
        <div id="hora-portal" style="color: var(--OURO);">--:--:--</div>
    </div>
    
    <div class="area-conteudo">
        <div>
            <button class="botao-comando" onclick="motor_v259.abrir()">📂 LISTAR VÍDEOS</button>
            <button class="botao-comando" onclick="location.reload()">🔄 REINICIAR</button>
        </div>
        
        <div class="moldura-video">
            <div id="tela-vazia" style="text-align: center;">
                <h2 style="color:var(--OURO); letter-spacing:4px;">SISTEMA PRONTO</h2>
                <p style="color: #444; font-size: 0.7em;">v259.4 | DR. HELIO REIS</p>
            </div>

            <div id="area-da-lista" class="painel-lista">
                <h2 style="color:var(--OURO-CLARO); text-align:center; margin-bottom:15px; font-style: italic;">ARQUIVO DE VÍDEOS</h2>
                <div class="caixa-rolagem">
                    <table id="tabela-dados" class="tabela-videos">
                        <thead>
                            <tr>
                                <th style="width:70px;">ID</th>
                                <th>TÍTULO</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <button class="botao-comando" style="margin-top:15px; border-color:red; color:red;" onclick="motor_v259.fechar()">FECHAR</button>
            </div>
        </div>

        <div class="status-box">
            <div style="font-size:0.6rem; color:var(--OURO);">LINK STATUS</div>
            <div id="status-rede" style="color:var(--OURO-CLARO); font-weight:bold;">2.00 Gbps</div>
        </div>
    </div>

    <script>
    const motor_v259 = (() => {
        let db;
        const DB_NAME = "videosdoyoutube";

        return {
            iniciar: () => {
                const req = indexedDB.open(DB_NAME, 1);
                req.onsuccess = (e) => { db = e.target.result; };
                setInterval(() => {
                    const agora = new Date();
                    document.getElementById('data-portal').innerText = agora.toLocaleDateString();
                    document.getElementById('hora-portal').innerText = agora.toLocaleTimeString();
                }, 1000);
            },
            abrir: () => {
                if (!db) return alert("Sistema carregando...");
                const corpo = document.querySelector("#tabela-dados tbody");
                corpo.innerHTML = ""; 
                const tx = db.transaction("lista_videos", "readonly");
                const store = tx.objectStore("lista_videos");
                store.openCursor().onsuccess = (e) => {
                    const cursor = e.target.result;
                    if(cursor) {
                        const tr = document.createElement('tr');
                        tr.onclick = () => motor_v259.play(cursor.value.url);
                        tr.innerHTML = `<td>${cursor.key}</td><td>${cursor.value.titulo}</td>`;
                        corpo.appendChild(tr);
                        cursor.continue();
                    } else {
                        document.getElementById('area-da-lista').style.display = 'flex';
                    }
                };
            },
            play: (url) => {
                motor_v259.fechar();
                let vid = url.includes('v=') ? url.split('v=')[1].split('&')[0] : url.split('/').pop();
                document.getElementById('tela-vazia').innerHTML = `<iframe src="https://www.youtube.com/embed/${vid}?autoplay=1&mute=1" style="width:100%; height:400px; border:none;" allow="autoplay; fullscreen"></iframe>`;
                document.getElementById('status-rede').innerText = "NO AR";
            },
            fechar: () => document.getElementById('area-da-lista').style.display = 'none'
        };
    })();
    document.addEventListener("DOMContentLoaded", motor_v259.iniciar);
    </script>
</div>