Update templates/index2.html

templates/index2.html

@@ -8,7 +8,431 @@
   <link rel="icon" href=".../icons8-speech recognition-external-smashingstocks-glyph-smashing-stocks-32.png?v=2">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,600,700&display=swap">
   <style>
-    /* --- your existing CSS stays the same --- */
+    :root {
+      --bg: #18122b;
+      --bg-card: #231942;
+      --bg-card2: #251e3e;
+      --accent: #a259ec;
+      --accent2: #2563eb;
+      --text: #fff;
+      --text-muted: #bcbcbc;
+      --border: #312e4a;
+      --success: #22c55e;
+      --danger: #dc2626;
+      --cyan: #00fff7;
+    }
+
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      font-family: 'Inter', Arial, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+    }
+
+    .layout {
+      display: flex;
+      min-height: 100vh;
+      gap: 32px;
+      padding: 32px;
+      box-sizing: border-box;
+    }
+
+    .main-panel {
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    .card {
+      background: var(--bg-card);
+      border-radius: 18px;
+      box-shadow: 0 2px 16px #0003;
+      padding: 32px 32px 24px 32px;
+      margin-bottom: 0;
+      border: 1.5px solid var(--border);
+    }
+
+    .card h2,
+    .card h3 {
+      margin-top: 0;
+      color: var(--accent);
+      font-size: 1.5em;
+      font-weight: 700;
+      margin-bottom: 18px;
+      letter-spacing: 1px;
+    }
+
+    .sidebar {
+      flex: 1;
+      min-width: 320px;
+      background: var(--bg-card2);
+      border-radius: 18px;
+      box-shadow: 0 2px 16px #0003;
+      padding: 32px 28px 24px 28px;
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+      border: 1.5px solid var(--border);
+      height: fit-content;
+    }
+
+    .sidebar h3 {
+      color: var(--accent2);
+      font-size: 1.2em;
+      font-weight: 700;
+      margin-bottom: 18px;
+      letter-spacing: 1px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .sidebar label {
+      font-size: 1em;
+      color: var(--text-muted);
+      margin-top: 18px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .sidebar select,
+    .sidebar input[type="number"] {
+      width: 100%;
+      margin-top: 6px;
+      padding: 10px;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      background: #201c3a;
+      color: var(--text);
+      font-size: 1em;
+      margin-bottom: 10px;
+      outline: none;
+      transition: border 0.2s;
+    }
+
+    .sidebar select:focus,
+    .sidebar input[type="number"]:focus {
+      border: 1.5px solid var(--accent2);
+    }
+
+    .sidebar button {
+      width: 100%;
+      padding: 14px 0;
+      margin-top: 18px;
+      border: none;
+      border-radius: 8px;
+      background: var(--accent);
+      color: #fff;
+      font-size: 1.1em;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.2s;
+      box-shadow: 0 2px 8px #0002;
+    }
+
+    .sidebar button:disabled {
+      background: #a5b4fc;
+      cursor: not-allowed;
+    }
+
+    .sidebar .stop-btn {
+      background: var(--danger);
+      margin-top: 8px;
+    }
+
+    .toggle-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 10px;
+    }
+
+    .toggle-label {
+      flex: 1;
+      color: var(--text-muted);
+      font-size: 1em;
+    }
+
+    .toggle-switch {
+      width: 38px;
+      height: 22px;
+      background: #333;
+      border-radius: 12px;
+      position: relative;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .toggle-switch input {
+      display: none;
+    }
+
+    .toggle-slider {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 18px;
+      height: 18px;
+      background: var(--accent2);
+      border-radius: 50%;
+      transition: left 0.2s;
+    }
+
+    .toggle-switch input:checked+.toggle-slider {
+      left: 18px;
+      background: var(--danger);
+    }
+
+    .status {
+      margin: 18px 0 0 0;
+      font-weight: bold;
+      color: var(--success);
+      font-size: 1.1em;
+      text-align: center;
+    }
+
+    .recorder-center {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 18px;
+      margin-bottom: 18px;
+    }
+
+    .recorder-btn {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #a259ec 60%, #2563eb 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 32px #a259ec55;
+      cursor: pointer;
+      transition: box-shadow 0.2s, background 0.2s;
+      position: relative;
+    }
+
+    .recorder-btn.recording {
+      background: linear-gradient(135deg, #dc2626 60%, #a259ec 100%);
+      box-shadow: 0 0 32px #dc262655;
+      animation: pulse 1.2s infinite;
+    }
+
+    @keyframes pulse {
+      0% {
+        box-shadow: 0 0 32px #dc262655;
+      }
+
+      50% {
+        box-shadow: 0 0 48px #dc2626aa;
+      }
+
+      100% {
+        box-shadow: 0 0 32px #dc262655;
+      }
+    }
+
+    .recorder-btn svg {
+      width: 38px;
+      height: 38px;
+      color: #fff;
+    }
+
+    .recorder-status {
+      color: var(--success);
+      font-size: 1.1em;
+      font-weight: 600;
+      margin-top: 8px;
+    }
+
+    .recorder-status.recording {
+      color: var(--danger);
+    }
+
+    .live {
+      margin-top: 0;
+      background: #201c3a;
+      border-radius: 12px;
+      padding: 18px 18px 10px 18px;
+      min-height: 90px;
+      border: 1px solid var(--border);
+      overflow: hidden;
+      /* hide outer overflow, inner #live will scroll */
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* inner container which actually scrolls */
+    #live {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding-right: 6px;
+      /* give room for scroll bar */
+      -webkit-overflow-scrolling: touch;
+      scroll-behavior: smooth;
+      color: var(--text-muted);
+    }
+
+    .live h4 {
+      margin: 0 0 10px 0;
+      color: var(--cyan);
+      font-size: 1.08em;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .chunk {
+      background: linear-gradient(90deg, rgba(45, 37, 74, 0.2), rgba(38, 32, 63, 0.12));
+      margin-bottom: 8px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      font-size: 0.98em;
+      color: var(--text);
+      box-shadow: 0 1px 2px #0002;
+      border: 1px solid rgba(255, 255, 255, 0.02);
+    }
+
+    /* Small speaker label */
+    .chunk b {
+      color: var(--cyan);
+      margin-right: 6px;
+      font-weight: 700;
+    }
+
+    /* THEMED SCROLLBAR - WebKit (Chrome, Edge, Safari) */
+    #live::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    #live::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 10px;
+    }
+
+    #live::-webkit-scrollbar-thumb {
+      background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
+      border-radius: 10px;
+      border: 2px solid rgba(0, 0, 0, 0.15);
+    }
+
+    #live::-webkit-scrollbar-thumb:hover {
+      filter: brightness(0.95);
+    }
+
+    /* THEMED SCROLLBAR - Firefox */
+    #live {
+      scrollbar-width: thin;
+      scrollbar-color: var(--accent) rgba(255, 255, 255, 0.02);
+    }
+
+    /* responsive: reduce max-height on small screens */
+    @media (max-width: 700px) {
+      .live {
+        max-height: 200px;
+      }
+    }
+
+    .files h4 {
+      color: var(--accent2);
+      font-size: 1.08em;
+      margin: 0 0 10px 0;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .file {
+      background: #2d254a;
+      margin-bottom: 8px;
+      padding: 8px 12px;
+      border-radius: 5px;
+      font-size: 1em;
+      color: #e0e7ef;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: 0 1px 2px #0001;
+    }
+
+    .file a {
+      color: var(--accent2);
+      text-decoration: none;
+      font-weight: 500;
+    }
+
+    .file a:hover {
+      text-decoration: underline;
+    }
+
+    #audio-player-container {
+      margin-bottom: 18px;
+    }
+
+    #waveform {
+      width: 100%;
+      height: 80px;
+      background: #2d254a;
+      border-radius: 6px;
+    }
+
+    #transcript-container {
+      background: #2d254a;
+      padding: 14px;
+      border-radius: 6px;
+      margin-top: 24px;
+    }
+
+    #transcript-content {
+      margin-top: 10px;
+      white-space: pre-wrap;
+      font-size: 1em;
+      color: #e0e7ef;
+      max-height: 300px;
+      overflow: auto;
+      background: #201c3a;
+      padding: 10px;
+      border-radius: 4px;
+    }
+
+    @media (max-width: 1100px) {
+      .layout {
+        flex-direction: column;
+        gap: 0;
+        padding: 12px;
+      }
+
+      .sidebar {
+        min-width: unset;
+        width: 100%;
+        margin-bottom: 18px;
+      }
+
+      .main-panel {
+        padding: 0;
+      }
+    }
+
+    @media (max-width: 700px) {
+
+      .card,
+      .sidebar {
+        padding: 16px 8px 12px 8px;
+      }
+
+      .main-panel {
+        gap: 12px;
+      }
+    }
   </style>
 </head>