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>Installation Guide | 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"> | |
| <!-- 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"> | |
| <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> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="text-gray-300 hover:text-white transition-colors">Home</a> | |
| <a href="workspaces.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</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="installation.html" class="text-red-400 hover:text-red-300 transition-colors">Installation</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> | |
| <!-- Installation Guide --> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Local Installation Guide</h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Step-by-step instructions to download and install CodeForge-AI on your local machine | |
| </p> | |
| </div> | |
| <!-- System Requirements --> | |
| <div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6">System Requirements</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-red-400 mb-4">Minimum Requirements</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>Docker 20.10+</li> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>4GB RAM</li> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>2 CPU cores</li> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>10GB free disk space</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-red-400 mb-4">Recommended</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>Docker 24.0+</li> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>8GB RAM</li> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>4 CPU cores</li> | |
| <li><i data-feather="check" class="w-4 h-4 text-green-400 inline mr-2"></i>20GB free disk space</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download Section --> | |
| <div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6">Download</h2> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="download" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Docker Compose</div> | |
| <p class="text-gray-400 text-sm mb-4">Complete setup with all dependencies</p> | |
| <a href="#" onclick="downloadPackage('docker-compose')" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block"> | |
| Download | |
| </a> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="github" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Source Code</div> | |
| <p class="text-gray-400 text-sm mb-4">Build from source for customization</p> | |
| <a href="https://github.com/codeforge-ai/codeforge-ai" target="_blank" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block"> | |
| GitHub | |
| </a> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="package" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Binary Release</div> | |
| <p class="text-gray-400 text-sm mb-4">Pre-built binaries for quick setup</p> | |
| <a href="#" onclick="downloadPackage('binary')" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block"> | |
| Download | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Installation Steps --> | |
| <div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20"> | |
| <h2 class="text-2xl font-bold text-white mb-6">Installation Steps</h2> | |
| <!-- Step 1 --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Download the Package</div> | |
| <div class="bg-gray-900 rounded-xl p-4 mb-4"> | |
| <code class="text-green-400">curl -L https://codeforge-ai.com/download/docker-compose.yml -o docker-compose.yml</code> | |
| <button onclick="copyToClipboard('curl -L https://codeforge-ai.com/download/docker-compose.yml -o docker-compose.yml')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline"></i> Copy | |
| </button> | |
| </div> | |
| <p class="text-gray-300">Download the latest Docker Compose configuration file.</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Configure Environment</div> | |
| <div class="bg-gray-900 rounded-xl p-4 mb-4"> | |
| <code class="text-green-400">cp .env.example .env</code> | |
| <button onclick="copyToClipboard('cp .env.example .env')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline"></i> Copy | |
| </button> | |
| </div> | |
| <p class="text-gray-300">Copy the environment configuration file and update with your settings.</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Start Services</div> | |
| <div class="bg-gray-900 rounded-xl p-4 mb-4"> | |
| <code class="text-green-400">docker-compose up -d</code> | |
| <button onclick="copyToClipboard('docker-compose up -d')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline"></i> Copy | |
| </button> | |
| </div> | |
| <p class="text-gray-300">Launch all CodeForge-AI services in detached mode.</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold">4</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Verify Installation</div> | |
| <div class="bg-gray-900 rounded-xl p-4 mb-4"> | |
| <code class="text-green-400">docker-compose ps</code> | |
| <button onclick="copyToClipboard('docker-compose ps')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline"></i> Copy | |
| </button> | |
| </div> | |
| <p class="text-gray-300">Check that all services are running correctly.</p> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold">5</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Access Dashboard</div> | |
| <div class="bg-gray-900 rounded-xl p-4 mb-4"> | |
| <code class="text-green-400">http://localhost:8080</code> | |
| <button onclick="copyToClipboard('http://localhost:8080')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline"></i> Copy | |
| </button> | |
| </div> | |
| <p class="text-gray-300">Open your browser and navigate to the local dashboard.</p> | |
| </div> | |
| </div> | |
| <!-- Configuration Details --> | |
| <div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20 mt-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6">Configuration Details</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-red-400 mb-4">Environment Variables</h3> | |
| <div class="bg-gray-900 rounded-xl p-4"> | |
| <code class="text-gray-300 block mb-2">API_PORT=8080</code> | |
| <code class="text-gray-300 block mb-2">DATABASE_URL=postgresql://user:pass@db:5432/codeforge</code> | |
| <code class="text-gray-300 block mb-2">REDIS_URL=redis://redis:6379</code> | |
| <code class="text-gray-300 block">JWT_SECRET=your-secret-key</code> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-red-400 mb-4">Services</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li><i data-feather="server" class="w-4 h-4 text-green-400 inline mr-2"></i>API Server (Port 8080)</li> | |
| <li><i data-feather="database" class="w-4 h-4 text-green-400 inline mr-2"></i>PostgreSQL Database</li> | |
| <li><i data-feather="cpu" class="w-4 h-4 text-green-400 inline mr-2"></i>Redis Cache</li> | |
| <li><i data-feather="box" class="w-4 h-4 text-green-400 inline mr-2"></i>Docker Engine</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Troubleshooting --> | |
| <div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20 mt-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6">Troubleshooting</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="text-red-400 font-semibold mb-2">Port Conflicts</h4> | |
| <p class="text-gray-300">If port 8080 is already in use, modify the API_PORT in your .env file.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-red-400 font-semibold mb-2">Docker Issues</h4> | |
| <p class="text-gray-300">Ensure Docker is running and you have sufficient permissions.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-red-400 font-semibold mb-2">Memory Limits</h4> | |
| <p class="text-gray-300">Increase Docker memory allocation if containers fail to start.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 border-t border-gray-700 py-12 mt-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="features.html" class="hover:text-red-400 transition-colors">Features</a></li> | |
| <li><a href="pricing.html" class="hover:text-red-400 transition-colors">Pricing</a></li> | |
| <li><a href="documentation.html" class="hover:text-red-400 transition-colors">Documentation</a></li> | |
| <li><a href="installation.html" class="hover:text-red-400 transition-colors">Installation</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> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Copy to clipboard function | |
| function copyToClipboard(text) { | |
| navigator.clipboard.writeText(text).then(function() { | |
| // Show success feedback | |
| const buttons = document.querySelectorAll('button'); | |
| buttons.forEach(btn => { | |
| if (btn.textContent.includes('Copy')) { | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i data-feather="check" class="w-3 h-3 inline"></i> Copied!'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| feather.replace(); | |
| }, 2000); | |
| } | |
| }); | |
| }).catch(function(err) { | |
| console.error('Failed to copy: ', err); | |
| alert('Failed to copy to clipboard'); | |
| }); | |
| } | |
| // Download package function | |
| function downloadPackage(type) { | |
| let url; | |
| switch(type) { | |
| case 'docker-compose': | |
| url = 'https://codeforge-ai.com/download/docker-compose.yml'; | |
| break; | |
| case 'binary': | |
| url = 'https://codeforge-ai.com/download/codeforge-ai-latest.zip'; | |
| break; | |
| default: | |
| url = '#'; | |
| } | |
| if (url !== '#') { | |
| const link = document.createElement('a'); | |
| link.href = url; | |
| link.download = ''; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } else { | |
| alert('Download link not available'); | |
| } | |
| } | |
| // Add smooth scrolling for better UX | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |