Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chat Italiana</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Animazione per l'icona della chat */ | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-10px);} | |
| 60% {transform: translateY(-5px);} | |
| } | |
| .bounce { | |
| animation: bounce 2s infinite; | |
| } | |
| /* Transizione per l'apertura della chat */ | |
| .chat-container { | |
| transition: all 0.3s ease; | |
| } | |
| /* Stile per i messaggi */ | |
| .message { | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| margin-bottom: 0.75rem; | |
| border-radius: 1rem; | |
| padding: 0.75rem 1rem; | |
| } | |
| /* Effetto hover per i pulsanti */ | |
| .btn-hover:hover { | |
| transform: scale(1.05); | |
| transition: transform 0.2s; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <!-- Contenitore principale della chat --> | |
| <div class="fixed bottom-8 right-8 z-50"> | |
| <!-- Pulsante per aprire/chiudere la chat --> | |
| <button id="chat-toggle" class="bg-blue-600 text-white w-16 h-16 rounded-full shadow-lg flex items-center justify-center hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"> | |
| <i class="fas fa-comments text-2xl bounce"></i> | |
| </button> | |
| <!-- Finestra della chat --> | |
| <div id="chat-window" class="chat-container hidden bg-white rounded-lg shadow-xl w-80 h-[500px] flex flex-col absolute bottom-20 right-0"> | |
| <!-- Header della chat --> | |
| <div class="bg-blue-600 text-white p-4 rounded-t-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-dots mr-2"></i> | |
| <h3 class="font-bold">Chat Italiana</h3> | |
| </div> | |
| <button id="close-chat" class="text-white hover:text-gray-200 focus:outline-none"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Area dei messaggi --> | |
| <div id="chat-messages" class="flex-1 p-4 overflow-y-auto bg-gray-50"> | |
| <!-- Messaggio di benvenuto --> | |
| <div class="flex justify-start mb-4"> | |
| <div class="message bg-blue-100 text-gray-800"> | |
| <p class="font-semibold">Assistente</p> | |
| <p>Ciao! Come posso aiutarti oggi? 😊</p> | |
| <p class="text-xs text-gray-500 mt-1">11:23</p> | |
| </div> | |
| </div> | |
| <!-- Esempio di messaggio utente --> | |
| <div class="flex justify-end mb-4"> | |
| <div class="message bg-blue-600 text-white"> | |
| <p>Ciao, vorrei informazioni</p> | |
| <p class="text-xs text-blue-100 mt-1">11:24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Area di input --> | |
| <div class="p-3 border-t border-gray-200 bg-white"> | |
| <div class="flex items-center"> | |
| <input id="message-input" type="text" placeholder="Scrivi un messaggio..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <button id="send-button" class="ml-2 bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center btn-hover"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 text-center mt-2">Scrivi e premi Invio per mandare</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contenuto della tua pagina --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-3xl font-bold text-center mb-8">Benvenuto nel mio sito</h1> | |
| <div class="bg-white rounded-lg shadow-md p-6 max-w-3xl mx-auto"> | |
| <p class="text-gray-700 mb-4">Questa è la pagina principale del mio sito web. Qui puoi trovare tutte le informazioni che ti servono.</p> | |
| <p class="text-gray-700">Se hai bisogno di aiuto, clicca sull'icona della chat in basso a destra per parlare con il nostro assistente virtuale.</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatToggle = document.getElementById('chat-toggle'); | |
| const chatWindow = document.getElementById('chat-window'); | |
| const closeChat = document.getElementById('close-chat'); | |
| const messageInput = document.getElementById('message-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| // Apri/chiudi la chat | |
| chatToggle.addEventListener('click', function() { | |
| chatWindow.classList.toggle('hidden'); | |
| }); | |
| // Chiudi la chat | |
| closeChat.addEventListener('click', function() { | |
| chatWindow.classList.add('hidden'); | |
| }); | |
| // Invia messaggio con il pulsante | |
| sendButton.addEventListener('click', sendMessage); | |
| // Invia messaggio con Invio | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| const messageText = messageInput.value.trim(); | |
| if (messageText !== '') { | |
| // Aggiungi il messaggio dell'utente | |
| addMessage(messageText, 'user'); | |
| // Simula una risposta dopo un breve ritardo | |
| setTimeout(() => { | |
| const responses = [ | |
| "Grazie per il tuo messaggio!", | |
| "Posso aiutarti con qualcosa in particolare?", | |
| "Un momento, sto cercando le informazioni per te...", | |
| "Ho capito, fammi controllare.", | |
| "Ecco le informazioni che mi hai chiesto!" | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addMessage(randomResponse, 'bot'); | |
| }, 1000); | |
| // Pulisci l'input | |
| messageInput.value = ''; | |
| } | |
| } | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.classList.add('flex', 'mb-4'); | |
| const now = new Date(); | |
| const timeString = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes(); | |
| if (sender === 'user') { | |
| messageDiv.classList.add('justify-end'); | |
| messageDiv.innerHTML = ` | |
| <div class="message bg-blue-600 text-white"> | |
| <p>${text}</p> | |
| <p class="text-xs text-blue-100 mt-1">${timeString}</p> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.classList.add('justify-start'); | |
| messageDiv.innerHTML = ` | |
| <div class="message bg-blue-100 text-gray-800"> | |
| <p class="font-semibold">Assistente</p> | |
| <p>${text}</p> | |
| <p class="text-xs text-gray-500 mt-1">${timeString}</p> | |
| </div> | |
| `; | |
| } | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ecoradio/angelofox76" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |