Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Launch Locally | CodeForge-AI</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#ef4444', | |
| secondary: '#6b7280' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 border-b border-red-500/20 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="code" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-xl font-bold text-white">CodeForge-AI</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="workspaces.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a> | |
| <a href="launch.html" class="text-red-400 hover:text-red-300 transition-colors">Launch Locally</a> | |
| <a href="templates.html" class="text-gray-300 hover:text-white transition-colors">Templates</a> | |
| <a href="deployments.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a> | |
| <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a> | |
| <a href="admin-login.html" class="text-gray-300 hover:text-white transition-colors">Admin</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="workspaces.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors"> | |
| Start Coding | |
| </a> | |
| <a href="admin-login.html" class="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded-lg text-white font-medium transition-colors"> | |
| Admin Panel | |
| </a> | |
| <button class="text-gray-300 hover:text-white transition-colors"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Launch Locally Header --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-red-400 to-red-600 bg-clip-text text-transparent"> | |
| Launch Locally | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Run CodeForge-AI on your local machine with Docker. Quick setup, full control. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Installation Steps --> | |
| <div class="py-16 bg-gray-900"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20"> | |
| <h2 class="text-3xl font-bold text-white mb-8 text-center">Quick Local Installation</h2> | |
| <!-- Prerequisites --> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-semibold text-white mb-4 flex items-center"> | |
| <i data-feather="check-circle" class="w-6 h-6 text-green-400 mr-3"></i> | |
| Prerequisites | |
| </h3> | |
| <div class="bg-gray-700 rounded-xl p-6 mb-6"> | |
| <p class="text-gray-300 mb-4">Make sure you have the following installed on your system:</p> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-400 mr-2"></i> | |
| Docker Engine 20.10+ and Docker Compose | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-400 mr-2"></i> | |
| Git (for cloning the repository) | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-400 mr-2"></i> | |
| 4GB+ RAM and 10GB+ free disk space | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Installation Steps --> | |
| <div class="space-y-8"> | |
| <!-- Step 1 --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white font-bold"> | |
| 1 | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-xl font-semibold text-white mb-3">Clone the Repository</h4> | |
| <div class="bg-black rounded-lg p-4 font-mono text-sm text-green-400 mb-3"> | |
| git clone https://github.com/codeforge-ai/codeforge.git<br> | |
| cd codeforge | |
| </div> | |
| <p class="text-gray-300">Get the latest version of CodeForge-AI from our GitHub repository.</p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white font-bold"> | |
| 2 | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-xl font-semibold text-white mb-3">Configure Environment</h4> | |
| <div class="bg-black rounded-lg p-4 font-mono text-sm text-green-400 mb-3"> | |
| cp .env.example .env<br> | |
| # Edit .env with your preferred settings | |
| </div> | |
| <p class="text-gray-300">Set up your environment variables for database, API keys, and other configurations.</p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white font-bold"> | |
| 3 | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-xl font-semibold text-white mb-3">Start with Docker Compose</h4> | |
| <div class="bg-black rounded-lg p-4 font-mono text-sm text-green-400 mb-3"> | |
| docker-compose up -d | |
| </div> | |
| <p class="text-gray-300">This will start all services including the web interface, API server, and database.</p> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white font-bold"> | |
| 4 | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-xl font-semibold text-white mb-3">Access Your Instance</h4> | |
| <div class="bg-black rounded-lg p-4 font-mono text-sm text-green-400 mb-3"> | |
| # Open your browser and navigate to:<br> | |
| http://localhost:3000 | |
| </div> | |
| <p class="text-gray-300">Your local CodeForge-AI instance will be running and ready to use!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Start Button --> | |
| <div class="mt-12 text-center"> | |
| <a href="https://github.com/codeforge-ai/codeforge" target="_blank" class="bg-red-500 hover:bg-red-600 px-8 py-4 rounded-xl text-white font-semibold text-lg transition-all transform hover:scale-105 inline-flex items-center"> | |
| <i data-feather="download" class="w-5 h-5 mr-2"></i> | |
| Download & Run Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-16 bg-gray-800/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-white mb-4">Why Run Locally?</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Full control, enhanced privacy, and offline development capabilities | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-red-500 rounded-2xl flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="shield" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-white mb-4">Enhanced Security</h3> | |
| <p class="text-gray-300">Keep your code and data completely private on your own infrastructure.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="zap" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-white mb-4">Better Performance</h3> | |
| <p class="text-gray-300">Faster development cycles with local network access and dedicated resources.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="wifi-off" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-white mb-4">Offline Development</h3> | |
| <p class="text-gray-300">Work without internet connectivity and maintain productivity anywhere.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 border-t border-gray-700 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="code" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-xl font-bold text-white">CodeForge-AI</span> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| The autonomous development platform for modern developers. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="workspaces.html" class="hover:text-red-400 transition-colors">Workspaces</a></li> | |
| <li><a href="launch.html" class="hover:text-red-400 transition-colors">Local Installation</a></li> | |
| <li><a href="templates.html" class="hover:text-red-400 transition-colors">Templates</a></li> | |
| <li><a href="documentation.html" class="hover:text-red-400 transition-colors">Documentation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="about.html" class="hover:text-red-400 transition-colors">About</a></li> | |
| <li><a href="blog.html" class="hover:text-red-400 transition-colors">Blog</a></li> | |
| <li><a href="careers.html" class="hover:text-red-400 transition-colors">Careers</a></li> | |
| <li><a href="contact.html" class="hover:text-red-400 transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-red-400 transition-colors"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-400 transition-colors"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-400 transition-colors"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-400 transition-colors"> | |
| <i data-feather="discord" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-400"> | |
| <p>© 2024 CodeForge-AI. All rights reserved. Built with security and performance in mind.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |