Spaces:

Domingosj
/

julio

Running

File size: 9,695 Bytes

<!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>
  <!-- Dashboard -->
  <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>

  <!-- Mensagem de saldo insuficiente -->
  <div class="message error" role="alert" id="msgSaldoInsuficiente" style="display:none;">
    Saldo insuficiente para ativar o voucher.
  </div>
  <!-- Mensagem de sucesso -->
  <div class="message success" role="alert" id="msgSucesso" style="display:none;">
    Cadastro realizado com sucesso.
  </div>

  <!-- Formulário de cadastro -->
  <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>

  <!-- Tabela de registros -->
  <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>
  // Initialize counters and make them increment sequentially
  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();
    // Simular cadastro bem sucedido e esconder saldo insuficiente
    msgSaldoInsuficiente.style.display = 'none';
    msgSucesso.style.display = 'block';
    // Increment counter with animation
    const currentCount = parseInt(cadastradasHoje.textContent);
    cadastradasHoje.textContent = (currentCount + 1).toString();
    
    // Animate the counter briefly
    cadastradasHoje.style.transform = 'scale(1.2)';
    cadastradasHoje.style.transition = 'transform 0.3s ease';
    setTimeout(() => {
      cadastradasHoje.style.transform = 'scale(1)';
    }, 300);
  });

  btnAtivarVoucher.addEventListener('click', function() {
    // Simular condição saldo insuficiente para ativar voucher
    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>