support articles
This commit is contained in:
294
templates/public/help_articles.html
Normal file
294
templates/public/help_articles.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% if category_name %}{{ category_name }} - {% endif %}Help Articles - DocuPulse</title>
|
||||
<meta name="description" content="Browse help articles and documentation for DocuPulse organized by category.">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||
<style>
|
||||
.category-nav {
|
||||
background: var(--white);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 5px 15px var(--shadow-color);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.category-link {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
margin: 5px 0;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-dark);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.category-link:hover {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--primary-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.category-link.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: var(--white);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px var(--shadow-color);
|
||||
margin-bottom: 25px;
|
||||
border: none;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
line-height: 1.7;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.article-content h1, .article-content h2, .article-content h3,
|
||||
.article-content h4, .article-content h5, .article-content h6 {
|
||||
color: var(--primary-color);
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-content ul, .article-content ol {
|
||||
margin-bottom: 15px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.article-content code {
|
||||
background-color: var(--bg-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.article-content pre {
|
||||
background-color: var(--bg-color);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.article-content blockquote {
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding-left: 20px;
|
||||
margin: 20px 0;
|
||||
font-style: italic;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.article-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.article-content th, .article-content td {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article-content th {
|
||||
background-color: var(--bg-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.breadcrumb-nav {
|
||||
background: var(--white);
|
||||
border-radius: 10px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 8px var(--shadow-color);
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px var(--primary-opacity-15);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background: rgba(var(--primary-color-rgb), 0.05);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header_nav.html' %}
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<div class="container mt-4">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-nav">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('public.help_center') }}">Help Center</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
{% if category_name %}{{ category_name }}{% else %}All Articles{% endif %}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Category Navigation -->
|
||||
<div class="col-lg-3">
|
||||
<div class="category-nav">
|
||||
<h5 class="mb-3" style="color: var(--primary-color);">
|
||||
<i class="fas fa-folder me-2"></i>Categories
|
||||
</h5>
|
||||
<a href="{{ url_for('public.help_articles') }}"
|
||||
class="category-link {% if not current_category %}active{% endif %}">
|
||||
<i class="fas fa-th-large me-2"></i>All Articles
|
||||
</a>
|
||||
{% for category_key, category_name in categories.items() %}
|
||||
<a href="{{ url_for('public.help_articles', category=category_key) }}"
|
||||
class="category-link {% if current_category == category_key %}active{% endif %}">
|
||||
<i class="fas fa-{{ 'rocket' if category_key == 'getting-started' else 'users' if category_key == 'user-management' else 'folder' if category_key == 'file-management' else 'comments' if category_key == 'communication' else 'shield-alt' if category_key == 'security' else 'cog' }} me-2"></i>
|
||||
{{ category_name }}
|
||||
{% if all_articles.get(category_key) %}
|
||||
<span class="badge bg-secondary float-end">{{ all_articles[category_key]|length }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles Content -->
|
||||
<div class="col-lg-9">
|
||||
{% if category_name %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h2 mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-{{ 'rocket' if current_category == 'getting-started' else 'users' if current_category == 'user-management' else 'folder' if current_category == 'file-management' else 'comments' if current_category == 'communication' else 'shield-alt' if current_category == 'security' else 'cog' }} me-2"></i>
|
||||
{{ category_name }}
|
||||
</h1>
|
||||
<a href="{{ url_for('public.help_center') }}" class="btn btn-outline-primary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Back to Help Center
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h2 mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-book me-2"></i>All Help Articles
|
||||
</h1>
|
||||
<a href="{{ url_for('public.help_center') }}" class="btn btn-outline-primary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Back to Help Center
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if articles %}
|
||||
{% for article in articles %}
|
||||
<div class="article-card">
|
||||
<h2 class="article-title">{{ article.title }}</h2>
|
||||
<div class="article-content">
|
||||
{{ article.body|safe }}
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-calendar me-1"></i>
|
||||
Updated: {{ article.updated_at.strftime('%B %d, %Y') if article.updated_at else article.created_at.strftime('%B %d, %Y') }}
|
||||
</small>
|
||||
<span class="badge" style="background-color: var(--primary-color);">
|
||||
{{ categories[article.category] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
<h3 class="text-muted">No Articles Found</h3>
|
||||
<p class="text-muted">
|
||||
{% if current_category %}
|
||||
No articles are available in the "{{ category_name }}" category yet.
|
||||
{% else %}
|
||||
No help articles are available yet.
|
||||
{% endif %}
|
||||
</p>
|
||||
<a href="{{ url_for('public.help_center') }}" class="btn btn-primary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Back to Help Center
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'components/footer_nav.html' %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user