design like this

index.html

@@ -13,7 +13,9 @@
         <style>
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            color: #ffffff;
+            min-height: 100vh;
         }
         .wave-bg {
             position: fixed;
@@ -22,185 +24,271 @@
             width: 100%;
             height: 100%;
             z-index: -1;
-            opacity: 0.5;
+            opacity: 0.3;
         }
         .glass-card {
-            background: rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border-radius: 16px;
-            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 24px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         .recording {
-            animation: pulse 1.5s infinite;
+            animation: pulse 2s infinite;
         }
         @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
-            70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
+            0% { 
+                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6),
+                           0 0 0 0 rgba(139, 92, 246, 0.4); 
+            }
+            50% { 
+                box-shadow: 0 0 0 20px rgba(99, 102, 241, 0.2),
+                           0 0 0 40px rgba(139, 92, 246, 0.1); 
+            }
+            100% { 
+                box-shadow: 0 0 0 40px rgba(99, 102, 241, 0),
+                           0 0 0 60px rgba(139, 92, 246, 0); 
+            }
         }
         .btn-gradient {
-            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
+            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
             color: white;
-            transition: all 0.3s ease;
+            transition: all 0.4s ease;
+            border: none;
+            position: relative;
+            overflow: hidden;
         }
         .btn-gradient:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
