warren/momentry_playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add index.html

Browse Source
This commit is contained in:
Warren Lo
2026-03-19 01:11:41 +08:00
parent c62b91fbb6
commit 32e31ee424
1 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
web/index.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MoMentry Playground</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<header class="toolbar">
<div class="toolbar-left">
<button id="btn-open" class="btn">Open</button>
<input type="text" id="input-file" class="input" placeholder="File path or URL">
</div>
<div class="toolbar-center">
<span id="title">MoMentry Playground</span>
</div>
<div class="toolbar-right">
<select id="select-locale" class="select">
<option value="en">English</option>
<option value="zh-TW">中文</option>
</select>
</div>
</header>
<main class="viewport" id="viewport">
<div class="media-container" id="media-container">
<canvas id="video-canvas"></canvas>
<div class="subtitle-overlay" id="subtitle-overlay">
<span id="subtitle-text"></span>
</div>
</div>
</main>
<div class="progress-container">
<div class="chunk-markers" id="chunk-markers"></div>
<input type="range" id="progress-bar" class="progress-bar" min="0" max="100" value="0">
<div class="time-display">
<span id="current-time">00:00:00</span>
<span>/</span>
<span id="total-time">00:00:00</span>
</div>
</div>
<div class="controls">
<div class="controls-left">
<button id="btn-prev" class="btn btn-icon" title="Previous frame">[</button>
<button id="btn-play" class="btn btn-icon" title="Play/Pause">▶</button>
<button id="btn-next" class="btn btn-icon" title="Next frame">]</button>
</div>
<div class="controls-center">
<div class="volume-control">
<button id="btn-mute" class="btn btn-icon" title="Mute">🔊</button>
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
</div>
<div class="speed-control">
<select id="select-speed" class="select">
<option value="0.25">0.25x</option>
<option value="0.5">0.5x</option>
<option value="0.75">0.75x</option>
<option value="1" selected>1.0x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
<option value="2">2.0x</option>
</select>
</div>
</div>
<div class="controls-right">
<div class="overlay-toggles">
<button id="btn-subtitle" class="btn btn-toggle" data-active="false">S</button>
<button id="btn-yolo" class="btn btn-toggle" data-active="false">Y</button>
<button id="btn-chunks" class="btn btn-toggle" data-active="false">C</button>
</div>
</div>
</div>
<footer class="status-bar">
<div class="status-left">
<span id="status-playback">Stopped</span>
</div>
<div class="status-center">
<span id="status-frame">Frame: 0</span>
<span id="status-fps">| 0.00 fps</span>
</div>
<div class="status-right">
<span id="status-zoom">100%</span>
</div>
</footer>
</div>
<div class="search-panel" id="search-panel" style="display: none;">
<div class="search-header">
<input type="text" id="search-input" class="input" placeholder="Search...">
<button id="btn-search" class="btn">Search</button>
<button id="btn-close-search" class="btn">×</button>
</div>
<div class="search-results" id="search-results"></div>
</div>
<script src="app.js"></script>
</body>
</html>