From 8dc22a80ba42917f01ae8d36451b78eeb7ce0d7a Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 19 Jan 2026 16:52:54 +0100
Subject: [PATCH] ascenseur

---
 index.html | 339 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 177 insertions(+), 162 deletions(-)

diff --git a/index.html b/index.html
index 52fd40f..e334843 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,14 @@ body > main {
 }
 
 #bouton_reconnaissance_vocale {
-    padding: 0.7rem;
+    padding: 0;
+    width: 3rem;
+    margin-left: -3rem;
+    border: none;
+}
+
+#bouton_envoyer {
+    padding: 1.5rem;
 }
 
 @media print {
@@ -82,7 +89,7 @@ body > main {
                 <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button>
             </nav>
         </header>
-        <main class="container overflow-auto" id="conversation">
+        <main class="container" id="conversation">
             <p class="reponse">Posez-moi toutes vos questions !</p>
         </main>
         <footer class="container">
@@ -102,7 +109,7 @@ body > main {
                 </header>
                 <form>
                     <fieldset>
-                        <label>Voix disponibles :</label>
+                        <label for="select_voix">Voix disponibles :</label>
                         <select id="select_voix">
                             <option value="">Pas de synthèse vocale</option>
                         </select>
@@ -115,174 +122,182 @@ body > main {
             </article>
         </dialog>
         <script>
-            const formulaire = document.getElementById('formulaire');
-            const bouton_envoyer = document.getElementById('bouton_envoyer');
-            const conversation = document.getElementById('conversation');
-            const question = document.getElementById('question');
-            const bouton_synthese_vocale = document.getElementById('bouton_synthese_vocale');
-            const boite_synthese_vocale = document.getElementById('boite_synthese_vocale');
-            const select_voix = document.getElementById('select_voix');
-            const aphone = select_voix.innerHTML;
-            const bouton_fermer = document.getElementById('bouton_fermer');
-            const bouton_annuler = document.getElementById('bouton_annuler');
-            const bouton_ok = document.getElementById('bouton_ok');
-            const footer = document.querySelector('footer');
-            const langue = document.documentElement.lang;
+const formulaire = document.getElementById('formulaire');
+const bouton_envoyer = document.getElementById('bouton_envoyer');
+const conversation = document.getElementById('conversation');
+const question = document.getElementById('question');
+const bouton_synthese_vocale = document.getElementById('bouton_synthese_vocale');
+const boite_synthese_vocale = document.getElementById('boite_synthese_vocale');
+const select_voix = document.getElementById('select_voix');
+const aphone = select_voix.innerHTML;
+const bouton_fermer = document.getElementById('bouton_fermer');
+const bouton_annuler = document.getElementById('bouton_annuler');
+const bouton_ok = document.getElementById('bouton_ok');
+const footer = document.querySelector('footer');
+const langue = document.documentElement.lang;
 
-            let voix = null;
-            function charger_voix() {
-                let liste_voix = speechSynthesis.getVoices().filter(voice => voice.lang.startsWith(langue));
-                select_voix.innerHTML = aphone;
-                
-                if (!liste_voix.length) {
-                    bouton_synthese_vocale.disabled = true;
-                    speechSynthesis.addEventListener('voiceschanged', charger_voix);
-                    return;
-                }
+question.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
+        e.preventDefault();
+        e.target.form.requestSubmit();
+    }
+});
 
-                speechSynthesis.removeEventListener('voiceschanged', charger_voix);
-                liste_voix.forEach((v, i) => {
-                    const option = document.createElement('option');
-                    option.value = i;
-                    option.innerText = v.name;
-                    select_voix.appendChild(option);
-                    if (v.voiceURI === window.localStorage.getItem('voix')) {
-                        select_voix.value = i;
-                        voix = v;
-                        option.selected = true;
-                        bouton_synthese_vocale.innerHTML = "🔊";
-                    }
-                })
-            
-                bouton_synthese_vocale.disabled = false;
-                bouton_synthese_vocale.addEventListener('click', () => {
-                    boite_synthese_vocale.showModal();
-                });
-                bouton_fermer.addEventListener('click', () => {
-                    boite_synthese_vocale.close();
-                });
-                bouton_annuler.addEventListener('click', () => {
-                    boite_synthese_vocale.close();
-                });
-                bouton_ok.addEventListener('click', () => {
-                    boite_synthese_vocale.close();
-                    if (select_voix.value) {
-                        voix = liste_voix[select_voix.value];
-                        window.localStorage.setItem('voix', voix.voiceURI);
-                        bouton_synthese_vocale.innerHTML = "🔊";
-                    } else {
-                        voix = null;
-                        window.localStorage.removeItem('voix');
-                        bouton_synthese_vocale.innerHTML = "🔈";
-                    }
-                });
-            }
-            if ('speechSynthesis' in window) {
-                bouton_synthese_vocale.style.display = 'block';
-                charger_voix();
+question.addEventListener('focus', () => {
+    question.scrollIntoView({ block: 'nearest' });
+});
+
+formulaire.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (bouton_envoyer.disabled == true) return;
+
+    bouton_envoyer.disabled = true;
+    let bouton_envoyer_innerHTML = bouton_envoyer.innerHTML;
+    bouton_envoyer.innerHTML = "";
+    bouton_envoyer.setAttribute("aria-busy", true)
+    const formulaireData = new FormData(formulaire);
+    const citation = document.createElement('article');
+    citation.innerText = formulaireData.get('question');
+    conversation.appendChild(citation);
+    formulaire.reset();
+
+    const paragraphe = document.createElement('p');
+    paragraphe.setAttribute("aria-busy", "true");
+    conversation.appendChild(paragraphe);
+    conversation.scrollTop = conversation.scrollHeight;
+
+    const requete = await fetch(formulaire.action, {
+        method: formulaire.method,
+        body: formulaireData
+    });
+    paragraphe.setAttribute('aria-busy', 'true');
+    const reponse = await requete.text();
+    paragraphe.setAttribute('aria-busy', 'false');
+    
+    if (voix) {
+        const utterance = new SpeechSynthesisUtterance(reponse);
+        utterance.lang = langue;
+        utterance.voice = voix;
+        utterance.rate = 1;
+        speechSynthesis.speak(utterance);
+    }
+    let t = 0;
+    Array.from(reponse).forEach((lettre, i) => {
+        setTimeout(() => {
+            if (lettre == "\n") {
+                paragraphe.innerHTML += "<br>";
+            } else {
+                paragraphe.innerHTML += lettre;
             }
+            paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
+        }, t += 100 * Math.random());
+    });
+    setTimeout(() => {
+        const paragraphe = document.createElement('p');
+        paragraphe.classList.add('reponse');
+        paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
+        conversation.appendChild(paragraphe);
+        paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
+        bouton_envoyer.disabled = false;
+        bouton_envoyer.setAttribute("aria-busy", false);
+        bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
+        question.focus()
+    }, t);
+})
 
