Spaces:
Running
Running
File size: 11,986 Bytes
ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea 381bf2b ffed4ea 381bf2b ffed4ea 381bf2b ffed4ea c3ae8b9 ffed4ea c3ae8b9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 | <!DOCTYPE html>
<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>
|