+        }
+        .btn-gradient::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+        .btn-gradient:hover::before {
+            left: 100%;
+        }
+        .feature-card {
+            transition: all 0.4s ease;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         .feature-card:hover {
-            transform: translateY(-5px);
-            transition: all 0.3s ease;
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            background: rgba(255, 255, 255, 0.08);
+            border: 1px solid rgba(99, 102, 241, 0.3);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 30%, #EC4899 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .neon-glow {
+            text-shadow: 0 0 10px rgba(99, 102, 241, 0.5),
+                        0 0 20px rgba(99, 102, 241, 0.3),
+                        0 0 40px rgba(99, 102, 241, 0.1);
+        }
+        .audio-wave {
+            background: linear-gradient(90deg, 
+                #6366F1 0%, 
+                #8B5CF6 25%, 
+                #EC4899 50%, 
+                #F59E0B 75%, 
+                #10B981 100%);
+            height: 4px;
+            border-radius: 2px;
+            animation: wave 2s ease-in-out infinite;
+        }
+        @keyframes wave {
+            0%, 100% { transform: scaleX(0.8); opacity: 0.7; }
+            50% { transform: scaleX(1); opacity: 1; }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
         }
     </style>
 </head>
 <body class="bg-gray-50">
     <div id="wave-bg" class="wave-bg"></div>
-    <div class="min-h-screen flex flex-col items-center justify-start px-4 pt-8">
-<header class="w-full max-w-4xl mx-auto py-6">
-<div class="flex flex-col items-center">
-                <div class="w-20 h-20 bg-indigo-500 rounded-full flex items-center justify-center shadow-lg mb-6">
-                    <i data-feather="mic" class="w-10 h-10 text-white"></i>
+    <div class="min-h-screen flex flex-col items-center justify-start px-4 pt-12">
+        <header class="w-full max-w-6xl mx-auto py-8">
+            <div class="flex flex-col items-center">
+                <div class="w-24 h-24 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-2xl mb-8 floating">
+                    <i data-feather="mic" class="w-12 h-12 text-white"></i>
                 </div>
-                <h1 class="text-5xl font-bold text-gray-800 mb-3 bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">VoiceCloneAI</h1>
-                <p class="text-xl text-gray-600 max-w-lg text-center">Transform your voice into a digital masterpiece with our cutting-edge AI technology</p>
-</div>
+                <h1 class="text-6xl font-black mb-4 gradient-text neon-glow">VoiceCloneAI</h1>
+                <p class="text-2xl text-gray-300 max-w-2xl text-center leading-relaxed">Transform your voice into a digital masterpiece with cutting-edge AI technology</p>
+                <div class="mt-6 audio-wave w-32"></div>
+            </div>
         </header>
-        <main class="w-full max-w-4xl glass-card p-8 mb-8">
-<div class="grid md:grid-cols-2 gap-8">
-                <div class="space-y-6">
-                    <h2 class="text-2xl font-semibold text-gray-800">Create Your Voice Clone</h2>
-                    <p class="text-gray-600">Record or upload samples to train your unique voice model</p>
-<div class="flex flex-col items-center space-y-4">
+        <main class="w-full max-w-6xl glass-card p-12 mb-12">
+            <div class="grid lg:grid-cols-2 gap-12">
+                <div class="space-y-8">
+                    <div>
+                        <h2 class="text-3xl font-bold gradient-text mb-3">Create Your Voice Clone</h2>
+                        <p class="text-gray-300 text-lg">Record or upload samples to train your unique voice model</p>
+                    </div>
+                    
+                    <div class="flex flex-col items-center space-y-6">
                         <div class="relative">
-                            <div id="recordBtn" class="w-24 h-24 rounded-full bg-indigo-500 flex items-center justify-center cursor-pointer hover:bg-indigo-600 transition">
-                                <i data-feather="mic" class="w-10 h-10 text-white"></i>
+                            <div id="recordBtn" class="w-28 h-28 rounded-full bg-gradient-to-br from-indigo-500 to-pink-500 flex items-center justify-center cursor-pointer shadow-2xl hover:shadow-3xl transition-all duration-300">
+                                <i data-feather="mic" class="w-12 h-12 text-white"></i>
                             </div>
-                            <div class="absolute -bottom-6 left-0 right-0 text-center text-sm text-gray-500" id="recordingStatus">Click to record</div>
+                            <div class="absolute -bottom-8 left-0 right-0 text-center text-sm text-gray-400" id="recordingStatus">Click to record</div>
                         </div>
                         
-                        <div class="w-full h-4 bg-gray-200 rounded-full overflow-hidden">
-                            <div id="soundWave" class="h-full bg-indigo-400 rounded-full w-0"></div>
+                        <div class="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
+                            <div id="soundWave" class="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-full w-0 transition-all duration-100"></div>
                         </div>
 
                         <div class="relative w-full text-center">
-                            <span class="text-gray-500 text-sm">or</span>
+                            <span class="text-gray-400 text-lg font-medium">or</span>
                         </div>
 
                         <div class="w-full">
-                            <label class="flex flex-col items-center px-4 py-6 bg-white rounded-lg border border-dashed border-gray-300 cursor-pointer hover:bg-gray-50">
-                                <div class="flex items-center space-x-2 text-indigo-500">
-                                    <i data-feather="upload" class="w-5 h-5"></i>
-                                    <span>Upload Voice File</span>
+                            <label class="flex flex-col items-center px-6 py-8 bg-gray-800 rounded-xl border-2 border-dashed border-gray-600 cursor-pointer hover:border-indigo-400 transition-all duration-300">
+                                <div class="flex items-center space-x-3 text-indigo-400">
+                                    <i data-feather="upload" class="w-6 h-6"></i>
+                                    <span class="text-lg font-medium">Upload Voice File</span>
                                 </div>
                                 <input type="file" id="voiceUpload" accept="audio/*" class="hidden" />
-                                <p class="mt-1 text-xs text-gray-500">MP3, WAV, OGG (max 50MB)</p>
+                                <p class="mt-2 text-sm text-gray-400">MP3, WAV, OGG (max 50MB)</p>
                             </label>
                         </div>
                     </div>
-<div class="flex items-center space-x-2 text-gray-500">
-                        <i data-feather="info" class="w-4 h-4"></i>
-                        <span class="text-sm">Find a quiet place and speak naturally</span>
+                    
+                    <div class="flex items-center space-x-3 text-gray-400 bg-gray-800 p-4 rounded-xl">
+                        <i data-feather="info" class="w-5 h-5 text-indigo-400"></i>
+                        <span class="text-sm">Find a quiet place and speak naturally for best results</span>
                     </div>
                 </div>
                 
-                <div class="space-y-6">
-                    <h2 class="text-2xl font-semibold text-gray-800">Your Transcription</h2>
-                    <p class="text-gray-600">See your text appear in real-time</p>
-                    <div class="bg-gray-100 rounded-lg p-6 min-h-40 flex flex-col items-center justify-center">
-                    <div id="voicePreview" class="text-center text-gray-500 w-full">
-                        <i data-feather="user" class="w-8 h-8 mx-auto mb-2"></i>
-                        <p class="mb-4">Your voice clone will be generated here</p>
-                        <div class="w-full mb-4">
-                            <textarea id="textToGenerate" class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Enter text to generate with your voice clone"></textarea>
-                        </div>
-                        <div id="voiceParams" class="w-full space-y-3 hidden">
-<div>
-                                    <label class="block text-sm text-gray-600 mb-1">Voice Similarity</label>
-                                    <input type="range" min="0" max="100" value="75" class="w-full accent-indigo-500">
+                <div class="space-y-8">
+                    <div>
+                        <h2 class="text-3xl font-bold gradient-text mb-3">Your Voice Clone</h2>
+                        <p class="text-gray-300 text-lg">Preview and customize your generated voice</p>
+                    </div>
+                    
+                    <div class="bg-gray-800 rounded-xl p-8 min-h-48 flex flex-col items-center justify-center border border-gray-700">
+                        <div id="voicePreview" class="text-center w-full">
+                            <div class="flex flex-col items-center justify-center">
+                                <div class="w-20 h-20 bg-gradient-to-br from-gray-600 to-gray-700 rounded-full flex items-center justify-center mb-4">
+                                    <i data-feather="user" class="w-8 h-8 text-gray-400"></i>
+                                </div>
+                                <p class="text-gray-400 mb-6">Your voice clone will be generated here</p>
+                            </div>
+                            
+                            <div class="w-full mb-6">
+                                <textarea id="textToGenerate" class="w-full p-4 bg-gray-700 border border-gray-600 rounded-xl resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-white placeholder-gray-400" rows="3" placeholder="Enter text to generate with your voice clone"></textarea>
+                            </div>
+                            
+                            <div id="voiceParams" class="w-full space-y-4 hidden">
+                                <div>
+                                    <label class="block text-sm text-gray-300 mb-2">Voice Similarity</label>
+                                    <input type="range" min="0" max="100" value="85" class="w-full accent-indigo-500 bg-gray-600 rounded-lg">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-600 mb-1">Pitch</label>
-                                    <input type="range" min="0" max="100" value="50" class="w-full accent-indigo-500">
+                                    <label class="block text-sm text-gray-300 mb-2">Pitch & Emotion</label>
+                                    <input type="range" min="0" max="100" value="60" class="w-full accent-purple-500 bg-gray-600 rounded-lg">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-600 mb-1">Speed</label>
-                                    <input type="range" min="50" max="150" value="100" class="w-full accent-indigo-500">
+                                    <label class="block text-sm text-gray-300 mb-2">Speed & Tone</label>
+                                    <input type="range" min="50" max="150" value="100" class="w-full accent-pink-500 bg-gray-600 rounded-lg">
                                 </div>
                             </div>
                         </div>
-</div>
                     </div>
+                    
                     <div class="flex flex-wrap gap-4">
-                        <button id="trainBtn" class="px-6 py-3 btn-gradient rounded-lg flex items-center space-x-2 shadow-md">
-<i data-feather="cpu" class="w-4 h-4"></i>
+                        <button id="trainBtn" class="px-8 py-4 btn-gradient rounded-xl flex items-center space-x-3 text-lg font-medium">
+                            <i data-feather="cpu" class="w-5 h-5"></i>
                             <span>Train Model</span>
                         </button>
-                        <button id="generateBtn" class="px-6 py-3 btn-gradient rounded-lg flex items-center space-x-2 shadow-md" style="background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);">
-<i data-feather="play" class="w-4 h-4"></i>
+                        <button id="generateBtn" class="px-8 py-4 btn-gradient rounded-xl flex items-center space-x-3 text-lg font-medium" style="background: linear-gradient(135deg, #10B981 0%, #3B82F6 50%, #6366F1 100%);">
+                            <i data-feather="play" class="w-5 h-5"></i>
                             <span>Generate Voice</span>
                         </button>
-                        <button id="downloadBtn" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition flex items-center space-x-2">
-                            <i data-feather="download" class="w-4 h-4"></i>
+                        <button id="downloadBtn" class="px-8 py-4 border border-gray-600 text-gray-300 rounded-xl hover:bg-gray-700 hover:border-indigo-400 transition-all duration-300 flex items-center space-x-3 text-lg font-medium">
+                            <i data-feather="download" class="w-5 h-5"></i>
                             <span>Download</span>
                         </button>
                     </div>
-</div>
+                </div>
             </div>
         </main>
-        <section class="w-full max-w-4xl glass-card p-8 mb-8">
-<h2 class="text-2xl font-semibold text-gray-800 mb-6">Advanced Voice Cloning Features</h2>
-<div class="grid md:grid-cols-3 gap-6">
-                <div class="bg-gray-50 p-6 rounded-lg feature-card transition hover:shadow-lg">
-<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
-                        <i data-feather="layers" class="text-indigo-500"></i>
+        <section class="w-full max-w-6xl glass-card p-12 mb-12">
+            <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Advanced Voice Cloning Features</h2>
+            <div class="grid lg:grid-cols-3 gap-8">
+                <div class="feature-card p-8 rounded-xl">
+                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center mb-6">
+                        <i data-feather="layers" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="font-medium text-lg mb-2 text-gray-800">Multi-Speaker Support</h3>
-                    <p class="text-gray-600">Train models for multiple voices</p>
+                    <h3 class="font-bold text-xl mb-3 text-white">Multi-Speaker Support</h3>
+                    <p class="text-gray-300 leading-relaxed">Train and manage multiple voice models simultaneously with advanced speaker separation technology</p>
                 </div>
-                <div class="bg-gray-50 p-6 rounded-lg">
-                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
-                        <i data-feather="settings" class="text-indigo-500"></i>
+                <div class="feature-card p-8 rounded-xl">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6">
+                        <i data-feather="settings" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="font-medium text-lg mb-2 text-gray-800">Fine-Tuning</h3>
-                    <p class="text-gray-600">Adjust pitch, speed and emotion</p>
+                    <h3 class="font-bold text-xl mb-3 text-white">Advanced Fine-Tuning</h3>
+                    <p class="text-gray-300 leading-relaxed">Precise control over pitch, emotion, speed, and tone with real-time preview and adjustment</p>
                 </div>
-                <div class="bg-gray-50 p-6 rounded-lg">
-                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
-                        <i data-feather="cloud" class="text-indigo-500"></i>
+                <div class="feature-card p-8 rounded-xl">
+                    <div class="w-16 h-16 bg-gradient-to-br from-pink-500 to-red-500 rounded-xl flex items-center justify-center mb-6">
+                        <i data-feather="cloud" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="font-medium text-lg mb-2 text-gray-800">API Access</h3>
-                    <p class="text-gray-600">Integrate with your applications</p>
+                    <h3 class="font-bold text-xl mb-3 text-white">Enterprise API</h3>
+                    <p class="text-gray-300 leading-relaxed">Seamless integration with your applications through our powerful and scalable API infrastructure</p>
                 </div>
-</div>
+            </div>
         </section>
-        <footer class="w-full max-w-4xl py-6 text-center text-gray-500 text-sm">
-            <div class="flex items-center justify-center space-x-4 mb-2">
-                <a href="#" class="hover:text-indigo-500"><i data-feather="twitter"></i></a>
-                <a href="#" class="hover:text-indigo-500"><i data-feather="github"></i></a>
-                <a href="#" class="hover:text-indigo-500"><i data-feather="linkedin"></i></a>
+        <footer class="w-full max-w-6xl py-8 text-center">
+            <div class="flex items-center justify-center space-x-6 mb-4">
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-500 transition-all duration-300">
+                    <i data-feather="twitter" class="w-5 h-5 text-gray-300"></i>
+                </a>
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition-all duration-300">
+                    <i data-feather="github" class="w-5 h-5 text-gray-300"></i>
+                </a>
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition-all duration-300">
+                    <i data-feather="linkedin" class="w-5 h-5 text-gray-300"></i>
+                </a>
             </div>
-            <p>© 2023 VoiceCloneAI - Advanced Voice Cloning Technology</p>
-</footer>
-    </div>
+            <p class="text-gray-400 text-sm">© 2024 VoiceCloneAI - Advanced Voice Cloning Technology</p>
+            <div class="mt-4 audio-wave w-24 mx-auto"></div>
+        </footer>
+</div>
 
     <script>
         feather.replace();
-        
         // Initialize Vanta.js waves background
         VANTA.WAVES({
             el: "#wave-bg",
             color: 0x6366f1,
-            waveHeight: 15,
-            shininess: 50,
-            waveSpeed: 0.3,
-            zoom: 0.7
+            waveHeight: 20,
+            shininess: 80,
+            waveSpeed: 0.5,
+            zoom: 0.8,
+            colorDark: 0x0f0f23,
+            colorLight: 0x6366f1
         });
-
         // Add font
         const link = document.createElement('link');
-        link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
+        link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap';
         link.rel = 'stylesheet';
         document.head.appendChild(link);
 // Recording and Upload
@@ -231,8 +319,7 @@
                 alert('Voice file uploaded successfully!');
             }, 3000);
         });
