Update templates/index.html

templates/index.html

@@ -7,10 +7,10 @@
     <style>
         body {
             font-family: 'Arial', sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            background: linear-gradient(135deg, #667eea, #764ba2);
             margin: 0;
             padding: 20px;
-            min-height: 100vh;
+            color: #333;
         }
         .container {
             max-width: 800px;
@@ -18,44 +18,42 @@
             background: white;
             padding: 30px;
             border-radius: 15px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
         }
         h1 {
-            color: #333;
+            color: #4a4a4a;
             text-align: center;
             margin-bottom: 30px;
         }
-        .form-group {
-            margin-bottom: 20px;
-        }
         textarea {
             width: 100%;
+            height: 150px;
             padding: 15px;
             border: 2px solid #ddd;
             border-radius: 8px;
-            resize: vertical;
             font-size: 16px;
+            resize: vertical;
+            margin-bottom: 20px;
         }
         select {
-            width: 100%;
-            padding: 12px;
-            border: 2px solid #ddd;
-            border-radius: 8px;
+            padding: 10px;
             font-size: 16px;
-            margin-top: 10px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            width: 200px;
         }
-        button {
-            background: #4CAF50;
+        .button {
+            background: #667eea;
             color: white;
-            padding: 12px 24px;
+            padding: 12px 25px;
             border: none;
             border-radius: 8px;
             cursor: pointer;
             font-size: 16px;
             transition: background 0.3s;
         }
-        button:hover {
-            background: #45a049;
+        .button:hover {
+            background: #5a6cd3;
         }
         .voice-grid {
             display: grid;
@@ -64,25 +62,20 @@
             margin-top: 30px;
         }
         .voice-card {
-            background: #f9f9f9;
+            background: #f8f9fa;
             padding: 15px;
-            border-radius: 10px;
+            border-radius: 8px;
             text-align: center;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        }
-        .voice-card audio {
-            width: 100%;
-            margin-top: 10px;
         }
         .voice-card button {
             margin-top: 10px;
-            background: #2196F3;
+            background: #764ba2;
         }
         .voice-card button:hover {
-            background: #1976D2;
+            background: #633d87;
         }
         .error {
-            color: #d32f2f;
+            color: #dc3545;
             text-align: center;
             margin-top: 20px;
         }
@@ -92,34 +85,28 @@
     <div class="container">
         <h1>Text to Speech Converter</h1>
         <form method="post">
-            <div class="form-group">
-                <textarea name="text" rows="5" placeholder="Enter your text here..."></textarea>
-                <select name="voice">
-                    {% for voice in voices %}
-                        <option value="{{ voice }}">{{ voice }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <button type="submit" name="generate">Generate & Download</button>
+            <textarea name="text" placeholder="Enter your text here..."></textarea>
+            <select name="voice">
+                {% for voice in voices %}
+                    <option value="{{ voice }}">{{ voice }}</option>
+                {% endfor %}
+            </select>
+            <button type="submit" name="generate" class="button">Generate & Download</button>
         </form>
-        
+
+        <h2 style="margin-top: 40px; text-align: center;">Voice Previews</h2>
         <div class="voice-grid">
             {% for voice in voices %}
                 <div class="voice-card">
                     <h3>{{ voice }}</h3>
-                    <audio controls>
-                        <source src="{{ url_for('preview', voice=voice) }}" type="audio/mpeg">
-                        Your browser does not support the audio element.
-                    </audio>
-                    <form method="post" style="margin-top: 10px;">
-                        <input type="hidden" name="text" value="Hello, this is a sample of my voice.">
-                        <input type="hidden" name="voice" value="{{ voice }}">
-                        <button type="submit" name="generate">Download Sample</button>
+                    <form method="post">
+                        <input type="hidden" name="preview_voice" value="{{ voice }}">
+                        <button type="submit" name="preview" class="button">Preview</button>
                     </form>
                 </div>
             {% endfor %}
         </div>
-        
+
         {% if error %}
             <p class="error">Error: {{ error }}</p>
         {% endif %}