<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Formulário</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      background: #121212;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      letter-spacing: 1px;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 50px; /* Adicionado para dar espaço no topo */
    }

    .container {
      width: 100%;
      max-width: 600px;
      background: #1e1e1e;
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      overflow-y: auto;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }

    h1 {
      text-align: center;
      font-size: 32px;
      margin-bottom: 30px;
      color: #eee;
    }

    .form-group {
      margin-bottom: 20px;
      position: relative;
    }

    label {
      font-size: 16px;
      color: #bbb;
      display: block;
      margin-bottom: 8px;
    }

    input, select, textarea {
      width: 100%;
      padding: 15px;
      font-size: 16px;
      background: #222;
      border: 1px solid #444;
      border-radius: 12px;
      color: #fff;
      outline: none;
      transition: all 0.3s ease;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    }

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-right: 30px;
      background-color: #333;
      color: #fff;
    }

    input:focus, select:focus, textarea:focus {
      border-color: #3498db;
      box-shadow: 0 0 8px rgba(52, 152, 219, 0.7);
    }

    button {
      background-color: #3498db;
      color: #fff;
      padding: 15px;
      border: none;
      border-radius: 12px;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      width: 100%;
    }

    button:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
    }

    button:active {
      transform: translateY(2px);
    }

    .loading-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .loading-spinner {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1.5s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Notificação */
    .notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 12px 20px;
      background-color: #1e1e1e;
      color: #fff;
      border-radius: 12px;
      display: none;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      width: 300px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    .notification.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    .progress-bar {
      height: 4px;
      background-color: #3498db;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: width 3s linear;
    }

    /* Personalizando a barra de rolagem */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #121212;
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #444;
      border-radius: 10px;
      border: 2px solid #121212;
      transition: background-color 0.3s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #3498db;
    }

    ::-webkit-scrollbar-button {
      display: none;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Formulário Staff</h1>
    <form id="form" action="#" method="POST">
      <div class="form-group">
        <label for="nome">Nome Completo:</label>
        <input type="text" id="nome" name="nome" placeholder="Seu nome completo" required>
      </div>

      <div class="form-group">
        <label for="idade">Idade:</label>
        <input type="number" id="idade" name="idade" placeholder="Sua idade" min="12" max="99" required>
      </div>

      <div class="form-group">
        <label for="experiencia">Experiência na área:</label>
        <select id="experiencia" name="experiencia" required>
          <option value="">Selecione...</option>
          <option value="sim">Sim</option>
          <option value="não">Não</option>
        </select>
      </div>

      <div class="form-group">
        <label for="motivo">Motivo para se juntar:</label>
        <textarea id="motivo" name="motivo" placeholder="Diga-nos por que deseja se juntar à equipe" required></textarea>
      </div>

      <div class="form-group">
        <label for="turno">Turno disponível:</label>
        <select id="turno" name="turno" required>
          <option value="">Selecione...</option>
          <option value="dia">Dia</option>
          <option value="tarde">Tarde</option>
          <option value="noite">Noite</option>
          <option value="madrugada">Madrugada</option>
        </select>
      </div>

      <div class="form-group">
        <label for="usuario">Usuário do Discord:</label>
        <input type="text" id="usuario" name="usuario" placeholder="Seu usuário no Discord" required>
      </div>

      <button type="submit" id="submit-btn">Enviar Formulário</button>
    </form>
  </div>

  <div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner"></div>
  </div>

  <div class="notification" id="notification">
    <p id="notification-text">Formulário enviado com sucesso!</p>
    <div class="progress-bar" id="progress-bar"></div>
  </div>

  <script>
    document.getElementById('form').addEventListener('submit', function(event) {
      event.preventDefault();

      // Validação dos campos obrigatórios
      const nome = document.getElementById('nome').value;
      const idade = document.getElementById('idade').value;
      const experiencia = document.getElementById('experiencia').value;
      const motivo = document.getElementById('motivo').value;
      const turno = document.getElementById('turno').value;
      const usuario = document.getElementById('usuario').value;

      // Verificação de idade
      if (idade < 12 || idade > 99) {
        showNotification("A idade deve ser entre 12 e 99 anos.", "error");
        return;
      }

      if (!nome || !idade || !experiencia || !motivo || !turno || !usuario) {
        showNotification("Por favor, preencha todos os campos obrigatórios!", "error");
        return;
      }

      // Mostrar tela de carregamento
      document.getElementById('loading-overlay').style.display = 'flex';

      // Criar embed para o webhook do Discord
      const embed = {
        title: "Novo Formulário de Inscrição",
        color: 3066993,  // Cor azul
        fields: [
          { name: "Nome Completo", value: nome, inline: true },
          { name: "Idade", value: idade, inline: true },
          { name: "Experiência", value: experiencia, inline: true },
          { name: "Motivo para se juntar", value: motivo, inline: false },
          { name: "Turno Disponível", value: turno, inline: false },
          { name: "Usuário do Discord", value: usuario, inline: false }
        ],
        footer: {
          text: "Obrigado por se inscrever!",
        },
        timestamp: new Date(),
      };

      // Enviar dados para o webhook
      fetch('https://discord.com/api/webhooks/1329868242512117851/dC13sJ2SoLgsHN4_rnVjFjzApAqZ8jvEBG6cG_asl91W3gP1aExhUiWcNhgYXeol8tXo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ embeds: [embed] })
      })
      .then(response => {
        document.getElementById('loading-overlay').style.display = 'none';
        if (response.ok) {
          showNotification("Formulário enviado com sucesso!", "success");
          document.getElementById('form').reset();
        } else {
          showNotification("Erro ao enviar o formulário. Tente novamente.", "error");
        }
      })
      .catch(() => {
        document.getElementById('loading-overlay').style.display = 'none';
        showNotification("Erro ao enviar o formulário. Tente novamente.", "error");
      });
    });

    function showNotification(message, type) {
      const notification = document.getElementById('notification');
      const notificationText = document.getElementById('notification-text');
      const progressBar = document.getElementById('progress-bar');

      notificationText.textContent = message;

      // Alterar cor da notificação com base no tipo
      notification.style.backgroundColor = type === "success" ? "#1e1e1e" : "#e74c3c";
      notification.classList.add('show');
      notification.style.display = 'block';
      notification.style.opacity = '1';
      notification.style.transform = 'translateY(0)';
      progressBar.style.width = '100%';

      // Iniciar a animação da barra de progresso
      setTimeout(() => {
        progressBar.style.transition = 'width 3s linear';
        progressBar.style.width = '0';
      }, 0);

      // Remover a notificação após 3 segundos
      setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateY(20px)';
      }, 3000);

      // Remover a notificação do DOM após a animação
      setTimeout(() => {
        notification.style.display = 'none';
      }, 3500);
    }
  </script>
</body>
</html>
