adrien/ChatBeta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

material icons

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-20 13:38:35 +01:00
parent 1859ff1685
commit 36c10169f6
1 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@@ -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.innerHTML = ""
bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
bouton_reconnaissance_vocale.classList.add("contrast")
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.innerHTML = bouton_reconnaissance_vocale_inner_HTML
bouton_reconnaissance_vocale.classList.remove("contrast")
};
reconnaissance.start();