Citrus theme, 3D buttons, voice picker dropdown, settings accordion

index.html

@@ -8,22 +8,22 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
 :root {
-  --bg: #09090b;
-  --surface: #111113;
-  --surface2: #18181b;
-  --surface3: #1f1f23;
-  --border: #27272a;
-  --border-hover: #3f3f46;
-  --text: #fafafa;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
-  --accent: #8b5cf6;
-  --accent-hover: #a78bfa;
-  --accent-subtle: rgba(139,92,246,0.1);
-  --accent-glow: rgba(139,92,246,0.15);
+  --bg: #0f0e0d;
+  --surface: #1c1917;
+  --surface2: #292524;
+  --surface3: #44403c;
+  --border: #44403c;
+  --border-hover: #57534e;
+  --text: #fafaf9;
+  --text-secondary: #a8a29e;
+  --text-muted: #78716c;
+  --accent: #f59e0b;
+  --accent-hover: #fbbf24;
+  --accent-subtle: rgba(245,158,11,0.1);
+  --accent-glow: rgba(245,158,11,0.12);
   --danger: #ef4444;
   --success: #22c55e;
-  --warning: #f59e0b;
+  --warning: #fbbf24;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -66,7 +66,7 @@ body {
 .logo-icon {
   width: 28px;
   height: 28px;
-  background: linear-gradient(135deg, var(--accent), #ec4899);
+  background: linear-gradient(135deg, var(--accent), #d97706);
   border-radius: 7px;
   display: flex;
   align-items: center;
@@ -281,29 +281,65 @@ body {
 }
 .lang-select:focus { outline: none; border-color: var(--accent); }
 
-/* Settings */
-.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
+/* Settings accordion */
+.settings-accordion {
+  margin-bottom: 16px;
+}
+.settings-toggle {
+  display: flex; align-items: center; gap: 6px;
+  padding: 8px 0; font-size: 12px; font-weight: 500;
+  color: var(--text-muted); cursor: pointer; border: none; background: none;
+  font-family: 'Inter', sans-serif; transition: color 0.1s;
+}
+.settings-toggle:hover { color: var(--text-secondary); }
+.settings-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
+.settings-toggle.open svg { transform: rotate(90deg); }
+.settings-body { display: none; padding-top: 8px; }
+.settings-body.open { display: block; }
+.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .setting-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
 .setting-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }
 .setting-value { display: flex; align-items: center; gap: 10px; }
 .setting-value input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; }
 .setting-num { font-size: 13px; color: var(--text-secondary); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
 
+/* Voice picker dropdown */
+.voice-picker-dropdown {
+  position: absolute; top: 100%; left: 0; right: 0;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 10px; margin-top: 4px; z-index: 20;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  max-height: 240px; overflow-y: auto; display: none;
+}
+.voice-picker-dropdown.visible { display: block; }
+.voice-picker-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; cursor: pointer; transition: background 0.1s;
+  border: none; background: none; width: 100%; text-align: left;
+  color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px;
+}
+.voice-picker-item:hover { background: var(--surface2); }
+.voice-picker-item .voice-avatar { width: 30px; height: 30px; font-size: 13px; }
+.voice-picker-item:last-child { border-top: 1px solid var(--border); color: var(--accent); }
+.voice-selector { position: relative; }
+
 /* Generate */
 .generate-bar { display: flex; gap: 12px; align-items: center; }
 
 .btn-generate {
   flex: 1; padding: 14px 24px;
-  background: linear-gradient(135deg, var(--accent), #7c3aed);
-  color: white; border: none; border-radius: 10px;
+  background: linear-gradient(135deg, #fbbf24, var(--accent));
+  color: #1c1917; border: none; border-radius: 10px;
   font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif;
-  cursor: pointer; transition: all 0.2s;
+  cursor: pointer; transition: all 0.15s;
   display: flex; align-items: center; justify-content: center; gap: 8px;
+  box-shadow: 0 4px 0 #92400e, 0 6px 12px rgba(0,0,0,0.3);
+  transform: translateY(0);
 }
-.btn-generate:hover { filter: brightness(1.1); transform: translateY(-1px); }
-.btn-generate:active { transform: translateY(0); }
-.btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; }
-.btn-generate .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
+.btn-generate:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 6px 0 #92400e, 0 8px 16px rgba(0,0,0,0.3); }
+.btn-generate:active { transform: translateY(2px); box-shadow: 0 1px 0 #92400e, 0 2px 4px rgba(0,0,0,0.3); }
+.btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
+.btn-generate .spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.2); border-top-color: #1c1917; border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
 .btn-generate.loading .spinner { display: block; }
 .btn-generate.loading .btn-text { display: none; }
 @keyframes spin { to { transform: rotate(360deg); } }
@@ -314,7 +350,7 @@ body {
   font-size: 13px; display: none; gap: 8px; flex-direction: column;
 }
 .status-bar.visible { display: flex; }
-.status-bar.info { background: rgba(139,92,246,0.08); color: var(--accent-hover); border: 1px solid rgba(139,92,246,0.15); }
+.status-bar.info { background: rgba(245,158,11,0.08); color: var(--accent-hover); border: 1px solid rgba(245,158,11,0.15); }
 .status-bar.success { background: rgba(34,197,94,0.08); color: var(--success); border: 1px solid rgba(34,197,94,0.15); }
 .status-bar.error { background: rgba(239,68,68,0.08); color: var(--danger); border: 1px solid rgba(239,68,68,0.15); }
 
@@ -328,12 +364,12 @@ body {
 }
 .status-cta.upgrade { background: #ff9d00; color: #000; }
 .status-cta.upgrade:hover { background: #ffb340; }
-.status-cta.credits { background: var(--accent); color: white; }
+.status-cta.credits { background: var(--accent); color: #1c1917; }
 .status-cta.credits:hover { background: var(--accent-hover); }
 
 .progress-track { width: 100%; height: 3px; background: var(--surface3); border-radius: 2px; margin-top: 6px; overflow: hidden; display: none; }
 .progress-track.visible { display: block; }
-.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ec4899); border-radius: 2px; transition: width 0.3s; width: 0%; }
+.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #fcd34d); border-radius: 2px; transition: width 0.3s; width: 0%; }
 
 /* Player */
 .player-card { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: none; }
@@ -342,7 +378,7 @@ body {
 
 .play-btn {
   width: 40px; height: 40px; border-radius: 50%; background: var(--accent);
-  border: none; color: white; cursor: pointer;
+  border: none; color: #1c1917; cursor: pointer;
   display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s;
 }
 .play-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
@@ -396,7 +432,7 @@ body {
   font-family: 'Inter', sans-serif; cursor: pointer; border: none; transition: all 0.1s;
 }
 
-.voice-tile-btn.use { background: var(--accent); color: white; }
+.voice-tile-btn.use { background: var(--accent); color: #1c1917; font-weight: 600; }
 .voice-tile-btn.use:hover { background: var(--accent-hover); }
 .voice-tile-btn.del { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
 .voice-tile-btn.del:hover { color: var(--danger); border-color: var(--danger); }
@@ -477,7 +513,7 @@ pre {
 }
 .cm { color: var(--text-muted); }
 .s { color: #86efac; }
-.k { color: #c4b5fd; }
+.k { color: #fcd34d; }
 .f { color: #93c5fd; }
 
 /* ── Modal ── */
@@ -517,7 +553,7 @@ pre {
 .btn-modal { padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.1s; border: none; }
 .btn-cancel { background: var(--surface2); color: var(--text-secondary); border: 1px solid var(--border); }
 .btn-cancel:hover { background: var(--surface3); color: var(--text); }
-.btn-save { background: var(--accent); color: white; }
+.btn-save { background: var(--accent); color: #1c1917; font-weight: 600; }
 .btn-save:hover { background: var(--accent-hover); }
 .btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
 
@@ -537,9 +573,11 @@ pre {
 .btn-hf {
   padding: 13px 32px; background: #ff9d00; color: #000; border: none; border-radius: 10px;
   font-size: 15px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer;
-  display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;
+  display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s;
+  box-shadow: 0 4px 0 #b45309, 0 6px 12px rgba(0,0,0,0.3);
 }
-.btn-hf:hover { background: #ffb340; transform: translateY(-1px); }
+.btn-hf:hover { background: #ffb340; transform: translateY(-2px); box-shadow: 0 6px 0 #b45309, 0 8px 16px rgba(0,0,0,0.3); }
+.btn-hf:active { transform: translateY(2px); box-shadow: 0 1px 0 #b45309, 0 2px 4px rgba(0,0,0,0.3); }
 .landing-note { font-size: 12px; color: var(--text-muted); }
 
 ::-webkit-scrollbar { width: 6px; }
@@ -627,13 +665,16 @@ pre {
           <div class="page-desc">Select a voice and type your text to generate speech.</div>
         </div>
 
-        <div class="voice-selector" id="voice-selector" onclick="openAddVoice()">
+        <div class="voice-selector" id="voice-selector" onclick="toggleVoicePicker(event)">
           <div class="voice-avatar" id="sel-voice-avatar" style="background:var(--surface3)">🎤</div>
           <div class="voice-selector-info">
             <div class="voice-selector-name" id="sel-voice-name">No voice selected</div>
-            <div class="voice-selector-hint" id="sel-voice-hint">Click to add a voice</div>
+            <div class="voice-selector-hint" id="sel-voice-hint">Click to select or add a voice</div>
+          </div>
+          <div class="voice-selector-change">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
           </div>
-          <div class="voice-selector-change">Change</div>
+          <div class="voice-picker-dropdown" id="voice-picker"></div>
         </div>
 
         <div class="editor">
@@ -660,19 +701,27 @@ pre {
           </div>
         </div>
 
-        <div class="settings-row">
-          <div class="setting-group">
-            <div class="setting-label">Inference Steps</div>
-            <div class="setting-value">
-              <input type="range" id="setting-steps" min="4" max="64" value="32">
-              <span class="setting-num" id="steps-val">32</span>
-            </div>
-          </div>
-          <div class="setting-group">
-            <div class="setting-label">Speed</div>
-            <div class="setting-value">
-              <input type="range" id="setting-speed" min="50" max="150" value="100">
-              <span class="setting-num" id="speed-val">1.0x</span>
+        <div class="settings-accordion">
+          <button class="settings-toggle" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+            Advanced Settings
+          </button>
+          <div class="settings-body">
+            <div class="settings-row">
+              <div class="setting-group">
+                <div class="setting-label">Inference Steps</div>
+                <div class="setting-value">
+                  <input type="range" id="setting-steps" min="4" max="64" value="32">
+                  <span class="setting-num" id="steps-val">32</span>
+                </div>
+              </div>
+              <div class="setting-group">
+                <div class="setting-label">Speed</div>
+                <div class="setting-value">
+                  <input type="range" id="setting-speed" min="50" max="150" value="100">
+                  <span class="setting-num" id="speed-val">1.0x</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -974,10 +1023,46 @@ function updateVoiceSelector() {
     avatar.textContent = "🎤";
     avatar.style.background = "var(--surface3)";
     name.textContent = "No voice selected";
-    hint.textContent = "Click to add a voice";
+    hint.textContent = "Click to select or add a voice";
   }
 }
 
+// ── Voice Picker Dropdown ──
+
+window.toggleVoicePicker = async function(e) {
+  e.stopPropagation();
+  const picker = document.getElementById("voice-picker");
+  if (picker.classList.contains("visible")) {
+    picker.classList.remove("visible");
+    return;
+  }
+  const voices = await getVoices();
+  picker.innerHTML = voices.map(v => `
+    <button class="voice-picker-item" onclick="event.stopPropagation();pickVoice('${v.id}')">
+      <div class="voice-avatar" style="background:${v.color}">${v.name[0].toUpperCase()}</div>
+      <span>${v.name}</span>
+    </button>
+  `).join("") + `
+    <button class="voice-picker-item" onclick="event.stopPropagation();closePickerAndAdd()">
+      + Add new voice
+    </button>`;
+  picker.classList.add("visible");
+};
+
+window.pickVoice = async function(id) {
+  document.getElementById("voice-picker").classList.remove("visible");
+  await window.selectVoice(id);
+};
+
+window.closePickerAndAdd = function() {
+  document.getElementById("voice-picker").classList.remove("visible");
+  openAddVoice();
+};
+
+document.addEventListener("click", () => {
+  document.getElementById("voice-picker")?.classList.remove("visible");
+});
+
 // ── Usage Tracker ──
 
 function updateUsageTracker(addSeconds) {