-            var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            if (SpeechRecognition) {
-                bouton_reconnaissance_vocale.addEventListener('click', () => {
-                    const reconnaissance= new SpeechRecognition();
-                    reconnaissance.lang = langue;
-                    bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
-                    bouton_reconnaissance_vocale.innerHTML = ""
-                    bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
-                    reconnaissance.addEventListener('result', (event) => {
-                        const transcript = event.results[0][0].transcript;
-                        question.value = transcript;
-                        formulaire.requestSubmit()
-                    });
-                    reconnaissance.addEventListener('speechend', () => {
-                        reconnaissance.stop();
-                        bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
-                        bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
-                    });
-                    reconnaissance.addEventListener('error', (event) => {
-                        bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
-                        bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
-                    });
-                    reconnaissance.start();
-                });
-                bouton_reconnaissance_vocale.style.display = 'block';
-            }
+// Synthèse vocale
+let voix = null;
+function charger_voix() {
+    let liste_voix = speechSynthesis.getVoices(); // .filter(voice => voice.lang.startsWith(langue));
+    select_voix.innerHTML = aphone;
+    
+    if (!liste_voix.length) {
+        bouton_synthese_vocale.disabled = true;
+        speechSynthesis.addEventListener('voiceschanged', charger_voix);
+        return;
+    }
 
-            question.addEventListener('keydown', e => {
-                if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
-                    e.preventDefault();
-                    e.target.form.requestSubmit();
-                }
-            });
+    speechSynthesis.removeEventListener('voiceschanged', charger_voix);
+    liste_voix.forEach((v, i) => {
+        const option = document.createElement('option');
+        option.value = i;
+        option.innerText = v.name;
+        select_voix.appendChild(option);
+        if (v.voiceURI === window.localStorage.getItem('voix')) {
+            select_voix.value = i;
+            voix = v;
+            option.selected = true;
+            bouton_synthese_vocale.innerHTML = "🔊";
+        }
+    })
 
