Movie Maker - demo-record-tab.html

Overview Files Versions Dependencies Discussions Activity
Raw
<!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>