This commit is contained in:
2026-01-19 23:43:33 +01:00
parent 9557749e44
commit e751847130

View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatβeta*</title> <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/@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="icon" type="image/svg+xml" href="cat.svg"> <link rel="icon" type="image/svg+xml" href="cat.svg">
<link rel="apple-touch-icon" sizes="240x240" href="thumbnail.png" /> <link rel="apple-touch-icon" sizes="240x240" href="thumbnail.png" />
<meta name="apple-mobile-web-app-title" content="Chatβeta*" /> <meta name="apple-mobile-web-app-title" content="Chatβeta*" />
@@ -77,10 +78,6 @@ body > main {
z-index: 10; z-index: 10;
} }
#bouton_reconnaissance_vocale:hover {
filter: brightness(1.2);
}
#bouton_envoyer { #bouton_envoyer {
padding: 1rem; padding: 1rem;
} }
@@ -98,7 +95,7 @@ body > main {
<header> <header>
<nav class="container"> <nav class="container">
<h1>Chat<small><em>βeta</em><span style="color: #9B2318">*</span></small></h1> <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>🔈</button> <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled><i class="bi bi-volume-off-fill"></i></button>
</nav> </nav>
</header> </header>
<main class="container" id="conversation"> <main class="container" id="conversation">
@@ -108,9 +105,9 @@ body > main {
<form id="formulaire" action="question.php" method="post" role="group"> <form id="formulaire" action="question.php" method="post" role="group">
<fieldset role="group"> <fieldset role="group">
<textarea id="question" name="question" placeholder="Ma question" required></textarea> <textarea id="question" name="question" placeholder="Ma question" required></textarea>
<button id="bouton_reconnaissance_vocale" type="button" class="outline secondary" style="display: none;">🎙️</button> <button id="bouton_reconnaissance_vocale" type="button" class="outline secondary" style="display: none;"><i class="bi bi-mic-fill"></i></button>
</fieldset> </fieldset>
<button id="bouton_envoyer" type="submit"></button> <button id="bouton_envoyer" type="submit"><i class="bi bi-send-fill"></i></button>
</form> </form>
</footer> </footer>
<dialog id="boite_synthese_vocale"> <dialog id="boite_synthese_vocale">
@@ -118,7 +115,7 @@ body > main {
<header> <header>
<button id="bouton_fermer" aria-label="Close" rel="prev"></button> <button id="bouton_fermer" aria-label="Close" rel="prev"></button>
<p> <p>
<strong>🔊 Synthèse vocale</strong> <strong><i class="bi bi-volume-up-fill"></i> Synthèse vocale</strong>
</p> </p>
</header> </header>
<form> <form>
@@ -149,7 +146,6 @@ const bouton_annuler = document.getElementById('bouton_annuler');
const bouton_ok = document.getElementById('bouton_ok'); const bouton_ok = document.getElementById('bouton_ok');
const footer = document.querySelector('footer'); const footer = document.querySelector('footer');
const langue = document.documentElement.lang; const langue = document.documentElement.lang;
let voix = null;
let utterance = null; let utterance = null;
question.onkeydown = function(e) { question.onkeydown = function(e) {
@@ -249,7 +245,7 @@ function charger_voix() {
select_voix.value = i; select_voix.value = i;
utterance.voice = voix; utterance.voice = voix;
option.selected = true; option.selected = true;
bouton_synthese_vocale.innerHTML = "🔊"; bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
} }
}) })
@@ -266,11 +262,11 @@ function charger_voix() {
let voix = liste_voix[select_voix.value]; let voix = liste_voix[select_voix.value];
utterance.voice = voix; utterance.voice = voix;
window.localStorage.setItem('voix', voix.voiceURI); window.localStorage.setItem('voix', voix.voiceURI);
bouton_synthese_vocale.innerHTML = "🔊"; bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
} else { } else {
utterance.voice = null; utterance.voice = null;
window.localStorage.removeItem('voix'); window.localStorage.removeItem('voix');
bouton_synthese_vocale.innerHTML = "🔈"; bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-off-fill"></i>`;
} }
}; };
} }