Movie Maker

@@ -0,0 +1,160 @@+<!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 — Recording Active</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;+}+.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;+}+.rec-indicator { display: flex; align-items: center; gap: 12px; }+.rec-dot {+  width: 14px; height: 14px; border-radius: 50%; background: #f85149;+  animation: recPulse 1s ease-in-out infinite;+}+@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }+.rec-label { font-size: 16px; font-weight: 600; color: #f85149; letter-spacing: 1px; }+.rec-timer {+  font-size: 32px; font-weight: 700; color: #e6edf3;+  font-variant-numeric: tabular-nums;+}+.level-meter {+  width: 240px; height: 6px; background: #21262d; border-radius: 3px; overflow: hidden;+}+.level-meter-fill {+  height: 100%; width: 0%; background: #3fb950; border-radius: 3px;+  transition: width 0.05s linear;+}+.level-meter-fill.hot { background: #f85149; }+.mic-label { color: #484f58; font-size: 11px; }+.rec-hint { color: #484f58; font-size: 12px; text-align: center; line-height: 1.5; max-width: 320px; }+.btn-row { display: flex; gap: 10px; align-items: center; }+.btn-pause {+  background: #21262d; color: #d29922; border: 1px solid #30363d;+  padding: 10px 28px; border-radius: 6px; font-size: 14px; font-family: inherit;+  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;+}+.btn-stop {+  background: #21262d; color: #f85149; border: 1px solid #f85149;+  padding: 10px 28px; border-radius: 6px; font-size: 14px; font-family: inherit;+  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;+}+.toolbar-sim {+  position: fixed; top: 0; left: 0; right: 0; height: 32px;+  background: #161b22; border-bottom: 1px solid #21262d;+  display: flex; align-items: center; padding: 0 12px; gap: 12px; z-index: 10;+}+.toolbar-sim .nav-btn {+  background: none; border: none; color: #8b949e; cursor: pointer;+  padding: 4px 8px; font-size: 12px;+}+.toolbar-sim .rec-btn {+  color: #f85149; position: relative; background: none; border: none;+  display: inline-flex; align-items: center; justify-content: center;+  padding: 4px; cursor: pointer;+}+.toolbar-sim .mini-dot {+  width: 6px; height: 6px; background: #f85149; border-radius: 50%;+  position: absolute; top: 0; right: 0;+  animation: recPulse 1s ease-in-out infinite;+}+.toolbar-sim .timer {+  font-size: 11px; color: #f85149; font-weight: 600;+  font-variant-numeric: tabular-nums;+}+.spacer { flex: 1; }+.demo-note {+  position: fixed; bottom: 8px; right: 12px; color: #484f58; font-size: 10px;+}+</style>+</head>+<body>+<div class="toolbar-sim">+  <span style="color:#8b949e;font-size:12px;">GV2</span>+  <span class="spacer"></span>+  <button class="nav-btn">&#9776;</button>+  <button class="nav-btn" title="Camera">+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>+  </button>+  <button class="rec-btn" title="Stop Recording (Alt+R)">+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/></svg>+    <span class="mini-dot"></span>+  </button>+  <span class="timer" id="toolbar-timer">01:23</span>+</div>++<div style="margin-top: 32px; flex: 1; display: flex; flex-direction: column;">+  <div class="tab-bar">+    <button class="active">Record</button>+    <button>Library</button>+    <button>Scripts</button>+  </div>+  <div class="record-view">+    <div class="rec-indicator">+      <div class="rec-dot"></div>+      <span class="rec-label">RECORDING</span>+    </div>+    <div class="rec-timer" id="main-timer">01:23</div>+    <div class="level-meter">+      <div class="level-meter-fill" id="level-fill"></div>+    </div>+    <div class="mic-label">Microphone active</div>+    <div class="btn-row">+      <button class="btn-pause">+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>+        Pause+      </button>+      <button class="btn-stop">+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>+        Stop+      </button>+    </div>+    <div class="rec-hint">Recording from toolbar — navigate to any view.<br>Click the toolbar record button or Stop here to finish.</div>+  </div>+</div>+<div class="demo-note">Demo — simulated data</div>+<script>+// Animate timer+let seconds = 83;+function fmtTimer(s) {+  const m = Math.floor(s / 60);+  const sec = s % 60;+  return String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');+}+setInterval(() => {+  seconds++;+  document.getElementById('main-timer').textContent = fmtTimer(seconds);+  document.getElementById('toolbar-timer').textContent = fmtTimer(seconds);+}, 1000);++// Animate level meter+const fill = document.getElementById('level-fill');+setInterval(() => {+  const level = Math.random() * 80 + 5;+  fill.style.width = level + '%';+  fill.classList.toggle('hot', level > 70);+}, 100);+</script>+</body>+</html>\ No newline at end of file