😹
This commit is contained in:
20
index.html
20
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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=mic,send,text_to_speech,volume_mute,volume_up">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0&icon_names=mic,send,text_to_speech,volume_mute,volume_up&display=block">
|
||||
<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,8 +21,11 @@ body {
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
font-size: 1.2rem;
|
||||
font-variation-settings:
|
||||
'FILL' 1,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 48;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
@@ -102,7 +105,7 @@ body > main {
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container" id="conversation">
|
||||
<p class="reponse">Posez-moi toutes vos questions !</p>
|
||||
<p>🐱 Posez-moi toutes vos questions !</p>
|
||||
</main>
|
||||
<footer class="container">
|
||||
<form id="formulaire" action="question.php" method="post" role="group">
|
||||
@@ -153,6 +156,7 @@ 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 nb_reponses = 0;
|
||||
|
||||
let voix_selectionnee = null;
|
||||
let utterance = null;
|
||||
@@ -200,6 +204,7 @@ formulaire.addEventListener('submit', async (e) => {
|
||||
paragraphe.setAttribute('aria-busy', 'true');
|
||||
const reponse = await requete.text();
|
||||
paragraphe.setAttribute('aria-busy', 'false');
|
||||
nb_reponses++;
|
||||
|
||||
if (voix_selectionnee) {
|
||||
utterance.text = reponse;
|
||||
@@ -220,16 +225,15 @@ formulaire.addEventListener('submit', async (e) => {
|
||||
});
|
||||
setTimeout(() => {
|
||||
const paragraphe = document.createElement('p');
|
||||
paragraphe.classList.add('reponse');
|
||||
paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
|
||||
paragraphe.innerHTML = (nb_reponses % 5 ? '😸' : '😹') + ' Voulez-vous que je réponde à une autre question ?';
|
||||
conversation.appendChild(paragraphe);
|
||||
document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
|
||||
|
||||
bouton_envoyer.disabled = false;
|
||||
bouton_envoyer.setAttribute("aria-busy", false);
|
||||
bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
|
||||
question.onfocus();
|
||||
question.focus();
|
||||
question.onfocus();
|
||||
}, t);
|
||||
})
|
||||
|
||||
@@ -325,7 +329,7 @@ if (SpeechRecognition) {
|
||||
|
||||
// Adaptation au clavier virtuel du téléphone
|
||||
window.onresize = function() {
|
||||
document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
|
||||
document.documentElement.style.setProperty("--vph", `${window.visualViewport.height}px`);
|
||||
}
|
||||
window.visualViewport?.addEventListener('resize', window.onresize);
|
||||
window.onresize();
|
||||
|
||||
Reference in New Issue
Block a user