fix UI UX

templates/accounts/profile.html

@@ -1,20 +1,37 @@
-{% extends 'base.html' %}{% load static %}
+{% extends 'payments/base.html' %}{% load static %}
 {% block title %}{{ page_title }}{% endblock %}
+{% block extra_head %}{{ block.super }}<link rel="stylesheet" href="{% static 'css/customer-profile.css' %}?v={{ static_asset_version }}">{% endblock %}
 {% block content %}
-<div class="page-head"><div><p class="eyebrow">تنظیمات حساب</p><h1>پروفایل من</h1><p>اطلاعات شما به کارشناس کمک می‌کند پاسخ دقیق‌تری ارائه کند.</p></div><a class="nav-link" href="{% url 'tickets:list' %}">بازگشت به تیکت‌ها</a></div>
-<section class="card form-card">
-  <div class="badge" dir="ltr">{{ user.mobile }}</div>
-  <form method="post" class="mt-6" data-disable-on-submit>{% csrf_token %}{{ form.non_field_errors }}
-    <div class="grid gap-4 sm:grid-cols-2"><div class="field">{{ form.first_name.label_tag }}{{ form.first_name }}{{ form.first_name.errors }}</div><div class="field">{{ form.last_name.label_tag }}{{ form.last_name }}{{ form.last_name.errors }}</div></div>
-    <div class="field">{{ form.customer_type.label_tag }}{{ form.customer_type }}{{ form.customer_type.errors }}</div>
-    <section class="location-fields" data-location-picker data-locations-url="{% static 'data/iran-locations.json' %}">
-      <div class="location-heading"><div><h3>موقعیت پیش‌فرض</h3><p>اختیاری است؛ در تیکت‌های جدید به‌صورت خودکار پیشنهاد می‌شود.</p></div><span>اختیاری</span></div>
-      <div class="grid gap-4 sm:grid-cols-2"><div class="field">{{ form.province.label_tag }}{{ form.province }}<datalist id="profile-province-options" data-province-options></datalist>{{ form.province.errors }}</div><div class="field">{{ form.city.label_tag }}{{ form.city }}<datalist id="profile-city-options" data-city-options></datalist>{{ form.city.errors }}</div></div>
-      <p class="location-hint" data-location-hint>نام استان را جست‌وجو و انتخاب کنید.</p>
+<section class="chaharsu customer-profile" aria-labelledby="profile-title">
+  <header class="chaharsu-heading">
+    <a class="profile-breadcrumb" href="{% url 'payments:home' %}">خدمات چهارسو</a>
+    <div class="profile-heading"><span class="service-icon">{% include 'payments/_icon.html' with name='user' %}</span><div><h1 id="profile-title">پروفایل من</h1><p>اطلاعات شما به کارشناس کمک می‌کند پاسخ دقیق‌تری ارائه کند.</p></div></div>
+  </header>
+  <form method="post" class="pay-form customer-profile-form" data-disable-on-submit>{% csrf_token %}
+    {% if form.errors %}<div class="pay-errors" role="alert"><p>اطلاعات مشخص‌شده را بررسی و دوباره ذخیره کنید.</p>{{ form.non_field_errors }}</div>{% endif %}
+    <section class="pay-card" aria-labelledby="profile-personal-title">
+      <div class="profile-card-heading"><h2 id="profile-personal-title">اطلاعات حساب</h2><span class="profile-mobile"><span>شماره همراه</span><bdi>{{ user.mobile }}</bdi></span></div>
+      <div class="profile-field-grid">
+        <div class="pay-field">{{ form.first_name.label_tag }}{{ form.first_name }}{{ form.first_name.errors }}</div>
+        <div class="pay-field">{{ form.last_name.label_tag }}{{ form.last_name }}{{ form.last_name.errors }}</div>
+        <div class="pay-field">{{ form.customer_type.label_tag }}{{ form.customer_type }}{{ form.customer_type.errors }}</div>
+      </div>
     </section>
-    <div class="field">{{ form.password.label_tag }}{{ form.password }}{% if form.password.help_text %}<small class="muted">{{ form.password.help_text }}</small>{% endif %}{{ form.password.errors }}</div>
-    <button type="submit">ذخیره تغییرات</button>
+    <section class="pay-card" data-location-picker data-locations-url="{% static 'data/iran-locations.json' %}?v={{ static_asset_version }}" aria-labelledby="profile-location-title">
+      <h2 id="profile-location-title">موقعیت پیش‌فرض</h2>
+      <p class="profile-guidance">اختیاری است؛ در درخواست‌های جدید به‌صورت خودکار پیشنهاد می‌شود.</p>
+      <div class="profile-field-grid">
+        <div class="pay-field">{{ form.province.label_tag }}{{ form.province }}<datalist id="profile-province-options" data-province-options></datalist>{{ form.province.errors }}</div>
+        <div class="pay-field">{{ form.city.label_tag }}{{ form.city }}<datalist id="profile-city-options" data-city-options></datalist>{{ form.city.errors }}</div>
+      </div>
+      <p class="profile-guidance" data-location-hint role="status">نام استان را جست‌وجو و انتخاب کنید.</p>
+    </section>
+    <section class="pay-card" aria-labelledby="profile-password-title">
+      <h2 id="profile-password-title">رمز عبور</h2>
+      <div class="pay-field">{{ form.password.label_tag }}{{ form.password }}{% if form.password.help_text %}<p class="profile-guidance" id="{{ form.password.auto_id }}_helptext">{{ form.password.help_text }}</p>{% endif %}{{ form.password.errors }}</div>
+    </section>
+    <div class="profile-actions"><button class="pay-button" type="submit">ذخیره تغییرات</button><a class="pay-button secondary" href="{% url 'tickets:list' %}">بازگشت به درخواست‌ها</a></div>
   </form>
 </section>
-<script src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script>
 {% endblock %}
+{% block extra_scripts %}<script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script>{% endblock %}