Spaces:

humair025
/

vibecode-studio

Running

App Files Files Community

vibecode-studio / chat.html

humair025

import requests

d5248c9 verified 4 months ago

raw

history blame contribute delete

16.4 kB

	<!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"><nav class="<span class="text-yellow-300">bg-gray-800</span>"></pre>
	<pre class="text-blue-400"> <div class="<span class="text-yellow-300">max-w-7xl mx-auto px-4 sm:px-6 lg:px-8</span>"></pre>
	<pre class="text-blue-400"> <div class="<span class="text-yellow-300">flex items-center justify-between h-16</span>"></pre>
	<pre class="text-gray-400"> ...</pre>
	<pre class="text-blue-400"> </div></pre>
	<pre class="text-blue-400"> </div></pre>
	<pre class="text-blue-400"></nav></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"><nav <span class="text-yellow-300">class="bg-gray-800"</span>></pre>
	<pre class="text-blue-400"> <div <span class="text-yellow-300">class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"</span>></pre>
	<pre class="text-blue-400"> <div <span class="text-yellow-300">class="flex items-center justify-between h-16"</span>></pre>
	<pre class="text-gray-400"> ...</pre>
	<pre class="text-blue-400"> </div></pre>
	<pre class="text-blue-400"> </div></pre>
	<pre class="text-blue-400"></nav></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"><button <span class="text-yellow-300">class="px-4 py-2 bg-primary hover:bg-primary/80 rounded-lg transition"</span>></pre>
	<pre class="text-blue-400"> Click me</pre>
	<pre class="text-blue-400"></button></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>