PenTool UIتصفّح المكتبة

الواجهات الكاملة · تطبيق مالي

تهيئة الحساب

بطاقة واحدة في الوسط وخطوات فوقها — سؤال واحد في الشاشة، فلا يُهجَر النموذج

افتحها في لسان جديد ↗
<div class="iface ifn">
  <header class="if-top">
    <span class="brand" data-ar="رصيد" data-en="Raseed">رصيد</span>
    <span class="grow"></span>
    <button class="if-btn ghost" data-ar="تخطَّ الآن" data-en="Skip for now">تخطَّ الآن</button>
  </header>

  <div class="ifn-stage">
    <div class="ifn-steps" role="group" aria-label="التقدّم">
      <i class="done"></i><i class="done"></i><i class="now"></i><i></i>
      <span><span data-ar="الخطوة" data-en="Step">الخطوة</span>
        <b class="num">3</b> <span data-ar="من" data-en="of">من</span> <b class="num">4</b></span>
    </div>

    <div class="if-card ifn-card">
      <h1 data-ar="ما هدفك من الحساب؟" data-en="What is this account for?">ما هدفك من الحساب؟</h1>
      <p data-ar="نختار لك التقارير والتنبيهات على أساسه. تستطيع تغييره لاحقًا من الإعدادات."
         data-en="We pick your reports and alerts from this. You can change it later in settings.">نختار لك التقارير والتنبيهات على أساسه. تستطيع تغييره لاحقًا من الإعدادات.</p>

      <div class="ifn-opts">
        <label class="opt on"><input type="radio" name="goal" checked>
          <b data-ar="ادّخار لهدف" data-en="Save for a goal">ادّخار لهدف</b>
          <span data-ar="رحلة، سيّارة، دفعة أولى" data-en="A trip, a car, a down payment">رحلة، سيّارة، دفعة أولى</span></label>
        <label class="opt"><input type="radio" name="goal">
          <b data-ar="ضبط المصروف الشهري" data-en="Control monthly spending">ضبط المصروف الشهري</b>
          <span data-ar="حدود لكل بند وتنبيه عند التجاوز" data-en="Per-category limits with alerts">حدود لكل بند وتنبيه عند التجاوز</span></label>
        <label class="opt"><input type="radio" name="goal">
          <b data-ar="متابعة عمل حرّ" data-en="Track freelance income">متابعة عمل حرّ</b>
          <span data-ar="دخل متغيّر وفواتير وضريبة" data-en="Variable income, invoices and tax">دخل متغيّر وفواتير وضريبة</span></label>
      </div>

      <div class="ifn-go">
        <button class="if-btn ghost" data-ar="السابق" data-en="Back">السابق</button>
        <span class="grow"></span>
        <button class="if-btn" data-ar="التالي" data-en="Next">التالي</button>
      </div>
    </div>

    <p class="ifn-fine" data-ar="لا نطلب بياناتك البنكية في هذه الخطوة."
       data-en="We don’t ask for bank details at this step.">لا نطلب بياناتك البنكية في هذه الخطوة.</p>
  </div>
</div>
← صفحة هبوطالملفّ والإعدادات →