<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HypnoSub</title>
    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #000;
            color: #FF6EC7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            animation: pulse 5s infinite;
        }
        @keyframes pulse {
            0%, 100% { background-color: #000; }
            50% { background-color: #331A33; }
        }
        .container {
            text-align: center;
            max-width: 600px;
            padding: 20px;
            border: 2px solid #FF6EC7;
            border-radius: 10px;
            animation: fadeIn 3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .levels {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .level {
            padding: 15px;
            background-color: #222;
            border: 1px solid #FF6EC7;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .level:hover {
            background-color: #FF6EC7;
            color: #000;
        }
        .locked {
            cursor: not-allowed;
            opacity: 0.5;
        }
        .password-input {
            display: none;
            margin-top: 10px;
        }
        .password-input input {
            padding: 10px;
            border-radius: 5px;
            border: none;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Welcome to Yuki Hypnosis</h1>
    <p>Select a level to start your journey.</p>
    <div class="levels">
        <div id="level1" class="level">Level 1 (Unlocked)</div>
        <div id="level2" class="level locked">Level 2 (Locked)</div>
        <div id="level3" class="level locked">Level 3 (Locked)</div>
        <div id="level4" class="level locked">Level 4 (Locked)</div>
        <div id="level5" class="level locked">Level 5 (Locked)</div>
        <div id="level6" class="level locked">Level 6 (Locked)</div>
        <div id="level7" class="level locked">Level 7 (Locked)</div>
        <div id="level8" class="level locked">Level 8 (Locked)</div>
        <div id="level9" class="level locked">Level 9 (Locked)</div>
        <div id="final" class="level locked">Final Level (Locked)</div>
    </div>

    <!-- Password Input -->
    <div class="password-input" id="passwordInput">
        <p>Enter Password to Unlock:</p>
        <input type="password" id="password" placeholder="Enter password">
        <button onclick="checkPassword()">Submit</button>
    </div>
</div>

<script>
    // Define levels and their passwords and links
    const levels = {
        level2: { password: "SUB-O8ED-4NCE-7P2X", link: "/Hypnosis/SUB-O8ED-4NCE-7P2X.html" },
        level3: { password: "SF-2L9X5T7-JQ84", link: "/Hypnosis/SF-2L9X5T7-JQ84.html" },
        level4: { password: "FNDM-F4NT4SY-7QX9Z2", link: "/Hypnosis/FNDM-F4NT4SY-7QX9Z2.html" },
        level5: { password: "LOCKD-D3NY-X9T7P5", link: "/Hypnosis/LOCKD-D3NY-X9T7P5.html" },
        level6: { password: "TRANS-F4NT4-ZY9B2K1", link: "/Hypnosis/TRANS-F4NT4-ZY9B2K1.html" },
        level7: { password: "DEGR-HUM1L-3X7Y4Q", link: "/Hypnosis/DEGR-HUM1L-3X7Y4Q.html" },
        level8: { password: "ORG-CTRL-Z7P9K2", link: "/Hypnosis/ORG-CTRL-Z7P9K2.html" },
        level9: { password: "OBJ-X7P3Q9-T5FK2", link: "/Hypnosis/OBJ-X7P3Q9-T5FK2.html" },
        final: { password: "TMC-X7Y3Q9-Z4P6B1", link: "/Hypnosis/TMC-X7Y3Q9-Z4P6B1.html" }
    };

    // Handle level clicks
    document.querySelectorAll('.level').forEach(level => {
        level.addEventListener('click', function () {
            const levelId = this.id;

            // Redirect to Level 1 link if clicked
            if (levelId === "level1") {
                window.location.href = "/Hypnosis/RELAX-2IND8-Q7X3M5.html";
                return;
            }

            // Handle locked levels
            if (this.classList.contains('locked')) {
                document.getElementById('passwordInput').style.display = 'block';
                document.getElementById('password').value = '';
                sessionStorage.setItem('currentLevel', levelId);
            } else {
                // If unlocked, redirect to the corresponding link
                window.location.href = levels[levelId].link;
            }
        });
    });

    // Check password for locked levels
    function checkPassword() {
        const enteredPassword = document.getElementById('password').value;
        const currentLevel = sessionStorage.getItem('currentLevel');

        // Validate password and redirect
        if (levels[currentLevel] && levels[currentLevel].password === enteredPassword) {
            alert(`${currentLevel.replace("level", "Level ")} unlocked!`);
            document.getElementById(currentLevel).classList.remove('locked');
            document.getElementById('passwordInput').style.display = 'none';
            window.location.href = levels[currentLevel].link;
        } else {
            alert("Incorrect password. Try again.");
        }
    }
</script>

</body>
</html>
