Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pricing

Browse Source
This commit is contained in:
Kobe
2025-06-24 11:25:10 +02:00
parent 6412d9f01a
commit 996adb4bce
15 changed files with 1695 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
templates/components/pricing_section.html
View File

@@ -5,6 +5,72 @@
<h2 class="display-5 fw-bold mb-3">Simple, Transparent Pricing</h2>
<p class="lead text-muted">Choose the plan that fits your organization's needs</p>
</div>
{% set pricing_plans = PricingPlan.get_active_plans() %}
{% if pricing_plans %}
<div class="row g-4 justify-content-center">
{% for plan in pricing_plans %}
<div class="col-md-3">
<div class="card pricing-card h-100 d-flex flex-column {% if plan.is_popular %}border-primary position-relative{% endif %}"
{% if plan.is_popular %}style="border: 3px solid var(--primary-color) !important;"{% endif %}>
{% if plan.is_popular %}
<div class="position-absolute top-0 start-0" style="z-index: 10;">
<span class="badge px-3 py-2" style="background: var(--primary-color); color: white; font-size: 0.8rem; font-weight: 600; border-radius: 0 0 15px 0; margin-top: 0; border-top-left-radius: 10px;">
Most Popular
</span>
</div>
{% endif %}
<div class="card-body text-center p-5 d-flex flex-column">
<div class="flex-grow-1">
<h3 class="card-title">{{ plan.name }}</h3>
{% if plan.is_custom %}
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">Custom</div>
{% else %}
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
<span class="monthly-price">€{{ "%.0f"|format(plan.monthly_price) }}</span>
<span class="annual-price" style="display: none;">€{{ "%.0f"|format(plan.annual_price) }}</span>
<span class="fs-6 text-muted">/month</span>
</div>
{% endif %}
{% if plan.description %}
<p class="text-muted mb-3">{{ plan.description }}</p>
{% endif %}
<ul class="list-unstyled mb-4">
{% for feature in plan.features %}
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>{{ feature }}</li>
{% endfor %}
</ul>
</div>
<a href="{{ plan.button_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Billing Toggle - Only show if there are non-custom plans -->
{% set has_non_custom_plans = pricing_plans | selectattr('is_custom', 'equalto', false) | list | length > 0 %}
{% if has_non_custom_plans %}
<div class="d-flex justify-content-center align-items-center mt-4 mb-3">
<span class="me-3">Monthly</span>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="annualBilling" style="width: 3rem; height: 1.5rem; background-color: var(--border-color); border-color: var(--border-color);">
<label class="form-check-label" for="annualBilling"></label>
</div>
<span class="ms-3">Annual <span class="badge text-white px-2 py-1 ms-1" style="background: var(--primary-color); font-size: 0.75rem;">Save 20%</span></span>
</div>
{% endif %}
{% else %}
<!-- Fallback to default pricing if no plans are configured -->
<div class="row g-4 justify-content-center">
<div class="col-md-3">
<div class="card pricing-card h-100 d-flex flex-column">
@@ -107,12 +173,15 @@
</div>
<span class="ms-3">Annual <span class="badge text-white px-2 py-1 ms-1" style="background: var(--primary-color); font-size: 0.75rem;">Save 20%</span></span>
</div>
{% endif %}
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const billingToggle = document.getElementById('annualBilling');
if (!billingToggle) return;
const monthlyPrices = document.querySelectorAll('.monthly-price');
const annualPrices = document.querySelectorAll('.annual-price');
@@ -185,4 +254,5 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
});
</script>
</script>