Introduce templates/pg/pg_base.html holding the common layout, Vazirmatn typography, colour tokens and reusable components (buttons, rows, dividers, gateway cards, alerts). All four payer-facing screens now extend it for a consistent, mobile-first UI matching the approved UI/UX design: - payment_request: card layout with amount row + gateway picker cards - payment_confirm: restyled "in review" state - payment_success: extends base, adds tracking-code row - payment_failure: extends base, keeps refund notice Mobile: full-bleed white screen, centred content, primary action pinned to the bottom with safe-area padding. >=480px: floated centred card on a grey canvas. No view/logic changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
35 lines
1.3 KiB
HTML
35 lines
1.3 KiB
HTML
{% extends "pg/pg_base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}افزایش موجودی{% endblock %}
|
|
|
|
{% block pg_content %}
|
|
<div class="pg-body">
|
|
<p class="pg-title">افزایش موجودی</p>
|
|
<p class="pg-subtitle">درگاه پرداخت را انتخاب کنید</p>
|
|
|
|
<hr class="pg-divider">
|
|
|
|
<div class="pg-row">
|
|
<span class="label">مبلغ قابل پرداخت</span>
|
|
<span class="value">{{ object.splited_amount|default:object.amount }} ریال</span>
|
|
</div>
|
|
|
|
<hr class="pg-divider">
|
|
|
|
<form action="{{ request.get_full_path }}" method="post" id="pg-gateway-form">
|
|
{% csrf_token %}
|
|
<div class="pg-gateways">
|
|
{% for gateway_tool in object.get_preferred_gateway_classes %}
|
|
<button type="submit" class="pg-gateway-btn" name="{{ gateway_tool.label }}" value="1">
|
|
<img src="{% static gateway_tool.image %}" alt="{{ gateway_tool.label }}">
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block pg_actions %}
|
|
<p class="pg-note">پرداخت از طریق درگاه امن بانکی انجام میشود.</p>
|
|
{% endblock %}
|