Update index.html

index.html

@@ -82,7 +82,7 @@
 
         /* ===== LOGO ICON ===== */
         .logo-icon-wrap { position: relative; width: 64px; height: 64px; }
-        .logo-icon-wrap svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 18px rgba(14,165,233,0.5)); }
+        .logo-icon-wrap svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 18px rgba(14,165,233,0.4)); }
         .logo-icon-pulse {
             position: absolute; inset: -6px; border-radius: 50%;
             border: 2px solid rgba(56,189,248,0.5);
@@ -363,8 +363,8 @@
         /* ===== AUDIO PLAYER ===== */
         .audio-player-wrap {
             background: white; border: 1.5px solid var(--border); border-radius: 16px;
-            padding: 10px 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
-            display: flex; flex-direction: column; gap: 10px;
+            padding: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
+            display: flex; flex-direction: column; gap: 14px;
         }
         .audio-player-row {
             display: flex; align-items: center; gap: 8px; width: 100%;
@@ -374,25 +374,25 @@
             font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; flex-shrink: 0;
         }
         .audio-label i { color: var(--sky-deep); }
-        audio { flex: 1; height: 34px; border-radius: 8px; outline: none; min-width: 0; }
+        audio { flex: 1; height: 38px; border-radius: 8px; outline: none; min-width: 0; }
 
         /* ===== DOWNLOAD BUTTON ===== */
         .download-btn {
-            align-self: flex-start;
-            flex-shrink: 0;
-            display: flex; align-items: center; gap: 6px;
-            padding: 8px 14px; border-radius: 12px; border: none;
+            align-self: center;
+            display: flex; align-items: center; justify-content: center; gap: 8px;
+            padding: 12px 24px; border-radius: 14px; border: none;
             background: linear-gradient(135deg, #0ea5e9, #6366f1);
             color: white; font-family: 'Vazirmatn', sans-serif;
-            font-size: 0.78rem; font-weight: 800; cursor: pointer;
+            font-size: 0.85rem; font-weight: 800; cursor: pointer;
             transition: all 0.25s cubic-bezier(0.34,1.3,0.64,1);
             box-shadow: 0 4px 14px rgba(14,165,233,0.35);
             white-space: nowrap; position: relative; overflow: hidden;
+            min-width: 200px;
         }
         .download-btn::before {
             content: ''; position: absolute; inset: 0;
             background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
-            border-radius: 12px;
+            border-radius: 14px;
         }
         .download-btn:hover {
             transform: translateY(-2px) scale(1.04);
@@ -460,36 +460,18 @@
                 <div class="logo-icon-pulse2"></div>
                 <div class="orbit-dot"></div>
                 <div class="orbit-dot2"></div>
-                <!-- Translator emoji SVG icon -->
+                <!-- Google Translate style SVG icon -->
                 <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <defs>
-                        <linearGradient id="lg1" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
-                            <stop offset="0%" stop-color="#38bdf8"/>
-                            <stop offset="100%" stop-color="#818cf8"/>
-                        </linearGradient>
-                        <linearGradient id="lg2" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+                        <linearGradient id="lg2" x1="22" y1="24" x2="56" y2="58" gradientUnits="userSpaceOnUse">
                             <stop offset="0%" stop-color="#0ea5e9"/>
                             <stop offset="100%" stop-color="#6366f1"/>
                         </linearGradient>
                     </defs>
-                    <!-- Background circle -->
-                    <circle cx="32" cy="32" r="30" fill="url(#lg1)" opacity="0.25"/>
-                    <circle cx="32" cy="32" r="24" fill="url(#lg2)"/>
-                    <!-- Speech bubble left (source language) -->
-                    <rect x="8" y="14" width="22" height="14" rx="4" fill="white" opacity="0.9"/>
-                    <polygon points="14,28 10,33 20,28" fill="white" opacity="0.9"/>
-                    <!-- Lines inside left bubble -->
-                    <rect x="11" y="18" width="14" height="2" rx="1" fill="#0ea5e9" opacity="0.7"/>
-                    <rect x="11" y="22" width="10" height="2" rx="1" fill="#0ea5e9" opacity="0.5"/>
-                    <!-- Speech bubble right (target language) -->
-                    <rect x="34" y="28" width="22" height="14" rx="4" fill="white" opacity="0.85"/>
-                    <polygon points="50,28 40,28 54,23" fill="white" opacity="0.85"/>
-                    <!-- Lines inside right bubble -->
-                    <rect x="37" y="32" width="14" height="2" rx="1" fill="#818cf8" opacity="0.7"/>
-                    <rect x="37" y="36" width="10" height="2" rx="1" fill="#818cf8" opacity="0.5"/>
-                    <!-- Arrow between bubbles -->
-                    <path d="M31 24 L33 22 L35 24" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.9"/>
-                    <line x1="33" y1="22" x2="33" y2="30" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.9"/>
+                    <rect x="8" y="12" width="34" height="34" rx="8" fill="#e0f2fe" stroke="#0ea5e9" stroke-width="2.5"/>
+                    <text x="25" y="36" fill="#0ea5e9" font-size="22" font-family="Arial, sans-serif" font-weight="900" text-anchor="middle">A</text>
+                    <rect x="22" y="24" width="34" height="34" rx="8" fill="url(#lg2)" stroke="#ffffff" stroke-width="3"/>
+                    <text x="39" y="48" fill="#ffffff" font-size="22" font-family="Arial, sans-serif" font-weight="bold" text-anchor="middle">文</text>
                 </svg>
             </div>
             <div class="logo-text">