File: /var/www/www-root/data/www/rainsanat.com/1/contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - AI Prompts 2026</title>
<style>
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.7;
color: #1a1a1a;
background-color: #fefefe;
max-width: 800px;
margin: 0 auto;
padding: 0 20px 60px;
}
/* Header */
header {
padding: 40px 0 30px;
border-bottom: 2px solid #eaeaea;
margin-bottom: 40px;
}
.logo {
font-size: 28px;
font-weight: 800;
color: transparent;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
text-decoration: none;
display: block;
margin-bottom: 20px;
}
.back-link {
color: #4a5568;
text-decoration: none;
font-size: 14px;
margin-bottom: 15px;
display: inline-block;
}
.back-link:hover {
color: #2d3748;
text-decoration: underline;
}
/* Contact Header */
.contact-header {
margin-bottom: 40px;
}
.contact-title {
font-size: 2.2rem;
font-weight: 800;
color: #2d3748;
line-height: 1.2;
margin-bottom: 10px;
}
.contact-subtitle {
color: #718096;
font-size: 16px;
margin-bottom: 20px;
}
/* Content */
.content {
font-size: 16px;
margin-bottom: 50px;
}
.intro {
font-size: 18px;
color: #4a5568;
font-weight: 500;
margin-bottom: 30px;
padding: 20px;
background: #f7fafc;
border-left: 4px solid #667eea;
border-radius: 0 8px 8px 0;
}
/* Contact Info */
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin: 40px 0;
}
.info-card {
background: white;
padding: 30px;
border-radius: 8px;
border: 1px solid #e2e8f0;
text-align: center;
}
.info-icon {
font-size: 2.5rem;
margin-bottom: 20px;
display: block;
}
.info-title {
font-weight: 700;
color: #2d3748;
margin-bottom: 10px;
font-size: 1.2rem;
}
.info-text {
color: #4a5568;
}
/* Contact Form */
.contact-form-section {
background: white;
border-radius: 12px;
padding: 40px;
margin: 40px 0;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.form-title {
font-size: 1.8rem;
color: #2d3748;
margin-bottom: 30px;
text-align: center;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2d3748;
}
.required {
color: #f56565;
}
input, textarea {
width: 100%;
padding: 14px;
border: 1px solid #cbd5e0;
border-radius: 6px;
font-family: inherit;
font-size: 16px;
transition: border-color 0.3s ease;
}
input:focus, textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
textarea {
min-height: 150px;
resize: vertical;
}
/* Success Message */
.success-message {
background: #f0fff4;
border: 2px solid #48bb78;
border-radius: 8px;
padding: 30px;
text-align: center;
margin: 30px 0;
display: none;
}
.success-icon {
font-size: 3rem;
margin-bottom: 20px;
display: block;
}
.success-title {
color: #276749;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 15px;
}
.success-text {
color: #276749;
margin-bottom: 20px;
}
/* Submit Button */
.submit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 16px 40px;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: block;
margin: 30px auto 0;
min-width: 200px;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(102, 126, 234, 0.2);
}
.submit-btn:active {
transform: translateY(0);
}
/* Response Time */
.response-time {
text-align: center;
color: #718096;
font-size: 14px;
margin-top: 20px;
padding: 15px;
background: #f7fafc;
border-radius: 6px;
}
/* FAQ */
.faq-section {
background: #f7fafc;
border-radius: 8px;
padding: 40px;
margin: 40px 0;
}
.faq-title {
font-size: 1.5rem;
color: #2d3748;
margin-bottom: 25px;
text-align: center;
}
.faq-item {
background: white;
padding: 20px;
border-radius: 6px;
margin-bottom: 15px;
border-left: 4px solid #667eea;
}
.faq-question {
font-weight: 700;
color: #2d3748;
margin-bottom: 10px;
}
/* Footer */
footer {
margin-top: 60px;
padding-top: 40px;
border-top: 2px solid #eaeaea;
text-align: center;
color: #718096;
font-size: 14px;
}
/* Responsive */
@media (max-width: 768px) {
.contact-title {
font-size: 1.8rem;
}
.contact-form-section {
padding: 25px;
}
.contact-info {
grid-template-columns: 1fr;
}
.info-card {
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<a href="/" class="logo">AI Prompts 2026</a>
<div>
<a href="/" class="back-link">← Back to Home</a>
</div>
</header>
<main>
<div class="contact-header">
<h1 class="contact-title">Contact Us</h1>
<div class="contact-subtitle">We're here to help! Get in touch with our team</div>
</div>
<div class="content">
<div class="intro">
Have questions about AI prompts? Need assistance with our resources? Want to suggest improvements? We'd love to hear from you! Our team typically responds within 24-48 hours.
</div>
<div class="contact-info">
<div class="info-card">
<div class="info-icon">📧</div>
<div class="info-title">Email Us</div>
<div class="info-text">
<strong>General Inquiries:</strong> hello@aiprompts2026.com<br>
<strong>Support:</strong> support@aiprompts2026.com<br>
<strong>Legal:</strong> legal@aiprompts2026.com
</div>
</div>
<div class="info-card">
<div class="info-icon">⏱️</div>
<div class="info-title">Response Time</div>
<div class="info-text">
<strong>Weekdays:</strong> Within 24 hours<br>
<strong>Weekends:</strong> Within 48 hours<br>
<strong>Urgent Matters:</strong> Mark email as "URGENT"
</div>
</div>
<div class="info-card">
<div class="info-icon">📄</div>
<div class="info-title">Before You Contact</div>
<div class="info-text">
Check our <a href="/faq.html" style="color: #667eea;">FAQ</a> first<br>
Read our <a href="/terms-of-service.html" style="color: #667eea;">Terms of Service</a><br>
Review <a href="/privacy-policy.html" style="color: #667eea;">Privacy Policy</a>
</div>
</div>
</div>
<div class="contact-form-section">
<h2 class="form-title">Send Us a Message</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">Full Name <span class="required">*</span></label>
<input type="text" id="name" name="name" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="email">Email Address <span class="required">*</span></label>
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="What is this regarding?">
</div>
<div class="form-group">
<label for="message">Your Message <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Please provide details about your inquiry, question, or feedback..." required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
<div class="response-time">
<strong>Note:</strong> We aim to respond to all messages within 5-7 business days. For urgent matters, please mark your email subject with "URGENT".
</div>
</form>
<div id="successMessage" class="success-message">
<div class="success-icon">✅</div>
<div class="success-title">Message Sent Successfully!</div>
<div class="success-text">
Thank you for contacting AI Prompts 2026. We have received your message and will get back to you within 5-7 business days.
</div>
<button onclick="resetForm()" class="submit-btn" style="background: #48bb78;">Send Another Message</button>
</div>
</div>
<div class="faq-section">
<h2 class="faq-title">Frequently Asked Questions</h2>
<div class="faq-item">
<div class="faq-question">What type of inquiries should I contact you about?</div>
<p>We welcome feedback, suggestions, technical issues, partnership inquiries, and questions about our content. For legal matters, please use the legal email address.</p>
</div>
<div class="faq-item">
<div class="faq-question">Do you offer technical support for AI tools?</div>
<p>While we provide guidance on prompt engineering, we don't offer technical support for third-party AI tools like ChatGPT or Claude. Please contact those services directly for technical issues.</p>
</div>
<div class="faq-item">
<div class="faq-question">Can I suggest new prompt categories or features?</div>
<p>Absolutely! We value user suggestions and regularly update our content based on community feedback. Please use the contact form to share your ideas.</p>
</div>
<div class="faq-item">
<div class="faq-question">Do you offer partnerships or collaborations?</div>
<p>Yes, we're open to partnerships with educational institutions, content creators, and AI tool developers. Please provide details about your proposal in your message.</p>
</div>
</div>
</div>
</main>
<footer>
<div style="margin-bottom: 20px;">
<strong>AI Prompts 2026</strong> • Complete AI Prompt Database
</div>
<div style="color: #888; font-size: 13px;">
© 2026 AI Prompts 2026. All rights reserved.
</div>
</footer>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// In a real application, you would send the form data to a server here
// For this example, we'll just show the success message
// Hide the form
document.getElementById('contactForm').style.display = 'none';
// Show success message
document.getElementById('successMessage').style.display = 'block';
// In a real implementation, you would typically:
// 1. Collect form data
// 2. Send to server via fetch or XMLHttpRequest
// 3. Show success/error message based on response
// 4. Reset form or redirect as needed
});
function resetForm() {
// Hide success message
document.getElementById('successMessage').style.display = 'none';
// Show form
document.getElementById('contactForm').style.display = 'block';
// Reset form fields
document.getElementById('contactForm').reset();
}
</script>
</body>
</html>