104 lines
4.2 KiB
HTML
104 lines
4.2 KiB
HTML
<!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>
|