Bingo Board Interface - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tombola Interattiva</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script> <style> :root { --wood-dark: #8B4513; --wood-light: #DEB887; --gold: #FFD700; } body { background: #f0f2f5; min-height: 100vh; } .wood-texture { background-image: linear-gradient(90deg, rgba(139,69,19,0.8) 0%, rgba(139,69,19,0.9) 100%), url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>'); background-blend-mode: overlay; } .gold-frame { border: 4px solid var(--gold); box-shadow: inset 0 0 20px rgba(255,215,0,0.5), 0 0 10px rgba(255,215,0,0.3); } .numero { transition: all 0.3s ease; aspect-ratio: 3.25; display: flex; align-items: center; justify-content: center; font-size: clamp(1rem, 2.5vw, 1.8rem); font-weight: bold; border: 2px solid var(--wood-dark); background: #FFF8DC; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.2); cursor: pointer; position: relative; overflow: hidden; } .numero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity 0.3s; } .numero:hover::before { opacity: 1; } .numero.estratto { background: linear-gradient(145deg, #4CAF50, #45a049); color: white; transform: scale(0.95); } .numero.ultimo { background: linear-gradient(145deg, #2196F3, #1e88e5); color: white; animation: pulse 2s infinite; } .numero.penultimo { background: linear-gradient(145deg, #9C27B0, #8e24aa); color: white; } .tabellone-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding: 2rem; background: var(--wood-dark); border-radius: 1rem; box-shadow: inset 0 0 30px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.2); grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .tabellone-container { grid-template-columns: 1fr; } } .tabellone-section { background: var(--wood-light); padding: 0.8rem; border-radius: 0.8rem; box-shadow: inset 0 0 15px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.2); } .tabellone-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; } @keyframes pulse { 0% { transform: scale(0.95); } 50% { transform: scale(1); } 100% { transform: scale(0.95); } } .controls { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 1rem; padding: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .btn { transition: all 0.3s ease; transform: translateY(0); box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0,0,0,0.2); } .btn:active { transform: translateY(0); } #ultimoNumero { background: linear-gradient(145deg, #ffffff, #f0f0f0); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .numero-display { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); padding: 2rem; text-align: center; max-width: 90vw; width: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; } .smorfia-text { font-size: 1.5rem; color: #2c3e50; margin-top: 1rem; font-style: italic; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } @media (max-width: 768px) { .controls { flex-direction: column; gap: 1rem; } .btn { width: 100%; } #ultimoNumero { text-align: center; margin: 1rem 0; } } </style> </head> <body> <div id="app" class="container mx-auto px-4 py-8"> <div class="controls flex justify-between items-center mb-8 flex-wrap gap-4"> <div class="space-y-4"> <a href="{{ url_for('index') }}"> <button class="btn bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 text-white font-bold py-3 px-8 rounded-full"> Home </button> </a> <button id="estraiBtn" class="btn bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white font-bold py-3 px-8 rounded-full flex items-center"> <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path> </svg> Estrai Numero </button> <button id="resetBtn" class="btn bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 text-white font-bold py-3 px-8 rounded-full"> Reset </button> <button id="fullscreenBtn" class="btn bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white font-bold py-3 px-8 rounded-full"> Schermo Intero </button> </div> <div id="ultimoNumero" class="text-center"> <div class="text-gray-600 text-lg mb-2">Ultimo Numero</div> <span class="text-blue-500 font-bold text-6xl">-</span> </div> <div id="sessione" class="text-center"> <div class="text-gray-600 text-lg mb-2">Codice Sessione</div> <span class="text-red-500 font-bold text-2xl">{{ session_id }}</span> <div id="qr-code" class="mt-4"> <canvas id="canvas"></canvas> </div> </div> </div> <div id="tabellone" class="tabellone-container gold-frame"> <div class="tabellone-section"> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-1">1</div> <div class="numero hover:shadow-lg" id="numero-2">2</div> <div class="numero hover:shadow-lg" id="numero-3">3</div> <div class="numero hover:shadow-lg" id="numero-4">4</div> <div class="numero hover:shadow-lg" id="numero-5">5</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-11">11</div> <div class="numero hover:shadow-lg" id="numero-12">12</div> <div class="numero hover:shadow-lg" id="numero-13">13</div> <div class="numero hover:shadow-lg " id="numero-14">14</div> <div class="numero hover:shadow-lg" id="numero-15">15</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-21">21</div> <div class="numero hover:shadow-lg" id="numero-22">22</div> <div class="numero hover:shadow-lg" id="numero-23">23</div> <div class="numero hover:shadow-lg" id="numero-24">24</div> <div class="numero hover:shadow-lg" id="numero-25">25</div> </div> </div> <div class="tabellone-section"> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-6">6</div> <div class="numero hover:shadow-lg" id="numero-7">7</div> <div class="numero hover:shadow-lg" id="numero-8">8</div> <div class="numero hover:shadow-lg" id="numero-9">9</div> <div class="numero hover:shadow-lg" id="numero-10">10</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-16">16</div> <div class="numero hover:shadow-lg" id="numero-17">17</div> <div class="numero hover:shadow-lg" id="numero-18">18</div> <div class="numero hover:shadow-lg" id="numero-19">19</div> <div class="numero hover:shadow-lg" id="numero-20">20</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-26">26</div> <div class="numero hover:shadow-lg" id="numero-27">27</div> <div class="numero hover:shadow-lg" id="numero-28">28</div> <div class="numero hover:shadow-lg" id="numero-29">29</div> <div class="numero hover:shadow-lg" id="numero-30">30</div> </div> </div> <div class="tabellone-section"> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-31">31</div> <div class="numero hover:shadow-lg" id="numero-32">32</div> <div class="numero hover:shadow-lg" id="numero-33">33</div> <div class="numero hover:shadow-lg" id="numero-34">34</div> <div class="numero hover:shadow-lg" id="numero-35">35</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-41">41</div> <div class="numero hover:shadow-lg" id="numero-42">42</div> <div class="numero hover:shadow-lg" id="numero-43">43</div> <div class="numero hover:shadow-lg" id="numero-44">44</div> <div class="numero hover:shadow-lg" id="numero-45">45</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-51">51</div> <div class="numero hover:shadow-lg" id="numero-52">52</div> <div class="numero hover:shadow-lg" id="numero-53">53</div> <div class="numero hover:shadow-lg" id="numero-54">54</div> <div class="numero hover:shadow-lg" id="numero-55">55</div> </div> </div> <div class="tabellone-section"> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-36">36</div> <div class="numero hover:shadow-lg" id="numero-37">37</div> <div class="numero hover:shadow-lg" id="numero-38">38</div> <div class="numero hover:shadow-lg " id="numero-39">39</div> <div class="numero hover:shadow-lg" id="numero-40">40</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-46">46</div> <div class="numero hover:shadow-lg" id="numero-47">47</div> <div class="numero hover:shadow-lg" id="numero-48">48</div> <div class="numero hover:shadow-lg" id="numero-49">49</div> <div class="numero hover:shadow-lg" id="numero-50">50</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-56">56</div> <div class="numero hover:shadow-lg" id="numero-57">57</div> <div class="numero hover:shadow-lg" id="numero-58">58</div> <div class="numero hover:shadow-lg" id="numero-59">59</div> <div class="numero hover:shadow-lg" id="numero-60">60</div> </div> </div> <div class="tabellone-section"> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-61">61</div> <div class="numero hover:shadow-lg" id="numero-62">62</div> <div class="numero hover:shadow-lg" id="numero-63">63</div> <div class="numero hover:shadow-lg" id="numero-64">64</div> <div class="numero hover:shadow-lg" id="numero-65">65</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-71">71</div> <div class="numero hover:shadow-lg" id="numero-72">72</div> <div class="numero hover:shadow-lg" id="numero-73">73</div> <div class="numero hover:shadow-lg" id="numero-74">74</div> <div class="numero hover:shadow-lg" id="numero-75">75</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-81">81</div> <div class="numero hover:shadow-lg" id="numero-82">82</div> <div class="numero hover:shadow-lg" id="numero-83">83</div> <div class="numero hover:shadow-lg" id="numero-84">84</div> <div class="numero hover:shadow-lg" id="numero-85">85</div> </div> </div> <div class="tabellone-section"> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-66">66</div> <div class="numero hover:shadow-lg" id="numero-67">67</div> <div class="numero hover:shadow-lg" id="numero-68">68</div> <div class="numero hover:shadow-lg" id="numero-69">69</div> <div class="numero hover:shadow-lg" id="numero-70">70</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-76">76</div> <div class="numero hover:shadow-lg" id="numero-77">77</div> <div class="numero hover:shadow-lg" id="numero-78">78</div> <div class="numero hover:shadow-lg" id="numero-79">79</div> <div class="numero hover:shadow-lg" id="numero-80">80</div> </div> <div class="tabellone-row"> <div class="numero hover:shadow-lg" id="numero-86">86</div> <div class="numero hover:shadow-lg" id="numero-87">87</div> <div class="numero hover:shadow-lg" id="numero-88">88</div> <div class="numero hover:shadow-lg" id="numero-89">89</div> <div class="numero hover:shadow-lg" id="numero-90">90</div> </div> </div> </div> <div id="numeroEstratto" class="numero-display hidden"> <h1 id="numeroEstrattoText" class="text-6xl font-bold text-gray-800 mb-4 animate__animated animate__bounceIn">-</h1> <img id="numeroImg" src="" alt="" class="max-w-full h-auto mx-auto rounded-lg shadow-lg animate__animated animate__zoomIn"> <div id="smorfiaText" class="smorfia-text animate__animated animate__fadeIn"></div> </div> </div> <script> function generateQRCode() { const link = "https://tombola.owlhosting.cloud/estrai/telefono/{{ session_id }}"; if (link) { const qr = new QRious({ element: document.getElementById('canvas'), value: link, size: 200 }); } else { alert('Per favore, inserisci un link valido.'); } } document.addEventListener('DOMContentLoaded', function() { generateQRCode(); const tabellone = document.getElementById('tabellone'); const estraiBtn = document.getElementById('estraiBtn'); const resetBtn = document.getElementById('resetBtn'); const fullscreenBtn = document.getElementById('fullscreenBtn'); const voiceBtn = document.getElementById('voiceBtn'); const numeroEstratto = document.getElementById('numeroEstratto'); const numeroImg = document.getElementById('numeroImg'); const smorfiaText = document.getElementById('smorfiaText'); const ultimoNumero = document.getElementById('ultimoNumero'); const numeroEstrattoText = document.getElementById('numeroEstrattoText'); let isListening = false; // Dizionario della Smorfia Napoletana const smorfie = { 1: 'L\'Italia', 2: 'A criatura', 3: 'A jatta', 4: 'O puorco', 5: 'A mano', 6: 'Chella che guarda \'nterra', 7: 'A scuppetta', 8: 'A maronna', 9: 'A figliata', 10: 'E fasule', 11: 'E surice', 12: 'E surdate', 13: "Sant' Antonio", 14: "O mbriaco", 15: "O guaglione", 16: "O culo", 17: "A disgrazia", 18: "O sanghe", 19: "A resata", 20: "A festa", 21: "A femmena annura", 22: "O pazzo", 23: "O scemo", 24: "E gguardie", 25: "Natale", 26: "Nanninella", 27: "O cantero", 28: "E zzizze", 29: "O pate d''e criature", 30: "E palle d''o tenente", 31: "O padrone 'e casa", 32: "O capitone", 33: "Ll'anne ' e Cristo", 34: "A capa", 35: "L'aucielluzzo", 36: "E castagnelle", 37: "O monaco", 38: "E mmazzate", 39: "A funa 'nganna", 40: "A paposcia", 41: "O curtiello", 42: "O ccafè", 43: "A femmena 'ncopp'' o balcone", 44: "E ccancelle", 45: "O vino", 46: "E denare", 47: "O muorto", 48: "O muorto che parla", 49: "O piezzo ' e carne", 50: "O ppane", 51: "O ciardino", 52: "A mamma", 53: "O viecchio", 54: "O cappiello", 55: "A museca", 56: "A caruta", 57: "O scartellato", 58: "O paccotto", 59: "E pile", 60: "Se lamenta", 61: "O cacciatore", 62: "O muorto acciso", 63: "A sposa", 64: "A sciammeria", 65: "O chianto", 66: "E ddoie zetelle", 67: "O totano int''a chitarra", 68: "A zuppa cotta", 69: "Sott'e'ncoppo", 70: "O palazzo", 71: "L'ommo 'e merda", 72: "A meraviglia", 73: "O spitale", 74: "A rotta", 75: "Pullecenella", 76: "A funtana", 77: "E diavule", 78: "A bella figliola", 79: "O mariuolo", 80: "A vocca", 81: "E sciure", 82: "A tavula 'mbandita", 83: "O maletiempo", 84: "A cchiesa", 85: "Ll'aneme 'o priatorio", 86: "A puteca", 87: "E perucchie", 88: "E casecavalle", 89: "A vecchia", 90: "A paura", }; for (let i = 1; i <= 90; i++) { const img = new Image(); img.src = `/static/img/numeri/${i}.jpg`; const audio = new Audio(`/static/audio/numeri/${i}.aac`); audio.preload = 'auto'; } async function refreshTabellone() { const response = await fetch('/refresh/tabellone/{{ session_id }}'); const data = await response.json(); data.numeri_estratti.forEach(n => { const el = document.getElementById(`numero-${n}`); el.classList.add('estratto'); }); document.querySelectorAll('.ultimo, .penultimo').forEach(el => { el.classList.remove('ultimo', 'penultimo'); }); if (data.ultimo_numero) { document.getElementById(`numero-${data.ultimo_numero}`).classList.add('ultimo'); ultimoNumero.querySelector('span').textContent = data.ultimo_numero; } if (data.penultimo_numero) { document.getElementById(`numero-${data.penultimo_numero}`).classList.add('penultimo'); } } refreshTabellone(); setInterval(addNumber, 1000); async function addNumber() { const response = await fetch('/last_number/{{ session_id }}'); const data = await response.json(); if (data.error || !data.numero || data.numero < 1 || data.numero > 90) { //alert(data.error); //return; } if (data.numero <= 90 && data.numero >= 1) { data.numeri_estratti.forEach(n => { const el = document.getElementById(`numero-${n}`); el.classList.add('estratto'); }); document.querySelectorAll('.ultimo, .penultimo').forEach(el => { el.classList.remove('ultimo', 'penultimo'); }); if (data.ultimo_numero) { document.getElementById(`numero-${data.ultimo_numero}`).classList.add('ultimo'); ultimoNumero.querySelector('span').textContent = data.ultimo_numero; } if (data.penultimo_numero) { document.getElementById(`numero-${data.penultimo_numero}`).classList.add('penultimo'); } numeroImg.src = `/static/img/numeri/${data.numero}.jpg`; smorfiaText.textContent = smorfie[data.numero]; numeroEstratto.classList.remove('hidden'); numeroEstrattoText.textContent = data.numero; new Audio(`/static/audio/numeri/${data.numero}.aac`).play(); setTimeout(() => { numeroEstratto.classList.add('hidden'); }, 5000); } } async function estraiNumero() { try { const response = await fetch('/estrai/{{ session_id }}'); const data = await response.json(); if (data.error) { alert(data.error); return; } data.numeri_estratti.forEach(n => { const el = document.getElementById(`numero-${n}`); el.classList.add('estratto'); }); document.querySelectorAll('.ultimo, .penultimo').forEach(el => { el.classList.remove('ultimo', 'penultimo'); }); if (data.ultimo_numero) { document.getElementById(`numero-${data.ultimo_numero}`).classList.add('ultimo'); ultimoNumero.querySelector('span').textContent = data.ultimo_numero; } if (data.penultimo_numero) { document.getElementById(`numero-${data.penultimo_numero}`).classList.add('penultimo'); } // Mostra animazione, smorfia e riproduci audio //numeroImg.src = `/static/img/numeri/${data.numero}.jpg`; //smorfiaText.textContent = smorfie[data.numero]; //numeroEstratto.classList.remove('hidden'); //numeroEstrattoText.textContent = data.numero; //new Audio(`/static/audio/numeri/${data.numero}.aac`).play(); setTimeout(() => { numeroEstratto.classList.add('hidden'); }, 5000); } catch (error) { console.error('Errore durante l\'estrazione:', error); } } const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'it-IT'; recognition.continuous = true; recognition.interimResults = false; function parlaRisposta(testo) { const msg = new SpeechSynthesisUtterance(); msg.lang = 'it-IT'; msg.text = testo; window.speechSynthesis.speak(msg); } const questionPatterns = [ /(?:il )?numero (\d+) (?:è stato)? estratto\??/i, /(?:è uscito|è stato estratto) (?:il )?numero (\d+)\??/i, /hai estratto (?:il )?numero (\d+)\??/i, /c'è (?:il )?numero (\d+)\??/i, /(?:il ) ?numero (\d+) è uscito\??/i, /il ?numero (\d+) è stato estratto\??/i, /il (\d+) è uscito\??/i, /il (\d+) è stato estratto\??/i, /il ?numero (\d+) è tra quelli estratti\??/i, /il (\d+) è tra quelli estratti\??/i, /il (\d+) deve ancora uscire\??/i, /il (\d+) deve ancora essere estratto\??/i, /il (\d+) deve ancora essere uscito\??/i, /(\d+) è un numero estratto\??/i, ]; recognition.onresult = async (event) => { const result = event.results[event.results.length - 1][0].transcript.toLowerCase(); console.log('Testo riconosciuto:', result); if (result.includes('estrai') || result.includes('nuovo numero')) { estraiNumero(); return; } let numeroMatch = null; for (const pattern of questionPatterns) { const match = result.match(pattern); if (match) { numeroMatch = match; break; } } if (numeroMatch) { const numero = parseInt(numeroMatch[1]); if (numero >= 1 && numero <= 90) { const response = await fetch(`/verifica/{{ session_id }}/${numero}`); const data = await response.json(); const risposte = data.estratto ? [ `Sì, il numero ${numero} è stato estratto`, `Sì, il ${numero} è uscito`, `Il numero ${numero} è tra quelli estratti` ] : [ `No, il numero ${numero} non è stato ancora estratto`, `No, il ${numero} non è ancora uscito`, `Il numero ${numero} deve ancora uscire`, ]; parlaRisposta(risposte[Math.floor(Math.random() * risposte.length)]); } } }; recognition.onerror = (event) => { console.error('Errore nel riconoscimento vocale:', event.error); recognition.stop(); if (isListening) { setTimeout(() => recognition.start(), 1000); } }; recognition.onend = () => { if (isListening) { recognition.start(); } }; estraiBtn.addEventListener('click', estraiNumero); resetBtn.addEventListener('click', async () => { const response = await fetch('/reset/{{ session_id }}'); const data = await response.json(); if (data.success) { document.querySelectorAll('.numero').forEach(el => { el.classList.remove('estratto', 'ultimo', 'penultimo'); }); ultimoNumero.querySelector('span').textContent = '-'; } }); fullscreenBtn.addEventListener('click', () => { const container = document.getElementById('app'); if (!document.fullscreenElement) { container.requestFullscreen(); container.classList.add('fullscreen'); } else { document.exitFullscreen(); container.classList.remove('fullscreen'); } }); voiceBtn.addEventListener('click', () => { if (!isListening) { recognition.start().catch(error => { console.error('Errore durante l\'attivazione del riconoscimento vocale:', error); }); isListening = true; voiceBtn.textContent = 'Disattiva Voce'; voiceBtn.classList.remove('bg-green-500', 'hover:bg-green-700'); voiceBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-700'); } else { recognition.stop(); isListening = false; voiceBtn.textContent = 'Attiva Voce'; voiceBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-700'); voiceBtn.classList.add('bg-green-500', 'hover:bg-green-700'); } }); window.addEventListener('load', () => { isListening = false; voiceBtn.textContent = 'Attiva Voce'; voiceBtn.classList.remove('bg-green-500', 'hover:bg-green-700'); voiceBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-700'); }); }); </script> </body> </html>