| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Subhakary Service Bot</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| .floating { animation: float 3s ease-in-out infinite; } |
| .chat-container { |
| height: 70vh; |
| overflow-y: auto; |
| scrollbar-width: thin; |
| scrollbar-color: #4f46e5 #e5e7eb; |
| } |
| .chat-container::-webkit-scrollbar { |
| width: 8px; |
| } |
| .chat-container::-webkit-scrollbar-track { |
| background: #e5e7eb; |
| } |
| .chat-container::-webkit-scrollbar-thumb { |
| background-color: #4f46e5; |
| border-radius: 20px; |
| } |
| .typing-indicator span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: #6b7280; |
| animation: bounce 1.4s infinite ease-in-out; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| @keyframes bounce { |
| 0%, 80%, 100% { transform: translateY(0); } |
| 40% { transform: translateY(-8px); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen flex flex-col"> |
| |
| <header class="bg-indigo-600 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="bg-white p-2 rounded-full"> |
| <i data-feather="message-square" class="text-indigo-600"></i> |
| </div> |
| <h1 class="text-2xl font-bold">Subhakary Digital Solutions</h1> |
| </div> |
| <div class="hidden md:block"> |
| <span class="text-indigo-200">Your digital transformation partner</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-6 max-w-4xl"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| |
| <div id="chat-container" class="chat-container p-6 space-y-4"> |
| |
| <div class="flex items-start space-x-3"> |
| <div class="bg-indigo-100 p-2 rounded-full"> |
| <i data-feather="cpu" class="text-indigo-600"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-4 max-w-[80%]"> |
| <p class="text-gray-800">Hello! 👋 I'm your Subhakary Digital Assistant. How can I help you today? You can ask about:</p> |
| <ul class="list-disc pl-5 mt-2 text-gray-700"> |
| <li>Web Development services</li> |
| <li>Digital Marketing solutions</li> |
| <li>UI/UX design services</li> |
| <li>E-commerce solutions</li> |
| <li>SEO services</li> |
| </ul> |
| <p class="mt-2 text-sm text-gray-500">Try typing: "Tell me about your web development services"</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-gray-200 p-4 bg-gray-50"> |
| <div class="flex items-center space-x-3"> |
| <input |
| type="text" |
| id="user-input" |
| placeholder="Ask about our services..." |
| class="flex-grow px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" |
| autocomplete="off" |
| > |
| <button id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full transition duration-200"> |
| <i data-feather="send"></i> |
| </button> |
| </div> |
| <div class="mt-2 text-center"> |
| <p class="text-xs text-gray-500">Powered by Subhakary Services</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3"> |
| <button class="quick-option bg-white hover:bg-gray-100 rounded-lg p-3 shadow text-sm transition duration-200 border border-gray-200"> |
| <i data-feather="globe" class="w-4 h-4 inline mr-2 text-indigo-500"></i> Web Dev |
| </button> |
| <button class="quick-option bg-white hover:bg-gray-100 rounded-lg p-3 shadow text-sm transition duration-200 border border-gray-200"> |
| <i data-feather="trending-up" class="w-4 h-4 inline mr-2 text-indigo-500"></i> Digital Marketing |
| </button> |
| <button class="quick-option bg-white hover:bg-gray-100 rounded-lg p-3 shadow text-sm transition duration-200 border border-gray-200"> |
| <i data-feather="layout" class="w-4 h-4 inline mr-2 text-indigo-500"></i> UI/UX Design |
| </button> |
| <button class="quick-option bg-white hover:bg-gray-100 rounded-lg p-3 shadow text-sm transition duration-200 border border-gray-200"> |
| <i data-feather="shopping-cart" class="w-4 h-4 inline mr-2 text-indigo-500"></i> E-commerce |
| </button> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-6"> |
| <div class="container mx-auto px-4 text-center"> |
| <p class="text-sm">© 2023 Subhakary Digital Solutions. All rights reserved.</p> |
| <div class="mt-2 flex justify-center space-x-4"> |
| <a href="#" class="hover:text-indigo-300 transition duration-200"><i data-feather="phone"></i></a> |
| <a href="#" class="hover:text-indigo-300 transition duration-200"><i data-feather="mail"></i></a> |
| <a href="#" class="hover:text-indigo-300 transition duration-200"><i data-feather="facebook"></i></a> |
| <a href="#" class="hover:text-indigo-300 transition duration-200"><i data-feather="instagram"></i></a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| const chatContainer = document.getElementById('chat-container'); |
| const userInput = document.getElementById('user-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| const quickOptions = document.querySelectorAll('.quick-option'); |
| |
| const responses = { |
| "web": { |
| message: "Our <strong>Web Development</strong> services include:\n\n• Custom Website Development\n• CMS Development (WordPress, Shopify)\n• Responsive Design\n• API Integration\n• Website Maintenance\n\nWe create fast, secure, and scalable websites tailored to your business needs.", |
| delay: 1500 |
| }, |
| "digital": { |
| message: "Our <strong>Digital Marketing</strong> solutions cover:\n\n• SEO Optimization\n• Social Media Marketing\n• PPC Advertising\n• Content Marketing\n• Email Marketing\n\nWe help increase your online visibility and drive targeted traffic to your business.", |
| delay: 1800 |
| }, |
| "design": { |
| message: "Our <strong>UI/UX Design</strong> services include:\n\n• User Research & Analysis\n• Wireframing & Prototyping\n• Visual Design\n• User Testing\n• Design Systems\n\nWe create intuitive and engaging digital experiences that convert visitors into customers.", |
| delay: 2000 |
| }, |
| "ecommerce": { |
| message: "Our <strong>E-commerce</strong> solutions feature:\n\n• Online Store Development\n• Payment Gateway Integration\n• Inventory Management\n• Mobile Commerce\n• Performance Optimization\n\nWe build seamless shopping experiences that drive sales and customer loyalty.", |
| delay: 2000 |
| }, |
| "default": { |
| message: "I'm here to help with Subhakary Digital Solutions. Could you please rephrase your question or be more specific? You can ask about our web development, digital marketing, UI/UX design or e-commerce services.", |
| delay: 1000 |
| } |
| }; |
| |
| |
| function addMessage(sender, message, isHTML = false) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex items-start space-x-3 ${sender === 'user' ? 'justify-end' : ''}`; |
| |
| if (sender === 'bot') { |
| messageDiv.innerHTML = ` |
| <div class="bg-indigo-100 p-2 rounded-full"> |
| <i data-feather="cpu" class="text-indigo-600"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-4 max-w-[80%]"> |
| ${isHTML ? message : `<p class="text-gray-800">${message}</p>`} |
| </div> |
| `; |
| } else { |
| messageDiv.innerHTML = ` |
| <div class="bg-indigo-600 p-2 rounded-full"> |
| <i data-feather="user" class="text-white"></i> |
| </div> |
| <div class="bg-indigo-600 text-white rounded-lg p-4 max-w-[80%]"> |
| <p>${message}</p> |
| </div> |
| `; |
| } |
| |
| chatContainer.appendChild(messageDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| feather.replace(); |
| } |
| |
| |
| function showTyping() { |
| const typingDiv = document.createElement('div'); |
| typingDiv.className = 'flex items-start space-x-3'; |
| typingDiv.id = 'typing-indicator'; |
| typingDiv.innerHTML = ` |
| <div class="bg-indigo-100 p-2 rounded-full"> |
| <i data-feather="cpu" class="text-indigo-600"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-4 w-16"> |
| <div class="typing-indicator flex space-x-1"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| `; |
| chatContainer.appendChild(typingDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| feather.replace(); |
| } |
| |
| |
| function hideTyping() { |
| const typingIndicator = document.getElementById('typing-indicator'); |
| if (typingIndicator) { |
| typingIndicator.remove(); |
| } |
| } |
| |
| |
| function processInput(input) { |
| input = input.toLowerCase().trim(); |
| |
| showTyping(); |
| |
| setTimeout(() => { |
| hideTyping(); |
| if (input.includes('web') || input.includes('website') || input.includes('development')) { |
| addMessage('bot', responses.web.message, true); |
| } |
| else if (input.includes('digital') || input.includes('marketing') || input.includes('seo') || input.includes('social media')) { |
| addMessage('bot', responses.digital.message, true); |
| } |
| else if (input.includes('design') || input.includes('ui') || input.includes('ux') || input.includes('user interface')) { |
| addMessage('bot', responses.design.message, true); |
| } |
| else if (input.includes('ecommerce') || input.includes('e-commerce') || input.includes('shop') || input.includes('store')) { |
| addMessage('bot', responses.ecommerce.message, true); |
| } |
| else { |
| addMessage('bot', responses.default.message, true); |
| } |
| }, responses[Object.keys(responses).find(key => input.includes(key))]?.delay || 1000); |
| } |
| |
| |
| sendBtn.addEventListener('click', function() { |
| const input = userInput.value; |
| if (input.trim() !== '') { |
| addMessage('user', input); |
| userInput.value = ''; |
| processInput(input); |
| } |
| }); |
| |
| userInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| const input = userInput.value; |
| if (input.trim() !== '') { |
| addMessage('user', input); |
| userInput.value = ''; |
| processInput(input); |
| } |
| } |
| }); |
| |
| quickOptions.forEach(option => { |
| option.addEventListener('click', function() { |
| const text = this.textContent.trim(); |
| addMessage('user', text); |
| processInput(text); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
