المكوّنات · معالج تهيئة
معالج تهيئة
التقدّم يسير باتجاه القراءة
<span class="rtlok setup-wizard" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
<div class="mini wiz">
<div class="track">
<span class="dot done">✓</span><span class="seg fill"></span>
<span class="dot done">✓</span><span class="seg fill"></span>
<span class="dot now"><span class="num" data-n="3">3</span></span><span class="seg"></span>
<span class="dot"><span class="num" data-n="4">4</span></span>
</div>
<div class="lbls">
<span data-ar="الشركة" data-en="Company">الشركة</span>
<span data-ar="الفروع" data-en="Branches">الفروع</span>
<span data-ar="الموظفون" data-en="Staff">الموظفون</span>
<span data-ar="التفعيل" data-en="Activate">التفعيل</span>
</div>
<div class="panel">
<span data-ar="رفع ملف الموظفين" data-en="Uploading staff file">رفع ملف الموظفين</span>
<div class="bar" style="background:var(--pt-border-default)">
<div style="width:62%;height:100%;border-radius:inherit;background:var(--pt-accent)"></div>
</div>
</div>
</div>
/* pt-scoped */
.setup-wizard .bar{height:6px;border-radius:var(--pt-radius-full);background:var(--pt-surface-hover)}
.setup-wizard .num{font-variant-numeric:tabular-nums}
/* معالج خطوات — التقدّم يسير في اتجاه القراءة */
.setup-wizard .wiz{width:100%;max-width:200px}
.setup-wizard .wiz .track{display:flex;align-items:center;margin-bottom:10px}
.setup-wizard .wiz .dot{width:20px;height:20px;border-radius:var(--pt-radius-full);flex-shrink:0;
display:grid;place-items:center;font-size:9px;font-weight:700;
background:var(--pt-surface);border:1px solid var(--pt-border-default);color:var(--pt-text-muted)}
.setup-wizard .wiz .dot.done{background:var(--pt-accent);color:var(--pt-on-accent);border-color:var(--pt-accent)}
.setup-wizard .wiz .dot.now{border-color:var(--pt-accent);color:var(--pt-accent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--pt-accent) 18%,transparent)}
.setup-wizard .wiz .seg{flex:1;height:2px;background:var(--pt-border-default);position:relative;overflow:hidden}
.setup-wizard .wiz .seg.fill::after{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:100%;
background:var(--pt-accent)}
.setup-wizard .wiz .lbls{display:flex;justify-content:space-between;font-size:8px;color:var(--pt-text-muted)}
.setup-wizard .wiz .panel{margin-top:9px;background:var(--pt-surface);border-radius:var(--pt-radius-md);
padding:9px;font-size:9px}
.setup-wizard .wiz .panel .bar{margin-top:5px}
# Setup Wizard
**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.
**Goal:** Setup Wizard — Progress follows reading order
**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.
**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.
**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.
**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.
**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.
**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.
**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.
**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.