First commit of local Closed Caption App

2025-08-05 15:17:40 -07:00
commit f4c3a024bd
21 changed files with 3023 additions and 0 deletions
@@ -0,0 +1,181 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background: #000;
+  color: #fff;
+  overflow: hidden;
+}
+
+#app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.controls {
+  background: #1a1a1a;
+  padding: 20px;
+  border-bottom: 1px solid #333;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header h3 {
+  color: #fff;
+  font-size: 18px;
+  margin: 0;
+}
+
+.header a {
+  text-decoration: none;
+}
+
+.header .btn {
+  margin: 0;
+}
+
+.control-panel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 15px;
+  -webkit-app-region: no-drag;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.control-group label {
+  font-size: 14px;
+  color: #ccc;
+}
+
+.control-group input,
+.control-group select {
+  padding: 8px;
+  border: 1px solid #333;
+  background: #2a2a2a;
+  color: #fff;
+  border-radius: 4px;
+}
+
+.control-group input[type="color"] {
+  height: 40px;
+  cursor: pointer;
+}
+
+.control-group input[type="range"] {
+  width: 100%;
+}
+
+#font-size-display {
+  color: #ccc;
+  font-size: 14px;
+}
+
+.btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: opacity 0.2s;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: #4CAF50;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #45a049;
+}
+
+.btn-secondary {
+  background: #f44336;
+  color: white;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #da190b;
+}
+
+.btn-small {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.transcription-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: #000;
+  position: relative;
+}
+
+#transcription-text {
+  text-align: center;
+  font-size: 32px;
+  color: #fff;
+  line-height: 1.5;
+  max-width: 90%;
+  word-wrap: break-word;
+  transition: opacity 0.3s ease;
+}
+
+.fade-out {
+  opacity: 0 !important;
+}
+
+.audio-level-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.audio-level-bar {
+  flex: 1;
+  height: 20px;
+  background: #333;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+}
+
+.audio-level-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #4CAF50 0%, #FFC107 50%, #f44336 100%);
+  width: 0%;
+  transition: width 0.1s ease;
+}
+
+#audio-level-text {
+  color: #ccc;
+  font-size: 12px;
+  min-width: 30px;
+}
+
+#queue-status {
+  color: #ccc;
+  font-size: 12px;
+  font-family: monospace;
+}