<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeuralCode Challenge Portal</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #020617; color: white; margin: 0; }
        .header { background: #1e293b; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #00f3ff; }
        .school-logo { height: 50px; border-radius: 5px; }
        .main-container { display: flex; height: 80vh; padding: 10px; gap: 10px; }
        .puzzle-box { flex: 1; background: #0f172a; padding: 20px; border-radius: 10px; border: 1px solid #334155; overflow-y: auto; }
        .editor-box { flex: 1; display: flex; flex-direction: column; background: #1e293b; border-radius: 10px; border: 1px solid #00f3ff; }
        #codeEditor { flex: 1; background: #020617; color: #00f3ff; padding: 15px; font-family: 'Consolas', monospace; border: none; outline: none; font-size: 16px; resize: none; }
        .output-box { background: #020617; color: #10b981; padding: 10px; font-family: monospace; border-top: 1px solid #334155; min-height: 80px; white-space: pre-wrap; }
        .footer-btns { padding: 15px; text-align: right; background: #0f172a; }
        .btn { padding: 10px 25px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; margin-left: 10px; }
        .run-btn { background: #00f3ff; color: #020617; }
    </style>
</head>
<body>

    <div class="header">
        <img src="https://neuralcodelabs.in" alt="School Logo" class="school-logo">
        <div style="text-align:center;">
            <h3 style="margin:0; color:#00f3ff;">NEURALCODE ARENA</h3>
            <small>Student: Manas Mishra | Basti, UP</small>
        </div>
        <div id="countdown" style="color:#ffcc33; font-size:24px; font-weight:bold;">10:00</div>
    </div>

    <div class="main-container">
        <div class="puzzle-box">
            <h2 style="color:#ffcc33;">🧩 The Calculator Challenge</h2>
            <p><strong>कार्य:</strong> एक पायथन प्रोग्राम लिखें जो "Hello NeuralCode" प्रिंट करे।</p>
        </div>

        <div class="editor-box">
            <textarea id="codeEditor" spellcheck="false">print("Hello NeuralCode")</textarea>
            <div id="outputWindow" class="output-box">Output will appear here...</div>
            <div class="footer-btns">
                <button class="btn run-btn" onclick="executeCode()">RUN CODE</button>
            </div>
        </div>
    </div>

    <script>
        async function executeCode() {
            const studentCode = document.getElementById('codeEditor').value;
            const outputWindow = document.getElementById('outputWindow');
            outputWindow.innerText = "Running on Judge029...";

            const options = {
                method: 'POST',
                headers: {
                    'content-type': 'application/json',
                    'X-RapidAPI-Key': '46f872f791mshb7190c5a93b31b3p187501jsn65e656d0030',
                    'X-RapidAPI-Host': 'judge029.p.rapidapi.com'
                },
                body: JSON.stringify({
                    source_code: btoa(studentCode),
                    language_id: 71, // Python
                    stdin: btoa("")
                })
            };

            try {
                // Step 1: Submit Code
                const response = await fetch('https://rapidapi.com', options);
                const result = await response.json();
                
                // Step 2: Display Output
                if (result.stdout) {
                    outputWindow.style.color = "#10b981";
                    outputWindow.innerText = ">>> Success:\n" + atob(result.stdout);
                } else if (result.stderr || result.compile_output) {
                    outputWindow.style.color = "#ef4444";
                    outputWindow.innerText = ">>> Error:\n" + atob(result.stderr || result.compile_output);
                } else {
                    outputWindow.innerText = "Code Executed (No Output)";
                }
            } catch (err) {
                outputWindow.innerText = "Connection Error. Please check RapidAPI Subscription.";
            }
        }
    </script>
</body>
</html>