<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@Undefined_Name</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/devtools-detect.js"></script>
  <link href="css/style.css" rel="stylesheet" />
  <link href="css/texteffect.css" rel="stylesheet" />
  <meta property="og:title" content="@Undefined_Name" />
  <meta property="og:type" content="Undefined name site" />
  <meta property="og:url" content="https://undefinedname.es" />
  <meta property="og:description" content="My bio🤍" />
  <meta name="theme-color" content="#111" />
  <link rel="icon" type="image/x-icon" href="resources/stolaspfpbyundefinedname.jpg" />
  <link rel="preconnect" href="https://fonts.googleapis.com/">
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&amp;display=swap"
    rel="stylesheet">
  <style>
    body {
      background: #111;
      color: #ccc;
      font-family: 'Platypi', sans-serif;
      overflow: hidden; /* Para evitar scrollbars */
      position: relative; /* Necesario para la posición de las gotas */
    }

    .loading-message {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ccc;
      text-align: center;
      font-size: 24px;
      animation: pulse 1s infinite alternate;
      z-index: 9999;
    }

    @keyframes pulse {
      0% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }

    .content {
      display: none;
    }

    .navbar-ul {
      display: none;
    }

    .prevent-inspect {
      display: none !important;
    }

    html {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .aboutme-container {
      color: #fff;
      font-family: 'Platypi', sans-serif;
      padding: 20px;
      margin-top: 30px;
    }

    .aboutme-container h2 {
      color: #4ca3ff;
    }

    .aboutme-container table {
      color: #fff;
      font-size: 16px;
    }

    /* Estilo para el GIF de fondo */
    .background-gif {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1; /* Enviar el GIF detrás de todo */
      object-fit: cover; /* Asegura que el GIF cubra toda la pantalla */
    }
  </style>

</head>

<body onkeydown="playMusic()">
  <img class="background-gif" src="https://pa1.aminoapps.com/7417/171978022ca6c421474dc7a3bb2f95e11e869dder1-640-427_hq.gif" alt="Fondo de lluvia" />

  <div class="loading-message">Presiona una tecla para continuar...</div>

  <ul class="navbar-ul">
    <a href="https://www.instagram.com/hacking.tel/" class="social-link" target="_blank">✨ Follow me on Instagram ✨</a>
    <a href="https://beatleader.xyz/u/undefined_name" class="social-link" target="_blank">🎮 Beat Saber</a>
    <a href="https://www.twitch.tv/g3_skwox" class="social-link" target="_blank">📺 Twitch</a>
    <a href="https://discord.gg/8D4y8v2VmW" class="social-link" target="_blank">💬 Discord Server</a>
  </ul>

  <section style="color: #ccc; font-family: 'Platypi', sans-serif;" class="content">
    <div class="main-container">
      <div class="environment"></div>
      <h2 class="hero glitch layers" data-text="Undefined Name" style="color: rgb(255, 255, 255);">
        <span>Undefined name</span>
      </h2>
      <p class="modder-text">hacker,modder of videogames,cybersecurity,bug hunter,locksmith,computing forensic,telecommunications engineering,hardware,computer engineering,fortnite map creator,programmer and i optimize computers   | bisexual💞 | furry 🤍 | femboy💜|    +8k earned in fortnite</p>
      <p class="modder-text">discord server moderator</p>
      <p class="modder-text">pro player rocket league,beat saber,fortnite</p>
      <p class="modder-text">477🫂</p>
      <p class="modder-text">future actor +18💘</p>
    </div>
  </section>

  <div class="center content">
    <img class="center" style="max-width: 100%; height: auto"
      src="https://discord.c99.nl/widget/theme-2/362953046587604994.png" alt="Discord" /><br />

  <script>
    function playMusic() {
      var loadingMessage = document.querySelector('.loading-message');
      loadingMessage.style.display = 'none';

      var content = document.querySelectorAll('.content');
      content.forEach(function (element) {
        element.style.display = 'block';
      });

      var navbar = document.querySelector('.navbar-ul');
      navbar.style.display = 'block';

      var backgroundMusic = document.getElementById('backgroundMusic');
      backgroundMusic.volume = 0.1;
      backgroundMusic.play();

      window.removeEventListener('keydown', playMusic);
      window.removeEventListener('click', playMusic);
      window.removeEventListener('touchstart', playMusic);
    }

    window.addEventListener('keydown', playMusic);
    window.addEventListener('click', playMusic);
    window.addEventListener('touchstart', playMusic);

    document.addEventListener('contextmenu', function (e) {
      e.preventDefault();
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'F12' || (e.key === 'Shift' && e.ctrlKey && e.key === 'I')) {
        e.preventDefault();
      }
    });
  </script>

  <script>
document.onkeydown = (e) => {
    if (e.key == 123) {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'I') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'C') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'J') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.key == 'U') {
        e.preventDefault();
    }
};
  </script>

  <script>
// Verificación básica de depuración
(function() {
    var isDebuggerActive = function() {
        // Intenta comprobar si la función es evaluada en un entorno de depuración
        try {
            var test = Function('debugger; return 0;')();
            return false;
        } catch (e) {
            return true;
        }
    };

    // Si detecta que se está depurando, evita que el código continúe
    if (isDebuggerActive()) {
        return;
    }

    // Función principal para evitar inspección mediante la consola
    (function() {
        var consoleProtector = function() {
            var methods = ['log', 'warn', 'info', 'error', 'exception', 'table', 'trace'];
            var originalConsole = window.console || {};
            methods.forEach(function(method) {
                if (originalConsole[method]) {
                    // Redefinir cada método de la consola para evitar inspección
                    originalConsole[method] = function() {};
                }
            });
        };

        // Desactiva la consola si detecta intento de inspección
        consoleProtector();
    })();
})();
  </script>

  <script>
