Update static/script.js

static/script.js

@@ -115,27 +115,41 @@ function loadResumerPage() {
                 return;
             }
 
-            if (data.summary) {
-                resultElement.innerHTML = `
-                    <h3 class="centered-title">📝 Summary generated :</h3>
-                    <br>
-                    <p id="summaryText">${data.summary}</p>
-                <button id="playVoiceBtn" style="margin-top: 15px; padding: 10px; border: none; background-color: #4CAF50; color: white; border-radius: 8px; cursor: pointer;">
-                    🔊 Listen to summary
-                </button>
-            `;
-                document.getElementById("documentResult").dataset.summaryText = data.summary;
-                document.getElementById("downloadSection").style.display = "block";
-              // 🎤 Ajouter l'effet vocal
-            const playVoiceBtn = document.getElementById("playVoiceBtn");
-            playVoiceBtn.addEventListener("click", function () {
-                const textToRead = document.getElementById("summaryText").textContent;
-                const utterance = new SpeechSynthesisUtterance(textToRead);
-                utterance.lang = "en-US"; // ou "fr-FR" si ton résumé est en français
-                window.speechSynthesis.speak(utterance);
-            });
-        
-            } else {
+           if (data.summary) {
+    resultElement.innerHTML = `
+        <div style="display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px;">
+            <button id="playVoiceBtn" style="
+                background: linear-gradient(125deg, rgba(163, 94, 237, 0.9) 0%, rgba(65, 159, 232, 0.9) 75%);
+                color: white;
+                border: none;
+                padding: 10px 16px;
+                border-radius: 12px;
+                cursor: pointer;
+                font-size: 14px;
+                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                transition: transform 0.2s;
+            ">
+                🔊 Listen to Summary
+            </button>
+        </div>
+        <h3 class="centered-title">📝 Summary generated :</h3>
+        <br>
+        <p id="summaryText" style="font-size: 16px;">${data.summary}</p>
+    `;
+
+    document.getElementById("documentResult").dataset.summaryText = data.summary;
+    document.getElementById("downloadSection").style.display = "block";
+
+    // 🎤 Ajouter l'effet vocal
+    const playVoiceBtn = document.getElementById("playVoiceBtn");
+    playVoiceBtn.addEventListener("click", function () {
+        const textToRead = document.getElementById("summaryText").textContent;
+        const utterance = new SpeechSynthesisUtterance(textToRead);
+        utterance.lang = "en-US"; // ou "fr-FR" si ton résumé est en français
+        window.speechSynthesis.speak(utterance);
+    });
+}
+ else {
                 resultElement.innerText = "❌ Summary not available.";
             }
         } catch (error) {