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

😹

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-21 22:46:04 +01:00
parent 68feab0ce3
commit bbf27fefcd
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

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