Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>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"> | |
| <!-- Main Content --> | |
| <div class="lg:w-3/4"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Welcome to Replit Clone</h1> | |
| <p class="text-gray-600 mb-6">Build, collaborate, and ship software faster with our cloud-based IDE</p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <a href="editor.html" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all"> | |
| <i data-feather="plus"></i> | |
| Create Repl | |
| </a> | |
| <button class="bg-secondary hover:bg-gray-800 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all" onclick="importFromGitHub()"> | |
| <i data-feather="folder"></i> | |
| Import from GitHub | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Templates Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Popular Templates</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="useTemplate('python')"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div> | |
| <h3 class="font-bold text-lg mb-2">Python Starter</h3> | |
| <p class="text-gray-600 text-sm mb-4">Begin your Python journey with this template</p> | |
| <a href="#" class="text-primary font-medium flex items-center gap-1"> | |
| Use Template | |
| <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="useTemplate('web')"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div> | |
| <h3 class="font-bold text-lg mb-2">Web Development</h3> | |
| <p class="text-gray-600 text-sm mb-4">HTML, CSS, and JS template for web projects</p> | |
| <a href="#" class="text-primary font-medium flex items-center gap-1"> | |
| Use Template | |
| <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="useTemplate('node')"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div> | |
| <h3 class="font-bold text-lg mb-2">Node.js API</h3> | |
| <p class="text-gray-600 text-sm mb-4">Build REST APIs with Express.js</p> | |
| <a href="#" class="text-primary font-medium flex items-center gap-1"> | |
| Use Template | |
| <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Projects --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Recent Projects</h2> | |
| <a href="#" class="text-primary font-medium">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer" onclick="openProject('my-website')"> | |
| <div class="flex items-center gap-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i data-feather="code" class="text-primary"></i> | |
| </div> | |
| <div> | |
| <a href="#" class="font-bold hover:text-primary">My Website</a> | |
| <p class="text-gray-600 text-sm">Last edited 2 hours ago</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700" onclick="event.stopPropagation(); showProjectOptions('my-website')"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer" onclick="openProject('data-analysis')"> | |
| <div class="flex items-center gap-4"> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i data-feather="database" class="text-green-600"></i> | |
| </div> | |
| <div> | |
| <a href="#" class="font-bold hover:text-primary">Data Analysis</a> | |
| <p class="text-gray-600 text-sm">Last edited yesterday</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700" onclick="event.stopPropagation(); showProjectOptions('data-analysis')"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer" onclick="openProject('mobile-app')"> | |
| <div class="flex items-center gap-4"> | |
| <div class="bg-purple-100 p-3 rounded-lg"> | |
| <i data-feather="smartphone" class="text-purple-600"></i> | |
| </div> | |
| <div> | |
| <a href="#" class="font-bold hover:text-primary">Mobile App</a> | |
| <p class="text-gray-600 text-sm">Last edited 3 days ago</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700" onclick="event.stopPropagation(); showProjectOptions('mobile-app')"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h3 class="font-bold text-lg mb-4">Getting Started</h3> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a href="docs.html" class="flex items-center gap-2 text-gray-700 hover:text-primary"> | |
| <i data-feather="book" class="w-4 h-4"></i> | |
| <span>Documentation</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="tutorials.html" class="flex items-center gap-2 text-gray-700 hover:text-primary"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| <span>Tutorials</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="community.html" class="flex items-center gap-2 text-gray-700 hover:text-primary"> | |
| <i data-feather="users" class="w-4 h-4"></i> | |
| <span>Community</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="support.html" class="flex items-center gap-2 text-gray-700 hover:text-primary"> | |
| <i data-feather="help-circle" class="w-4 h-4"></i> | |
| <span>Support</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="font-bold text-lg mb-4">Upgrade to Pro</h3> | |
| <p class="text-gray-600 text-sm mb-4">Get more features with Replit Pro</p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500"></i> | |
| <span class="text-sm">Always-On Repls</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500"></i> | |
| <span class="text-sm">Boosted Performance</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500"></i> | |
| <span class="text-sm">Private Repls</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-2 rounded-lg font-medium" onclick="upgradeToPro()"> | |
| Upgrade Now | |
| </button> | |
| </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 functions | |
| function importFromGitHub() { | |
| const repo = prompt("Enter GitHub repository URL:"); | |
| if (repo) { | |
| alert(`Importing repository: ${repo}\nThis would normally clone the repo to your workspace.`); | |
| } | |
| } | |
| function useTemplate(template) { | |
| window.location.href = `editor.html?template=${template}`; | |
| } | |
| function openProject(project) { | |
| window.location.href = `editor.html?project=${project}`; | |
| } | |
| function showProjectOptions(project) { | |
| const action = confirm(`Options for ${project}:\n- Rename\n- Duplicate\n- Delete\n- Share\n\nWould you like to delete this project?`); | |
| if (action) { | |
| alert(`Project ${project} has been deleted.`); | |
| } | |
| } | |
| function upgradeToPro() { | |
| alert("Redirecting to subscription page..."); | |
| // In a real app, this would redirect to a payment page | |
| } | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |