material icons

index.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Chatβeta*</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&amp;icon_names=mic,send,text_to_speech,volume_mute,volume_up">
         <link rel="icon" type="image/svg+xml" href="cat.svg">
         <link rel="apple-touch-icon" sizes="240x240" href="thumbnail.png" />
         <meta name="apple-mobile-web-app-title" content="Chatβeta*" />
@@ -21,6 +21,11 @@ body {
     min-height: var(--vph);
 }
 
+.material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    font-size: 1em;
+}
+
 @media screen and (min-height: 600px) {
     body {
         height: var(--vph);
@@ -90,7 +95,9 @@ body > main {
         <header>
             <nav class="container">
                 <h1>Chat<small><em>βeta</em><span style="color: #9B2318">*</span></small></h1>
-                <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled><i class="bi bi-volume-off-fill"></i></button>
+                <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" title="Synthèse vocale" disabled>
+                    <i class="material-symbols-outlined">volume_mute</i>
+                </button>
             </nav>
         </header>
         <main class="container" id="conversation">
@@ -100,9 +107,13 @@ body > main {
             <form id="formulaire" action="question.php" method="post" role="group">
                 <fieldset role="group">
                     <textarea id="question" name="question" placeholder="Ma question" required></textarea>
-                    <button id="bouton_reconnaissance_vocale" type="button" class="outline secondary" style="display: none;"><i class="bi bi-mic-fill"></i></button>
+                    <button id="bouton_reconnaissance_vocale" type="button" class="outline secondary" title="Reconnaissance vocale" style="display: none;">
+                        <i class="material-symbols-outlined">mic</i>
+                    </button>
                 </fieldset>
-                <button id="bouton_envoyer" type="submit"><i class="bi bi-send-fill"></i></button>
+                <button id="bouton_envoyer" type="submit" title="Envoyer">
+                    <i class="material-symbols-outlined">send</i>
+                </button>
             </form>
         </footer>
         <dialog id="boite_synthese_vocale">
@@ -110,7 +121,7 @@ body > main {
                 <header>
                     <button id="bouton_fermer" aria-label="Close" rel="prev"></button>
                     <p>
-                        <strong><i class="bi bi-volume-up-fill"></i> Synthèse vocale</strong>
+                        <strong><i class="material-symbols-outlined">text_to_speech</i> Synthèse vocale</strong>
                     </p>
                 </header>
                 <form>
@@ -238,7 +249,7 @@ function charger_voix() {
             option.selected = true;
             select_voix.value = i;
             utterance.voice = voix;
-            bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
+            bouton_synthese_vocale.innerHTML = `<i class="material-symbols-outlined">volume_up</i>`;
         }
     })
 
@@ -252,11 +263,11 @@ function charger_voix() {
             utterance.voice = voix;
             voix_selectionnee = voix.voiceURI;
             window.localStorage.setItem('voiceURI', voix.voiceURI);
-            bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
+            bouton_synthese_vocale.innerHTML = `<i class="material-symbols-outlined">volume_up</i>`;
         } else {
             voix_selectionnee = null;
             window.localStorage.removeItem('voiceURI');
-            bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-off-fill"></i>`;
+            bouton_synthese_vocale.innerHTML = `<i class="material-symbols-outlined">volume_mute</i>`;
         }
     };
     bouton_synthese_vocale.onclick = function() {
@@ -285,9 +296,7 @@ if (SpeechRecognition) {
         reconnaissance.continuous = false;
         reconnaissance.interimResults = false;
         reconnaissance.maxAlternatives = 1;
-        bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
+        bouton_reconnaissance_vocale.classList.add("contrast")
-        bouton_reconnaissance_vocale.innerHTML = ""
-        bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
 
         reconnaissance.onresult = function(event) {
             const transcript = event.results[0][0].transcript;
@@ -298,8 +307,7 @@ if (SpeechRecognition) {
         reconnaissance.onerror =
         reconnaissance.onnomatch = function () {
             reconnaissance.stop();
-            bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
+            bouton_reconnaissance_vocale.classList.remove("contrast")
-            bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
         };
         
         reconnaissance.start();