<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Generador de Código QR</title>
  <!-- Fuente personalizada -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
  <!-- Bibliotecas JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <style>
    /* Reset CSS */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Roboto', sans-serif;
      background: #1a1a1a;
      color: #fff;
      overflow: hidden;
    }
    /* Fondo de partículas */
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    /* Pantalla de carga */
    .loading {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .loading h1 {
      font-size: 2rem;
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    /* Contenedor principal */
    .container {
      position: relative;
      padding: 20px;
      max-width: 600px;
      margin: 100px auto;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
    h2 { text-align: center; margin-bottom: 20px; }
    .form-group { margin-bottom: 20px; }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
    }
    button {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      background: #ff5722;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }
    button:hover { background: #e64a19; }
    #qrcode { text-align: center; margin-top: 20px; }
    .stats {
      margin-top: 20px;
      text-align: center;
      font-size: 0.9rem;
      color: #ccc;
    }
  </style>
</head>
<body>
  <!-- Fondo animado con partículas -->
  <div id="particles-js"></div>

  <!-- Pantalla de carga -->
  <div class="loading" id="loading">
    <h1>Cargando...</h1>
  </div>

  <!-- Contenedor principal -->
  <div class="container" id="mainContent" style="display: none;">
    <h2>Generador de Código QR</h2>
    <div class="form-group">
      <input type="text" id="qrInput" placeholder="Ingresa un texto o URL">
    </div>
    <button id="generateBtn">Generar Código QR</button>
    <div id="qrcode"></div>
    <div class="stats">
      <p>Códigos generados: <span id="counter">0</span></p>
    </div>
  </div>

  <script>
    // Inicializar Particles.js para un fondo interactivo
    particlesJS("particles-js", {
      "particles": {
        "number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
        "color": { "value": "#ffffff" },
        "shape": {
          "type": "circle",
          "stroke": { "width": 0, "color": "#000000" },
          "polygon": { "nb_sides": 5 }
        },
        "opacity": { "value": 0.5, "random": false },
        "size": { "value": 3, "random": true },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 6,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out"
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": { "enable": true, "mode": "grab" },
          "onclick": { "enable": true, "mode": "push" },
          "resize": true
        },
        "modes": {
          "grab": { "distance": 140, "line_linked": { "opacity": 1 } },
          "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8 },
          "repulse": { "distance": 200, "duration": 0.4 },
          "push": { "particles_nb": 4 },
          "remove": { "particles_nb": 2 }
        }
      },
      "retina_detect": true
    });

    // Configuración del sonido de confirmación usando Howler.js
    var sound = new Howl({
      src: ['https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg'],
      volume: 0.5
    });

    // Contador de códigos QR generados
    let qrCount = 0;

    // Función para generar el código QR usando QRCode.js
    function generateQR() {
      var input = document.getElementById("qrInput").value;
      if (input.trim() === "") {
        alert("Por favor ingresa un texto o URL.");
        return;
      }
      // Reproducir sonido al generar
      sound.play();

      // Limpiar el contenedor del código anterior
      document.getElementById("qrcode").innerHTML = "";

      // Crear el código QR
      new QRCode(document.getElementById("qrcode"), {
        text: input,
        width: 200,
        height: 200,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
      });

      // Actualizar estadísticas
      qrCount++;
      document.getElementById("counter").innerText = qrCount;

      // Animación con anime.js para el código generado
      anime({
        targets: '#qrcode img',
        scale: [0, 1],
        duration: 800,
        easing: 'easeOutElastic(1, .8)'
      });
    }

    document.getElementById("generateBtn").addEventListener("click", generateQR);

    // Simulación de pantalla de carga
    window.addEventListener("load", function() {
      setTimeout(function() {
        document.getElementById("loading").style.display = "none";
        document.getElementById("mainContent").style.display = "block";
        anime({
          targets: '#mainContent',
          opacity: [0, 1],
          translateY: [-50, 0],
          duration: 1000,
          easing: 'easeOutExpo'
        });
      }, 2000); // 2 segundos de carga simulada
    });
  </script>
</body>
</html>