Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sei invitato alla mia laurea!</title> | |
| <style> | |
| :root { | |
| --bg-color: #f4f7f5; | |
| --primary-color: #6b8e76; | |
| --primary-light: #e8efe9; | |
| --primary-dark: #4a6652; | |
| --text-dark: #2c3e31; | |
| --text-light: #ffffff; | |
| --bot-bubble: #ffffff; | |
| --user-bubble: #e2ede4; | |
| --accent-color: #bfa37a; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-dark); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| padding: 10px; | |
| } | |
| .chat-wrapper { | |
| width: 100%; | |
| max-width: 480px; | |
| height: 90vh; | |
| max-height: 800px; | |
| background: #ffffff; | |
| border-radius: 24px; | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid rgba(0, 0, 0, 0.03); | |
| } | |
| .chat-header { | |
| background-color: var(--primary-color); | |
| color: var(--text-light); | |
| padding: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .chat-header .avatar { | |
| width: 42px; | |
| height: 42px; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 24px; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .chat-header .title-area h1 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| letter-spacing: 0.3px; | |
| } | |
| .chat-header .title-area p { | |
| font-size: 12px; | |
| opacity: 0.85; | |
| margin-top: 2px; | |
| } | |
| .chat-body { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| background-color: #fafbfc; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| .chat-body::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| .chat-body::-webkit-scrollbar-thumb { | |
| background-color: rgba(0,0,0,0.05); | |
| border-radius: 10px; | |
| } | |
| .bubble { | |
| max-width: 85%; | |
| padding: 14px 18px; | |
| border-radius: 18px; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); | |
| opacity: 0; | |
| transform: translateY(10px); | |
| animation: showBubble 0.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; | |
| } | |
| .bubble.bot { | |
| background-color: var(--bot-bubble); | |
| color: var(--text-dark); | |
| align-self: flex-start; | |
| border-top-left-radius: 4px; | |
| border: 1px solid #edf1ee; | |
| } | |
| .bubble.user { | |
| background-color: var(--user-bubble); | |
| color: var(--text-dark); | |
| align-self: flex-end; | |
| border-top-right-radius: 4px; | |
| } | |
| .info-card { | |
| background: #ffffff; | |
| border-left: 3px solid var(--primary-color); | |
| padding: 12px 14px; | |
| margin-top: 8px; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| background-color: #fcfdfe; | |
| } | |
| .info-title { | |
| font-weight: 600; | |
| color: var(--primary-dark); | |
| margin-bottom: 4px; | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| letter-spacing: 0.5px; | |
| } | |
| .form-container { | |
| width: 100%; | |
| background: #ffffff; | |
| border: 1px solid #e1e6e2; | |
| border-radius: 18px; | |
| padding: 20px; | |
| align-self: flex-start; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); | |
| display: none; | |
| flex-direction: column; | |
| gap: 14px; | |
| opacity: 0; | |
| animation: showBubble 0.5s ease forwards; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .form-group label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--primary-dark); | |
| } | |
| .form-group input, .form-group select { | |
| width: 100%; | |
| padding: 11px 14px; | |
| border: 1px solid #cbd5ce; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| color: var(--text-dark); | |
| background-color: #fbfcfb; | |
| transition: all 0.2s ease; | |
| outline: none; | |
| } | |
| .form-group input:focus, .form-group select:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(107, 142, 118, 0.15); | |
| background-color: #ffffff; | |
| } | |
| .submit-btn { | |
| background-color: var(--primary-color); | |
| color: var(--text-light); | |
| border: none; | |
| padding: 13px; | |
| border-radius: 10px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background-color 0.2s, transform 0.1s; | |
| margin-top: 6px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .submit-btn:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| .submit-btn:active { | |
| transform: scale(0.98); | |
| } | |
| .typing-indicator { | |
| display: none; | |
| align-self: flex-start; | |
| background-color: #eef2ef; | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| border-top-left-radius: 4px; | |
| } | |
| .typing-dots { | |
| display: flex; | |
| gap: 4px; | |
| align-items: center; | |
| height: 12px; | |
| } | |
| .dot { | |
| width: 7px; | |
| height: 7px; | |
| background-color: #9cb0a1; | |
| border-radius: 50%; | |
| animation: bounce 1.3s infinite ease-in-out; | |
| } | |
| .dot:nth-child(2) { animation-delay: 0.15s; } | |
| .dot:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes showBubble { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-6px); } | |
| } | |
| @keyframes popIn { | |
| 0% { transform: scale(0.8) translateY(20px); opacity: 0; } | |
| 50% { transform: scale(1.05) translateY(0); opacity: 1; } | |
| 100% { transform: scale(1) translateY(0); opacity: 1; } | |
| } | |
| .success-message { | |
| text-align: center; | |
| padding: 20px; | |
| color: var(--primary-dark); | |
| display: none; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| background-color: var(--primary-light); | |
| border: 2px dashed var(--primary-color); | |
| border-radius: 18px; | |
| margin-top: 10px; | |
| opacity: 0; | |
| animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; | |
| } | |
| .success-icon { | |
| font-size: 38px; | |
| margin-bottom: 4px; | |
| animation: bounce 2s infinite ease-in-out; | |
| } | |
| /* Stile per l'animazione a sorpresa dei panzerotti */ | |
| .panzerotti-reaction { | |
| display: none; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 8px; | |
| padding: 10px 14px; | |
| background-color: var(--primary-light); | |
| border: 1px solid #cbd5ce; | |
| border-radius: 12px; | |
| color: var(--primary-dark); | |
| font-weight: 600; | |
| font-size: 13px; | |
| animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; | |
| } | |
| .panzerotti-reaction span.emoji { | |
| font-size: 24px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-wrapper"> | |
| <div class="chat-header"> | |
| <div class="avatar">🤖</div> | |
| <div class="title-area"> | |
| <h1>Assistente Organizzativo</h1> | |
| <p>Online • AI Organizer</p> | |
| </div> | |
| </div> | |
| <div class="chat-body" id="chatBody"> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <div class="typing-dots"> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| </div> | |
| </div> | |
| <form class="form-container" id="rsvpForm"> | |
| <div class="form-group"> | |
| <label for="fullName">Nome e Cognome (Principale)</label> | |
| <input type="text" id="fullName" name="fullName" placeholder="Es. Mario Rossi" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="guests">Accompagnatori (es. partner, figli)</label> | |
| <input type="text" id="guests" name="guests" placeholder="Es. Nessuno, oppure: Giulia e Marco"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="attendance">Parteciperete alla festa?</label> | |
| <select id="attendance" name="attendance" required> | |
| <option value="" disabled selected>Seleziona un'opzione</option> | |
| <option value="Sì">Sì, con molto piacere! 🎉</option> | |
| <option value="No">Purtroppo non potremo esserci 😢</option> | |
| </select> | |
| <!-- DIV NASCOSTO PER LA REAZIONE SUI PANZEROTTI --> | |
| <div id="panzerottiBox" class="panzerotti-reaction"> | |
| <span class="emoji">🤖🥟</span> | |
| <span>Qualcuno ha detto panzerotti?! Preparo i sensori gustativi!</span> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="notes">Allergie, intolleranze o preferenze alimentari (di tutti)</label> | |
| <input type="text" id="notes" name="notes" placeholder="Es. Nessuna, oppure: Mario è celiaco"> | |
| </div> | |
| <button type="submit" class="submit-btn" id="submitBtn"> | |
| <span>Invia Risposta</span> | |
| </button> | |
| </form> | |
| <div class="success-message" id="successMessage"> | |
| <div class="success-icon">🎉</div> | |
| <strong style="font-size: 1.1em;">Risposta registrata correttamente</strong> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const SCRIPT_URL = "https://script.google.com/macros/s/AKfycbx3JRNk7CaAtpWRJQl_a2r7S3eNgcbRAkmKuLgEwJxsbKgA6_2dA9SGaCZZSIWjZq9T/exec"; | |
| const chatBody = document.getElementById('chatBody'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| const rsvpForm = document.getElementById('rsvpForm'); | |
| const successMessage = document.getElementById('successMessage'); | |
| const attendanceSelect = document.getElementById('attendance'); | |
| const panzerottiBox = document.getElementById('panzerottiBox'); | |
| // Mostra o nasconde la reazione panzerotti in base alla scelta | |
| attendanceSelect.addEventListener('change', function(e) { | |
| if (e.target.value === 'Sì') { | |
| panzerottiBox.style.display = 'flex'; | |
| // Scorri un po' giù per assicurarti che la reazione sia visibile | |
| setTimeout(() => { | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| }, 100); | |
| } else { | |
| panzerottiBox.style.display = 'none'; | |
| } | |
| }); | |
| const scriptTimeline = [ | |
| { | |
| type: 'bot', | |
| text: 'Ciao! Sono l\'assistente personale di Alberta. Dopo innumerevoli ore di addestramento intenso (studio) e test dei modelli (sessioni d\'esame)...', | |
| delay: 2500 | |
| }, | |
| { | |
| type: 'bot', | |
| text: 'L\'algoritmo perfetto è stato trovato e gli esami sono finiti. Dobbiamo festeggiare! 🍾', | |
| delay: 4500 | |
| }, | |
| { | |
| type: 'bot', | |
| text: 'Sei ufficialmente invitato a condividere questo momento speciale con noi. Ecco le informazioni che Alberta mi ha chiesto di darti:', | |
| delay: 4500 | |
| }, | |
| { | |
| type: 'bot', | |
| text: '<div class="info-card"><div class="info-title">📌 La Proclamazione</div><strong>Data:</strong> 15 Luglio 2026<br><strong>Luogo:</strong> Dipartimento di Informatica<br><strong>Indirizzo:</strong> Via Edoardo Orabona, 4, Bari (BA)</div>' + | |
| '<div class="info-card"><div class="info-title">🥂 La Festa</div><strong>Data:</strong> 18 Luglio 2026 • Ore 19:30<br><strong>Luogo:</strong> Casina delle Rose<br><strong>Indirizzo:</strong> Strada Comunale Marinesca, 624</div>', | |
| delay: 5500 | |
| }, | |
| { | |
| type: 'bot', | |
| text: 'Per ottimizzare l\'organizzazione della festa, ti chiedo gentilmente di inserire i tuoi dati per aggiornare il foglio delle presenze in tempo reale:', | |
| delay: 6000 | |
| } | |
| ]; | |
| let currentStep = 0; | |
| function showNextMessage() { | |
| if (currentStep < scriptTimeline.length) { | |
| const step = scriptTimeline[currentStep]; | |
| typingIndicator.style.display = 'block'; | |
| chatBody.appendChild(typingIndicator); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| setTimeout(() => { | |
| typingIndicator.style.display = 'none'; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `bubble ${step.type}`; | |
| bubble.innerHTML = step.text; | |
| chatBody.insertBefore(bubble, typingIndicator); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| currentStep++; | |
| showNextMessage(); | |
| }, step.delay); | |
| } else { | |
| setTimeout(() => { | |
| rsvpForm.style.display = 'flex'; | |
| chatBody.appendChild(rsvpForm); | |
| setTimeout(() => { rsvpForm.style.opacity = '1'; }, 50); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| }, 800); | |
| } | |
| } | |
| window.addEventListener('DOMContentLoaded', () => { | |
| showNextMessage(); | |
| }); | |
| rsvpForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| submitBtn.disabled = true; | |
| submitBtn.innerHTML = '<span>Elaborazione dati...</span>'; | |
| const name = document.getElementById('fullName').value; | |
| const guests = document.getElementById('guests').value || 'Nessuno'; | |
| const att = document.getElementById('attendance').value; | |
| const notes = document.getElementById('notes').value || 'Nessuna'; | |
| const userBubble = document.createElement('div'); | |
| userBubble.className = 'bubble user'; | |
| userBubble.innerHTML = `Ecco i dati inseriti:<br>• <strong>Nome:</strong> ${name}<br>• <strong>Accompagnatori:</strong> ${guests}<br>• <strong>Partecipazione:</strong> ${att}<br>• <strong>Note/Allergie:</strong> ${notes}`; | |
| chatBody.insertBefore(userBubble, rsvpForm); | |
| rsvpForm.style.display = 'none'; | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| const params = new URLSearchParams(); | |
| params.append('name', name); | |
| params.append('guests', guests); | |
| params.append('attendance', att); | |
| params.append('notes', notes); | |
| fetch(SCRIPT_URL, { | |
| method: 'POST', | |
| body: params, | |
| mode: 'no-cors', | |
| headers: { | |
| 'Content-Type': 'application/x-www-form-urlencoded' | |
| } | |
| }) | |
| .then(() => { | |
| showSuccess(); | |
| }) | |
| .catch(error => { | |
| console.error('Errore durante l\'invio dei dati:', error); | |
| showSuccess(); | |
| }); | |
| }); | |
| function showSuccess() { | |
| typingIndicator.style.display = 'block'; | |
| chatBody.appendChild(typingIndicator); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| setTimeout(() => { | |
| typingIndicator.style.display = 'none'; | |
| successMessage.style.display = 'flex'; | |
| chatBody.appendChild(successMessage); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| }, 1500); | |
| } | |
| </script> | |
| </body> | |
| </html> |