Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Documentation - Replit Clone</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0088CC', | |
| secondary: '#1F2937' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Sidebar Navigation --> | |
| <div class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-md p-6 sticky top-24"> | |
| <h3 class="font-bold text-lg mb-4">Documentation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#getting-started" class="text-primary font-medium">Getting Started</a></li> | |
| <li><a href="#creating-repls" class="text-gray-600 hover:text-primary">Creating Repls</a></li> | |
| <li><a href="#languages" class="text-gray-600 hover:text-primary">Supported Languages</a></li> | |
| <li><a href="#collaboration" class="text-gray-600 hover:text-primary">Collaboration</a></li> | |
| <li><a href="#deployment" class="text-gray-600 hover:text-primary">Deployment</a></li> | |
| <li><a href="#templates" class="text-gray-600 hover:text-primary">Templates</a></li> | |
| <li><a href="#api" class="text-gray-600 hover:text-primary">API Reference</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:w-3/4"> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Documentation</h1> | |
| <p class="text-gray-600 mb-8">Learn how to use Replit Clone to build amazing applications</p> | |
| <div id="getting-started" class="mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Getting Started</h2> | |
| <p class="text-gray-600 mb-4">Welcome to Replit Clone! This guide will help you get started with building your first application.</p> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6"> | |
| <p class="text-blue-700">Tip: You don't need to install anything to get started. Everything runs in your browser!</p> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Creating Your First Repl</h3> | |
| <ol class="list-decimal list-inside space-y-2 text-gray-600 mb-6"> | |
| <li>Click the "Create Repl" button on the homepage</li> | |
| <li>Choose a template or start from scratch</li> | |
| <li>Name your project and select a programming language</li> | |
| <li>Start coding in the editor</li> | |
| </ol> | |
| <div class="flex gap-4 mb-6"> | |
| <button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2" onclick="createReplFromDocs()"> | |
| <i data-feather="plus"></i> | |
| Create Repl | |
| </button> | |
| <button class="bg-secondary hover:bg-gray-800 text-white px-4 py-2 rounded-lg flex items-center gap-2" onclick="showTemplates()"> | |
| <i data-feather="layout"></i> | |
| View Templates | |
| </button> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Interface Overview</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="showSection('editor')"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-3"></div> | |
| <h4 class="font-bold mb-2">Editor</h4> | |
| <p class="text-gray-600 text-sm">Write and edit your code with syntax highlighting</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="showSection('console')"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-3"></div> | |
| <h4 class="font-bold mb-2">Console</h4> | |
| <p class="text-gray-600 text-sm">See output and debug information</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="showSection('preview')"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-3"></div> | |
| <h4 class="font-bold mb-2">Preview</h4> | |
| <p class="text-gray-600 text-sm">View your application in real-time</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="creating-repls" class="mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Creating Repls</h2> | |
| <p class="text-gray-600 mb-4">Repls are the core of Replit Clone. Each repl contains all the files and configuration needed for your project.</p> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">From Scratch</h3> | |
| <p class="text-gray-600 mb-4">Start with a blank canvas and build your project from the ground up.</p> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Using Templates</h3> | |
| <p class="text-gray-600 mb-4">Jumpstart your development with pre-built templates for popular frameworks and languages.</p> | |
| <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6"> | |
| <p class="text-green-700">Pro Tip: You can save your own projects as templates for future use!</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer" onclick="useTemplate('web')"> | |
| <h4 class="font-bold mb-2">Web Development</h4> | |
| <p class="text-gray-600 text-sm mb-3">HTML, CSS, JavaScript starter template</p> | |
| <button class="text-primary text-sm font-medium">Use Template</button> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer" onclick="useTemplate('python')"> | |
| <h4 class="font-bold mb-2">Python Starter</h4> | |
| <p class="text-gray-600 text-sm mb-3">Beginner-friendly Python template</p> | |
| <button class="text-primary text-sm font-medium">Use Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="languages" class="mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Supported Languages</h2> | |
| <p class="text-gray-600 mb-4">Replit Clone supports over 50 programming languages:</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 bg-yellow-400 rounded-full"></div> | |
| <span>JavaScript</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full"></div> | |
| <span>Python</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full"></div> | |
| <span>HTML/CSS</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| <span>Java</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">More languages are added regularly based on community demand.</p> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-semibold mb-3">Language-Specific Guides</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm hover:bg-blue-200" onclick="showLanguageGuide('javascript')">JavaScript</button> | |
| <button class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm hover:bg-green-200" onclick="showLanguageGuide('python')">Python</button> | |
| <button class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm hover:bg-red-200" onclick="showLanguageGuide('html')">HTML/CSS</button> | |
| <button class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm hover:bg-yellow-200" onclick="showLanguageGuide('java')">Java</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <ai-agent></ai-agent> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/ai-agent.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Interactive documentation functions | |
| function createReplFromDocs() { | |
| window.location.href = 'editor.html'; | |
| } | |
| function showTemplates() { | |
| alert('Showing templates...'); | |
| // In a real app, this would navigate to the templates page | |
| } | |
| function showSection(section) { | |
| alert(`Showing ${section} section details...`); | |
| // In a real app, this would expand/collapse sections or show modals | |
| } | |
| function useTemplate(template) { | |
| window.location.href = `editor.html?template=${template}`; | |
| } | |
| function showLanguageGuide(language) { | |
| alert(`Showing ${language} guide...`); | |
| // In a real app, this would filter or show specific language documentation | |
| } | |
| </script> | |
| </body> | |
| </html> | |