<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Challenge</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #111;
            color: #fff;
        }

        input {
            margin-top: 20px;
            padding: 10px;
            font-size: 16px;
            width: 300px;
            border: 1px solid #fff;
            border-radius: 5px;
            background: #222;
            color: #fff;
        }

        button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #555;
            color: #fff;
        }

        button:hover {
            background-color: #777;
        }

        audio {
            margin-top: 30px;
        }
        #c {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script>
        const encryptedData = "U2FsdGVkX1/HSdj27OYqfWYz1Ev8f+E/YvRXU7GjMjyNnToW/+clFvH6XOxao/p7";

        function checkPassword() {
            const input = document.getElementById("passwordInput").value;
            const hashedInput = CryptoJS.SHA256(input).toString();
            const correctHash = "777e6c4e8569c3b0d3f5e23bf9c91742fb20c7c56fd9e0a289c988642511baa3";

            if (hashedInput === correctHash) {
                try {
                    const decrypted = CryptoJS.AES.decrypt(encryptedData, input).toString(CryptoJS.enc.Utf8);
                    if (hashedInput === correctHash) {
                        window.location.href = decrypted;
                    } else {
                        alert("Incorrect password. Try again.");
                    }

                } catch (err) {
                    console.error(err)
                    alert("Decryption failed. Are you sure the password is correct?");
                }
            } else {
                alert("Incorrect password. Try again.");
            }
        }
    </script>


</head>
<body >
<h1>Final Challenge</h1>
<p>Listen closely. The answer is hidden in the sound.</p>
<input type="text" id="passwordInput" placeholder="Enter the password">
<button onclick="checkPassword()">Submit</button>
<audio controls>
    <source src="final.wav" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<canvas id="c"></canvas>
<script>
    // geting canvas by id c
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");

    //making the canvas full screen
    c.height = window.innerHeight;
    c.width = window.innerWidth;

    //chinese characters - taken from the unicode charset
    var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
    //converting the string into an array of single characters
    matrix = matrix.split("");

    var font_size = 10;
    var columns = c.width / font_size; //number of columns for the rain
    //an array of drops - one per column
    var drops = [];
    //x below is the x coordinate
    //1 = y co-ordinate of the drop(same for every drop initially)
    for (var x = 0; x < columns; x++)
        drops[x] = 1;

    //drawing the characters
    function draw() {
        //Black BG for the canvas
        //translucent BG to show trail
        ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.fillStyle = "#0F0"; //green text
        ctx.font = font_size + "px arial";
        //looping over drops
        for (var i = 0; i < drops.length; i++) {
            //a random chinese character to print
            var text = matrix[Math.floor(Math.random() * matrix.length)];
            //x = i*font_size, y = value of drops[i]*font_size
            ctx.fillText(text, i * font_size, drops[i] * font_size);

            //sending the drop back to the top randomly after it has crossed the screen
            //adding a randomness to the reset to make the drops scattered on the Y axis
            if (drops[i] * font_size > c.height && Math.random() > 0.975)
                drops[i] = 0;

            //incrementing Y coordinate
            drops[i]++;
        }
    }

    setInterval(draw, 35);

</script>
</body>
</html>