-
-const recordingStatus = document.getElementById('recordingStatus');
+        const recordingStatus = document.getElementById('recordingStatus');
         const soundWave = document.getElementById('soundWave');
         
         let isRecording = false;
@@ -244,14 +331,16 @@ const recordingStatus = document.getElementById('recordingStatus');
             
             if (isRecording) {
                 recordBtn.classList.add('recording');
-                recordingStatus.textContent = 'Recording...';
+                recordingStatus.textContent = '🎤 Recording... Speak now';
+                recordingStatus.className = 'absolute -bottom-8 left-0 right-0 text-center text-sm text-indigo-400 font-medium';
                 
-                // Simulate sound wave animation
+                // Enhanced sound wave animation
                 interval = setInterval(() => {
-                    progress += 0.5;
+                    progress += Math.random() * 3;
                     if (progress > 100) progress = 0;
                     soundWave.style.width = `${progress}%`;
-                }, 50);
+                    soundWave.style.opacity = `${0.3 + (progress / 100) * 0.7}`;
+                }, 100);
                 
                 // After 5 seconds, stop recording
                 setTimeout(() => {
@@ -262,56 +351,107 @@ const recordingStatus = document.getElementById('recordingStatus');
                 stopRecording();
             }
         });
-        
         function stopRecording() {
             isRecording = false;
             recordBtn.classList.remove('recording');
             recordingStatus.textContent = 'Click to record';
+            recordingStatus.className = 'absolute -bottom-8 left-0 right-0 text-center text-sm text-gray-400';
             clearInterval(interval);
             soundWave.style.width = '0%';
+            soundWave.style.opacity = '1';
         }
         function updateVoicePreview() {
             const voicePreview = document.getElementById('voicePreview');
             const voiceParams = document.getElementById('voiceParams');
             
             voicePreview.innerHTML = `
-                <div class="flex items-center justify-center mb-4">
-                    <div class="relative">
-                        <img src="http://static.photos/people/200x200/42" class="w-24 h-24 rounded-full object-cover border-4 border-indigo-200">
-                        <div class="absolute -bottom-2 -right-2 bg-indigo-500 text-white rounded-full p-1">
+                <div class="flex flex-col items-center justify-center">
+                    <div class="relative mb-4">
+                        <img src="http://static.photos/technology/120x120/42" class="w-24 h-24 rounded-full object-cover border-4 border-indigo-400 shadow-lg">
+                        <div class="absolute -bottom-2 -right-2 bg-gradient-to-br from-indigo-500 to-pink-500 text-white rounded-full p-2 shadow-lg">
                             <i data-feather="check" class="w-4 h-4"></i>
                         </div>
                     </div>
+                    <p class="text-center text-indigo-300 font-medium mb-4">Voice model trained successfully! 🎉</p>
+                    <div class="audio-wave w-32 mb-4"></div>
+                </div>
+                <div class="w-full mb-6">
+                    <textarea id="textToGenerate" class="w-full p-4 bg-gray-700 border border-indigo-400 rounded-xl resize-none focus:ring-2 focus:ring-indigo-500 text-white placeholder-gray-400" rows="3" placeholder="Try: 'Hello, this is my AI voice clone!'"></textarea>
                 </div>
-                <p class="text-center text-gray-700 mb-4">Voice model trained successfully!</p>
             `;
             voiceParams.classList.remove('hidden');
             
             feather.replace();
+            
+            // Add floating animation to the success image
+            const successImage = voicePreview.querySelector('img');
+            if (successImage) {
+                successImage.classList.add('floating');
+            }
         }
