diff options
Diffstat (limited to 'js/scripting-lang/web/ast-viewer.html')
| -rw-r--r-- | js/scripting-lang/web/ast-viewer.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/js/scripting-lang/web/ast-viewer.html b/js/scripting-lang/web/ast-viewer.html new file mode 100644 index 0000000..269504f --- /dev/null +++ b/js/scripting-lang/web/ast-viewer.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Baba Yaga AST Viewer</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; + background: var(--color-code-bg); + padding: 1em; + border-radius: 0.2em; + border: 1px solid var(--color-result-border); + max-height: 400px; + overflow-y: auto; + resize: vertical; + min-height: 200px; + } + + .error { + color: var(--color-error); + background: #ffeef0; + border-left: 4px solid var(--color-error); + padding: 1em; + margin-bottom: 1em; + } + + .example-selector { + margin-bottom: 1em; + } + + .example-selector select { + padding: 0.6em; + font-size: 1em; + border: 2px solid var(--color-input-border); + border-radius: 0.2em; + background: white; + margin-left: 0.5em; + } + + .example-selector select:focus { + outline: none; + border-color: #007acc; + } + + .output-section { + margin-top: 1.5em; + } + + .output-section h3 { + margin-bottom: 0.5em; + color: var(--color-label); + text-transform: uppercase; + font-size: 0.9em; + } + + .output-container { + position: relative; + } + + .copy-btn { + position: absolute; + top: 0.5em; + right: 0.5em; + background: var(--color-button-bg); + color: var(--color-button-text); + border: none; + border-radius: 0.2em; + padding: 0.3em 0.6em; + font-size: 0.8em; + font-weight: bold; + cursor: pointer; + z-index: 10; + } + + .copy-btn:hover { + background: #005a9e; + } + + .copy-btn:active { + transform: translateY(1px); + } + </style> +</head> +<body> + <main> + <h1>Baba Yaga AST Visualizer</h1> + + <div class="example-selector"> + <label for="examples">Load Example:</label> + <select id="examples"> + <option value="">Choose an example...</option> + <option value="simple">Simple Assignment</option> + <option value="when">When Expression</option> + <option value="function">Function Definition</option> + <option value="table">Table Literal</option> + <option value="arithmetic">Arithmetic Expression</option> + <option value="complex">Complex When Expression</option> + </select> + </div> + + <label for="code-input">Code:</label> + <textarea + id="code-input" + placeholder="Enter Baba Yaga code here... +Example: +x : 42; +result : when x is 42 then "correct" _ then "wrong";" + ></textarea> + + <button id="generate-btn">Generate AST</button> + + <div class="output-section"> + <h3>AST Output:</h3> + <div class="output-container"> + <textarea id="ast-output" class="output" readonly placeholder="AST will appear here..."></textarea> + <button id="copy-ast-btn" class="copy-btn">Copy AST</button> + </div> + </div> + + <div class="output-section"> + <h3>Tokens:</h3> + <div class="output-container"> + <textarea id="tokens-output" class="output" readonly placeholder="Tokens will appear here..."></textarea> + <button id="copy-tokens-btn" class="copy-btn">Copy Tokens</button> + </div> + </div> + + <div id="error-output" class="error" style="display: none;"></div> + </main> + + <script type="module" src="src/ast.js"></script> +</body> +</html> \ No newline at end of file |