<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Portal</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .content {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        input, button {
            margin-top: 15px;
            padding: 10px 15px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1em;
        }
        button {
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .hidden {
            display: none;
        }
        video {
            border: 2px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }
        .button-container button {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="content" id="mainContent">
        <h1>Secure Access</h1>
        <input type="password" id="key" placeholder="Enter Key">
        <button onclick="verifyKey()">Submit</button>
        <div id="message" class="hidden">Access Denied</div>
    </div>

    <script>
        (function() {
            const secret = "IceTheGoat";
            const mainContent = document.getElementById("mainContent");
            const message = document.getElementById("message");

            function obfuscateString(str) {
                return btoa(str);
            }

            function unobfuscateString(encoded) {
                return atob(encoded);
            }

            function verifyKey() {
                const keyInput = document.getElementById("key").value;
                if (keyInput === unobfuscateString(obfuscateString(secret))) {
                    showRecordingInterface();
                } else {
                    message.classList.remove("hidden");
                }
            }

            function showRecordingInterface() {
                mainContent.innerHTML = `
                    <h1>Welcome</h1>
                    <p>You may now proceed to the secured area.</p>
                    <div>
                        <div class="button-container">
                            <button class="green-button" id="startBtn">Start Recording</button>
                            <button class="red-button" id="stopBtn" disabled>Stop Recording</button>
                            <button class="blue-button" id="downloadBtn" disabled>Download</button>
                        </div>
                        <video controls id="preview" width="400" height="300"></video>
                    </div>`;

                initRecording();
            }

            function initRecording() {
                let stream, recorder, chunks = [];
                const previewVideo = document.getElementById("preview");
                const startBtn = document.getElementById("startBtn");
                const stopBtn = document.getElementById("stopBtn");
                const downloadBtn = document.getElementById("downloadBtn");

                startBtn.addEventListener("click", () => {
                    navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then((mediaStream) => {
                        stream = mediaStream;
                        recorder = new MediaRecorder(stream);
                        recorder.ondataavailable = (event) => chunks.push(event.data);
                        recorder.start();
                    });
                    startBtn.disabled = true;
                    stopBtn.disabled = false;
                    downloadBtn.disabled = true;
                });

                stopBtn.addEventListener("click", () => {
                    recorder.stop();
                    stream.getTracks().forEach((track) => track.stop());
                    previewVideo.src = URL.createObjectURL(new Blob(chunks, { type: "video/webm" }));
                    startBtn.disabled = false;
                    stopBtn.disabled = true;
                    downloadBtn.disabled = false;
                });

                downloadBtn.addEventListener("click", () => {
                    const blob = new Blob(chunks, { type: "video/webm" });
                    const url = URL.createObjectURL(blob);
                    const anchor = document.createElement("a");
                    anchor.style.display = "none";
                    anchor.href = url;
                    anchor.download = "recording.mp4";
                    document.body.appendChild(anchor);
                    anchor.click();
                    URL.revokeObjectURL(url);
                    document.body.removeChild(anchor);
                });
            }

            window.verifyKey = verifyKey;
        })();
    </script>
</body>
</html>