-
         // Add event listeners for new buttons
         document.getElementById('trainBtn').addEventListener('click', () => {
             const recordingStatus = document.getElementById('recordingStatus');
-            recordingStatus.textContent = 'Training voice model...';
+            recordingStatus.textContent = '🤖 Training AI model...';
+            recordingStatus.className = 'absolute -bottom-8 left-0 right-0 text-center text-sm text-purple-400 font-medium';
             recordBtn.classList.add('recording');
             
-            // Simulate training process
+            // Enhanced training simulation
             setTimeout(() => {
                 stopRecording();
                 updateVoicePreview();
+                
+                // Show success notification
+                const notification = document.createElement('div');
+                notification.className = 'fixed top-4 right-4 bg-gradient-to-r from-green-500 to-blue-500 text-white px-6 py-3 rounded-xl shadow-2xl z-50';
+                notification.innerHTML = '🎯 Voice model trained successfully!';
+                document.body.appendChild(notification);
+                
+                setTimeout(() => {
+                    notification.remove();
+                }, 3000);
             }, 5000);
         });
+        
         document.getElementById('generateBtn').addEventListener('click', () => {
             const text = document.getElementById('textToGenerate').value.trim();
             if (!text) {
-                alert('Please enter some text to generate');
+                // Enhanced error notification
+                const errorNotification = document.createElement('div');
+                errorNotification.className = 'fixed top-4 right-4 bg-gradient-to-r from-red-500 to-pink-500 text-white px-6 py-3 rounded-xl shadow-2xl z-50';
+                errorNotification.innerHTML = '⚠️ Please enter some text to generate';
+                document.body.appendChild(errorNotification);
+                
+                setTimeout(() => {
+                    errorNotification.remove();
+                }, 3000);
                 return;
             }
-            alert(`Generating audio from your voice clone: "${text}"`);
+            
+            // Enhanced success notification
+            const successNotification = document.createElement('div');
+            successNotification.className = 'fixed top-4 right-4 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-6 py-3 rounded-xl shadow-2xl z-50';
+            successNotification.innerHTML = `🔊 Generating: "${text.substring(0, 30)}${text.length > 30 ? '...' : ''}"`;
+            document.body.appendChild(successNotification);
+            
+            setTimeout(() => {
+                successNotification.remove();
+            }, 3000);
         });
-document.getElementById('downloadBtn').addEventListener('click', () => {
-            alert('Voice model download started');
+        
+        document.getElementById('downloadBtn').addEventListener('click', () => {
+            // Enhanced download notification
+            const downloadNotification = document.createElement('div');
+            downloadNotification.className = 'fixed top-4 right-4 bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-6 py-3 rounded-xl shadow-2xl z-50';
+            downloadNotification.innerHTML = '📥 Downloading voice model...';
+            document.body.appendChild(downloadNotification);
+            
+            setTimeout(() => {
+                downloadNotification.innerHTML = '✅ Download complete!';
+                setTimeout(() => {
+                    downloadNotification.remove();
+                }, 2000);
+            }, 2000);
         });
 </script>
     <script>