Spaces:

humair025
/

vibecode-studio

Running

File size: 16,407 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vibecode Chat</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        accent: '#ec4899',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a;
        }
        .message-container {
            height: calc(100vh - 200px);
        }
        .glow {
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        }
        .typing-indicator {
            display: inline-block;
            width: 60px;
        }
        .typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #6366f1;
            margin: 0 2px;
            animation: typing 1s infinite;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        @keyframes typing {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
    </style>
</head>
<body class="text-light">
    <!-- Navigation -->
    <nav class="fixed w-full z-50 bg-dark/90 backdrop-blur-sm py-4 px-6 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center">
                <i data-feather="message-circle" class="text-white"></i>
            </div>
            <span class="text-xl font-bold">Vibecode<span class="text-accent">Chat</span></span>
        </div>
        <div class="hidden md:flex space-x-8">
            <a href="index.html" class="hover:text-primary transition">Home</a>
            <a href="#" class="hover:text-primary transition">Features</a>
            <a href="api.html" class="hover:text-primary transition">API</a>
            <a href="#" class="hover:text-primary transition">Pricing</a>
        </div>
<div class="flex items-center space-x-4">
            <button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/80 transition">Sign In</button>
            <button id="menu-toggle" class="md:hidden text-light">
                <i data-feather="menu"></i>
            </button>
        </div>
    </nav>

    <!-- Chat Container -->
    <div class="container mx-auto px-4 pt-24 pb-6">
        <div class="bg-dark border border-gray-800 rounded-2xl shadow-xl overflow-hidden">
            <!-- Chat Header -->
            <div class="bg-dark/80 border-b border-gray-800 p-4 flex items-center">
                <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div>
                <h2 class="text-lg font-semibold">Vibecode Assistant</h2>
                <span class="ml-2 text-xs bg-primary/20 text-primary px-2 py-1 rounded-full">Online</span>
            </div>
            
            <!-- Messages Area -->
            <div id="messages-container" class="message-container overflow-y-auto p-4 space-y-4">
                <!-- System Message -->
                <div class="flex justify-center">
                    <div class="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-full">
                        <i data-feather="info" class="inline w-4 h-4 mr-1"></i>
                        Vibecode Chat is completely free to use
                    </div>
                </div>
                
                <!-- Welcome Message -->
                <div class="flex">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center mr-3 flex-shrink-0">
                        <i data-feather="bot" class="text-white w-4 h-4"></i>
                    </div>
                    <div class="bg-gray-800 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
                        <p>Hello! I'm your Vibecode assistant. How can I help you with coding today?</p>
                    </div>
                </div>
                
                <!-- Sample User Message -->
                <div class="flex justify-end">
                    <div class="bg-primary rounded-2xl rounded-tr-none px-4 py-3 max-w-[80%]">
                        <p>Can you help me create a responsive navbar with Tailwind CSS?</p>
                    </div>
                </div>
                
                <!-- Sample Bot Response -->
                <div class="flex">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center mr-3 flex-shrink-0">
                        <i data-feather="bot" class="text-white w-4 h-4"></i>
                    </div>
                    <div class="bg-gray-800 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
                        <p>Sure! Here's a responsive navbar component using Tailwind CSS:</p>
                        <div class="mt-2 bg-gray-900 rounded-lg p-3 text-sm">
                            <pre class="text-blue-400">&lt;nav class="<span class="text-yellow-300">bg-gray-800</span>"&gt;</pre>
                            <pre class="text-blue-400">  &lt;div class="<span class="text-yellow-300">max-w-7xl mx-auto px-4 sm:px-6 lg:px-8</span>"&gt;</pre>
                            <pre class="text-blue-400">    &lt;div class="<span class="text-yellow-300">flex items-center justify-between h-16</span>"&gt;</pre>
                            <pre class="text-gray-400">      ...</pre>
                            <pre class="text-blue-400">    &lt;/div&gt;</pre>
                            <pre class="text-blue-400">  &lt;/div&gt;</pre>
                            <pre class="text-blue-400">&lt;/nav&gt;</pre>
                        </div>
                        <p class="mt-2">Would you like me to explain any part of this code?</p>
                    </div>
                </div>
            </div>
            
            <!-- Input Area -->
            <div class="border-t border-gray-800 p-4">
                <div class="flex items-center">
                    <input 
                        type="text" 
                        id="message-input"
                        placeholder="Type your message..." 
                        class="flex-grow bg-gray-800 border border-gray-700 rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                    <button 
                        id="send-button"
                        class="bg-primary hover:bg-primary/80 px-6 py-3 rounded-r-full font-medium transition glow flex items-center"
                    >
                        <i data-feather="send" class="w-5 h-5"></i>
                    </button>
                </div>
                <div class="mt-2 text-xs text-gray-500 text-center">
                    Vibecode Chat is completely free • Powered by AI
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize Feather Icons
        feather.replace();
        
        // DOM Elements
        const messagesContainer = document.getElementById('messages-container');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        
        // Auto-scroll to bottom of messages
        function scrollToBottom() {
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
        
        // Initial scroll to bottom
        scrollToBottom();
        
        // Send message function
        function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                // Add user message
                addMessage(message, 'user');
                messageInput.value = '';
                
                // Show typing indicator
                showTypingIndicator();
                
                // Simulate bot response after delay
                setTimeout(() => {
                    removeTypingIndicator();
                    addBotResponse(message);
                }, 1500);
            }
        }
        
        // Add message to chat
        function addMessage(text, sender) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : ''}`;
            
            if (sender === 'user') {
                messageDiv.innerHTML = `
                    <div class="bg-primary rounded-2xl rounded-tr-none px-4 py-3 max-w-[80%]">
                        <p>${text}</p>
                    </div>
                `;
            } else {
                messageDiv.innerHTML = `
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center mr-3 flex-shrink-0">
                        <i data-feather="bot" class="text-white w-4 h-4"></i>
                    </div>
                    <div class="bg-gray-800 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
                        <p>${text}</p>
                    </div>
                `;
            }
            
            messagesContainer.appendChild(messageDiv);
            feather.replace();
            scrollToBottom();
        }
        
        // Show typing indicator
        function showTypingIndicator() {
            const typingDiv = document.createElement('div');
            typingDiv.className = 'flex';
            typingDiv.id = 'typing-indicator';
            typingDiv.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center mr-3 flex-shrink-0">
                    <i data-feather="bot" class="text-white w-4 h-4"></i>
                </div>
                <div class="bg-gray-800 rounded-2xl rounded-tl-none px-4 py-3">
                    <div class="typing-indicator">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            `;
            messagesContainer.appendChild(typingDiv);
            feather.replace();
            scrollToBottom();
        }
        
        // Remove typing indicator
        function removeTypingIndicator() {
            const typingIndicator = document.getElementById('typing-indicator');
            if (typingIndicator) {
                typingIndicator.remove();
            }
        }
        
        // Add bot response
        function addBotResponse(userMessage) {
            let response = "I'm here to help! Could you provide more details about what you need?";
            
            // Simple response logic based on keywords
            if (userMessage.toLowerCase().includes('hello') || userMessage.toLowerCase().includes('hi')) {
                response = "Hello there! How can I assist you with coding today?";
            } else if (userMessage.toLowerCase().includes('navbar')) {
                response = "Here's a responsive navbar using Tailwind CSS:";
                addMessage(response, 'bot');
                
                const codeResponse = `<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-white font-bold">Logo</span>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>`;
                
                const codeDiv = document.createElement('div');
                codeDiv.className = 'flex';
                codeDiv.innerHTML = `
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center mr-3 flex-shrink-0">
                        <i data-feather="bot" class="text-white w-4 h-4"></i>
                    </div>
                    <div class="bg-gray-800 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
                        <div class="bg-gray-900 rounded-lg p-3 text-sm">
                            <pre class="text-blue-400">&lt;nav <span class="text-yellow-300">class="bg-gray-800"</span>&gt;</pre>
                            <pre class="text-blue-400">  &lt;div <span class="text-yellow-300">class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"</span>&gt;</pre>
                            <pre class="text-blue-400">    &lt;div <span class="text-yellow-300">class="flex items-center justify-between h-16"</span>&gt;</pre>
                            <pre class="text-gray-400">      ...</pre>
                            <pre class="text-blue-400">    &lt;/div&gt;</pre>
                            <pre class="text-blue-400">  &lt;/div&gt;</pre>
                            <pre class="text-blue-400">&lt;/nav&gt;</pre>
                        </div>
                    </div>
                `;
                messagesContainer.appendChild(codeDiv);
                feather.replace();
                scrollToBottom();
                return;
            } else if (userMessage.toLowerCase().includes('button')) {
                response = "Here's a styled button component:";
                addMessage(response, 'bot');
                
                const codeDiv = document.createElement('div');
                codeDiv.className = 'flex';
                codeDiv.innerHTML = `
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center mr-3 flex-shrink-0">
                        <i data-feather="bot" class="text-white w-4 h-4"></i>
                    </div>
                    <div class="bg-gray-800 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
                        <div class="bg-gray-900 rounded-lg p-3 text-sm">
                            <pre class="text-blue-400">&lt;button <span class="text-yellow-300">class="px-4 py-2 bg-primary hover:bg-primary/80 rounded-lg transition"</span>&gt;</pre>
                            <pre class="text-blue-400">  Click me</pre>
                            <pre class="text-blue-400">&lt;/button&gt;</pre>
                        </div>
                    </div>
                `;
                messagesContainer.appendChild(codeDiv);
                feather.replace();
                scrollToBottom();
                return;
            } else if (userMessage.toLowerCase().includes('thank')) {
                response = "You're welcome! Feel free to ask anytime.";
            }
            
            addMessage(response, 'bot');
        }
        
        // Event Listeners
        sendButton.addEventListener('click', sendMessage);
        
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
        
        // Mobile menu toggle
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const menu = document.querySelector('.mobile-menu');
            menu.classList.toggle('hidden');
        });
    </script>
</body>
</html>