240 lines
12 KiB
HTML
240 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Live Captions</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Caption Display Areas -->
|
|
<div id="captions-wrapper">
|
|
<!-- Microphone Caption Display -->
|
|
<div id="caption-container" class="caption-area">
|
|
<div class="caption-label">
|
|
<span id="mic-status-dot" class="dot"></span>
|
|
<span id="mic-status-text">Microphone</span>
|
|
</div>
|
|
<div id="captions"></div>
|
|
</div>
|
|
|
|
<!-- Browser Tab Caption Display (hidden by default) -->
|
|
<div id="desktop-caption-container" class="caption-area hidden">
|
|
<div class="caption-label">
|
|
<span id="desktop-status-dot" class="dot"></span>
|
|
<span id="desktop-status-text">Browser Tab</span>
|
|
</div>
|
|
<div id="desktop-captions"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls Bar -->
|
|
<div id="controls">
|
|
<button id="btn-start" class="btn btn-primary">
|
|
<span class="icon">►</span> Start Mic
|
|
</button>
|
|
<button id="btn-stop" class="btn btn-danger" disabled>
|
|
<span class="icon">■</span> Stop Mic
|
|
</button>
|
|
<button id="btn-desktop-toggle" class="btn btn-secondary" title="Capture audio from a browser tab">
|
|
<span class="icon">🎧</span> Browser Tab
|
|
</button>
|
|
<button id="btn-clear" class="btn btn-secondary">
|
|
Clear
|
|
</button>
|
|
<label class="toggle-switch" title="Auto-save recordings">
|
|
<input type="checkbox" id="auto-save-toggle">
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label">Auto-save</span>
|
|
</label>
|
|
<button id="btn-recordings" class="btn btn-icon" title="Recordings">
|
|
📋
|
|
</button>
|
|
<button id="btn-settings" class="btn btn-icon" title="Settings">
|
|
⚙
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Settings Panel -->
|
|
<div id="settings-panel" class="panel hidden">
|
|
<div class="panel-header">
|
|
<h2>Settings</h2>
|
|
<button id="btn-close-settings" class="btn-close">×</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Microphone Settings Section -->
|
|
<div class="settings-section">
|
|
<button class="section-toggle active" data-section="mic-settings">
|
|
<span class="toggle-icon">▼</span> Microphone Captions
|
|
</button>
|
|
<div id="mic-settings" class="section-content">
|
|
<div class="setting-group">
|
|
<h3>Text</h3>
|
|
<label for="font-family">Font Family</label>
|
|
<select id="font-family">
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
<option value="'Helvetica Neue', Helvetica, sans-serif">Helvetica</option>
|
|
<option value="'Segoe UI', sans-serif">Segoe UI</option>
|
|
<option value="'Roboto', sans-serif">Roboto</option>
|
|
<option value="'Open Sans', sans-serif">Open Sans</option>
|
|
<option value="Georgia, serif">Georgia</option>
|
|
<option value="'Times New Roman', serif">Times New Roman</option>
|
|
<option value="'Courier New', monospace">Courier New</option>
|
|
<option value="monospace">Monospace</option>
|
|
</select>
|
|
|
|
<label for="font-size">Font Size: <span id="font-size-value">32</span>px</label>
|
|
<input type="range" id="font-size" min="16" max="72" value="32">
|
|
|
|
<label for="font-weight">Font Weight</label>
|
|
<select id="font-weight">
|
|
<option value="normal">Normal</option>
|
|
<option value="bold">Bold</option>
|
|
<option value="lighter">Light</option>
|
|
</select>
|
|
|
|
<label for="text-color">Text Color</label>
|
|
<input type="color" id="text-color" value="#ffffff">
|
|
|
|
<label for="text-align">Text Alignment</label>
|
|
<select id="text-align">
|
|
<option value="left">Left</option>
|
|
<option value="center">Center</option>
|
|
<option value="right">Right</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<h3>Background</h3>
|
|
<label for="background-color">Background Color</label>
|
|
<input type="color" id="background-color" value="#1a1a2e">
|
|
|
|
<label for="background-opacity">Opacity: <span id="opacity-value">90</span>%</label>
|
|
<input type="range" id="background-opacity" min="0" max="100" value="90">
|
|
|
|
<label for="border-radius">Corner Radius: <span id="radius-value">10</span>px</label>
|
|
<input type="range" id="border-radius" min="0" max="30" value="10">
|
|
|
|
<label for="padding">Padding: <span id="padding-value">20</span>px</label>
|
|
<input type="range" id="padding" min="5" max="50" value="20">
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<h3>Behavior</h3>
|
|
<label for="max-words">Max Words: <span id="max-words-value">30</span></label>
|
|
<input type="range" id="max-words" min="1" max="100" value="30">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Browser Tab Settings Section -->
|
|
<div class="settings-section">
|
|
<button class="section-toggle" data-section="desktop-settings">
|
|
<span class="toggle-icon">▶</span> Browser Tab Captions
|
|
</button>
|
|
<div id="desktop-settings" class="section-content hidden">
|
|
<div class="setting-group">
|
|
<h3>Text</h3>
|
|
<label for="desktop-font-family">Font Family</label>
|
|
<select id="desktop-font-family">
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
<option value="'Helvetica Neue', Helvetica, sans-serif">Helvetica</option>
|
|
<option value="'Segoe UI', sans-serif">Segoe UI</option>
|
|
<option value="'Roboto', sans-serif">Roboto</option>
|
|
<option value="'Open Sans', sans-serif">Open Sans</option>
|
|
<option value="Georgia, serif">Georgia</option>
|
|
<option value="'Times New Roman', serif">Times New Roman</option>
|
|
<option value="'Courier New', monospace">Courier New</option>
|
|
<option value="monospace">Monospace</option>
|
|
</select>
|
|
|
|
<label for="desktop-font-size">Font Size: <span id="desktop-font-size-value">28</span>px</label>
|
|
<input type="range" id="desktop-font-size" min="16" max="72" value="28">
|
|
|
|
<label for="desktop-font-weight">Font Weight</label>
|
|
<select id="desktop-font-weight">
|
|
<option value="normal">Normal</option>
|
|
<option value="bold">Bold</option>
|
|
<option value="lighter">Light</option>
|
|
</select>
|
|
|
|
<label for="desktop-text-color">Text Color</label>
|
|
<input type="color" id="desktop-text-color" value="#90EE90">
|
|
|
|
<label for="desktop-text-align">Text Alignment</label>
|
|
<select id="desktop-text-align">
|
|
<option value="left">Left</option>
|
|
<option value="center">Center</option>
|
|
<option value="right">Right</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<h3>Background</h3>
|
|
<label for="desktop-background-color">Background Color</label>
|
|
<input type="color" id="desktop-background-color" value="#1a2e1a">
|
|
|
|
<label for="desktop-background-opacity">Opacity: <span id="desktop-opacity-value">90</span>%</label>
|
|
<input type="range" id="desktop-background-opacity" min="0" max="100" value="90">
|
|
|
|
<label for="desktop-border-radius">Corner Radius: <span id="desktop-radius-value">10</span>px</label>
|
|
<input type="range" id="desktop-border-radius" min="0" max="30" value="10">
|
|
|
|
<label for="desktop-padding">Padding: <span id="desktop-padding-value">20</span>px</label>
|
|
<input type="range" id="desktop-padding" min="5" max="50" value="20">
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<h3>Behavior</h3>
|
|
<label for="desktop-max-words">Max Words: <span id="desktop-max-words-value">30</span></label>
|
|
<input type="range" id="desktop-max-words" min="1" max="100" value="30">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="setting-actions">
|
|
<button id="btn-save-settings" class="btn btn-primary">Save All Settings</button>
|
|
<button id="btn-reset-settings" class="btn btn-secondary">Reset to Defaults</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recordings Panel -->
|
|
<div id="recordings-panel" class="panel hidden">
|
|
<div class="panel-header">
|
|
<h2>Recordings</h2>
|
|
<button id="btn-close-recordings" class="btn-close">×</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Recordings List -->
|
|
<div id="recordings-list" class="recordings-list">
|
|
<p class="recordings-empty">Loading recordings...</p>
|
|
</div>
|
|
|
|
<!-- Recording Viewer -->
|
|
<div id="recording-viewer" class="recording-viewer hidden">
|
|
<div class="viewer-header">
|
|
<button id="btn-back-to-list" class="btn btn-secondary btn-small">← Back</button>
|
|
<span id="viewer-filename" class="viewer-filename"></span>
|
|
</div>
|
|
<div id="viewer-content" class="viewer-content"></div>
|
|
<div class="viewer-actions">
|
|
<button id="btn-delete-recording" class="btn btn-danger btn-small">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay for panels -->
|
|
<div id="overlay" class="hidden"></div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
|
|
<script src="/static/js/settings.js"></script>
|
|
<script src="/static/js/recordings.js"></script>
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|