File size: 5,620 Bytes
746ce75 005a890 28327d7 005a890 746ce75 005a890 746ce75 005a890 28327d7 005a890 28327d7 005a890 28327d7 746ce75 005a890 746ce75 005a890 5f83035 746ce75 005a890 28327d7 005a890 28327d7 005a890 28327d7 5f83035 28327d7 005a890 5f83035 005a890 5f83035 28327d7 005a890 746ce75 28327d7 005a890 28327d7 005a890 28327d7 005a890 28327d7 005a890 28327d7 746ce75 005a890 746ce75 005a890 5f83035 005a890 746ce75 dc0ae95 746ce75 28327d7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <!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">
<!-- ═══ AURA FIELD: wizard + thought-stream ═══ -->
<div class="aura-field" id="aura-field">
<!-- Wizard hat with aetheric glow ring -->
<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>
<!-- ═══ WIZARD THOUGHT-STREAM — multi-sentence RLM narration ═══ -->
<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>
<!-- ═══ CHAT INPUT — absolute black, lightning bolt send ═══ -->
<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>
<!-- ═══ TAB NAVIGATION — 1px glass ═══ -->
<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>
<!-- ═══ TAB PANELS ═══ -->
<div class="tab-panels">
<!-- FORGE: Code View -->
<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>
<!-- PREVIEW: hidden by default, launched as dedicated tab -->
<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>
<!-- ═══ DEPLOYMENT BAR — 1px glass ═══ -->
<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>
<!-- ═══ DEPLOY RESULT — hidden until verified ═══ -->
<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> |