Spaces:
Running
Running
File size: 7,009 Bytes
ffed4ea c3ae8b9 ffed4ea c3ae8b9 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 | <!DOCTYPE html>
<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>
|