1 files changed, 163 insertions, 0 deletions
diff --git a/js/scripting-lang/web/simple.html b/js/scripting-lang/web/simple.html
new file mode 100644
index 0000000..2aa5dac
--- /dev/null
+++ b/js/scripting-lang/web/simple.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Baba Yaga - Simple</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        textarea {
+            width: 100%;
+            min-height: 200px;
+            padding: 0.6em;
+            font-size: 1em;
+            font-family: 'Courier New', monospace;
+            border: 2px solid var(--color-input-border);
+            border-radius: 0.2em;
+            margin-bottom: 1em;
+            box-sizing: border-box;
+            resize: vertical;
+        }
+
+        .output {
+            white-space: pre-wrap;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+        }
+        .success {
+            color: #006600;
+        }
+        .error {
+            color: var(--color-error);
+        }
+        .loading {
+            color: #666;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Baba Yaga</h1>
+        
+        <div class="result" id="result" style="display: none;">
+            <div class="output" id="output"></div>
+        </div>
+        
+        <label for="script">Script:</label>
+        <textarea id="script" placeholder="Enter your Baba Yaga code here...">
+factorial : n -> 
+  when n is
+    0 then 1
+    _ then n * (factorial (n - 1));
+
+a : factorial 5;
+b : factorial 0;
+
+..out a;
+..out b;
+        </textarea>
+        
+        <button id="run-btn">Run Script</button>
+    </main>
+
+    <script type="module">
+        // Import the Baba Yaga language
+        import { run } from '../lang.js';
+        
+        const scriptTextarea = document.getElementById('script');
+        const runBtn = document.getElementById('run-btn');
+        const resultDiv = document.getElementById('result');
+        const outputDiv = document.getElementById('output');
+        
+        // Capture console output
+        let capturedOutput = [];
+        const originalConsoleLog = console.log;
+        
+        function captureConsole() {
+            capturedOutput = [];
+            console.log = (...args) => {
+                // Only capture output that looks like it's from ..out operations
+                // (single values, not objects or arrays)
+                const output = args.join(' ');
+                if (args.length === 1 && typeof args[0] !== 'object') {
+                    capturedOutput.push(output);
+                }
+                originalConsoleLog(...args);
+            };
+        }
+        
+        function restoreConsole() {
+            console.log = originalConsoleLog;
+        }
+        
+        // Run script function
+        async function runScript() {
+            const script = scriptTextarea.value.trim();
+            if (!script) return;
+            
+            // Show loading state
+            resultDiv.style.display = 'block';
+            outputDiv.innerHTML = '<span class="loading">Running...</span>';
+            runBtn.disabled = true;
+            
+            // Capture console output
+            captureConsole();
+            
+            try {
+                const result = await run(script);
+                
+                // Restore console
+                restoreConsole();
+                
+                // Build output display
+                let output = '';
+                
+                // Show captured console output (from ..out operations)
+                if (capturedOutput.length > 0) {
+                    output += capturedOutput.join('\n');
+                }
+                
+                // Only show result if there's no output and we have a meaningful result
+                if (capturedOutput.length === 0 && result !== undefined && result !== null) {
+                    // Try to find the last meaningful result (not the full scope object)
+                    if (typeof result === 'object' && result !== null) {
+                        // If it's an object, look for the last defined variable
+                        const keys = Object.keys(result);
+                        const lastKey = keys[keys.length - 1];
+                        if (lastKey && lastKey !== 't') { // Skip the 't' table object
+                            output += `Result: ${JSON.stringify(result[lastKey], null, 2)}`;
+                        }
+                    } else {
+                        output += `Result: ${JSON.stringify(result, null, 2)}`;
+                    }
+                }
+                
+                if (output === '') {
+                    output = 'Script executed successfully';
+                }
+                
+                outputDiv.innerHTML = output;
+            } catch (error) {
+                restoreConsole();
+                outputDiv.innerHTML = `<span class="error">Error: ${error.message}</span>`;
+            } finally {
+                runBtn.disabled = false;
+            }
+        }
+        
+        // Event listeners
+        runBtn.addEventListener('click', runScript);
+        
+        // Handle Enter key in textarea (Ctrl+Enter to run)
+        scriptTextarea.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'Enter') {
+                e.preventDefault();
+                runScript();
+            }
+        });
+        
+
+    </script>
+</body>
+</html> 
\ No newline at end of file