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

الواجهات الكاملة · متجر إلكترونيات

إتمام الشراء

نموذج وملخّص ملتصق — المجاميع تُقرأ وأنت تكتب، لا بعد أن تُرسل

افتحها في لسان جديد ↗
<div class="iface ifk">
  <header class="if-top">
    <span class="brand" data-ar="تِقني" data-en="Tiqni">تِقني</span>
    <span class="grow"></span>
    <span class="ifk-secure" data-ar="اتّصال مُعمّى" data-en="Encrypted connection">اتّصال مُعمّى</span>
  </header>

  <div class="if-body">
    <ol class="ifk-steps">
      <li class="done"><b class="num">1</b><span data-ar="السلّة" data-en="Cart">السلّة</span></li>
      <li class="now"><b class="num">2</b><span data-ar="التوصيل والدفع" data-en="Delivery &amp; payment">التوصيل والدفع</span></li>
      <li><b class="num">3</b><span data-ar="المراجعة" data-en="Review">المراجعة</span></li>
    </ol>

    <div class="ifk-cols">
      <form class="ifk-form" onsubmit="return false">
        <fieldset class="if-card">
          <legend data-ar="عنوان التوصيل" data-en="Delivery address">عنوان التوصيل</legend>
          <div class="grid2">
            <label><span data-ar="الاسم" data-en="Name">الاسم</span><input value="أدهم"></label>
            <label><span data-ar="الجوّال" data-en="Mobile">الجوّال</span>
              <input dir="ltr" value="+971 50 664 3388" class="num"></label>
            <label><span data-ar="المدينة" data-en="City">المدينة</span>
              <select><option>دبي</option><option>أبوظبي</option><option>الشارقة</option></select></label>
            <label><span data-ar="الحيّ" data-en="Area">الحيّ</span><input value="الخليج التجاري"></label>
            <label class="wide"><span data-ar="تفاصيل إضافية" data-en="Extra details">تفاصيل إضافية</span>
              <input placeholder="رقم المبنى، الطابق، علامة مميّزة"
                     data-ar-ph="رقم المبنى، الطابق، علامة مميّزة"
                     data-en-ph="Building, floor, landmark"></label>
          </div>
        </fieldset>

        <fieldset class="if-card">
          <legend data-ar="طريقة الدفع" data-en="Payment method">طريقة الدفع</legend>
          <div class="ifk-pay">
            <label class="opt on"><input type="radio" name="pay" checked>
              <span data-ar="بطاقة" data-en="Card">بطاقة</span></label>
            <label class="opt"><input type="radio" name="pay">
              <span data-ar="محفظة" data-en="Wallet">محفظة</span></label>
            <label class="opt"><input type="radio" name="pay">
              <span data-ar="عند الاستلام" data-en="On delivery">عند الاستلام</span></label>
          </div>
          <div class="grid2">
            <label class="wide"><span data-ar="رقم البطاقة" data-en="Card number">رقم البطاقة</span>
              <input dir="ltr" inputmode="numeric" placeholder="4242 4242 4242 4242" class="num"></label>
            <label><span data-ar="الانتهاء" data-en="Expiry">الانتهاء</span>
              <input dir="ltr" placeholder="09/29" class="num"></label>
            <label><span data-ar="الرمز" data-en="CVC">الرمز</span>
              <input dir="ltr" inputmode="numeric" placeholder="123" class="num"></label>
          </div>
        </fieldset>
      </form>

      <aside class="ifk-sum">
        <div class="if-card">
          <h2 data-ar="ملخّص الطلب" data-en="Order summary">ملخّص الطلب</h2>
          <ul class="ifk-items">
            <li><span data-ar="سمّاعة لاسلكية" data-en="Wireless headphones">سمّاعة لاسلكية</span>
              <b class="num">459.00 د.إ</b></li>
            <li><span data-ar="شاحن سريع 65 واط" data-en="65W fast charger">شاحن سريع 65 واط</span>
              <b class="num">129.00 د.إ</b></li>
            <li><span data-ar="حافظة واقية" data-en="Protective case">حافظة واقية</span>
              <b class="num">69.00 د.إ</b></li>
          </ul>
          <dl>
            <div><dt data-ar="المجموع" data-en="Subtotal">المجموع</dt><dd class="num">657.00 د.إ</dd></div>
            <div><dt data-ar="التوصيل" data-en="Delivery">التوصيل</dt>
              <dd class="free" data-ar="مجّاني" data-en="Free">مجّاني</dd></div>
            <div><dt data-ar="ضريبة القيمة المضافة 5%" data-en="VAT 5%">ضريبة القيمة المضافة 5%</dt>
              <dd class="num">32.85 د.إ</dd></div>
            <div class="tot"><dt data-ar="الإجمالي" data-en="Total">الإجمالي</dt>
              <dd class="num">689.85 د.إ</dd></div>
          </dl>
          <button class="if-btn" data-ar="ادفع الآن" data-en="Pay now">ادفع الآن</button>
          <p class="ifk-fine" data-ar="يمكنك الإرجاع خلال 14 يومًا بلا سبب."
             data-en="Return within 14 days, no reason needed.">يمكنك الإرجاع خلال 14 يومًا بلا سبب.</p>
        </div>
      </aside>
    </div>
  </div>
</div>
← حجز موعدإدارة عملاء →