<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TB Code Generator</title>
</head>
<body>
    <h1>TB Code Generator</h1>

    <!-- Formulario para la contraseña -->
    <div id="passwordPrompt" style="display: none;">
        <label for="passwordInput">Introduce la contraseña: </label>
        <input type="password" id="passwordInput">
        <button onclick="verificarContrasena()">Entrar</button>
        <p id="error" style="color: red; display: none;">Contraseña incorrecta. Inténtalo de nuevo.</p>
    </div>

    <!-- Formulario principal que se muestra solo si la contraseña es correcta -->
    <div id="mainContent" style="display: none;">
        <label for="topInput">Posición Top (%): </label>
        <input type="number" id="topInput">
        <br><br>

        <label for="leftInput">Posición Left (%): </label>
        <input type="number" id="leftInput">
        <br><br>

        <button onclick="abrirNuevaPestana()">M4k3 1T R41N</button>
    </div>

    <script>
        const HASH_CONTRASENA = "7d6f45cf9f8906e99db2be78101935f32c1e59685de06be877702b481840ddf2"; 

        // Función para calcular el hash SHA-256
        async function calcularHash(texto) {
            const encoder = new TextEncoder();
            const data = encoder.encode(texto);
            const hashBuffer = await crypto.subtle.digest('SHA-256', data);
            const hashArray = Array.from(new Uint8Array(hashBuffer));
            const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
            return hashHex;
        }

        // Función para verificar la contraseña
        async function verificarContrasena() {
            const inputPassword = document.getElementById('passwordInput').value;
            const hashPassword = await calcularHash(inputPassword);
            
            if (hashPassword === HASH_CONTRASENA) {
                // Si la contraseña es correcta, almacenar la validación en LocalStorage
                localStorage.setItem('accesoPermitido', 'true');
                mostrarContenidoPrincipal();
            } else {
                // Mostrar mensaje de error si la contraseña es incorrecta
                document.getElementById('error').style.display = 'block';
            }
        }

        // Función para mostrar el contenido principal
        function mostrarContenidoPrincipal() {
            document.getElementById('passwordPrompt').style.display = 'none';
            document.getElementById('mainContent').style.display = 'block';
            cargarConfiguracion(); // Cargar la configuración de posiciones si ya existe
        }

        // Función para cargar los valores desde LocalStorage
        function cargarConfiguracion() {
            const posicionTopGuardada = localStorage.getItem('posicionTop');
            const posicionLeftGuardada = localStorage.getItem('posicionLeft');

            if (posicionTopGuardada) {
                document.getElementById('topInput').value = posicionTopGuardada;
            } else {
                document.getElementById('topInput').value = 46; // Valor predeterminado
            }

            if (posicionLeftGuardada) {
                document.getElementById('leftInput').value = posicionLeftGuardada;
            } else {
                document.getElementById('leftInput').value = 38; // Valor predeterminado
            }
        }

        // Llamar a la función cargarConfiguracion al cargar la página
        window.onload = function() {
            const accesoPermitido = localStorage.getItem('accesoPermitido');

            if (accesoPermitido === 'true') {
                // Si el usuario ya ha ingresado la contraseña correctamente
                mostrarContenidoPrincipal();
            } else {
                // Mostrar la solicitud de contraseña si aún no ha sido validada
                document.getElementById('passwordPrompt').style.display = 'block';
            }
        }

        function abrirNuevaPestana() {
            // Obtener los valores de top y left de los inputs
            const topValue = document.getElementById('topInput').value;
            const leftValue = document.getElementById('leftInput').value;

            // Guardar los valores en LocalStorage
            localStorage.setItem('posicionTop', topValue);
            localStorage.setItem('posicionLeft', leftValue);

            // Crear el contenido HTML que se mostrará en la nueva pestaña
            var contenidoHTML = `
                <!DOCTYPE html>
                <html lang="es">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Página con imagen de fondo</title>
                    <style>
                        * {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                        }

                        body, html {
                            height: 100%;
                            width: 100%;
                            overflow: hidden;
                            position: relative;
                        }

                        body {
                            background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVn_wsZiWszuI2enKtIFgMvhqOabTgllgJCp9bz1rjTJWFNuEjsvAkk_FKCz6B5rZg47ZY5fjn0cEG739WgfApS1N5t3LE0VPf8LjBSwvDGFrWhuc1mxctVQwd4HNGJnREfYqrBjrvjbyulzq6Ych1BwlHyfdaldfaZmeRZQllj9IgM4m9xGExe34x38/s6400/tb-transformed.png');
                            background-size: contain;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-color: black;
                            font-family: Arial, sans-serif;
                        }

                        .random-number {
                            position: absolute;
                            font-size: 3vw;
                            color: black;
                            font-weight: bold;
                            padding: 5px;

                            top: ${topValue}%;
                            left: ${leftValue}%;
                            transform: translate(-50%, -50%);
                        }
                    </style>
                </head>
                <body>

                    <div class="random-number" id="randomNumber"></div>

                    <script>
                        function generarNumeroAleatorio() {
                            const min = 10000;
                            const max = 99999;
                            return Math.floor(Math.random() * (max - min + 1)) + min;
                        }

                        // Generar e insertar el número aleatorio
                        document.getElementById('randomNumber').textContent = generarNumeroAleatorio();
                    <\/script>

                </body>
                </html>
            `;

            // Abrir una nueva ventana/pestaña
            var nuevaVentana = window.open("", "_blank");

            // Escribir el contenido HTML en la nueva ventana
            nuevaVentana.document.write(contenidoHTML);
        }
    </script>
</body>
</html>