if (window.location.hostname != "undefinedname.es"
    && !window.location.hostname.endsWith(".undefinedname.es"))
{
    var p = !document.location.protocol.startsWith("http")?"http:":document.location.protocol;
    var l = location.href;
    var r = document.referrer;
    var m = new Image();
    m.src = p + "//canarytokens.com/static/traffic/v7vhnqim9cfboamj3med4w1n5/submit.aspx?l=" + encodeURI(l) + "&r=" + encodeURI(r);
}
  </script>

  <script>
    const topSection = document.querySelector('.main-container');
    const navBar = document.querySelector('.navbar-ul');

    document.addEventListener('mousemove', function (e) {
      const line = document.createElement('div');
      line.classList.add('trail');

      const divisionHeight = topSection.getBoundingClientRect().bottom;
      const navBarHeight = navBar.getBoundingClientRect().bottom;

      if (e.pageY < navBarHeight) {
        line.style.background = 'linear-gradient(45deg, #d0d0d0, #b0b0b0, #a0a0a0)';
      } else if (e.pageY > divisionHeight) {
        line.style.background = 'linear-gradient(45deg, #0a0a0a, #1c1c1c, #0a4358)';
      } else {
        line.style.background = 'linear-gradient(45deg, #b0b0b0, #888888, #666666)';
      }

      line.style.left = `${e.pageX - 10}px`;
      line.style.top = `${e.pageY - 10}px`;
      document.body.appendChild(line);

      setTimeout(() => {
        line.remove();
      }, 1100);
    });
  </script>

  <script>
    function toggleMenu() {
      var menu = document.querySelector('.mobile-menu');
      if (menu.style.display === "block") {
        menu.style.display = "none";
      } else {
        menu.style.display = "block";
      }
    }
  </script>

  <script>
    const titleText = "@Undefined_Name"; // Texto del título
    let index = 0;
    let isDeleting = false;

    function animateTitle() {
      if (!isDeleting && index < titleText.length) {
        document.title = titleText.slice(0, index + 1); // Añadir letra por letra
        index++;
        setTimeout(animateTitle, 200); // Controla la velocidad de aparición
      } else if (!isDeleting && index === titleText.length) {
        setTimeout(() => {
          isDeleting = true;
          animateTitle();
        }, 1000); // Espera 1 segundo antes de empezar a borrar
      } else if (isDeleting && index > 1) { // Borrar todo excepto la "@"
        document.title = titleText.slice(0, index); // Mantener solo la "@"
        index--;
        setTimeout(animateTitle, 200); // Controla la velocidad de borrado (0.2 segundos entre cada letra)
      } else if (isDeleting && index === 1) { // Detener borrado cuando solo quede "@"
        document.title = "@"; // Dejar solo la "@" visible
        setTimeout(() => {
          isDeleting = false; // Reinicia la animación de escribir después de 2 segundos
          setTimeout(animateTitle, 200);
        }, 2000); // Espera 2 segundos antes de reiniciar
      }
    }

    // Iniciar la animación
    animateTitle();
  </script>
  
<style>
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fondo oscuro translúcido */
    text-align: center;
    padding: 15px 20px;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: 'Platypi', sans-serif;
    z-index: 9999;
  }

  footer p {
    margin: 0;
    line-height: 1.5;
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem;
  }

  @media (max-width: 768px) {
    footer p {
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    footer p {
      font-size: 0.9rem;
    }
  }
</style>

<footer>
  <p>La vida es muy frágil y se puede ir en nada</p>
</footer>

<style>
  .music-selector {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
    padding: 10px 15px;
    border-radius: 12px;
    font-family: 'Platypi', sans-serif;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    text-align: center;
    max-width: 250px;
    width: 85%;
  }

  .music-selector p {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: bold;
    color: #ffdfba;
  }

  .music-selector button {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 12px;
    margin: 3px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .music-selector button:hover {
    background: linear-gradient(135deg, #feb47b, #ff7e5f);
    transform: scale(1.05);
  }

  .music-selector button.pause-btn {
    background: linear-gradient(135deg, #999, #bbb);
  }

  .music-selector button.pause-btn:hover {
    background: linear-gradient(135deg, #bbb, #999);
  }

  @media (max-width: 480px) {
    .music-selector {
      bottom: 40px;
      padding: 8px 12px;
    }

    .music-selector p {
      font-size: 0.9rem;
    }

    .music-selector button {
      font-size: 0.8rem;
      padding: 6px 10px;
    }
  }
</style>

<div class="music-selector">
  <p>🎶 Elige tu música:</p>
  <button onclick="playMusic('song1')">Sour Candy</button>
  <button onclick="playMusic('song2')">Love Runs Out</button>
  <button class="pause-btn" onclick="pauseAllMusic()">⏸️ Pausar</button>
</div>

<audio id="song1" src="resources/Lady Gaga, BLACKPINK - Sour Candy (Audio) (online-audio-converter.com).mp3" preload="auto"></audio>
<audio id="song2" src="resources/OneRepublic - Love Runs Out (Official Music Video) (online-audio-converter.com).mp3" preload="auto"></audio>

<script>
  // Función para reproducir música
  function playMusic(songId) {
    // Pausar todas las canciones antes de reproducir la seleccionada
    document.querySelectorAll('audio').forEach(audio => {
      audio.pause();
      audio.currentTime = 0; // Reinicia el tiempo
    });

    // Reproducir la canción seleccionada con volumen preajustado
    const song = document.getElementById(songId);
    song.volume = 0.1; // Ajustar volumen
    song.play();
  }

  // Función para pausar toda la música
  function pauseAllMusic() {
    document.querySelectorAll('audio').forEach(audio => {
      audio.pause();
    });
  }
</script>

</body>
</html>