icones
This commit is contained in:
20
index.html
20
index.html
@@ -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>`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user