<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AIMASSIST LOGIN</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #1a1a1a;
      overflow: hidden;
    }

    .login-container {
      background: rgba(0, 0, 0, 0.7);
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      text-align: center;
      z-index: 10;
    }

    .login-container h1 {
      color: #ff4d4d;
      font-family: 'Arial', sans-serif;
      font-size: 2.5rem;
      margin-bottom: 20px;
    }

    .input-field {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border-radius: 5px;
      border: 2px solid #ff4d4d;
      background: #333;
      color: white;
      font-size: 1.2rem;
    }

    .input-field:focus {
      outline: none;
      border-color: #ffcccb;
    }

    .login-button {
      background-color: #ff4d4d;
      color: white;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .login-button:hover {
      background-color: #ff1a1a;
    }

    .particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
  </style>
</head>
<body>

  <div class="login-container">
    <h1>Login Futurista</h1>
    <input type="text" id="username" class="input-field" placeholder="Usuário" required>
    <input type="password" id="password" class="input-field" placeholder="Senha" required>
    <button class="login-button" onclick="login()">Entrar</button>
  </div>

  <canvas class="particles"></canvas>

  <script>
    const canvas = document.querySelector('.particles');
    const ctx = canvas.getContext('2d');

    // Ajustar o tamanho do canvas para cobrir a tela
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particlesArray = [];

    // Definição da classe de partículas
    class Particle {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = 'rgba(255, 77, 77, 0.7)';
      }

      // Atualiza a posição e o tamanho das partículas
      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.size > 0.2) this.size -= 0.1; // Partículas diminuem de tamanho
      }

      // Desenha as partículas
      draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    // Função para criar partículas onde o mouse se move
    function createParticles(e) {
      const xPos = e.x;
      const yPos = e.y;
      for (let i = 0; i < 5; i++) {
        particlesArray.push(new Particle(xPos, yPos));
      }
    }

    // Função que anima as partículas
    function animateParticles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpa o canvas a cada frame
      for (let i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update();
        particlesArray[i].draw();
        if (particlesArray[i].size <= 0.2) { // Remove partículas muito pequenas
          particlesArray.splice(i, 1);
          i--;
        }
      }
      requestAnimationFrame(animateParticles); // Continuar a animação
    }

    // Adiciona o evento de movimento do mouse para gerar as partículas
    canvas.addEventListener('mousemove', createParticles);
    animateParticles(); // Inicia a animação

    // Função de login
    function login() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      // Verifica se já há um dispositivo logado
      const loggedInDevice = localStorage.getItem('loggedInDevice');
      if (loggedInDevice) {
        alert('Já há um dispositivo logado com essa conta.');
        return;
      }

      // Verifica se o usuário e a senha são corretos
      if (username === 'Spacezada' && password === '1') {
        alert('Login bem-sucedido! Redirecionando...');
        localStorage.setItem('loggedInDevice', username); // Registra o dispositivo logado
        // Redireciona para a página após o login bem-sucedido
        window.location.href = 'https://www.seusite.com'; // Substitua pelo seu URL
      } else {
        alert('Usuário ou senha inválidos!');
      }
    }
  </script>

</body>
</html>