Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Community - 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">Community</h1> | |
| <p class="text-gray-600 mb-6">Connect with developers, share knowledge, and collaborate on projects</p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <button class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all" onclick="createPost()"> | |
| <i data-feather="plus"></i> | |
| New Post | |
| </button> | |
| <button class="bg-secondary hover:bg-gray-800 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all" onclick="joinGroup()"> | |
| <i data-feather="users"></i> | |
| Join Group | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Community Posts --> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-start gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white font-bold">JD</div> | |
| <div> | |
| <h3 class="font-bold">Jane Doe</h3> | |
| <p class="text-gray-500 text-sm">Posted 2 hours ago</p> | |
| </div> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-3">Just built my first React app with Replit Clone!</h2> | |
| <p class="text-gray-600 mb-4">I'm excited to share that I just completed my first React application using Replit Clone. The integrated environment made it so easy to get started without any setup. Check out my project and let me know what you think!</p> | |
| <div class="flex gap-4 mb-4"> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="likePost(1)"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| <span id="likes-1">24</span> | |
| </button> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="commentOnPost(1)"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>8</span> | |
| </button> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="sharePost(1)"> | |
| <i data-feather="share" class="w-4 h-4"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-start gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-teal-500 rounded-full flex items-center justify-center text-white font-bold">AS</div> | |
| <div> | |
| <h3 class="font-bold">Alex Smith</h3> | |
| <p class="text-gray-500 text-sm">Posted yesterday</p> | |
| </div> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-3">Tips for optimizing Python code in Replit</h2> | |
| <p class="text-gray-600 mb-4">After spending some time with Replit Clone, I've discovered several tips for making Python code run faster and more efficiently. Here are my top 5 recommendations for anyone working on data processing projects...</p> | |
| <div class="flex gap-4 mb-4"> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="likePost(2)"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| <span id="likes-2">42</span> | |
| </button> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="commentOnPost(2)"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>15</span> | |
| </button> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="sharePost(2)"> | |
| <i data-feather="share" class="w-4 h-4"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-start gap-4 mb-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center text-white font-bold">MP</div> | |
| <div> | |
| <h3 class="font-bold">Michael Park</h3> | |
| <p class="text-gray-500 text-sm">Posted 3 days ago</p> | |
| </div> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-3">Showcase: Interactive Data Visualization Dashboard</h2> | |
| <p class="text-gray-600 mb-4">I've been working on a data visualization dashboard using D3.js and Replit Clone. The live preview feature was incredibly helpful during development. Here's a screenshot of the final product and some insights on the process...</p> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-64 mb-4"></div> | |
| <div class="flex gap-4 mb-4"> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="likePost(3)"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| <span id="likes-3">56</span> | |
| </button> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="commentOnPost(3)"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>22</span> | |
| </button> | |
| <button class="flex items-center gap-1 text-gray-500 hover:text-primary" onclick="sharePost(3)"> | |
| <i data-feather="share" class="w-4 h-4"></i> | |
| <span>Share</span> | |
| </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">Trending Topics</h3> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary" onclick="searchTopic('JavaScript')"> | |
| <span class="w-6 h-6 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center text-xs">#</span> | |
| <span>JavaScript</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary" onclick="searchTopic('Python')"> | |
| <span class="w-6 h-6 bg-green-100 text-green-800 rounded-full flex items-center justify-center text-xs">#</span> | |
| <span>Python</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary" onclick="searchTopic('React')"> | |
| <span class="w-6 h-6 bg-purple-100 text-purple-800 rounded-full flex items-center justify-center text-xs">#</span> | |
| <span>React</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary" onclick="searchTopic('CSS')"> | |
| <span class="w-6 h-6 bg-yellow-100 text-yellow-800 rounded-full flex items-center justify-center text-xs">#</span> | |
| <span>CSS</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary" onclick="searchTopic('Node.js')"> | |
| <span class="w-6 h-6 bg-red-100 text-red-800 rounded-full flex items-center justify-center text-xs">#</span> | |
| <span>Node.js</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="font-bold text-lg mb-4">Popular Groups</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-3 cursor-pointer" onclick="joinGroup('frontend')"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-lg"></div> | |
| <div> | |
| <h4 class="font-bold text-sm">Frontend Developers</h4> | |
| <p class="text-gray-500 text-xs">12.4k members</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3 cursor-pointer" onclick="joinGroup('python')"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg"></div> | |
| <div> | |
| <h4 class="font-bold text-sm">Python Enthusiasts</h4> | |
| <p class="text-gray-500 text-xs">8.7k members</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3 cursor-pointer" onclick="joinGroup('fullstack')"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-fuchsia-500 rounded-lg"></div> | |
| <div> | |
| <h4 class="font-bold text-sm">Full Stack Builders</h4> | |
| <p class="text-gray-500 text-xs">15.2k members</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 text-primary font-medium text-sm" onclick="viewAllGroups()">View All Groups</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 community functions | |
| function createPost() { | |
| const post = prompt("What would you like to share with the community?"); | |
| if (post) { | |
| alert("Post created successfully!"); | |
| // In a real app, this would add the post to the feed | |
| } | |
| } | |
| function joinGroup(group) { | |
| if (group) { | |
| alert(`Joining group: ${group}`); | |
| } else { | |
| alert("Joining a group..."); | |
| } | |
| // In a real app, this would join the user to a group | |
| } | |
| function likePost(postId) { | |
| const likesElement = document.getElementById(`likes-${postId}`); | |
| const currentLikes = parseInt(likesElement.textContent); | |
| likesElement.textContent = currentLikes + 1; | |
| // In a real app, this would send the like to the server | |
| } | |
| function commentOnPost(postId) { | |
| const comment = prompt("Enter your comment:"); | |
| if (comment) { | |
| alert("Comment added!"); | |
| // In a real app, this would add the comment to the post | |
| } | |
| } | |
| function sharePost(postId) { | |
| alert("Post shared!"); | |
| // In a real app, this would open sharing options | |
| } | |
| function searchTopic(topic) { | |
| alert(`Searching for posts about: ${topic}`); | |
| // In a real app, this would filter posts by topic | |
| } | |
| function viewAllGroups() { | |
| alert("Viewing all groups..."); | |
| // In a real app, this would navigate to the groups page | |
| } | |
| </script> | |
| </body> | |
| </html> | |