|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Liquid Glass AI Assistant</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
min-height: 100vh; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.25); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.18); |
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
max-width: 80%; |
|
|
padding: 12px 16px; |
|
|
margin-bottom: 8px; |
|
|
border-radius: 18px; |
|
|
position: relative; |
|
|
animation: fadeIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
align-self: flex-end; |
|
|
border-bottom-right-radius: 4px; |
|
|
} |
|
|
|
|
|
.ai-bubble { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
color: #333; |
|
|
align-self: flex-start; |
|
|
border-bottom-left-radius: 4px; |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: flex; |
|
|
padding: 12px 16px; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 18px; |
|
|
width: fit-content; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.typing-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background-color: #667eea; |
|
|
border-radius: 50%; |
|
|
margin: 0 2px; |
|
|
animation: typingAnimation 1.4s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(1) { animation-delay: 0s; } |
|
|
.typing-dot:nth-child(2) { animation-delay: 0.2s; } |
|
|
.typing-dot:nth-child(3) { animation-delay: 0.4s; } |
|
|
|
|
|
@keyframes typingAnimation { |
|
|
0%, 60%, 100% { transform: translateY(0); } |
|
|
30% { transform: translateY(-5px); } |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.gallery { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
|
gap: 10px; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.gallery img { |
|
|
width: 100%; |
|
|
height: 120px; |
|
|
object-fit: cover; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.gallery img:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.modal { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 1000; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.modal.active { |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
max-width: 90%; |
|
|
max-height: 90%; |
|
|
} |
|
|
|
|
|
.modal-content img { |
|
|
max-width: 100%; |
|
|
max-height: 90vh; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.close-modal { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
color: white; |
|
|
font-size: 24px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.specs-table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.specs-table tr:nth-child(even) { |
|
|
background-color: rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.specs-table td { |
|
|
padding: 8px 12px; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.specs-table td:first-child { |
|
|
font-weight: 500; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex items-center justify-center p-4 md:p-8"> |
|
|
<div class="w-full max-w-3xl h-[90vh] flex flex-col glass-effect overflow-hidden"> |
|
|
|
|
|
<div class="p-4 border-b border-white/20 flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold">AI</div> |
|
|
<div class="ml-3"> |
|
|
<h2 class="font-semibold text-lg">Tech Sales Assistant</h2> |
|
|
<p class="text-xs text-gray-600">Online</p> |
|
|
</div> |
|
|
<div class="ml-auto flex space-x-2"> |
|
|
<button class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-gray-700 hover:bg-white/30 transition"> |
|
|
<i class="fas fa-phone-alt text-sm"></i> |
|
|
</button> |
|
|
<button class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-gray-700 hover:bg-white/30 transition"> |
|
|
<i class="fas fa-ellipsis-v text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-2"> |
|
|
|
|
|
<div class="message-bubble ai-bubble"> |
|
|
<p>Hello! I'm your technical sales assistant. How can I help you today? I can recommend products, compare specifications, or answer technical questions.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="message-bubble user-bubble"> |
|
|
<p>Hi! I'm looking for a high-performance laptop for video editing and 3D rendering. What would you recommend?</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="typing-indicator" class="typing-indicator hidden"> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-white/20"> |
|
|
<div class="flex items-center"> |
|
|
<input id="user-input" type="text" placeholder="Type your message..." class="flex-1 bg-white/30 rounded-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-purple-300 text-sm"> |
|
|
<button id="send-btn" class="ml-2 w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 text-white flex items-center justify-center hover:from-purple-600 hover:to-blue-600 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-center text-gray-500 mt-2">AI Assistant may produce inaccurate information</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="replay-btn" class="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 text-white flex items-center justify-center shadow-lg hover:from-purple-600 hover:to-blue-600 transition z-50"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="image-modal" class="modal"> |
|
|
<span class="close-modal"><i class="fas fa-times"></i></span> |
|
|
<div class="modal-content"> |
|
|
<img id="modal-image" src="" alt="Enlarged view"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Conversation flow |
|
|
const conversation = [ |
|
|
{ |
|
|
user: "Hi! I'm looking for a high-performance laptop for video editing and 3D rendering. What would you recommend?", |
|
|
ai: "For professional video editing and 3D rendering, I'd recommend our <strong>ProStudio X9000</strong>. It features an Intel Core i9-13900HX processor, NVIDIA RTX 4090 GPU, 64GB DDR5 RAM, and a 2TB NVMe SSD. The 17.3\" 4K 120Hz display covers 100% Adobe RGB for accurate color work. Would you like more details or comparisons?" |
|
|
}, |
|
|
{ |
|
|
user: "That sounds powerful but expensive. Do you have something more budget-friendly?", |
|
|
ai: "Certainly! The <strong>CreatorPro V700</strong> offers excellent value at a lower price point. It has an Intel Core i7-13700H, RTX 4070 GPU, 32GB RAM, and 1TB SSD. The 15.6\" 4K display covers 95% DCI-P3. While not as fast as the X9000, it handles 4K editing smoothly and can manage moderate 3D workloads." |
|
|
}, |
|
|
{ |
|
|
user: "Can you compare the X9000 and V700 specs side by side?", |
|
|
ai: `Here's a detailed comparison:<br><br> |
|
|
<table class="specs-table"> |
|
|
<tr><td></td><td class="font-semibold">ProStudio X9000</td><td class="font-semibold">CreatorPro V700</td></tr> |
|
|
<tr><td>Processor</td><td>i9-13900HX (24 cores)</td><td>i7-13700H (14 cores)</td></tr> |
|
|
<tr><td>GPU</td><td>RTX 4090 (16GB)</td><td>RTX 4070 (8GB)</td></tr> |
|
|
<tr><td>RAM</td><td>64GB DDR5</td><td>32GB DDR5</td></tr> |
|
|
<tr><td>Storage</td><td>2TB NVMe SSD</td><td>1TB NVMe SSD</td></tr> |
|
|
<tr><td>Display</td><td>17.3" 4K 120Hz</td><td>15.6" 4K 60Hz</td></tr> |
|
|
<tr><td>Color Gamut</td><td>100% Adobe RGB</td><td>95% DCI-P3</td></tr> |
|
|
<tr><td>Battery</td><td>94Wh (≈6hrs)</td><td>80Wh (≈8hrs)</td></tr> |
|
|
<tr><td>Weight</td><td>3.2kg</td><td>2.1kg</td></tr> |
|
|
<tr><td>Price</td><td>$3,999</td><td>$2,299</td></tr> |
|
|
</table>` |
|
|
}, |
|
|
{ |
|
|
user: "Can you show me some pictures of the V700? I want to see the design.", |
|
|
ai: `Here are some images of the CreatorPro V700:<br><br> |
|
|
<div class="gallery"> |
|
|
<img src="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="V700 Front View" class="gallery-img"> |
|
|
<img src="https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="V700 Keyboard" class="gallery-img"> |
|
|
<img src="https://images.unsplash.com/photo-1593642702749-b7d2a804fbcf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="V700 Side View" class="gallery-img"> |
|
|
<img src="https://images.unsplash.com/photo-1593642702821-8f15c2a49cd4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="V700 Display" class="gallery-img"> |
|
|
</div>` |
|
|
}, |
|
|
{ |
|
|
user: "What's the maximum RAM capacity for the V700? And does it support Thunderbolt 4?", |
|
|
ai: `The CreatorPro V700 supports up to <strong>64GB of DDR5 RAM</strong> (2 slots, 32GB each). It does feature <strong>Thunderbolt 4</strong> via its USB-C port (left side), supporting:<br> |
|
|
- 40Gbps data transfer<br> |
|
|
- Dual 4K display output<br> |
|
|
- 100W power delivery<br> |
|
|
- PCIe tunneling for external GPUs<br><br> |
|
|
The RAM is user-upgradeable, but opening the case voids the warranty unless done by authorized service centers.` |
|
|
}, |
|
|
{ |
|
|
user: "How does the cooling system perform under sustained loads?", |
|
|
ai: `The V700 uses a <strong>dual-fan vapor chamber cooling system</strong> with the following performance characteristics:<br><br> |
|
|
- Under full CPU+GPU load (e.g., rendering): maintains ~85°C on CPU and 78°C on GPU<br> |
|
|
- Fan noise reaches 45dB at maximum speed<br> |
|
|
- Throttling begins at 95°C CPU/88°C GPU<br> |
|
|
- Includes 3 performance modes via FN+Q:<br> |
|
|
• Silent: 25dB max, reduced performance<br> |
|
|
• Balanced: 35dB, optimal for most tasks<br> |
|
|
• Performance: 45dB, full power<br><br> |
|
|
For extended rendering sessions, we recommend using a cooling pad for best results.` |
|
|
} |
|
|
]; |
|
|
|
|
|
// DOM elements |
|
|
const chatContainer = document.getElementById('chat-container'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
const typingIndicator = document.getElementById('typing-indicator'); |
|
|
const imageModal = document.getElementById('image-modal'); |
|
|
const modalImage = document.getElementById('modal-image'); |
|
|
const closeModal = document.querySelector('.close-modal'); |
|
|
|
|
|
let currentStep = 0; |
|
|
|
|
|
// Initialize conversation |
|
|
setTimeout(() => { |
|
|
simulateAIResponse(); |
|
|
}, 1000); |
|
|
|
|
|
// Send message handler |
|
|
function sendMessage() { |
|
|
const message = userInput.value.trim(); |
|
|
if (message === '') return; |
|
|
|
|
|
// Add user message |
|
|
addMessage(message, 'user'); |
|
|
userInput.value = ''; |
|
|
|
|
|
// Show typing indicator |
|
|
typingIndicator.classList.remove('hidden'); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
// Simulate AI response after delay |
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.add('hidden'); |
|
|
simulateAIResponse(); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
// Add message to chat |
|
|
function addMessage(message, sender) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message-bubble ${sender}-bubble`; |
|
|
messageDiv.innerHTML = message; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
// Handle gallery images |
|
|
if (sender === 'ai') { |
|
|
setTimeout(() => { |
|
|
const galleryImages = document.querySelectorAll('.gallery-img'); |
|
|
galleryImages.forEach(img => { |
|
|
img.addEventListener('click', () => { |
|
|
modalImage.src = img.src; |
|
|
imageModal.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
}, 100); |
|
|
} |
|
|
} |
|
|
|
|
|
// Simulate AI response based on conversation flow |
|
|
function simulateAIResponse() { |
|
|
if (currentStep < conversation.length) { |
|
|
addMessage(conversation[currentStep].ai, 'ai'); |
|
|
currentStep++; |
|
|
} else { |
|
|
addMessage("Is there anything else I can help you with today?", 'ai'); |
|
|
} |
|
|
} |
|
|
|
|
|
// Event listeners |
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
userInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') sendMessage(); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
imageModal.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
imageModal.addEventListener('click', (e) => { |
|
|
if (e.target === imageModal) { |
|
|
imageModal.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Replay conversation handler |
|
|
document.getElementById('replay-btn').addEventListener('click', () => { |
|
|
// Clear chat |
|
|
chatContainer.innerHTML = ` |
|
|
<div class="message-bubble ai-bubble"> |
|
|
<p>Hello! I'm your technical sales assistant. How can I help you today? I can recommend products, compare specifications, or answer technical questions.</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
// Reset to beginning |
|
|
currentStep = 0; |
|
|
|
|
|
// Animate through conversation with delays |
|
|
let delay = 2000; // Initial delay |
|
|
|
|
|
conversation.forEach((step, index) => { |
|
|
// User message |
|
|
setTimeout(() => { |
|
|
addMessage(step.user, 'user'); |
|
|
}, delay); |
|
|
|
|
|
// AI typing indicator |
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.remove('hidden'); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
}, delay + 500); |
|
|
|
|
|
// AI response |
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.add('hidden'); |
|
|
addMessage(step.ai, 'ai'); |
|
|
}, delay + 2000); |
|
|
|
|
|
delay += 3500; // Increment delay for next pair |
|
|
}); |
|
|
}); |
|
|
</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> |