-            question.addEventListener('focus', () => {
-                question.scrollIntoView({ block: 'nearest' });
-            });
+    bouton_synthese_vocale.disabled = false;
+    bouton_synthese_vocale.addEventListener('click', () => {
+        boite_synthese_vocale.showModal();
+    });
+    bouton_fermer.addEventListener('click', () => {
+        boite_synthese_vocale.close();
+    });
+    bouton_annuler.addEventListener('click', () => {
+        boite_synthese_vocale.close();
+    });
+    bouton_ok.addEventListener('click', () => {
+        boite_synthese_vocale.close();
+        if (select_voix.value) {
+            voix = liste_voix[select_voix.value];
+            window.localStorage.setItem('voix', voix.voiceURI);
+            bouton_synthese_vocale.innerHTML = "🔊";
+        } else {
+            voix = null;
+            window.localStorage.removeItem('voix');
+            bouton_synthese_vocale.innerHTML = "🔈";
+        }
+    });
+}
+if ('speechSynthesis' in window) {
+    bouton_synthese_vocale.style.display = 'block';
+    charger_voix();
+}
 
-            formulaire.addEventListener('submit', async (e) => {
-                e.preventDefault();
-                if (bouton_envoyer.disabled == true) return;
+// Reconnaissance vocale
+var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+if (SpeechRecognition) {
+    bouton_reconnaissance_vocale.addEventListener('click', () => {
+        const reconnaissance= new SpeechRecognition();
+        reconnaissance.lang = langue;
+        reconnaissance.continuous = false;
+        reconnaissance.interimResults = false;
+        reconnaissance.maxAlternatives = 1;
+        bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
+        bouton_reconnaissance_vocale.innerHTML = ""
+        bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
 
-                bouton_envoyer.disabled = true;
-                let bouton_envoyer_innerHTML = bouton_envoyer.innerHTML;
-                bouton_envoyer.innerHTML = "";
-                bouton_envoyer.setAttribute("aria-busy", true)
-                const formulaireData = new FormData(formulaire);
-                const citation = document.createElement('article');
-                citation.innerText = formulaireData.get('question');
-                conversation.appendChild(citation);
-                formulaire.reset();
-
-                const paragraphe = document.createElement('p');
-                paragraphe.setAttribute("aria-busy", "true");
-                conversation.appendChild(paragraphe);
-                conversation.scrollTop = conversation.scrollHeight;
-
-                const requete = await fetch(formulaire.action, {
-                    method: formulaire.method,
-                    body: formulaireData
-                });
-                paragraphe.setAttribute('aria-busy', 'true');
-                const reponse = await requete.text();
-                paragraphe.setAttribute('aria-busy', 'false');
-                
-                if (voix) {
-                    const utterance = new SpeechSynthesisUtterance(reponse);
-                    utterance.lang = langue;
-                    utterance.voice = voix;
-                    utterance.rate = 1;
-                    speechSynthesis.speak(utterance);
-                }
-                let t = 0;
-                Array.from(reponse).forEach((lettre, i) => {
-                    setTimeout(() => {
-                        if (lettre == "\n") {
-                            paragraphe.innerHTML += "<br>";
-                        } else {
-                            paragraphe.innerHTML += lettre;
-                        }
-                        conversation.scrollTop = conversation.scrollHeight;
-                    }, t += 100 * Math.random());
-                });
-                setTimeout(() => {
-                    conversation.innerHTML += '<p class="reponse">Voulez-vous que je réponde à une autre question ?</p>';
-                    conversation.scrollTop = conversation.scrollHeight;
-                    bouton_envoyer.disabled = false;
-                    bouton_envoyer.setAttribute("aria-busy", false);
-                    bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
-                    question.focus()
-                }, t);
-            })
-
-            function onResize() {
-                document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
-                conversation.scrollTop = conversation.scrollHeight;
-            }
-            window.visualViewport?.addEventListener('resize', onResize);
-            window.addEventListener('resize', onResize);
-            onResize();
+        reconnaissance.addEventListener('result', (event) => {
+            const transcript = event.results[0][0].transcript;
+            question.value = transcript;
+            if (!bouton_envoyer.disabled) formulaire.requestSubmit()
+        });
+        reconnaissance.onspeechend = 
+        reconnaissance.onerror = 
+        reconnaissance.onnomatch = function () {
+            reconnaissance.stop();
+            bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
+            bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
+        };
+        
+        reconnaissance.start();
+    });
+    bouton_reconnaissance_vocale.style.display = 'block';
+}
 
+// Adaptation au clavier virtuel du téléphone
+function onResize() {
+    document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
+    conversation.scrollTop = conversation.scrollHeight;
+}
+window.visualViewport?.addEventListener('resize', onResize);
+window.addEventListener('resize', onResize);
+onResize();
         </script>
     </body>