diff options
Diffstat (limited to 'js/baba-yaga/web/index.html')
| -rw-r--r-- | js/baba-yaga/web/index.html | 355 |
1 files changed, 355 insertions, 0 deletions
diff --git a/js/baba-yaga/web/index.html b/js/baba-yaga/web/index.html new file mode 100644 index 0000000..fd20d11 --- /dev/null +++ b/js/baba-yaga/web/index.html @@ -0,0 +1,355 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Baba Yaga REPL</title> + <style> + body { + --color-bg: #f8f8ff; + --color-text: #222; + --color-main-bg: #fff; + --color-main-border: #222; + --color-shadow: #0001; + --color-label: #222; + --color-input-border: #222; + --color-button-bg: #222; + --color-button-text: #fff; + --color-button-disabled-bg: #888; + --color-result-border: #aaa; + --color-result-bg: #f6f6fa; + --color-error: #b30000; + --color-success: #006600; + --color-info: #0066cc; + --color-code-bg: #f0f0f0; + --color-code-border: #ccc; + + font-family: system-ui, sans-serif; + background: var(--color-bg); + color: var(--color-text); + margin: 0; + padding: 0; + height: 100vh; + overflow: hidden; + } + + * { + box-sizing: border-box; + } + + /* Focus styles for accessibility */ + *:focus { + outline: 2px solid var(--color-button-bg); + outline-offset: 2px; + } + + /* Main layout */ + .app { + display: flex; + flex-direction: column; + height: 100vh; + } + + /* Chat container */ + .chat-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + max-width: 100%; + margin: 0 auto; + width: 100%; + } + + /* Messages area */ + .messages { + flex: 1; + overflow-y: auto; + padding: 1rem; + background: var(--color-main-bg); + } + + .message { + margin-bottom: 1rem; + } + + .message-input { + background: var(--color-code-bg); + border: 1.5px solid var(--color-code-border); + border-radius: 4px; + padding: 0.8rem; + margin-bottom: 0.5rem; + } + + .message-input .prompt { + color: var(--color-text); + font-family: monospace; + font-weight: bold; + font-size: 1em; + margin-bottom: 0.3em; + } + + .message-input .code { + font-family: monospace; + font-size: 1.25em; + color: var(--color-text); + white-space: pre-wrap; + word-wrap: break-word; + } + + .message-output { + background: var(--color-result-bg); + color: var(--color-text); + border: 1.75px solid var(--color-result-border); + border-radius: 4px; + padding: 0.8rem; + font-family: monospace; + font-size: 0.9em; + white-space: pre-wrap; + word-wrap: break-word; + } + + .message-error { + background: #fff0f0; + color: var(--color-error); + border: 1.75px solid var(--color-error); + border-radius: 4px; + padding: 0.8rem; + font-family: monospace; + font-size: 0.9em; + white-space: pre-wrap; + word-wrap: break-word; + } + + .message-info { + background: #f0f8ff; + color: var(--color-info); + border: 1.75px solid var(--color-info); + border-radius: 4px; + padding: 0.8rem; + font-size: 0.9em; + } + + /* Input area */ + .input-area { + background: var(--color-main-bg); + border-top: 2px solid var(--color-main-border); + padding: 1rem 1.5rem; + flex-shrink: 0; + } + + .input-container { + display: flex; + gap: 0.5rem; + align-items: flex-end; + margin-bottom: 0.5rem; + } + + .input-wrapper { + flex: 1; + } + + .input-textarea { + width: 100%; + background: var(--color-code-bg); + color: var(--color-text); + border: 2px solid var(--color-input-border); + border-radius: 4px; + padding: 0.6em; + font-family: monospace; + font-size: 1.25em; + line-height: 1.4; + resize: none; + outline: none; + min-height: 44px; + max-height: 120px; + overflow-y: auto; + } + + .input-textarea:focus { + border-color: var(--color-button-bg); + } + + .send-button { + background: var(--color-button-bg); + color: var(--color-button-text); + border: none; + border-radius: 4px; + padding: 0.6em 1.2em; + font-weight: bold; + text-transform: uppercase; + cursor: pointer; + font-size: 0.9em; + min-height: 44px; + min-width: 44px; + display: flex; + align-items: center; + justify-content: center; + } + + .send-button:hover { + opacity: 0.9; + } + + .send-button:active { + transform: translateY(1px); + } + + .send-button:disabled { + background: var(--color-button-disabled-bg); + cursor: not-allowed; + } + + /* Controls */ + .controls { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + } + + .button { + background: var(--color-button-bg); + color: var(--color-button-text); + border: none; + border-radius: 4px; + padding: 0.6em 1.2em; + font-weight: bold; + text-transform: uppercase; + cursor: pointer; + font-size: 0.8em; + min-height: 44px; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .button:hover { + opacity: 0.9; + } + + .button:active { + transform: translateY(1px); + } + + /* Mobile optimizations */ + @media (max-width: 768px) { + .header { + padding: 0.8rem 1rem; + } + + .header h1 { + font-size: 1.25rem; + } + + .messages { + padding: 0.8rem; + } + + .input-area { + padding: 0.8rem 1rem; + } + + .controls { + flex-direction: column; + } + + .button { + width: 100%; + } + } + + /* Dark mode support */ + @media (prefers-color-scheme: dark) { + body { + --color-bg: #0a0a0a; + --color-text: #ffffff; + --color-main-bg: #1a1a1a; + --color-main-border: #ffffff; + --color-shadow: #0003; + --color-label: #ffffff; + --color-input-border: #ffffff; + --color-button-bg: #ffffff; + --color-button-text: #000000; + --color-button-disabled-bg: #666666; + --color-result-border: #444444; + --color-result-bg: #2a2a2a; + --color-code-bg: #2a2a2a; + --color-code-border: #444444; + } + } + + /* High contrast mode */ + @media (prefers-contrast: high) { + body { + --color-bg: #000; + --color-text: #fff; + --color-main-bg: #000; + --color-main-border: #fff; + --color-button-bg: #fff; + --color-button-text: #000; + } + } + + /* Reduced motion */ + @media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + } + </style> +</head> +<body> + + <div class="app"> + + <main id="main" class="chat-container" role="main"> + <div class="messages" id="messages" role="log" aria-live="polite" aria-label="REPL conversation"></div> + + <div class="input-area"> + <div class="input-container"> + <div class="input-wrapper"> + <textarea + class="input-textarea" + id="input" + placeholder="Enter Baba Yaga code..." + aria-label="Code input" + rows="1" + ></textarea> + </div> + <button + class="send-button" + id="send" + type="button" + aria-label="Execute code" + > + Run + </button> + </div> + + <div class="controls"> + <button class="button" id="clear" type="button"> + Clear + </button> + <button class="button" id="load" type="button"> + Load + </button> + <button class="button" id="examples" type="button"> + Examples + </button> + <button class="button" id="help" type="button"> + Help + </button> + </div> + + <input id="fileInput" type="file" accept=".baba" style="display: none;" /> + </div> + </main> + </div> + + <script type="module" src="./app.js"></script> +</body> +</html> + |