diff options
Diffstat (limited to 'js/baba-yaga/web/editor/index.html')
| -rw-r--r-- | js/baba-yaga/web/editor/index.html | 577 |
1 files changed, 577 insertions, 0 deletions
diff --git a/js/baba-yaga/web/editor/index.html b/js/baba-yaga/web/editor/index.html new file mode 100644 index 0000000..6344cee --- /dev/null +++ b/js/baba-yaga/web/editor/index.html @@ -0,0 +1,577 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> + <title>Baba Yaga Code Runner</title> + <link rel="stylesheet" href="../../node_modules/codemirror/lib/codemirror.css"> + <link rel="stylesheet" href="../../node_modules/codemirror/theme/monokai.css"> + <script src="../../node_modules/codemirror/lib/codemirror.js"></script> + <script src="../../node_modules/codemirror/addon/edit/closebrackets.js"></script> + <script src="../../node_modules/codemirror/addon/edit/matchbrackets.js"></script> + <script src="../../node_modules/codemirror/addon/fold/foldcode.js"></script> + <script src="../../node_modules/codemirror/addon/fold/foldgutter.js"></script> + <script src="../../node_modules/codemirror/addon/fold/brace-fold.js"></script> + <script src="../../node_modules/codemirror/addon/fold/indent-fold.js"></script> + + <!-- Baba Yaga Language Components --> + <script type="module"> + // Import Baba Yaga components and make them globally available + import { createLexer, tokenTypes } from '../../lexer.js'; + import { createParser } from '../../parser.js'; + import { createInterpreter } from '../../interpreter.js'; + + // Make them globally available + window.createLexer = createLexer; + window.createParser = createParser; + window.createInterpreter = createInterpreter; + window.tokenTypes = tokenTypes; + + console.log('Baba Yaga modules loaded and made globally available'); + </script> + + <!-- Baba Yaga Language Mode --> + <script src="js/baba-yaga-mode.js"></script> + + <!-- Baba Yaga Formatter --> + <script src="js/formatter.js"></script> + + <style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html, body { + height: 100%; + overflow: hidden; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; + background-color: #1e1e1e; + color: #d4d4d4; + } + + .container { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + } + + .header { + background-color: #2d2d30; + border-bottom: 1px solid #3e3e42; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .header h1 { + color: #569cd6; + font-size: 1.5rem; + font-weight: 600; + } + + .header-controls { + display: flex; + gap: 0.5rem; + } + + .btn { + background-color: #007acc; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + font-size: 0.9rem; + transition: background-color 0.2s; + } + + .btn:hover { + background-color: #005a9e; + } + + .btn.success { + background-color: #4ec9b0; + } + + .btn.error { + background-color: #f14c4c; + } + + .main-content { + display: flex; + flex: 1; + overflow: hidden; + } + + .editor-section { + flex: 1; + display: flex; + flex-direction: column; + border-right: 1px solid #3e3e42; + } + + .editor-header { + padding: 1rem; + background-color: #2d2d30; + border-bottom: 1px solid #3e3e42; + color: #d4d4d4; + } + + .editor-container { + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 0; + } + + .CodeMirror { + height: 100% !important; + min-height: 300px; + flex: 1; + } + + .CodeMirror-scroll { + min-height: 100%; + } + + .output-section { + width: 400px; + display: flex; + flex-direction: column; + background-color: #252526; + } + + .output-header { + padding: 1rem; + background-color: #2d2d30; + border-bottom: 1px solid #3e3e42; + color: #d4d4d4; + } + + .output-content { + flex: 1; + overflow: auto; + padding: 1rem; + } + + .output-tabs { + display: flex; + background-color: #2d2d30; + border-bottom: 1px solid #3e3e42; + } + + .tab-btn { + background-color: transparent; + color: #d4d4d4; + border: none; + padding: 0.75rem 1rem; + cursor: pointer; + border-bottom: 2px solid transparent; + transition: all 0.2s; + } + + .tab-btn:hover { + background-color: #3e3e42; + } + + .tab-btn.active { + background-color: #007acc; + color: white; + border-bottom-color: #007acc; + } + + .tab-pane { + display: none; + } + + .tab-pane.active { + display: block; + } + + .output-text { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; + font-size: 14px; + line-height: 1.5; + white-space: normal; + word-wrap: break-word; + } + + .error-message { + color: #f14c4c; + background-color: rgba(241, 76, 76, 0.1); + border-left: 3px solid #f14c4c; + padding: 0.75rem; + margin: 0.5rem 0; + border-radius: 4px; + } + + .success-message { + color: #4ec9b0; + background-color: rgba(78, 201, 176, 0.1); + border-left: 3px solid #4ec9b0; + border-radius: 4px; + padding: 0.75rem; + margin: 0.5rem 0; + } + + .info-message { + color: #569cd6; + background-color: rgba(86, 156, 214, 0.1); + border-left: 3px solid #569cd6; + padding: 0.75rem; + margin: 0.5rem 0; + border-radius: 4px; + } + + .sample-code-btn { + background-color: #6a9955; + margin-left: 0.5rem; + } + + .sample-code-btn:hover { + background-color: #5a8a45; + } + + .format-btn { + background-color: #ff9500; + } + + .format-btn:hover { + background-color: #e6850e; + } + + .structural-editor-btn { + background-color: #8b5cf6; + } + + .structural-editor-btn:hover { + background-color: #7c3aed; + } + + /* Custom token colors for Baba Yaga - override monokai theme */ + .cm-s-monokai .cm-keyword { + color: #c586c0 !important; + font-weight: bold; + } + + .cm-s-monokai .cm-type { + color: #4ec9b0 !important; + font-weight: bold; + } + + .cm-s-monokai .cm-function { + color: #dcdcaa !important; + font-weight: bold; + } + + .cm-s-monokai .cm-builtin { + color: #d7ba7d !important; + } + + .cm-s-monokai .cm-operator { + color: #d4d4d4 !important; + } + + .cm-s-monokai .cm-number { + color: #b5cea8 !important; + } + + .cm-s-monokai .cm-string { + color: #ce9178 !important; + } + + .cm-s-monokai .cm-comment { + color: #6a9955 !important; + font-style: italic; + } + + .cm-s-monokai .cm-variable { + color: #9cdcfe !important; + } + + /* Dark theme adjustments for monokai */ + .cm-s-monokai.CodeMirror { + background-color: #1e1e1e; + color: #d4d4d4; + } + + .cm-s-monokai .CodeMirror-gutters { + background-color: #2d2d30; + border-right: 1px solid #3e3e42; + } + + .cm-s-monokai .CodeMirror-linenumber { + color: #858585; + } + + .CodeMirror-focused .CodeMirror-cursor { + border-left: 2px solid #007acc; + } + + .CodeMirror-selected { + background-color: #264f78 !important; + } + + .CodeMirror-activeline-background { + background-color: #2d2d30; + } + + /* Touch-friendly improvements */ + .btn { + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + } + + .tab-btn { + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + } + + /* Ensure CodeMirror is mobile-friendly */ + .CodeMirror { + touch-action: manipulation; + -webkit-overflow-scrolling: touch; + } + + /* Mobile scrollbar improvements */ + .output-content::-webkit-scrollbar { + width: 6px; + } + + .output-content::-webkit-scrollbar-track { + background: #2d2d30; + } + + .output-content::-webkit-scrollbar-thumb { + background: #3e3e42; + border-radius: 3px; + } + + .output-content::-webkit-scrollbar-thumb:hover { + background: #4e4e52; + } + + /* Improved output layout */ + .output-content { + padding: 1rem; + } + + .output-content .success-message, + .output-content .info-message, + .output-content .error-message { + margin: 0.75rem 0; + } + + .output-content .info-message:first-child { + margin-top: 0; + } + + /* IO output items */ + .io-output-item { + margin: 0.25rem 0; + padding: 0.5rem; + background: rgba(86, 156, 214, 0.1); + border-radius: 4px; + border-left: 2px solid #569cd6; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 13px; + } + + /* Mobile Responsive Design */ + @media (max-width: 768px) { + .header { + flex-direction: column; + gap: 1rem; + padding: 1rem 0.5rem; + } + + .header h1 { + font-size: 1.25rem; + text-align: center; + } + + .header-controls { + justify-content: center; + flex-wrap: wrap; + gap: 0.5rem; + } + + .btn { + padding: 0.5rem 0.75rem; + font-size: 0.85rem; + min-width: 80px; + } + + .main-content { + flex-direction: column; + } + + .editor-section { + border-right: none; + border-bottom: 1px solid #3e3e42; + min-height: 300px; + } + + .output-section { + width: 100%; + min-height: 250px; + } + + .editor-header, + .output-header { + padding: 0.75rem; + } + + .editor-header h3, + .output-header h3 { + font-size: 1rem; + } + + .output-tabs { + flex-wrap: wrap; + } + + .tab-btn { + padding: 0.5rem 0.75rem; + font-size: 0.85rem; + flex: 1; + min-width: 80px; + text-align: center; + } + + .output-content { + padding: 0.75rem; + } + + .success-message, + .info-message, + .error-message { + padding: 0.5rem; + margin: 0.5rem 0; + font-size: 0.9rem; + } + + .io-output-item { + padding: 0.4rem; + font-size: 12px; + } + + .CodeMirror { + min-height: 250px; + } + } + + /* Small mobile devices */ + @media (max-width: 480px) { + .header h1 { + font-size: 1.1rem; + } + + .btn { + padding: 0.4rem 0.6rem; + font-size: 0.8rem; + min-width: 70px; + } + + .editor-header, + .output-header { + padding: 0.5rem; + } + + .output-content { + padding: 0.5rem; + } + + .success-message, + .info-message, + .error-message { + padding: 0.4rem; + font-size: 0.85rem; + } + + .io-output-item { + padding: 0.3rem; + font-size: 11px; + } + } + + /* Landscape mobile optimization */ + @media (max-width: 768px) and (orientation: landscape) { + .main-content { + flex-direction: row; + } + + .editor-section { + border-right: 1px solid #3e3e42; + border-bottom: none; + min-height: 200px; + } + + .output-section { + width: 300px; + min-height: 200px; + } + } + </style> +</head> +<body> + <div class="container"> + <!-- Header --> + <header class="header"> + <h1>Baba Yaga Code Runner</h1> + <div class="header-controls"> + <button id="run-btn" class="btn">▶ Run Code</button> + <button id="format-btn" class="btn format-btn">📝 Format</button> + <button id="sample-btn" class="btn sample-code-btn">Load Sample</button> + </div> + </header> + + <!-- Main content --> + <div class="main-content"> + <!-- Code Editor Section --> + <div class="editor-section"> + <div class="editor-header"> + <h3>Code Editor</h3> + </div> + <div class="editor-container"> + <textarea id="code-editor" placeholder="Enter your Baba Yaga code here..."></textarea> + </div> + </div> + + <!-- Output Section --> + <div class="output-section"> + <div class="output-header"> + <h3>Output</h3> + </div> + <div class="output-tabs"> + <button class="tab-btn active" data-tab="output">Output</button> + <button class="tab-btn" data-tab="errors">Errors</button> + <button class="tab-btn" data-tab="ast">AST</button> + </div> + <div class="output-content"> + <div id="output-tab" class="tab-pane active"> + <div class="output-text" id="output-text">Ready to run Baba Yaga code...</div> + </div> + <div id="errors-tab" class="tab-pane"> + <div class="output-text" id="errors-text">No errors yet.</div> + </div> + <div id="ast-tab" class="tab-pane"> + <div class="output-text" id="ast-text">AST will appear here after parsing.</div> + </div> + </div> + </div> + </div> + </div> + + <!-- Scripts --> + <script src="js/baba-yaga-runner.js"></script> +</body> +</html> |