<style>
:root {
--top: #05070D; --verde: #6BA4EC; --azul: #14273F;
--panel: #f7f8f8; --text: #252525; --line: #d8d8d8;
}
.wp-promaker-container { font-family: Arial, sans-serif; color:
var(--text); background: #fff; display: grid; grid-template-columns: 17.5rem
1fr; min-height: 80vh; border: 1px solid var(--line); }
.wp-lateral { background: #fff; border-right: 1px solid var(--line);
padding: 1.5rem; }
.wp-principal { padding: 2rem; background: #fff; position: relative; }
/* Player de Vídeo */
.video-container { width: 100%; background: #000; aspect-ratio: 16/9;
margin-bottom: 1.5rem; border-radius: 4px; overflow: hidden; }
video { width: 100%; height: 100%; }
/* Abas de Navegação (Igual ao PROMAKER) */
.wp-tabs { display: flex; gap: 1rem; border-bottom: 1px solid
var(--line); margin-bottom: 1.5rem; }
.wp-tabs button { border: 0; background: none; padding: 0.5rem 1rem;
cursor: pointer; font-weight: bold; border-bottom: 3px solid transparent; }
.wp-tabs button.active { border-bottom-color: var(--azul); color:
var(--azul); }
/* Formulários */
.wp-campo { margin-bottom: 1rem; }
.wp-campo label { display: block; font-size: 0.7rem; text-transform:
uppercase; color: #666; margin-bottom: 0.3rem; }
.wp-campo input, .wp-campo textarea { width: 100%; border: 1px solid
var(--line); padding: 0.6rem; border-radius: 4px; }
.wp-btn-salvar { background: var(--verde); color: #000; padding: 0.8rem
2rem; border: 0; border-radius: 4px; font-weight: bold; cursor: pointer;
float: right; }
@media (max-width: 900px) { .wp-promaker-container {
grid-template-columns: 1fr; } }
</style>
<div class="wp-promaker-container">
<!-- Lateral: Metadados Rápidos -->
<aside class="wp-lateral">
<div style="text-align:center; margin-bottom: 1rem;">
<img src="https://seu-api-flask.com/static/img/promaker.png"
style="max-width: 120px;">
</div>
<div id="info-arquivo">
<h3 style="font-size: 0.9rem; text-transform:
uppercase;">Aguardando Seleção...</h3>
<p style="font-size: 0.8rem; color: #666;">ID: <span
id="video-id">-</span></p>
</div>
</aside>
<!-- Principal: Player e Ficha -->
<main class="wp-principal">
<div class="video-container">
<video id="player-principal" controls>
<source src="" type="video/mp4">
</video>
</div>
<nav class="wp-tabs">
<button class="active">IDENTIFICAÇÃO</button>
<button>CONTEÚDO</button>
<button>TÉCNICO</button>
</nav>
<form id="form-catalogacao">
<div class="wp-campo">
<label>Título do Material</label>
<input type="text" name="titulo" placeholder="Ex: Jornal da
Cultura - Edição Noite">
</div>
<div class="wp-campo">
<label>Sinopse / Descrição</label>
<textarea name="sinopse" rows="4"></textarea>
</div>
<div class="wp-campo">
<label>Assunto</label>
<input type="text" name="assunto">
</div>
<button type="button" class="wp-btn-salvar"
onclick="salvarDados()">SALVAR ALTERAÇÕES</button>
</form>
</main>
</div>
<script>
const API_BASE = "https://seu-api-flask.com"; // AJUSTE AQUI
// Função para carregar os dados do vídeo
async function carregarDados(id) {
try {
const res = await fetch(`${API_BASE}/api/video/${id}`);
const data = await res.json();
// Preenche o formulário
document.querySelector('input[name="titulo"]').value =
data.titulo || "";
document.querySelector('textarea[name="sinopse"]').value =
data.sinopse || "";
document.querySelector('#video-id').innerText = id;
// Atualiza o Vídeo
const video = document.getElementById('player-principal');
video.src = data.url_video;
video.load();
} catch (e) {
console.error("Erro ao conectar com o banco PROMAKER:", e);
}
}
async function salvarDados() {
const id = document.getElementById('video-id').innerText;
const formData = new
FormData(document.getElementById('form-catalogacao'));
const payload = Object.fromEntries(formData.entries());
const res = await fetch(`${API_BASE}/api/video/${id}/salvar`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (res.ok) alert("Dados salvos com sucesso no novo banco!");
}
// Exemplo: Carregar vídeo 1 ao abrir (apenas para teste)
// carregarDados(1);
</script>