| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Obsidian Forge — Build anything.</title> |
| <link rel="stylesheet" href="./wizard.css"> |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%238B5CF6'/><stop offset='50%25' stop-color='%2306B6D4'/><stop offset='100%25' stop-color='%2310B981'/></linearGradient></defs><path d='M32 8 L8 48 L32 40 L56 48 Z' fill='url(%23g)'/></svg>"> |
| </head> |
| <body> |
|
|
| <div class="obsidian-shell"> |
|
|
| |
| <div class="aura-field" id="aura-field"> |
| |
| <div class="wizard-orbit" id="wizard-orbit"> |
| <div class="orbit-ring" id="orbit-ring"></div> |
| <svg class="wizard-hat" id="wizard-hat" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <linearGradient id="obsidian-grad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#06B6D4;#10B981;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop> |
| <stop offset="50%" stop-color="#06B6D4"><animate attributeName="stop-color" values="#06B6D4;#10B981;#8B5CF6;#06B6D4" dur="8s" repeatCount="indefinite"/></stop> |
| <stop offset="100%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#8B5CF6;#06B6D4;#10B981" dur="8s" repeatCount="indefinite"/></stop> |
| </linearGradient> |
| </defs> |
| <path d="M32 8 L8 48 L32 40 L56 48 Z" fill="url(#obsidian-grad)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/> |
| <ellipse cx="32" cy="48" rx="26" ry="7" fill="none" stroke="url(#obsidian-grad)" stroke-width="1.5" opacity="0.5"/> |
| </svg> |
| </div> |
| <h1 class="hero-title">Build anything.</h1> |
|
|
| |
| <div class="thought-stream" id="thought-stream" style="display:none"> |
| <div class="stream-cursor" id="stream-cursor"></div> |
| <div class="stream-text" id="stream-text"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="forge-input-section"> |
| <div class="input-obsidian"> |
| <textarea id="prompt-input" placeholder="Build anything." rows="1" autofocus></textarea> |
| <button id="vibe-btn" class="btn-lightning" title="Forge"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> |
| <path d="M13 2L3 14h6l-1 8 10-12h-6l1-8z"/> |
| </svg> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <nav class="tab-nav" id="tab-nav"> |
| <button class="tab-btn active" data-tab="forge"> |
| <span class="tab-label">⚒️ Forge</span> |
| </button> |
| <button class="tab-btn" data-tab="preview" id="preview-tab-btn"> |
| <span class="tab-label">🔮 View Preview</span> |
| </button> |
| </nav> |
|
|
| |
| <div class="tab-panels"> |
| |
| <div class="tab-panel active" id="panel-forge"> |
| <div class="forge-panel"> |
| <div class="forge-header"> |
| <span class="forge-title">RLM Output</span> |
| <div class="forge-actions"> |
| <span class="char-count" id="char-count"></span> |
| <button class="forge-action" id="copy-btn" title="Copy">⧉</button> |
| </div> |
| </div> |
| <pre class="forge-code" id="code-view"><code id="code-content"><span class="placeholder">// Obsidian Forge awaiting invocation…</span></code></pre> |
| </div> |
| </div> |
|
|
| |
| <div class="tab-panel" id="panel-preview"> |
| <div class="forge-panel"> |
| <div class="forge-header"> |
| <span class="forge-title">Quantum Sandbox</span> |
| <button class="forge-action" id="popout-btn" title="Open in new tab">↗</button> |
| </div> |
| <div class="preview-container"> |
| <iframe id="preview-frame" class="preview-iframe" sandbox="allow-scripts allow-same-origin" src="about:blank" title="Quantum Sandbox"></iframe> |
| <div class="preview-overlay" id="preview-overlay"> |
| <div class="overlay-content"> |
| <div class="obsidian-loader"></div> |
| <p>Sandbox awaiting forge…</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="deploy-bar" id="deploy-bar"> |
| <div class="deploy-status" id="deploy-status"> |
| <span class="deploy-dot" id="deploy-dot"></span> |
| <span class="deploy-text" id="deploy-text">RLM idle</span> |
| </div> |
| <button class="btn-deploy" id="publish-btn" disabled> |
| <span class="deploy-label" id="deploy-label">Deploy</span> |
| <span class="deploy-spinner" id="deploy-spinner"></span> |
| </button> |
| </div> |
|
|
| |
| <div class="deploy-result" id="publish-result" style="display:none"> |
| <div class="verified-card"> |
| <span class="verified-icon">◈</span> |
| <div class="verified-body"> |
| <strong>Verified — Live</strong> |
| <a id="live-link" href="#" target="_blank" class="verified-url"></a> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| <script src="./wizard.js"></script> |
| </body> |
| </html> |
