File: templates/userguide.twig

{% extends "base.twig" %}

{% block title %}{{ t('ui.userguide.page_title', {}, 'common') }} ? {{ system_name }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-9">

        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-2 pb-2 mb-4 border-bottom">
            <h1 class="h2 mb-0">
                <i class="fas fa-book-open me-2"></i>{{ t('ui.userguide.heading', {}, 'common') }}
            </h1>
        </div>

        {% if content %}
        <div class="card">
            <div class="card-body userguide-body">
                {{ content | raw }}
            </div>
        </div>
        {% else %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>
            {{ t('ui.userguide.not_found', {}, 'common') }}
        </div>
        {% endif %}

    </div>
</div>

<style>
.userguide-body { padding: 1.5rem 2rem; }
.userguide-body h1 { font-size: 1.8rem; margin-top: 0; margin-bottom: 1rem; }
.userguide-body h2 { font-size: 1.4rem; margin-top: 2.5rem; border-bottom: 2px solid var(--bs-border-color); padding-bottom: .4rem; }
.userguide-body h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.userguide-body p { line-height: 1.7; }
.userguide-body pre { background: #1e1e1e; color: #d4d4d4; border-radius: .375rem; padding: 1rem; overflow-x: auto; }
.userguide-body code { font-size: .875em; background: rgba(128,128,128,.15); padding: .1em .3em; border-radius: .2rem; }
.userguide-body pre code { background: none; padding: 0; color: inherit; }
.userguide-body ul, .userguide-body ol { padding-left: 1.5rem; line-height: 1.8; }
.userguide-body hr { margin: 2rem 0; }
.userguide-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.userguide-body table th, .userguide-body table td { border: 1px solid var(--bs-border-color); padding: .5rem .75rem; text-align: left; }
.userguide-body table th { background: var(--bs-light); color: var(--bs-dark); font-weight: 600; }
.userguide-body blockquote { border-left: 4px solid var(--bs-primary); padding: .5rem 1rem; margin: 1rem 0; background: rgba(var(--bs-primary-rgb), .05); border-radius: 0 .375rem .375rem 0; }
.userguide-body blockquote p { margin-bottom: 0; }
.userguide-body a { text-decoration: none; }
.userguide-body a:hover { text-decoration: underline; }

.screenshot-placeholder {
    background: var(--bs-light);
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    margin: 1.25rem 0;
    font-size: .95rem;
}
.screenshot-placeholder i { font-size: 1.5rem; display: block; margin-bottom: .5rem; color: var(--bs-secondary-color); }
</style>
{% endblock %}