<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CTF - Inicio</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            padding: 20px;
        }
        h1 {
            color: #4CAF50;
        }
        .reto {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            background-color: #ffffff;
            border-radius: 8px;
        }
        .reto h2 {
            color: #4CAF50;
        }
        .form-container {
            margin-top: 10px;
        }
        input[type="text"] {
            padding: 8px;
            width: 80%;
            margin-right: 10px;
        }
        button {
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .resultado {
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1>Bienvenidos al CTF - Retos de Ciberseguridad</h1>
    <p>A continuación, encontrarán los retos. Resuélvanlos e ingresen las flags en los formularios correspondientes para verificar si son correctas.
    </p>
    <p>Importante: Solo hay que meter palabra o palabras clave para la comprobación. Ejemplo: flag{<b>CLAVE_EJEMPLO</b>}.</p>

    <!-- Reto 1: Análisis de Logs -->
    <div class="reto">
        <h2>Reto 1: Análisis de Logs</h2>
        <p>En el archivo <a href="logs.txt" target="_blank">logs.txt</a> encontrarán información que les ayudará a resolver este reto.</p>
        <p>Herremientas que puedes utilizar es find, y ya sabes en que formato te doy la clave ;) </p>
        <div class="form-container">
            <label for="flag_reto1">Flag del reto 1:</label>
            <input type="text" id="flag_reto1" placeholder="Ingrese la flag aquí">
            <button onclick="verificarFlag('reto1')">Verificar</button>
            <p id="resultado_reto1" class="resultado"></p>
        </div>
    </div>

    <!-- Reto 2: Decodificación -->
    <div class="reto">
        <h2>Reto 2: Decodificación</h2>
        <p>Herramientas para utilizar: cyberchef</p>
        <p>El archivo <a href="encoded_message.txt" target="_blank">encoded_message.txt</a> contiene un mensaje cifrado. Decódenlo para encontrar la flag.</p>
        
        <div class="form-container">
            <label for="flag_reto2">Flag del reto 2:</label>
            <input type="text" id="flag_reto2" placeholder="Ingrese la flag aquí">
            <button onclick="verificarFlag('reto2')">Verificar</button>
            <p id="resultado_reto2" class="resultado"></p>
        </div>
    </div>

    <!-- Reto 3: Seguridad Web -->
    <div class="reto">
        <h2>Reto 3: Seguridad Web</h2>
        <p>Busquen archivos ocultos para resolver este reto.</p>
        <p>Herramientas para utilizar: nmap</p>
        <div class="form-container">
            <label for="flag_reto3">Flag del reto 3:</label>
            <input type="text" id="flag_reto3" placeholder="Ingrese la flag aquí">
            <button onclick="verificarFlag('reto3')">Verificar</button>
            <p id="resultado_reto3" class="resultado"></p>
        </div>
    </div>

    <!-- Reto 4: Ingeniería Inversa -->
    <div class="reto">
        <h2>Reto 4: Ingeniería Inversa</h2>
        <p>Descarguen el archivo <a href="reto4" download>reto4</a> y analícenlo para encontrar la flag.</p>
        <p>Herramientas para utilizar: strings</p>
        <div class="form-container">
            <label for="flag_reto4">Flag del reto 4:</label>
            <input type="text" id="flag_reto4" placeholder="Ingrese la flag aquí">
            <button onclick="verificarFlag('reto4')">Verificar</button>
            <p id="resultado_reto4" class="resultado"></p>
        </div>
    </div>

    <script>
        // Flags correctas (esto puede ser cambiado por un sistema más avanzado, pero por ahora se mantendrá simple)
        const flagsCorrectas = {
            reto1: "inicia_ctf_con_log",
            reto2: "decodifica_mensaje:)",
            reto3: "archivo_oculto_en_web",
            reto4: "flag_en_binario"
        };

        function verificarFlag(reto) {
            const flagIngresada = document.getElementById(`flag_${reto}`).value;
            const resultadoElemento = document.getElementById(`resultado_${reto}`);
            if (flagIngresada === flagsCorrectas[reto]) {
                resultadoElemento.textContent = "¡Correcto! Has encontrado la flag.";
                resultadoElemento.style.color = "green";
            } else {
                resultadoElemento.textContent = "Incorrecto, intenta nuevamente.";
                resultadoElemento.style.color = "red";
            }
        }
    </script>

</body>
</html>