Blame for index.html

<!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 -->
    <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 Chat Area -->
    <main class="flex-grow container mx-auto px-4 py-6 max-w-4xl">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- Chat Messages -->
            <div id="chat-container" class="chat-container p-6 space-y-4">
                <!-- Bot Welcome Message -->
                <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>

            <!-- Input Area -->
            <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>

        <!-- Quick Options -->
            <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 -->
    <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');
            // Sample responses
            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
                }
};
            
            // Add message to chat
            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();
            }
            
            // Show typing indicator
            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();
            }
            
            // Hide typing indicator
            function hideTyping() {
                const typingIndicator = document.getElementById('typing-indicator');
                if (typingIndicator) {
                    typingIndicator.remove();
                }
            }
            
            // Process user input
            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);
            }
            
            // Event listeners
            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>