| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>CodeGen AI - Your AI Coding 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> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #6e8efb, #a777e3); |
| | } |
| | .code-editor { |
| | background-color: #1e293b; |
| | border-radius: 0.5rem; |
| | } |
| | .tab-active { |
| | border-bottom: 3px solid #a777e3; |
| | color: #a777e3; |
| | font-weight: 600; |
| | } |
| | .response-area { |
| | min-height: 200px; |
| | transition: all 0.3s ease; |
| | } |
| | .loading-dots::after { |
| | content: '.'; |
| | animation: dots 1.5s steps(5, end) infinite; |
| | } |
| | @keyframes dots { |
| | 0%, 20% { content: '.'; } |
| | 40% { content: '..'; } |
| | 60% { content: '...'; } |
| | 80%, 100% { content: ''; } |
| | } |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen font-sans"> |
| | |
| | <header class="gradient-bg text-white shadow-lg"> |
| | <div class="container mx-auto px-4 py-6"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-code text-2xl"></i> |
| | <h1 class="text-2xl font-bold">CodeGen AI</h1> |
| | </div> |
| | <nav class="hidden md:block"> |
| | <ul class="flex space-x-6"> |
| | <li><a href="#" class="hover:text-gray-200 transition">Features</a></li> |
| | <li><a href="#" class="hover:text-gray-200 transition">Pricing</a></li> |
| | <li><a href="#" class="hover:text-gray-200 transition">Docs</a></li> |
| | <li><a href="#" class="hover:text-gray-200 transition">Contact</a></li> |
| | </ul> |
| | </nav> |
| | <button class="md:hidden text-xl"> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="gradient-bg text-white py-16"> |
| | <div class="container mx-auto px-4 text-center"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-6">Your AI-Powered Coding Assistant</h2> |
| | <p class="text-xl mb-8 max-w-3xl mx-auto">Generate, refactor, debug, and document code with natural language. Supercharge your development workflow.</p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| | <button class="bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition shadow-lg"> |
| | Get Started - It's Free |
| | </button> |
| | <button class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition"> |
| | Watch Demo |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <main class="container mx-auto px-4 py-12"> |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit"> |
| | <h3 class="text-xl font-bold mb-4 text-gray-800">Quick Actions</h3> |
| | <div class="space-y-3"> |
| | <button onclick="setActiveTab('generate')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-purple-100 p-2 rounded-lg text-purple-700"> |
| | <i class="fas fa-magic"></i> |
| | </div> |
| | <span>Generate Code</span> |
| | </button> |
| | <button onclick="setActiveTab('refactor')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-blue-100 p-2 rounded-lg text-blue-700"> |
| | <i class="fas fa-refresh"></i> |
| | </div> |
| | <span>Refactor Code</span> |
| | </button> |
| | <button onclick="setActiveTab('debug')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-red-100 p-2 rounded-lg text-red-700"> |
| | <i class="fas fa-bug"></i> |
| | </div> |
| | <span>Debug Code</span> |
| | </button> |
| | <button onclick="setActiveTab('document')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-green-100 p-2 rounded-lg text-green-700"> |
| | <i class="fas fa-file-alt"></i> |
| | </div> |
| | <span>Document Code</span> |
| | </button> |
| | <button onclick="setActiveTab('question')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-yellow-100 p-2 rounded-lg text-yellow-700"> |
| | <i class="fas fa-question-circle"></i> |
| | </div> |
| | <span>Ask Questions</span> |
| | </button> |
| | <button onclick="setActiveTab('automate')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-indigo-100 p-2 rounded-lg text-indigo-700"> |
| | <i class="fas fa-robot"></i> |
| | </div> |
| | <span>Automate Tasks</span> |
| | </button> |
| | <button onclick="setActiveTab('project')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left"> |
| | <div class="bg-pink-100 p-2 rounded-lg text-pink-700"> |
| | <i class="fas fa-folder-plus"></i> |
| | </div> |
| | <span>New Project</span> |
| | </button> |
| | </div> |
| |
|
| | <div class="mt-8"> |
| | <h3 class="text-xl font-bold mb-4 text-gray-800">Recent Files</h3> |
| | <div class="space-y-2"> |
| | <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-file-code text-blue-500"></i> |
| | <span>app.js</span> |
| | </div> |
| | <span class="text-xs text-gray-500">2 min ago</span> |
| | </div> |
| | <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-file-code text-green-500"></i> |
| | <span>styles.css</span> |
| | </div> |
| | <span class="text-xs text-gray-500">15 min ago</span> |
| | </div> |
| | <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-file-code text-purple-500"></i> |
| | <span>index.html</span> |
| | </div> |
| | <span class="text-xs text-gray-500">1 hour ago</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="lg:col-span-2 space-y-6"> |
| | |
| | <div class="flex overflow-x-auto border-b border-gray-200"> |
| | <button onclick="setActiveTab('generate')" id="generate-tab" class="tab-active px-4 py-2 font-medium text-sm focus:outline-none"> |
| | Generate Code |
| | </button> |
| | <button onclick="setActiveTab('refactor')" id="refactor-tab" class="px-4 py-2 font-medium text-sm focus:outline-none"> |
| | Refactor |
| | </button> |
| | <button onclick="setActiveTab('debug')" id="debug-tab" class="px-4 py-2 font-medium text-sm focus:outline-none"> |
| | Debug |
| | </button> |
| | <button onclick="setActiveTab('document')" id="document-tab" class="px-4 py-2 font-medium text-sm focus:outline-none"> |
| | Document |
| | </button> |
| | <button onclick="setActiveTab('question')" id="question-tab" class="px-4 py-2 font-medium text-sm focus:outline-none"> |
| | Q&A |
| | </button> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| | <div class="p-4 border-b border-gray-200"> |
| | <div class="flex items-center justify-between"> |
| | <h4 class="font-semibold">Describe what you want to generate</h4> |
| | <div class="flex space-x-2"> |
| | <select class="bg-gray-100 border-0 rounded text-sm px-2 py-1 focus:ring-2 focus:ring-purple-500"> |
| | <option>JavaScript</option> |
| | <option>Python</option> |
| | <option>HTML</option> |
| | <option>CSS</option> |
| | <option>TypeScript</option> |
| | <option>Java</option> |
| | </select> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <textarea id="prompt-input" class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Example: Create a React component that displays a list of products with images, names, and prices..."></textarea> |
| | <div class="mt-4 flex justify-between items-center"> |
| | <div class="flex space-x-2"> |
| | <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm"> |
| | <i class="fas fa-lightbulb mr-1"></i> Examples |
| | </button> |
| | <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm"> |
| | <i class="fas fa-history mr-1"></i> History |
| | </button> |
| | </div> |
| | <button onclick="generateCode()" class="gradient-bg text-white px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition flex items-center"> |
| | <i class="fas fa-bolt mr-2"></i> Generate |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| | <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| | <h4 class="font-semibold">Generated Code</h4> |
| | <div class="flex space-x-2"> |
| | <button class="text-gray-500 hover:text-purple-700"> |
| | <i class="fas fa-copy"></i> |
| | </button> |
| | <button class="text-gray-500 hover:text-purple-700"> |
| | <i class="fas fa-download"></i> |
| | </button> |
| | <button class="text-gray-500 hover:text-purple-700"> |
| | <i class="fas fa-expand"></i> |
| | </button> |
| | </div> |
| | </div> |
| | <div id="response-area" class="response-area p-4 code-editor text-gray-200"> |
| | <div id="loading-indicator" class="hidden text-center py-10"> |
| | <div class="loading-dots text-xl">Generating</div> |
| | </div> |
| | <pre id="code-output" class="hidden overflow-auto"><code id="generated-code"></code></pre> |
| | <div id="empty-state" class="text-center py-10 text-gray-400"> |
| | <i class="fas fa-code text-4xl mb-3"></i> |
| | <p>Your generated code will appear here</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <section class="bg-gray-50 py-16"> |
| | <div class="container mx-auto px-4"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Powerful Features for Developers</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| | <div class="text-purple-600 mb-4"> |
| | <i class="fas fa-magic text-3xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Code Generation</h3> |
| | <p class="text-gray-600">Turn natural language descriptions into functional code across multiple programming languages.</p> |
| | </div> |
| | <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| | <div class="text-blue-600 mb-4"> |
| | <i class="fas fa-refresh text-3xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Smart Refactoring</h3> |
| | <p class="text-gray-600">Improve your code quality with AI-powered refactoring suggestions and optimizations.</p> |
| | </div> |
| | <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| | <div class="text-red-600 mb-4"> |
| | <i class="fas fa-bug text-3xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Debugging Assistant</h3> |
| | <p class="text-gray-600">Identify and fix bugs in your code with intelligent error detection and solutions.</p> |
| | </div> |
| | <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| | <div class="text-green-600 mb-4"> |
| | <i class="fas fa-file-alt text-3xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Documentation</h3> |
| | <p class="text-gray-600">Automatically generate comprehensive documentation for your codebase.</p> |
| | </div> |
| | <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| | <div class="text-yellow-600 mb-4"> |
| | <i class="fas fa-question-circle text-3xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Code Q&A</h3> |
| | <p class="text-gray-600">Get instant answers to questions about your codebase and programming concepts.</p> |
| | </div> |
| | <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| | <div class="text-indigo-600 mb-4"> |
| | <i class="fas fa-robot text-3xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Task Automation</h3> |
| | <p class="text-gray-600">Automate repetitive coding tasks and boilerplate generation to save time.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-800 text-white py-12"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">CodeGen AI</h3> |
| | <p class="text-gray-400">Your AI-powered coding assistant for faster, better development.</p> |
| | </div> |
| | <div> |
| | <h4 class="font-bold mb-4">Product</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> |
| | <li><a href="#" class |
| | </html> |
