ResembleAI/Dramabox
129
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>🎭 DramaBox — Expressive TTS with Voice Cloning</title>7 8 <!-- Meta tags for premium look and SEO -->9 <meta name="description" content="Generate highly expressive speech with voice cloning. Powered by LTX-2.3 and Resemble Perth watermarking.">10 <meta name="theme-color" content="#07090e">11 12 <!-- Google Fonts: Outfit and Inter -->13 <link rel="preconnect" href="https://fonts.googleapis.com">14 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>15 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">16 17 <style>18 :root {19 --bg-color: #05060a;20 --panel-bg: rgba(11, 14, 23, 0.75);21 --sidebar-bg: #0b0e17;22 --panel-border: rgba(60, 208, 162, 0.08);23 --text-primary: #f8fafc;24 --text-secondary: #94a3b8;25 --accent-mint: #3cd0a2;26 --accent-mint-hover: #5fe2b9;27 --accent-mint-glow: rgba(60, 208, 162, 0.2);28 --accent-dark-slate: #1e293b;29 --accent-green: #10b981;30 --radius-lg: 18px;31 --radius-md: 12px;32 --radius-sm: 8px;33 --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);34 }35 36 * {37 box-sizing: border-box;38 margin: 0;39 padding: 0;40 }41 42 body {43 background-color: var(--bg-color);44 color: var(--text-primary);45 font-family: 'Inter', sans-serif;46 min-height: 100vh;47 line-height: 1.5;48 overflow: hidden; /* Sidebar controls scrolling */49 position: relative;50 }51 52 /* Ambient glowing circles using Resemble AI branding colors */53 body::before {54 content: '';55 position: absolute;56 top: -10%;57 left: 10%;58 width: 45%;59 height: 45%;60 background: radial-gradient(circle, var(--accent-mint-glow) 0%, transparent 60%);61 z-index: -1;62 filter: blur(80px);63 pointer-events: none;64 opacity: 0.7;65 }66 67 body::after {68 content: '';69 position: absolute;70 bottom: -5%;71 right: 5%;72 width: 40%;73 height: 40%;74 background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 60%);75 z-index: -1;76 filter: blur(80px);77 pointer-events: none;78 opacity: 0.5;79 }80 81 /* Base Page Layout */82 .app-layout {83 display: flex;84 width: 100vw;85 height: 100vh;86 position: relative;87 overflow: hidden;88 }89 90 /* ── Collapsible Sidebar ── */91 .sidebar {92 width: 360px;93 height: 100%;94 background-color: var(--sidebar-bg);95 border-right: 1px solid var(--panel-border);96 display: flex;97 flex-direction: column;98 position: relative;99 z-index: 100;100 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);101 box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);102 flex-shrink: 0;103 }104 105 .sidebar.collapsed {106 margin-left: -360px;107 transform: translateX(-100%);108 }109 110 .sidebar-header {111 padding: 20px 24px;112 display: flex;113 align-items: center;114 justify-content: space-between;115 border-bottom: 1px solid rgba(255, 255, 255, 0.04);116 }117 118 .sidebar-title {119 font-family: 'Outfit', sans-serif;120 font-size: 1.1rem;121 font-weight: 700;122 color: #ffffff;123 letter-spacing: 0.5px;124 display: flex;125 align-items: center;126 gap: 8px;127 }128 129 .sidebar-close-btn {130 background: none;131 border: none;132 color: var(--text-secondary);133 font-size: 1.1rem;134 cursor: pointer;135 transition: var(--transition);136 display: flex;137 align-items: center;138 justify-content: center;139 padding: 4px;140 }141 142 .sidebar-close-btn:hover {143 color: #ffffff;144 transform: scale(1.1);145 }146 147 .sidebar-scrollable {148 flex: 1;149 overflow-y: auto;150 padding: 24px;151 display: flex;152 flex-direction: column;153 gap: 24px;154 }155 156 /* Scrollbar styles for sidebar */157 .sidebar-scrollable::-webkit-scrollbar {158 width: 5px;159 }160 161 .sidebar-scrollable::-webkit-scrollbar-track {162 background: transparent;163 }164 165 .sidebar-scrollable::-webkit-scrollbar-thumb {166 background: rgba(255, 255, 255, 0.05);167 border-radius: 3px;168 }169 170 .sidebar-scrollable::-webkit-scrollbar-thumb:hover {171 background: rgba(255, 255, 255, 0.1);172 }173 174 /* ── Main Workspace Area ── */175 .content-area {176 flex: 1;177 height: 100%;178 display: flex;179 flex-direction: column;180 overflow-y: auto;181 position: relative;182 transition: var(--transition);183 }184 185 /* Main Scrollable wrapper */186 .content-container {187 width: 100%;188 max-width: 840px;189 margin: 0 auto;190 padding: 24px 20px 60px 20px;191 display: flex;192 flex-direction: column;193 gap: 24px;194 }195 196 header {197 display: flex;198 flex-direction: column;199 align-items: center;200 text-align: center;201 padding: 20px 0 10px 0;202 gap: 12px;203 position: relative;204 }205 206 .logo-area {207 display: flex;208 align-items: center;209 gap: 12px;210 }211 212 .logo-emoji {213 font-size: 2.2rem;214 animation: float 3s ease-in-out infinite;215 }216 217 @keyframes float {218 0%, 100% { transform: translateY(0); }219 50% { transform: translateY(-5px); }220 }221 222 h1 {223 font-family: 'Outfit', sans-serif;224 font-size: 2.4rem;225 font-weight: 800;226 background: linear-gradient(135deg, #ffffff 40%, var(--accent-mint) 80%, #76ecd4 100%);227 -webkit-background-clip: text;228 -webkit-text-fill-color: transparent;229 letter-spacing: -0.5px;230 }231 232 .brand-badge {233 font-size: 0.75rem;234 font-weight: 600;235 background: rgba(60, 208, 162, 0.1);236 color: var(--accent-mint);237 border: 1px solid rgba(60, 208, 162, 0.2);238 padding: 3px 8px;239 border-radius: 30px;240 text-transform: uppercase;241 letter-spacing: 0.5px;242 }243 244 .subtitle {245 font-size: 0.95rem;246 color: var(--text-secondary);247 font-weight: 400;248 }249 250 .ltx-banner {251 background: rgba(22, 28, 45, 0.3);252 border: 1px solid var(--panel-border);253 border-left: 3px solid var(--accent-mint);254 border-radius: var(--radius-md);255 padding: 12px 18px;256 color: #cbd5e1;257 font-size: 0.82rem;258 line-height: 1.5;259 text-align: left;260 backdrop-filter: blur(10px);261 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);262 width: 100%;263 }264 265 .ltx-banner a {266 color: var(--accent-mint);267 font-weight: 600;268 text-decoration: none;269 transition: var(--transition);270 }271 272 .ltx-banner a:hover {273 color: #ffffff;274 text-decoration: underline;275 }276 277 /* Sliding Toggle Controls Button */278 .btn-toggle-sidebar {279 background: rgba(255, 255, 255, 0.03);280 border: 1px solid var(--panel-border);281 color: #ffffff;282 font-size: 0.85rem;283 font-weight: 600;284 padding: 10px 16px;285 border-radius: 30px;286 cursor: pointer;287 display: flex;288 align-items: center;289 gap: 8px;290 transition: var(--transition);291 outline: none;292 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);293 }294 295 .btn-toggle-sidebar:hover {296 background: rgba(60, 208, 162, 0.05);297 border-color: var(--accent-mint);298 transform: translateY(-1px);299 }300 301 /* ── Modern Script Panels (Main Area) ── */302 .main-panel {303 background: var(--panel-bg);304 border: 1px solid var(--panel-border);305 border-radius: var(--radius-lg);306 padding: 24px;307 backdrop-filter: blur(20px);308 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);309 display: flex;310 flex-direction: column;311 gap: 20px;312 transition: var(--transition);313 }314 315 .form-group {316 display: flex;317 flex-direction: column;318 gap: 8px;319 }320 321 .form-label {322 font-size: 0.78rem;323 font-weight: 700;324 text-transform: uppercase;325 letter-spacing: 0.8px;326 color: var(--text-secondary);327 display: flex;328 justify-content: space-between;329 align-items: center;330 }331 332 .label-badge {333 font-size: 0.75rem;334 color: var(--accent-mint);335 text-transform: none;336 font-weight: 400;337 letter-spacing: 0;338 }339 340 .textarea-custom {341 width: 100%;342 background: rgba(5, 7, 12, 0.8);343 border: 1px solid var(--panel-border);344 border-radius: var(--radius-md);345 padding: 16px;346 color: var(--text-primary);347 font-family: 'Inter', sans-serif;348 font-size: 1rem;349 line-height: 1.6;350 resize: vertical;351 min-height: 140px;352 outline: none;353 transition: var(--transition);354 }355 356 .textarea-custom:focus {357 border-color: var(--accent-mint);358 box-shadow: 0 0 15px var(--accent-mint-glow);359 background: rgba(5, 7, 12, 0.95);360 }361 362 /* Reference Uploader Inside Sidebar */363 .upload-zone {364 border: 2px dashed rgba(60, 208, 162, 0.2);365 border-radius: var(--radius-md);366 padding: 18px;367 text-align: center;368 cursor: pointer;369 background: rgba(60, 208, 162, 0.01);370 display: flex;371 flex-direction: column;372 align-items: center;373 gap: 6px;374 transition: var(--transition);375 min-height: 90px;376 justify-content: center;377 }378 379 .upload-zone:hover, .upload-zone.dragover {380 border-color: var(--accent-mint);381 background: rgba(60, 208, 162, 0.04);382 }383 384 .upload-icon {385 font-size: 1.6rem;386 color: var(--accent-mint);387 transition: var(--transition);388 }389 390 .upload-text {391 font-size: 0.8rem;392 color: var(--text-secondary);393 }394 395 .upload-text strong {396 color: #ffffff;397 font-weight: 500;398 }399 400 .hidden-input {401 display: none !important;402 }403 404 .file-capsule {405 display: flex;406 align-items: center;407 justify-content: space-between;408 background: rgba(60, 208, 162, 0.06);409 border: 1px solid rgba(60, 208, 162, 0.2);410 padding: 10px 14px;411 border-radius: var(--radius-md);412 width: 100%;413 }414 415 .file-info {416 display: flex;417 align-items: center;418 gap: 10px;419 font-size: 0.82rem;420 font-weight: 500;421 overflow: hidden;422 white-space: nowrap;423 text-overflow: ellipsis;424 }425 426 .btn-clear {427 background: none;428 border: none;429 color: var(--text-secondary);430 font-size: 0.95rem;431 cursor: pointer;432 transition: var(--transition);433 padding: 2px;434 display: flex;435 align-items: center;436 justify-content: center;437 }438 439 .btn-clear:hover {440 color: #ffffff;441 transform: scale(1.1);442 }443 444 /* Modernized Sidebar Dashboard Items */445 .settings-block {446 display: flex;447 flex-direction: column;448 gap: 16px;449 background: rgba(255, 255, 255, 0.01);450 border: 1px solid rgba(255, 255, 255, 0.03);451 padding: 16px;452 border-radius: var(--radius-md);453 }454 455 .settings-block-title {456 font-family: 'Outfit', sans-serif;457 font-size: 0.85rem;458 font-weight: 700;459 letter-spacing: 0.5px;460 text-transform: uppercase;461 color: #ffffff;462 border-bottom: 1px solid rgba(255, 255, 255, 0.03);463 padding-bottom: 8px;464 margin-bottom: 4px;465 }466 467 .slider-group {468 display: flex;469 flex-direction: column;470 gap: 6px;471 }472 473 .slider-meta {474 display: flex;475 justify-content: space-between;476 font-size: 0.8rem;477 color: var(--text-secondary);478 font-weight: 500;479 }480 481 .slider-value {482 color: var(--accent-mint);483 font-weight: 700;484 font-family: monospace;485 }486 487 input[type="range"] {488 -webkit-appearance: none;489 width: 100%;490 height: 4px;491 background: rgba(255, 255, 255, 0.06);492 border-radius: 2px;493 outline: none;494 cursor: pointer;495 }496 497 input[type="range"]::-webkit-slider-thumb {498 -webkit-appearance: none;499 width: 14px;500 height: 14px;501 border-radius: 50%;502 background: var(--accent-mint);503 box-shadow: 0 0 8px var(--accent-mint-glow);504 transition: var(--transition);505 }506 507 input[type="range"]::-webkit-slider-thumb:hover {508 transform: scale(1.2);509 background: #ffffff;510 }511 512 /* Seed Elements */513 .seed-row {514 display: flex;515 gap: 8px;516 align-items: center;517 }518 519 .input-seed {520 flex: 1;521 background: rgba(5, 7, 12, 0.8);522 border: 1px solid rgba(255, 255, 255, 0.04);523 border-radius: var(--radius-sm);524 padding: 8px 12px;525 color: var(--text-primary);526 font-family: monospace;527 outline: none;528 font-size: 0.85rem;529 transition: var(--transition);530 height: 38px;531 }532 533 .input-seed:focus {534 border-color: var(--accent-mint);535 }536 537 .btn-seed-random {538 background: rgba(255, 255, 255, 0.03);539 border: 1px solid rgba(255, 255, 255, 0.04);540 border-radius: var(--radius-sm);541 color: var(--text-primary);542 height: 38px;543 width: 38px;544 display: flex;545 align-items: center;546 justify-content: center;547 cursor: pointer;548 transition: var(--transition);549 font-size: 0.9rem;550 }551 552 .btn-seed-random:hover {553 background: rgba(60, 208, 162, 0.05);554 border-color: var(--accent-mint);555 }556 557 /* Glowing Resemble Green Button */558 .btn-generate {559 background: linear-gradient(135deg, var(--accent-mint) 0%, #2ac596 100%);560 border: none;561 border-radius: var(--radius-md);562 color: #07090e;563 font-family: 'Outfit', sans-serif;564 font-size: 1.05rem;565 font-weight: 800;566 padding: 14px;567 cursor: pointer;568 transition: var(--transition);569 display: flex;570 align-items: center;571 justify-content: center;572 gap: 10px;573 box-shadow: 0 6px 20px var(--accent-mint-glow);574 min-height: 48px;575 letter-spacing: 0.3px;576 }577 578 .btn-generate:hover:not(:disabled) {579 transform: translateY(-1.5px);580 box-shadow: 0 10px 25px rgba(60, 208, 162, 0.4);581 background: linear-gradient(135deg, var(--accent-mint-hover) 0%, var(--accent-mint) 100%);582 }583 584 .btn-generate:active:not(:disabled) {585 transform: translateY(0);586 }587 588 .btn-generate:disabled {589 background: #161a24;590 color: #3b4255;591 cursor: not-allowed;592 box-shadow: none;593 }594 595 /* ── Output Lounge (Visual Player Deck) ── */596 .output-wrapper {597 background: rgba(5, 7, 12, 0.5);598 border: 1px solid var(--panel-border);599 border-radius: var(--radius-md);600 padding: 20px;601 display: flex;602 flex-direction: column;603 align-items: center;604 justify-content: center;605 min-height: 140px;606 position: relative;607 }608 609 .empty-placeholder {610 color: var(--text-secondary);611 text-align: center;612 display: flex;613 flex-direction: column;614 align-items: center;615 gap: 10px;616 }617 618 .empty-icon {619 font-size: 2.2rem;620 opacity: 0.4;621 color: var(--accent-mint);622 }623 624 .empty-text {625 font-size: 0.85rem;626 }627 628 /* Glowing Custom Player Layout */629 .audio-player {630 width: 100%;631 display: flex;632 flex-direction: column;633 gap: 14px;634 }635 636 .visualizer-box {637 width: 100%;638 height: 44px;639 background: linear-gradient(90deg, rgba(60, 208, 162, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);640 border-radius: var(--radius-sm);641 display: flex;642 align-items: center;643 justify-content: center;644 border: 1px solid rgba(60, 208, 162, 0.04);645 overflow: hidden;646 }647 648 .visualizer-wave {649 display: flex;650 align-items: center;651 gap: 3px;652 height: 100%;653 }654 655 .wave-bar {656 width: 3px;657 height: 5px;658 background: var(--accent-mint);659 border-radius: 1px;660 transition: var(--transition);661 }662 663 .audio-player.playing .wave-bar {664 animation: playWave 1.2s infinite ease-in-out alternate;665 }666 667 @keyframes playWave {668 0% { height: 5px; }669 100% { height: 28px; }670 }671 672 .wave-bar:nth-child(2n) { background: #5fe2b9; animation-delay: 0.15s; }673 .wave-bar:nth-child(3n) { animation-delay: 0.3s; }674 .wave-bar:nth-child(4n) { animation-delay: 0.45s; }675 .wave-bar:nth-child(5n) { background: var(--accent-mint); animation-delay: 0.6s; }676 677 .player-row {678 display: flex;679 align-items: center;680 gap: 12px;681 width: 100%;682 }683 684 .btn-play {685 background: #ffffff;686 border: none;687 color: var(--bg-color);688 width: 40px;689 height: 40px;690 border-radius: 50%;691 display: flex;692 align-items: center;693 justify-content: center;694 font-size: 1rem;695 cursor: pointer;696 transition: var(--transition);697 box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);698 flex-shrink: 0;699 }700 701 .btn-play:hover {702 transform: scale(1.05);703 box-shadow: 0 6px 18px rgba(255, 255, 255, 0.3);704 }705 706 .progress-box {707 flex: 1;708 display: flex;709 align-items: center;710 gap: 8px;711 }712 713 .time-lbl {714 font-size: 0.72rem;715 color: var(--text-secondary);716 font-family: monospace;717 min-width: 32px;718 }719 720 /* Secondary progress slider bar track styling */721 .progress-box input[type="range"]::-webkit-slider-thumb {722 background: #ffffff;723 box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);724 }725 726 .deck-footer {727 display: flex;728 align-items: center;729 justify-content: space-between;730 width: 100%;731 border-top: 1px solid rgba(255, 255, 255, 0.04);732 padding-top: 12px;733 gap: 12px;734 flex-wrap: wrap;735 }736 737 .vol-slider {738 display: flex;739 align-items: center;740 gap: 6px;741 max-width: 90px;742 flex-shrink: 0;743 }744 745 .vol-icon {746 font-size: 0.8rem;747 color: var(--text-secondary);748 }749 750 .vol-slider input[type="range"]::-webkit-slider-thumb {751 background: var(--text-secondary);752 }753 754 .speed-deck {755 display: flex;756 align-items: center;757 gap: 4px;758 }759 760 .btn-speed {761 background: rgba(255, 255, 255, 0.02);762 border: 1px solid rgba(255, 255, 255, 0.04);763 border-radius: 6px;764 color: var(--text-secondary);765 font-size: 0.68rem;766 font-weight: 600;767 padding: 3px 6px;768 cursor: pointer;769 transition: var(--transition);770 }771 772 .btn-speed.active, .btn-speed:hover {773 background: rgba(60, 208, 162, 0.06);774 color: var(--accent-mint);775 border-color: rgba(60, 208, 162, 0.2);776 }777 778 .btn-download-wav {779 background: rgba(255, 255, 255, 0.04);780 border: 1px solid var(--panel-border);781 border-radius: var(--radius-sm);782 color: #ffffff;783 font-size: 0.78rem;784 font-weight: 600;785 padding: 6px 12px;786 text-decoration: none;787 display: flex;788 align-items: center;789 gap: 6px;790 transition: var(--transition);791 }792 793 .btn-download-wav:hover {794 background: var(--accent-mint);795 color: #07090e;796 border-color: var(--accent-mint);797 transform: translateY(-1px);798 }799 800 @media (max-width: 480px) {801 .deck-footer {802 flex-direction: column;803 align-items: stretch;804 gap: 12px;805 }806 .vol-slider {807 max-width: 100%;808 }809 .speed-deck {810 justify-content: space-between;811 }812 .btn-download-wav {813 justify-content: center;814 }815 }816 817 /* Synchronizer Status Alert */818 .status-alert {819 display: flex;820 align-items: center;821 gap: 10px;822 font-size: 0.82rem;823 font-weight: 500;824 padding: 10px 14px;825 border-radius: var(--radius-md);826 border: 1px solid transparent;827 display: none;828 margin-bottom: 12px;829 width: 100%;830 }831 832 .status-alert.success {833 background: rgba(16, 185, 129, 0.04);834 border-color: rgba(16, 185, 129, 0.15);835 color: var(--accent-green);836 }837 838 .status-alert.info {839 background: rgba(60, 208, 162, 0.04);840 border-color: rgba(60, 208, 162, 0.15);841 color: #8bead0;842 }843 844 .status-alert.error {845 background: rgba(239, 68, 68, 0.04);846 border-color: rgba(239, 68, 68, 0.15);847 color: #f87171;848 }849 850 .alert-spinner {851 width: 14px;852 height: 14px;853 border: 2px solid rgba(255, 255, 255, 0.1);854 border-top: 2px solid currentColor;855 border-radius: 50%;856 animation: spin 0.8s linear infinite;857 }858 859 @keyframes spin {860 0% { transform: rotate(0deg); }861 100% { transform: rotate(360deg); }862 }863 864 /* Demo deck scrollable inside sidebar */865 .demo-capsules {866 display: flex;867 flex-direction: column;868 gap: 8px;869 }870 871 .demo-pill {872 background: rgba(255, 255, 255, 0.01);873 border: 1px solid rgba(255, 255, 255, 0.04);874 border-radius: var(--radius-md);875 padding: 10px 14px;876 cursor: pointer;877 transition: var(--transition);878 display: flex;879 justify-content: space-between;880 align-items: center;881 gap: 12px;882 text-align: left;883 }884 885 .demo-pill:hover {886 background: rgba(60, 208, 162, 0.02);887 border-color: rgba(60, 208, 162, 0.15);888 transform: translateX(2px);889 }890 891 .demo-pill.active {892 border-color: var(--accent-mint);893 background: rgba(60, 208, 162, 0.03);894 }895 896 .demo-pill-title {897 font-size: 0.82rem;898 font-weight: 600;899 color: #ffffff;900 white-space: nowrap;901 overflow: hidden;902 text-overflow: ellipsis;903 max-width: 170px;904 }905 906 .pill-labels {907 display: flex;908 gap: 4px;909 flex-shrink: 0;910 }911 912 .pill-badge {913 font-size: 0.65rem;914 font-weight: 700;915 padding: 1px 5px;916 border-radius: 4px;917 text-transform: uppercase;918 }919 920 .pill-badge-male { background: rgba(59, 130, 246, 0.08); color: #60a5fa; }921 .pill-badge-female { background: rgba(236, 72, 153, 0.08); color: #f472b6; }922 .pill-badge-long { background: rgba(139, 92, 246, 0.08); color: #c084fc; }923 924 /* Guide container inside sidebar */925 .guide-header {926 font-size: 0.82rem;927 font-weight: 700;928 color: #ffffff;929 cursor: pointer;930 display: flex;931 justify-content: space-between;932 align-items: center;933 user-select: none;934 text-transform: uppercase;935 letter-spacing: 0.5px;936 border-bottom: 1px solid rgba(255, 255, 255, 0.03);937 padding-bottom: 8px;938 margin-bottom: 4px;939 }940 941 .guide-body {942 max-height: 0;943 overflow: hidden;944 transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);945 font-size: 0.78rem;946 color: var(--text-secondary);947 display: flex;948 flex-direction: column;949 gap: 12px;950 line-height: 1.55;951 }952 953 .guide-body.open {954 max-height: 380px;955 margin-top: 12px;956 }957 958 .guide-block-title {959 color: #ffffff;960 font-weight: 600;961 margin-bottom: 2px;962 font-size: 0.78rem;963 }964 965 .guide-list {966 padding-left: 14px;967 display: flex;968 flex-direction: column;969 gap: 3px;970 }971 972 /* ── Sidebar backdrop overlay (mobile and smaller desktops) ── */973 .sidebar-overlay {974 position: fixed;975 top: 0;976 left: 0;977 width: 100vw;978 height: 100vh;979 background: rgba(0, 0, 0, 0.5);980 backdrop-filter: blur(4px);981 z-index: 90;982 opacity: 0;983 pointer-events: none;984 transition: opacity 0.3s ease;985 }986 987 .sidebar-overlay.active {988 opacity: 1;989 pointer-events: auto;990 }991 992 footer {993 margin-top: auto;994 text-align: center;995 padding: 30px 20px;996 font-size: 0.75rem;997 color: var(--text-secondary);998 border-top: 1px solid rgba(255, 255, 255, 0.03);999 }1000 1001 /* ── Mobile and Tablet Adaptations ── */1002 @media (max-width: 992px) {1003 .sidebar {1004 position: fixed;1005 top: 0;1006 left: 0;1007 height: 100%;1008 z-index: 1000;1009 }1010 .sidebar.collapsed {1011 margin-left: 0;1012 transform: translateX(-100%);1013 }1014 h1 {1015 font-size: 2rem;1016 }1017 .logo-emoji {1018 font-size: 1.8rem;1019 }1020 }1021 1022 @media (min-width: 993px) {1023 .sidebar-close-btn {1024 display: none; /* Only show toggle trigger on desktop */1025 }1026 }1027 </style>1028</head>1029<body>1030 1031 <div class="app-layout">1032 1033 <!-- Left collapsing sidebar with configuration parameters & demos -->1034 <aside id="app-sidebar" class="sidebar">1035 <div class="sidebar-header">1036 <span class="sidebar-title">🎛️ Control Deck</span>1037 <button id="btn-close-sidebar" class="sidebar-close-btn" title="Close Panel">✕</button>1038 </div>1039 1040 <div class="sidebar-scrollable">1041 <!-- Reference Audio Uploader -->1042 <div class="form-group">1043 <span class="form-label">Voice Reference (Optional)</span>1044 <div id="dropzone" class="upload-zone">1045 <span class="upload-icon">📤</span>1046 <div class="upload-text">1047 <strong>Drop file</strong> or click to choose<br>1048 <span>WAV, MP3, etc. (10s+)</span>1049 </div>1050 </div>1051 <input type="file" id="audio-file" class="hidden-input" accept="audio/*">1052 </div>1053 1054 <!-- Settings Dashboard Parameters -->1055 <div class="settings-block">1056 <div class="settings-block-title">Synthesis Parameters</div>1057 1058 <!-- CFG Scale -->1059 <div class="slider-group">1060 <div class="slider-meta">1061 <span>CFG Scale</span>1062 <span class="slider-value" id="val-cfg">2.5</span>1063 </div>1064 <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">1065 </div>1066 1067 <!-- STG Scale -->1068 <div class="slider-group">1069 <div class="slider-meta">1070 <span>STG Scale</span>1071 <span class="slider-value" id="val-stg">1.5</span>1072 </div>1073 <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">1074 </div>1075 1076 <!-- Duration Scale Factor -->1077 <div class="slider-group">1078 <div class="slider-meta">1079 <span>Breathing Factor</span>1080 <span class="slider-value" id="val-dur">1.10</span>1081 </div>1082 <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">1083 </div>1084 1085 <!-- Target Generation Time -->1086 <div class="slider-group">1087 <div class="slider-meta">1088 <span>Fixed duration (s) - 0 = Auto</span>1089 <span class="slider-value" id="val-gendur">0.0</span>1090 </div>1091 <input type="range" id="gendur" min="0.0" max="60.0" step="1.0" value="0.0">1092 </div>1093 1094 <!-- Reference Window -->1095 <div class="slider-group">1096 <div class="slider-meta">1097 <span>Reference Window (s)</span>1098 <span class="slider-value" id="val-refdur">10.0</span>1099 </div>1100 <input type="range" id="refdur" min="3.0" max="30.0" step="1.0" value="10.0">1101 </div>1102 1103 <!-- Seed Controls -->1104 <div class="form-group">1105 <span class="form-label">Seed Value</span>1106 <div class="seed-row">1107 <input type="number" id="seed" class="input-seed" value="42">1108 <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button>1109 </div>1110 </div>1111 </div>1112 1113 <!-- Quick Examples Selector -->1114 <div class="form-group">1115 <span class="form-label">Quick Demos</span>1116 <div class="demo-capsules" id="examples-container">1117 <!-- Loaded dynamically -->1118 </div>1119 </div>1120 1121 <!-- Accordion Guide -->1122 <div class="form-group">1123 <div class="guide-header" id="guide-toggle">1124 <span>📖 Prompt Guide</span>1125 <span class="accordion-icon" id="guide-arrow">▼</span>1126 </div>1127 1128 <div class="guide-body" id="guide-body">1129 <div>1130 <div class="guide-block-title">Format Structure</div>1131 <p><code><description>, "<dialogue>" <movement/breath> "<more dialogue>"</code></p>1132 </div>1133 <div>1134 <div class="guide-block-title">Inside Quotes (Spoken)</div>1135 <ul class="guide-list">1136 <li>Dialogue transcript: <code>"We are in position."</code></li>1137 <li>Phonetic expressions: <code>"Hahaha"</code>, <code>"Mmmm"</code>, <code>"Ugh"</code>, <code>"Argh"</code></li>1138 </ul>1139 </div>1140 <div>1141 <div class="guide-block-title">Outside Quotes (Pacing)</div>1142 <ul class="guide-list">1143 <li>Action details: <code>She sighs deeply.</code>, <code>A long pause.</code></li>1144 <li>Tonal delivery: <code>His voice cracks.</code>, <code>He clears his throat.</code></li>1145 </ul>1146 </div>1147 </div>1148 </div>1149 </div>1150 </aside>1151 1152 <!-- Sidebar backdrop overlay (mobile and smaller screen viewports) -->1153 <div id="sidebar-overlay" class="sidebar-overlay"></div>1154 1155 <!-- Main workspace containing editing space and glowing outputs -->1156 <div class="content-area">1157 <div class="content-container">1158 <header>1159 <div class="logo-area">1160 <span class="logo-emoji">🎭</span>1161 <h1>DramaBox</h1>1162 <span class="brand-badge">Resemble.AI</span>1163 </div>1164 <div class="subtitle">Expressive TTS with Voice Cloning</div>1165 1166 <!-- Sliding Collapsible Trigger -->1167 <button id="btn-toggle-sidebar" class="btn-toggle-sidebar" title="Toggle Dashboard Panel">1168 <span class="toggle-icon">🎛️</span>1169 <span class="toggle-text">Show Control Deck & Demos</span>1170 </button>1171 </header>1172 1173 <!-- State Alerts (Connecting / Queuing states) -->1174 <div id="status-box" class="status-alert">1175 <div class="alert-spinner"></div>1176 <span id="status-text">Connecting to DramaBox API...</span>1177 </div>1178 1179 <main class="main-panel">1180 <!-- Script Prompt Input -->1181 <div class="form-group">1182 <div class="form-label">1183 <span>Script Prompt</span>1184 <span class="label-badge">Double quotes for dialogue, standard text for style</span>1185 </div>1186 <textarea 1187 id="scene-prompt" 1188 class="textarea-custom" 1189 placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'1190 ></textarea>1191 </div>1192 1193 <!-- Synthesize Trigger -->1194 <button id="btn-generate" class="btn-generate">1195 <span>⚡</span> Generate Speech1196 </button>1197 1198 <!-- Output Deck -->1199 <div class="output-wrapper">1200 <audio id="audio-element" style="display:none;"></audio>