Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Support - 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="text-center mb-12"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-4">Support Center</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Get help with Replit Clone or contact our support team</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> | |
| <div class="bg-white rounded-xl shadow-md p-6 cursor-pointer" onclick="browseDocumentation()"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="book" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Documentation</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive guides and tutorials to help you get the most out of Replit Clone.</p> | |
| <a href="docs.html" class="text-primary font-medium">Browse Documentation</a> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 cursor-pointer" onclick="viewFAQ()"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="help-circle" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">FAQ</h3> | |
| <p class="text-gray-600 mb-4">Find answers to common questions about using Replit Clone and troubleshooting issues.</p> | |
| <a href="#" class="text-primary font-medium">View FAQ</a> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 cursor-pointer" onclick="visitCommunity()"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="message-circle" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Community Help</h3> | |
| <p class="text-gray-600 mb-4">Connect with other developers in our community forums to get help and share knowledge.</p> | |
| <a href="community.html" class="text-primary font-medium">Visit Community</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Support</h2> | |
| <form class="max-w-2xl" id="support-form"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="name">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your name" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="email">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="your.email@example.com" required> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2" for="subject">Subject</label> | |
| <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| <option value="">Select a subject</option> | |
| <option value="technical">Technical Issue</option> | |
| <option value="billing">Billing Question</option> | |
| <option value="feature">Feature Request</option> | |
| <option value="account">Account Problem</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2" for="message">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Describe your issue or question..." required></textarea> | |
| </div> | |
| <button type="submit" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </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(); | |
| // Handle form submission | |
| document.getElementById('support-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const subject = document.getElementById('subject').value; | |
| const message = document.getElementById('message').value; | |
| // In a real app, this would send the data to a server | |
| alert(`Thank you, ${name}! Your support request has been submitted. We'll get back to you at ${email} soon.`); | |
| // Reset form | |
| this.reset(); | |
| }); | |
| // Interactive support functions | |
| function browseDocumentation() { | |
| window.location.href = 'docs.html'; | |
| } | |
| function viewFAQ() { | |
| alert("Opening FAQ section..."); | |
| // In a real app, this would show the FAQ content | |
| } | |
| function visitCommunity() { | |
| window.location.href = 'community.html'; | |
| } | |
| </script> | |
| </body> | |
| </html> | |