mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-01-11 20:00:26 +01:00
69 lines
4.0 KiB
HTML
69 lines
4.0 KiB
HTML
{% load i18n %}
|
|
<div class="card shadow-sm rounded-3">
|
|
<div class="card-header border-bottom-0 pt-4 px-4">
|
|
<h5 class="card-title fw-bold"><i class="fas fa-rocket me-2"></i>Let's Get You Set Up</h5>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<!-- Explanation Text -->
|
|
<div class="alert alert-info border-0" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-info-circle fa-lg me-3"></i>
|
|
<div>
|
|
Welcome to <strong>WYGIWYH</strong>! To get started, you need to configure a currency and create your first account. This will establish the foundation for managing your finances.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task Lists -->
|
|
<div class="mt-4 border rounded-3 overflow-hidden">
|
|
<!-- Required Section -->
|
|
<div class="p-3 text-bg-secondary text-muted text-uppercase fw-bold small">Required Steps</div>
|
|
<ul class="list-group list-group-flush">
|
|
<!-- Task 1: Create Currency -->
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fa-regular fa-circle{% if has_currency %}-check{% endif %} fa-fw text-primary me-3"></i>
|
|
<span class="fw-medium {% if has_currency %}tw:line-through{% endif %}">{% trans 'Add' %} {% trans 'Currency' %}</span>
|
|
</div>
|
|
<a href="#" class="btn btn-primary btn-sm"
|
|
role="button"
|
|
hx-get="{% url 'currency_add' %}"
|
|
hx-target="#generic-offcanvas">{% trans 'Add' %} <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</li>
|
|
<!-- Task 2: Create Account -->
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fa-regular fa-circle{% if has_account %}-check{% endif %} fa-fw text-primary me-3"></i>
|
|
<span class="fw-medium {% if has_account %}tw:line-through{% endif %}">{% trans 'Add' %} {% trans 'Account' %}</span>
|
|
</div>
|
|
<a class="btn btn-primary btn-sm"
|
|
role="button"
|
|
hx-get="{% url 'account_add' %}"
|
|
hx-target="#generic-offcanvas">{% trans 'Add' %} <i class="fas fa-arrow-right ms-1"></i></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Optional Section -->
|
|
<div class="p-3 text-bg-secondary text-muted text-uppercase fw-bold small border-top">Optional Steps</div>
|
|
<ul class="list-group list-group-flush">
|
|
<!-- Task 3: Import Data -->
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-upload fa-fw text-secondary me-3"></i>
|
|
<span class="fw-medium">Import data from another app</span>
|
|
</div>
|
|
<a href="#" class="btn btn-outline-secondary btn-sm">Import</a>
|
|
</li>
|
|
<!-- Task 4: Invite Team -->
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-user-plus fa-fw text-secondary me-3"></i>
|
|
<span class="fw-medium">Invite team members</span>
|
|
</div>
|
|
<a href="#" class="btn btn-outline-secondary btn-sm">Invite</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|