Add Voice Builder CTA

index.html

@@ -69,7 +69,7 @@
                                         <span class="speaker-item" data-voice="F3">Jessica</span><span class="speaker-separator">, </span>
                                         <span class="speaker-item" data-voice="F4">Olivia</span><span class="speaker-separator">, </span>
                                         <span class="speaker-item" data-voice="F5">Emily</span>
-                                        <span class="speaker-item speaker-item-create" id="createVoiceBtn" style="display: none;">+Create your own voice</span>
+                                        <a class="speaker-clone-link" id="createVoiceBtn" href="https://supertonic.supertone.ai/voice-builder" target="_blank" rel="noopener noreferrer">Clone your own voice ↗</a>
                                     </div>
                                 </div>
                                 <div class="language-info">
@@ -145,22 +145,6 @@
                         </div>
 
                         <div class="demo-output-section">
-                            <!-- Coming Soon Modal -->
-                            <div id="comingSoonModal" class="coming-soon-modal">
-                                <div class="coming-soon-modal-overlay"></div>
-                                <div class="coming-soon-modal-content">
-                                    <div class="coming-soon-modal-header">
-                                        <h3>Coming Soon</h3>
-                                    </div>
-                                    <div class="coming-soon-modal-body">
-                                        <p>Custom voice creation feature will be available soon.</p>
-                                </div>
-                                    <div class="coming-soon-modal-footer">
-                                        <button class="coming-soon-modal-btn" id="comingSoonCloseBtn">OK</button>
-                                    </div>
-                                </div>
-                            </div>
-
                             <!-- Parameters in horizontal layout -->
                             <div class="demo-params-row">
                                 <div class="demo-param">

script.js

@@ -2701,9 +2701,6 @@ document.addEventListener('DOMContentLoaded', () => {
     // Speaker list handler (replaces voice select dropdown)
     const speakerList = document.getElementById('speakerList');
     const speakerItems = speakerList ? speakerList.querySelectorAll('.speaker-item[data-voice]') : [];
-    const createVoiceBtn = document.getElementById('createVoiceBtn');
-    const comingSoonModal = document.getElementById('comingSoonModal');
-    const comingSoonCloseBtn = document.getElementById('comingSoonCloseBtn');
     let voiceSelectDisabled = false;
     
     // Update active speaker item (global function for use in switchVoice)
@@ -2963,29 +2960,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
     
-    // Handle "Create your own voice" button
-    if (createVoiceBtn && comingSoonModal) {
-        createVoiceBtn.addEventListener('click', () => {
-            comingSoonModal.classList.add('show');
-        });
-    }
-    
-    // Close modal handlers
-    if (comingSoonCloseBtn && comingSoonModal) {
-        comingSoonCloseBtn.addEventListener('click', () => {
-            comingSoonModal.classList.remove('show');
-        });
-    }
-    
-    if (comingSoonModal) {
-        const overlay = comingSoonModal.querySelector('.coming-soon-modal-overlay');
-        if (overlay) {
-            overlay.addEventListener('click', () => {
-                comingSoonModal.classList.remove('show');
-            });
-        }
-    }
-
     // Language selection handler
     const languageList = document.getElementById('languageList');
     const languageItems = languageList ? languageList.querySelectorAll('.speaker-item[data-language]') : [];

styles.css

@@ -957,17 +957,34 @@ body {
     margin-right: 0;
 }
 
-.speaker-item-create {
-    color: #ffffff;
-    opacity: 1;
+.speaker-clone-link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 1.8rem;
+    margin-left: 0.45rem;
+    padding: 0.12rem 0.65rem 0.16rem;
+    border: 1px solid rgba(255, 255, 0, 0.45);
+    border-radius: 999px;
+    background: rgba(255, 255, 0, 0.10);
+    color: var(--accent-yellow);
+    font-size: 0.9rem;
+    font-weight: 600;
+    line-height: 1.2;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
 }
 
-.speaker-item-create:hover {
-    opacity: 0.8;
-    text-decoration: underline;
-    text-decoration-style: solid;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 4px;
+.speaker-clone-link:hover {
+    background: rgba(255, 255, 0, 0.16);
+    border-color: rgba(255, 255, 0, 0.75);
+    color: #ffff7a;
+    transform: translateY(-1px);
+}
+
+.speaker-clone-link:focus-visible {
+    outline: 2px solid rgba(255, 255, 0, 0.45);
+    outline-offset: 2px;
 }
 
 /* Speaker Tooltip */
@@ -986,103 +1003,6 @@ body {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* Coming Soon Modal */
-.coming-soon-modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10000;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-}
-
-.coming-soon-modal.show {
-    display: flex;
-    animation: modalFadeIn 0.2s ease-out;
-}
-
-.coming-soon-modal-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
-}
-
-.coming-soon-modal-content {
-    position: relative;
-    background: white;
-    border-radius: 0.75rem;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-    max-width: 400px;
-    width: 100%;
-    overflow: hidden;
-    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.coming-soon-modal-header {
-    padding: 1.5rem 1.5rem 1rem;
-    text-align: center;
-    border-bottom: 1px solid var(--light-darker);
-}
-
-.coming-soon-modal-header h3 {
-    font-family: var(--font-display);
-    font-size: 1.25rem;
-    font-weight: 500;
-    color: var(--text);
-    margin: 0;
-}
-
-.coming-soon-modal-body {
-    padding: 1.5rem;
-    text-align: center;
-}
-
-.coming-soon-modal-body p {
-    font-family: var(--font-body);
-    font-size: 1rem;
-    color: var(--text-secondary);
-    margin: 0;
-    line-height: 1.6;
-}
-
-.coming-soon-modal-footer {
-    padding: 1rem 1.5rem 1.5rem;
-    display: flex;
-    justify-content: center;
-}
-
-.coming-soon-modal-btn {
-    padding: 0.75rem 2rem;
-    border-radius: 0.5rem;
-    font-family: var(--font-body);
-    font-size: 1rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-    outline: none;
-    background: var(--supertone_blue);
-    color: white;
-}
-
-.coming-soon-modal-btn:hover {
-    background: var(--primary-dark);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(34, 124, 255, 0.3);
-}
-
-.coming-soon-modal-btn:active {
-    transform: translateY(0);
-}
-
 .demo-generate-btn {
     display: inline-flex;
     align-items: center;
@@ -1672,27 +1592,6 @@ body.comparison-mode .demo-result-item {
     }
 }
 
-/* Modal Animations */
-@keyframes modalFadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes modalSlideUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px) scale(0.95);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
 /* Language Auto-Detection Toast */
 .language-toast {
     position: fixed;