{% extends "base.html" %}
{% block title %}Support - MyWebdav Cloud Storage{% endblock %}
{% block description %}Get help with MyWebdav. Contact our support team or find answers in our knowledge base.{% endblock %}
{% block extra_css %}
<style>
.content-section {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: #1565c0;
text-align: center;
margin-bottom: 1rem;
}
.page-subtitle {
font-size: 1.25rem;
color: #666;
text-align: center;
margin-bottom: 3rem;
}
.support-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.support-card {
background: white;
border-radius: 8px;
padding: 2rem;
border: 2px solid #e0e0e0;
text-align: center;
transition: all 0.3s;
}
.support-card:hover {
border-color: #1976d2;
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
transform: translateY(-2px);
}
.support-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.support-title {
font-size: 1.5rem;
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.support-description {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.contact-section {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
color: white;
padding: 3rem;
border-radius: 12px;
margin-top: 3rem;
}
.contact-title {
font-size: 2rem;
font-weight: 600;
text-align: center;
margin-bottom: 2rem;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.contact-item {
text-align: center;
padding: 1rem;
}
.contact-item-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.contact-item-label {
font-weight: 600;
margin-bottom: 0.5rem;
}
.contact-item-value {
opacity: 0.95;
}
.contact-item-value a {
color: white;
text-decoration: none;
}
.contact-item-value a:hover {
text-decoration: underline;
}
.kb-section {
margin-top: 4rem;
}
.kb-title {
font-size: 2rem;
font-weight: 600;
color: #333;
text-align: center;
margin-bottom: 2rem;
}
.kb-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.kb-category {
background: white;
border-radius: 8px;
padding: 1.5rem;
border: 2px solid #e0e0e0;
}
.kb-category-title {
font-weight: 600;
color: #1976d2;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.kb-links {
list-style: none;
padding: 0;
margin: 0;
}
.kb-links li {
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
}
.kb-links li:last-child {
border-bottom: none;
}
.kb-links a {
color: #555;
text-decoration: none;
transition: color 0.2s;
}
.kb-links a:hover {
color: #1976d2;
}
.status-section {
background: #f5f5f5;
padding: 2rem;
border-radius: 12px;
margin-top: 3rem;
text-align: center;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #4caf50;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 24px;
font-weight: 600;
font-size: 1.125rem;
}
.status-indicator {
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 2rem;
}
.support-grid,
.contact-grid,
.kb-grid {
grid-template-columns: 1fr;
}
}
</style>
{% endblock %}
{% block content %}
<div class="content-section">
<h1 class="page-title">WE'RE HERE TO HELP</h1>
<p class="page-subtitle">Get the support you need, when you need it</p>
<div class="support-grid">
<div class="support-card">
<div class="support-icon">📧</div>
<h2 class="support-title">Email Support</h2>
<p class="support-description">Send us an email and we'll respond within 24 hours.</p>
<a href="mailto:support@mywebdav.eu" class="btn btn-primary">Email Us</a>
</div>
<div class="support-card">
<div class="support-icon">📚</div>
<h2 class="support-title">Documentation</h2>
<p class="support-description">Browse our comprehensive guides and API documentation.</p>
<a href="#knowledge-base" class="btn btn-secondary">View Docs</a>
</div>
<div class="support-card">
<div class="support-icon">💬</div>
<h2 class="support-title">Community Forum</h2>
<p class="support-description">Connect with other users and share knowledge.</p>
<a href="mailto:community@mywebdav.eu" class="btn btn-secondary">Join Forum</a>
</div>
</div>
<div class="status-section">
<h2 style="color: #333; margin-bottom: 1rem;">Service Status</h2>
<div class="status-badge">
<span class="status-indicator"></span>
All Systems Operational
</div>
<p style="color: #666; margin-top: 1rem;">99.9% uptime over the last 30 days</p>
</div>
<div class="contact-section">
<h2 class="contact-title">Contact Information</h2>
<div class="contact-grid">
<div class="contact-item">
<div class="contact-item-icon">📧</div>
<div class="contact-item-label">General Support</div>
<div class="contact-item-value">
<a href="mailto:support@mywebdav.eu">support@mywebdav.eu</a>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon">🔧</div>
<div class="contact-item-label">Technical Support</div>
<div class="contact-item-value">
<a href="mailto:tech-support@mywebdav.eu">tech-support@mywebdav.eu</a>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon">💰</div>
<div class="contact-item-label">Billing Inquiries</div>
<div class="contact-item-value">
<a href="mailto:billing@mywebdav.eu">billing@mywebdav.eu</a>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon">🔒</div>
<div class="contact-item-label">Data Protection</div>
<div class="contact-item-value">
<a href="mailto:dpo@mywebdav.eu">dpo@mywebdav.eu</a>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon">⚖️</div>
<div class="contact-item-label">Legal Matters</div>
<div class="contact-item-value">
<a href="mailto:legal@mywebdav.eu">legal@mywebdav.eu</a>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon">🏢</div>
<div class="contact-item-label">Sales & Enterprise</div>
<div class="contact-item-value">
<a href="mailto:sales@mywebdav.eu">sales@mywebdav.eu</a>
</div>
</div>
</div>
</div>
<div class="kb-section" id="knowledge-base">
<h2 class="kb-title">Knowledge Base</h2>
<div class="kb-grid">
<div class="kb-category">
<div class="kb-category-title">Getting Started</div>
<ul class="kb-links">
<li><a href="#kb">Creating your account</a></li>
<li><a href="#kb">Uploading your first file</a></li>
<li><a href="#kb">Setting up WebDAV</a></li>
<li><a href="#kb">Organizing with folders</a></li>
<li><a href="#kb">Understanding pricing</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">Account Management</div>
<ul class="kb-links">
<li><a href="#kb">Updating account details</a></li>
<li><a href="#kb">Enabling two-factor auth</a></li>
<li><a href="#kb">Managing billing</a></li>
<li><a href="#kb">Viewing usage statistics</a></li>
<li><a href="#kb">Deleting your account</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">File Management</div>
<ul class="kb-links">
<li><a href="#kb">Upload and download files</a></li>
<li><a href="#kb">File versioning</a></li>
<li><a href="#kb">Sharing files</a></li>
<li><a href="#kb">Search and filter</a></li>
<li><a href="#kb">Bulk operations</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">WebDAV Setup</div>
<ul class="kb-links">
<li><a href="#kb">Windows setup</a></li>
<li><a href="#kb">macOS setup</a></li>
<li><a href="#kb">Linux setup</a></li>
<li><a href="#kb">Mobile setup</a></li>
<li><a href="#kb">Troubleshooting WebDAV</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">Security & Privacy</div>
<ul class="kb-links">
<li><a href="#kb">Understanding encryption</a></li>
<li><a href="#kb">Two-factor authentication</a></li>
<li><a href="#kb">Data residency</a></li>
<li><a href="#kb">GDPR compliance</a></li>
<li><a href="#kb">Security best practices</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">API & Integration</div>
<ul class="kb-links">
<li><a href="#kb">API documentation</a></li>
<li><a href="#kb">Authentication</a></li>
<li><a href="#kb">Code examples</a></li>
<li><a href="#kb">Rate limits</a></li>
<li><a href="#kb">Webhooks</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">Billing & Pricing</div>
<ul class="kb-links">
<li><a href="#kb">How pricing works</a></li>
<li><a href="#kb">Reading your invoice</a></li>
<li><a href="#kb">Payment methods</a></li>
<li><a href="#kb">Free tier details</a></li>
<li><a href="#kb">Enterprise pricing</a></li>
</ul>
</div>
<div class="kb-category">
<div class="kb-category-title">Troubleshooting</div>
<ul class="kb-links">
<li><a href="#kb">Upload errors</a></li>
<li><a href="#kb">Connection issues</a></li>
<li><a href="#kb">Performance problems</a></li>
<li><a href="#kb">Login issues</a></li>
<li><a href="#kb">Common error messages</a></li>
</ul>
</div>
</div>
</div>
<div style="background: white; padding: 3rem; border-radius: 12px; border: 2px solid #e0e0e0; margin-top: 3rem; text-align: center;">
<h2 style="color: #333; margin-bottom: 1rem;">Response Times</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem;">
<div>
<div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">24 hours</div>
<div style="color: #666;">General Inquiries</div>
</div>
<div>
<div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">4 hours</div>
<div style="color: #666;">Technical Issues</div>
</div>
<div>
<div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">5 days</div>
<div style="color: #666;">Complaint Response</div>
</div>
<div>
<div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">30 days</div>
<div style="color: #666;">GDPR Requests</div>
</div>
</div>
</div>
</div>
{% endblock %}