icones
This commit is contained in:
22
index.html
22
index.html
@@ -6,6 +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="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*" />
|
||||
@@ -77,10 +78,6 @@ body > main {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#bouton_reconnaissance_vocale:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
#bouton_envoyer {
|
||||
padding: 1rem;
|
||||
}
|
||||
@@ -98,7 +95,7 @@ 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>🔈</button>
|
||||
<button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled><i class="bi bi-volume-off-fill"></i></button>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container" id="conversation">
|
||||
@@ -108,9 +105,9 @@ 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;">🎙️</button>
|
||||
<button id="bouton_reconnaissance_vocale" type="button" class="outline secondary" style="display: none;"><i class="bi bi-mic-fill"></i></button>
|
||||
</fieldset>
|
||||
<button id="bouton_envoyer" type="submit">❔</button>
|
||||
<button id="bouton_envoyer" type="submit"><i class="bi bi-send-fill"></i></button>
|
||||
</form>
|
||||
</footer>
|
||||
<dialog id="boite_synthese_vocale">
|
||||
@@ -118,7 +115,7 @@ body > main {
|
||||
<header>
|
||||
<button id="bouton_fermer" aria-label="Close" rel="prev"></button>
|
||||
<p>
|
||||
<strong>🔊 Synthèse vocale</strong>
|
||||
<strong><i class="bi bi-volume-up-fill"></i> Synthèse vocale</strong>
|
||||
</p>
|
||||
</header>
|
||||
<form>
|
||||
@@ -149,7 +146,6 @@ 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;
|
||||
let utterance = null;
|
||||
|
||||
question.onkeydown = function(e) {
|
||||
@@ -235,7 +231,7 @@ function charger_voix() {
|
||||
}
|
||||
|
||||
speechSynthesis.removeEventListener('voiceschanged', charger_voix);
|
||||
|
||||
|
||||
utterance = new SpeechSynthesisUtterance();
|
||||
utterance.lang = langue;
|
||||
utterance.rate = 1;
|
||||
@@ -249,7 +245,7 @@ function charger_voix() {
|
||||
select_voix.value = i;
|
||||
utterance.voice = voix;
|
||||
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];
|
||||
utterance.voice = voix;
|
||||
window.localStorage.setItem('voix', voix.voiceURI);
|
||||
bouton_synthese_vocale.innerHTML = "🔊";
|
||||
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
|
||||
} else {
|
||||
utterance.voice = null;
|
||||
window.localStorage.removeItem('voix');
|
||||
bouton_synthese_vocale.innerHTML = "🔈";
|
||||
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-off-fill"></i>`;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user