add some gradients to the background, redo the TechSales AI element, use liquid glass design for the whole app - Follow Up Deployment
4d1c3bf
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Liquid Glass AI Chat</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: '#0f172a', | |
| darker: '#020617', | |
| primary: '#3b82f6', | |
| neon: '#00f5d4', | |
| neonPink: '#f72585', | |
| glass: 'rgba(255, 255, 255, 0.05)' | |
| }, | |
| boxShadow: { | |
| 'neon': '0 0 10px #00f5d4, 0 0 20px #00f5d4', | |
| 'neon-pink': '0 0 10px #f72585, 0 0 20px #f72585', | |
| 'neon-blue': '0 0 10px #3b82f6, 0 0 20px #3b82f6' | |
| }, | |
| backdropBlur: { | |
| 'glass': '12px' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #00f5d4 } | |
| } | |
| .typing-animation { | |
| overflow: hidden; | |
| border-right: .15em solid #00f5d4; | |
| white-space: nowrap; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| .glass-effect { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .message-glass { | |
| background: rgba(15, 23, 42, 0.4); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px rgba(0, 245, 212, 0.5); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-darker via-[#0c1120] to-[#020617] text-gray-200 min-h-screen flex flex-col"> | |
| <div class="container mx-auto px-4 py-8 flex-1 flex flex-col max-w-4xl"> | |
| <div class="relative glass-effect rounded-2xl p-6 mb-6 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-primary/10 via-neon/5 to-primary/10 opacity-60"></div> | |
| <div class="relative z-10"> | |
| <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon via-primary to-neon mb-2 tracking-tighter">TECH SALES AI</h1> | |
| <p class="text-gray-300/80 font-light tracking-wider">YOUR PERSONAL TECHNICAL SALES ASSISTANT</p> | |
| </div> | |
| </div> | |
| <div id="chat-container" class="flex-1 glass-effect rounded-2xl p-4 overflow-y-auto mb-4 relative" style="height: 60vh; scroll-behavior: smooth;"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent opacity-30 pointer-events-none"></div> | |
| <div id="chat-messages" class="space-y-4"> | |
| <!-- Messages will appear here --> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-4 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-primary/10 to-neon/5 opacity-30"></div> | |
| <div class="flex space-x-2"> | |
| <input | |
| id="user-input" | |
| type="text" | |
| placeholder="Ask about our products..." | |
| class="flex-1 bg-dark/70 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent text-white" | |
| disabled | |
| > | |
| <button | |
| id="send-btn" | |
| class="bg-gradient-to-r from-primary to-neon text-white px-6 py-3 rounded-xl font-medium hover:shadow-neon transition-all disabled:opacity-50" | |
| disabled | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button | |
| id="play-conversation" | |
| class="fixed bottom-6 right-6 bg-gradient-to-r from-neonPink/90 to-primary/90 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-neon-pink hover:shadow-neon-blue transition-all z-10 backdrop-blur-sm border border-white/10 hover:scale-110" | |
| title="Play conversation" | |
| > | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| <script> | |
| // Conversation script | |
| const conversation = [ | |
| { | |
| sender: 'ai', | |
| text: 'Hello! I\'m your TechSales AI assistant. How can I help you today?', | |
| delay: 1000 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'Hi! I\'m looking for a high-performance gaming laptop. Can you recommend something?', | |
| delay: 2000 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'Certainly! Based on your interest in gaming, I\'d recommend our Quantum X9 Pro. It features an Intel i9-13900HX processor, RTX 4090 GPU, 32GB DDR5 RAM, and a 240Hz QHD display. Would you like more details?', | |
| delay: 3000 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'That sounds great, but my budget is around $2000. Do you have options in that range?', | |
| delay: 2500 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'Understood! For $2000, I\'d suggest the Quantum X7. It has an i7-13700H, RTX 4070, 16GB RAM, and 165Hz FHD display. Nearly identical build quality with slightly scaled-back specs to hit that price point.', | |
| delay: 3500 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'How does the X7 compare to the Alienware m16?', | |
| delay: 2200 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'Great question! The Quantum X7 offers better cooling (our liquid metal thermal system keeps temps 10-15°C lower), 20% better battery life, and our signature mechanical keyboard. The m16 has slightly better speakers and more RGB lighting zones. Performance is nearly identical.', | |
| delay: 4000 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'Can you show me some pictures of the X7?', | |
| delay: 1800 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'gallery:quantum_x7', | |
| delay: 2000 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'What about the ports? I need Thunderbolt 4 and HDMI 2.1', | |
| delay: 2300 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'The X7 has:\n- 2x Thunderbolt 4 (USB-C)\n- HDMI 2.1\n- 3x USB-A 3.2 Gen2\n- SD card reader\n- Ethernet\n- 3.5mm combo jack\nAll ports are on the rear for clean cable management.', | |
| delay: 3500 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'Perfect! What about warranty options?', | |
| delay: 2000 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'Standard warranty is 2 years parts/labor. We offer:\n1. Basic: +1 year ($99)\n2. Premium: +2 years with accidental damage coverage ($199)\n3. Ultimate: +3 years with on-site service ($299)\nAll extend the battery coverage which normally is 1 year.', | |
| delay: 4000 | |
| }, | |
| { | |
| sender: 'user', | |
| text: 'Thanks! I think I\'ll go with the X7 with Premium warranty.', | |
| delay: 2500 | |
| }, | |
| { | |
| sender: 'ai', | |
| text: 'Excellent choice! Your total comes to $2,199. Would you like to proceed to checkout or need any final details?', | |
| delay: 3000 | |
| } | |
| ]; | |
| // Gallery images | |
| const galleries = { | |
| quantum_x7: [ | |
| { url: 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: 'Quantum X7 front view' }, | |
| { url: 'https://images.unsplash.com/photo-1629131726692-1accd0df53e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: 'Quantum X7 keyboard' }, | |
| { url: 'https://images.unsplash.com/photo-1629131726692-1accd0df53e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: 'Quantum X7 ports' }, | |
| { url: 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: 'Quantum X7 side view' }, | |
| { url: 'https://images.unsplash.com/photo-1629131726692-1accd0df53e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: 'Quantum X7 display' } | |
| ] | |
| }; | |
| // DOM elements | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const playBtn = document.getElementById('play-conversation'); | |
| // State | |
| let isPlaying = false; | |
| let currentMessageIndex = 0; | |
| // Functions | |
| function addMessage(sender, text, isTyping = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'} fade-in`; | |
| const messageBubble = document.createElement('div'); | |
| messageBubble.className = `message-glass rounded-2xl px-4 py-3 max-w-xs md:max-w-md lg:max-w-lg ${ | |
| sender === 'user' | |
| ? 'bg-gradient-to-r from-primary/30 to-primary/10 border border-primary/20 shadow-neon-blue' | |
| : 'bg-gradient-to-r from-dark/70 to-dark/50 border border-gray-700' | |
| }`; | |
| if (isTyping) { | |
| messageBubble.innerHTML = ` | |
| <div class="flex space-x-2 items-center"> | |
| <div class="w-2 h-2 rounded-full bg-neon animate-pulse"></div> | |
| <div class="w-2 h-2 rounded-full bg-neon animate-pulse delay-100"></div> | |
| <div class="w-2 h-2 rounded-full bg-neon animate-pulse delay-200"></div> | |
| </div> | |
| `; | |
| } else { | |
| if (text.includes('\n')) { | |
| messageBubble.innerHTML = text.split('\n').map(line => `<p class="mb-1 last:mb-0">${line}</p>`).join(''); | |
| } else { | |
| messageBubble.textContent = text; | |
| } | |
| } | |
| messageDiv.appendChild(messageBubble); | |
| chatMessages.appendChild(messageDiv); | |
| // Scroll to bottom with smooth behavior | |
| setTimeout(() => { | |
| chatContainer.scrollTo({ | |
| top: chatMessages.scrollHeight, | |
| behavior: 'smooth' | |
| }); | |
| }, 10); | |
| return messageBubble; | |
| } | |
| function simulateTyping(text, element, delay, callback) { | |
| element.textContent = text; | |
| // Scroll to bottom with smooth behavior | |
| setTimeout(() => { | |
| chatContainer.scrollTo({ | |
| top: chatMessages.scrollHeight, | |
| behavior: 'smooth' | |
| }); | |
| }, 10); | |
| if (callback) callback(); | |
| } | |
| function showGallery(galleryId) { | |
| const gallery = galleries[galleryId]; | |
| if (!gallery) return; | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex justify-start fade-in'; | |
| const galleryBubble = document.createElement('div'); | |
| galleryBubble.className = 'message-glass rounded-2xl px-4 py-3 max-w-xs md:max-w-md lg:max-w-lg bg-gradient-to-r from-dark/70 to-dark/50 border border-gray-700'; | |
| const galleryGrid = document.createElement('div'); | |
| galleryGrid.className = 'grid grid-cols-2 gap-2'; | |
| gallery.forEach(img => { | |
| const imgDiv = document.createElement('div'); | |
| imgDiv.className = 'gallery-item rounded-lg overflow-hidden'; | |
| imgDiv.innerHTML = ` | |
| <img src="${img.url}" alt="${img.alt}" class="w-full h-auto object-cover"> | |
| <p class="text-xs text-gray-400 mt-1">${img.alt}</p> | |
| `; | |
| galleryGrid.appendChild(imgDiv); | |
| }); | |
| galleryBubble.appendChild(galleryGrid); | |
| messageDiv.appendChild(galleryBubble); | |
| chatMessages.appendChild(messageDiv); | |
| // Scroll to bottom with smooth behavior | |
| setTimeout(() => { | |
| chatMessages.scrollTo({ | |
| top: chatMessages.scrollHeight, | |
| behavior: 'smooth' | |
| }); | |
| }, 10); | |
| } | |
| function playNextMessage() { | |
| if (currentMessageIndex >= conversation.length) { | |
| isPlaying = false; | |
| playBtn.innerHTML = '<i class="fas fa-redo"></i>'; | |
| return; | |
| } | |
| const message = conversation[currentMessageIndex]; | |
| if (message.sender === 'user') { | |
| // Simulate user typing in input | |
| userInput.disabled = false; | |
| sendBtn.disabled = false; | |
| let typedSoFar = ''; | |
| const typingInterval = setInterval(() => { | |
| if (typedSoFar.length < message.text.length) { | |
| typedSoFar = message.text.substring(0, typedSoFar.length + 1); | |
| userInput.value = typedSoFar; | |
| } else { | |
| clearInterval(typingInterval); | |
| // Add to chat and clear input | |
| addMessage('user', message.text); | |
| userInput.value = ''; | |
| userInput.disabled = true; | |
| sendBtn.disabled = true; | |
| // Process next message after delay | |
| setTimeout(playNextMessage, 1000); | |
| currentMessageIndex++; | |
| } | |
| }, 50); | |
| } else { | |
| // AI response | |
| if (message.text.startsWith('gallery:')) { | |
| const galleryId = message.text.split(':')[1]; | |
| setTimeout(() => { | |
| showGallery(galleryId); | |
| setTimeout(playNextMessage, 1000); | |
| currentMessageIndex++; | |
| }, message.delay); | |
| } else { | |
| const typingBubble = addMessage('ai', '', true); | |
| setTimeout(() => { | |
| typingBubble.classList.remove('flex', 'space-x-2', 'items-center'); | |
| typingBubble.classList.add('whitespace-pre-wrap'); | |
| simulateTyping(message.text, typingBubble, 0, () => { | |
| setTimeout(playNextMessage, 1000); | |
| }); | |
| currentMessageIndex++; | |
| }, message.delay); | |
| } | |
| } | |
| } | |
| function playConversation() { | |
| if (isPlaying) return; | |
| isPlaying = true; | |
| currentMessageIndex = 0; | |
| chatMessages.innerHTML = ''; | |
| playBtn.innerHTML = '<i class="fas fa-pause"></i>'; | |
| playNextMessage(); | |
| } | |
| // Event listeners | |
| playBtn.addEventListener('click', playConversation); | |
| // Initial state | |
| userInput.disabled = true; | |
| sendBtn.disabled = true; | |
| </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=michalkichal/tech-sales-assistant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |