Movie Maker

@@ -0,0 +1,100 @@+<!DOCTYPE html>+<html lang="en">+<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>+<meta charset="UTF-8">+<meta name="viewport" content="width=device-width, initial-scale=1.0">+<title>Movie Maker — Record Tab</title>+<style>+* { margin: 0; padding: 0; box-sizing: border-box; }+body {+  background: #0d1117; color: #e6edf3;+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;+  height: 100vh; display: flex; flex-direction: column; overflow: hidden;+}+.tab-bar {+  display: flex; border-bottom: 1px solid #21262d; background: #161b22; flex-shrink: 0;+}+.tab-bar button {+  padding: 10px 24px; background: none; border: none; color: #8b949e;+  font-size: 13px; font-weight: 500; cursor: pointer; position: relative;+  font-family: inherit; transition: color 0.15s;+}+.tab-bar button:hover { color: #e6edf3; }+.tab-bar button.active { color: #e6edf3; }+.tab-bar button.active::after {+  content: ''; position: absolute; bottom: 0; left: 0; right: 0;+  height: 2px; background: #00b8b0; border-radius: 1px 1px 0 0;+}+.record-view {+  display: flex; flex-direction: column; align-items: center; justify-content: center;+  flex: 1; gap: 16px; padding: 24px;+}+h1 { font-size: 22px; font-weight: 700; color: #e6edf3; letter-spacing: -0.5px; }+h1 .accent { color: #00b8b0; }+.subtitle { color: #8b949e; font-size: 13px; text-align: center; max-width: 420px; line-height: 1.6; }+.btn-record {+  background: #da3633; color: #fff; font-size: 16px; padding: 14px 36px;+  border-radius: 6px; border: none; font-family: inherit; font-weight: 500;+  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;+  transition: background 0.15s;+}+.btn-record:hover { background: #f85149; }+.mic-toggle {+  display: flex; align-items: center; gap: 8px; color: #8b949e; font-size: 13px;+}+.mic-toggle input { accent-color: #00b8b0; width: 16px; height: 16px; }+.mic-row {+  display: flex; align-items: center; gap: 10px; color: #8b949e; font-size: 13px;+}+.mic-row select {+  background: #161b22; color: #e6edf3; border: 1px solid #30363d;+  border-radius: 6px; padding: 6px 12px; font-size: 13px; font-family: inherit;+}+.steps {+  color: #8b949e; font-size: 12px; line-height: 1.8;+  background: #161b22; border: 1px solid #21262d; border-radius: 8px;+  padding: 16px 20px; max-width: 380px;+}+.steps ol { padding-left: 18px; }+.steps strong { color: #e6edf3; }+.demo-note {+  position: fixed; bottom: 8px; right: 12px;+  color: #484f58; font-size: 10px;+}+</style>+</head>+<body>+<div class="tab-bar">+  <button class="active">Record</button>+  <button>Library</button>+  <button>Scripts</button>+</div>+<div class="record-view">+  <h1><span class="accent">Movie</span> Maker</h1>+  <p class="subtitle">Record narrated walkthroughs of your Gallia project. Captures browser tab video + microphone audio with silence detection.</p>+  <button class="btn-record">+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="8"/></svg>+    Record+  </button>+  <label class="mic-toggle">+    <input type="checkbox" checked> Include microphone+  </label>+  <div class="mic-row">+    <span>Mic:</span>+    <select>+      <option>Default — Built-in Microphone</option>+    </select>+  </div>+  <div class="steps">+    <ol>+      <li>Click <strong>Record</strong> above</li>+      <li>Pick the browser tab to capture</li>+      <li>Navigate your project — recording follows you</li>+      <li>Click <strong>Stop</strong> when done</li>+      <li>Video saves to Library with silence detection</li>+    </ol>+  </div>+</div>+<div class="demo-note">Demo — simulated data</div>+</body>+</html>\ No newline at end of file