المكوّنات · بطاقة تتبّع مباشر
بطاقة تتبّع مباشر
خطّ زمني رأسي، والوقت المتوقّع محسوب من المرحلة
9 تصاميم من هذه العائلة
<div class="ap apct"><div class="ph">
<div class="sb"><span class="tm num"></span>
<span class="r" aria-hidden="true"><span>▲</span><span>◗</span><span class="bt num"></span></span></div>
<div class="scr"><div class="body">
<article class="tr">
<div class="hd"><div><b data-ar="طلبك في الطريق" data-en="Your order is on the way">طلبك في الطريق</b>
<span class="awb num">SA-77410-3</span></div><b class="eta num"></b></div>
<div class="map"><span class="path"></span><span class="dot d1"></span>
<span class="dot d2"></span><span class="van"></span></div>
<ol class="tl"></ol>
<button class="cx tap" data-ar="اتّصل بالمندوب" data-en="Call the courier">اتّصل بالمندوب</button>
</article>
</div></div>
<div class="safe"></div>
</div></div>
/* pt-scoped */
/* appcard-track — تتبّع شحنة */
.apct{width:100%;height:100%;display:flex;align-items:center;
justify-content:center;padding:6px;font-size:10px;color:var(--pt-text-secondary);
overflow:hidden}
.apct .ph{position:relative;width:198px;height:100%;max-height:224px;display:flex;
flex-direction:column;overflow:hidden;background:var(--pt-bg-base);
border:1px solid var(--pt-border-default);border-radius:20px;
box-shadow:var(--pt-shadow-3)}
/* شريط الحالة — ليس تزيينًا: يثبت أعلى الشاشة فلا يبدأ المحتوى عند الحافّة */
.apct .sb{flex:none;display:flex;align-items:center;justify-content:space-between;
padding:5px 12px 2px;font-size:7px;color:var(--pt-text-muted);
font-variant-numeric:tabular-nums}
.apct .sb .r{display:flex;gap:3px}
.apct .scr{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.apct .body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch}
.apct .body::-webkit-scrollbar{width:0}
/* المنطقة الآمنة السفلية — شريط الإيماءات يأكل ما تحته */
.apct .safe{flex:none;height:9px;display:grid;place-items:center}
.apct .safe::after{content:'';width:52px;height:3px;border-radius:99px;
background:var(--pt-border-strong)}
.apct h6{margin:0;font-size:10px;color:var(--pt-text-primary);font-weight:600;line-height:1.4}
.apct p{margin:0;font-size:8px;color:var(--pt-text-muted);line-height:1.65}
.apct .num{font-variant-numeric:tabular-nums}
.apct button{font:inherit;cursor:pointer;
transition:background var(--pt-motion-duration-fast) var(--pt-motion-easing-standard),
color var(--pt-motion-duration-fast) var(--pt-motion-easing-standard),
transform var(--pt-motion-duration-fast) var(--pt-motion-easing-standard)}
.apct button:focus-visible, .apct a:focus-visible, .apct input:focus-visible{
outline:2px solid var(--pt-focus-ring);outline-offset:-1px}
/* هدف اللمس: 44 بكسلًا على الشاشات اللمسية، ومساحة نقر ممتدّة على غيرها */
@media(pointer:coarse){.apct .tap{min-width:44px;min-height:44px}
}
.apct .tap{position:relative}
.apct .tap::before{content:'';position:absolute;inset:-6px}
@media(prefers-reduced-motion:reduce){.apct *{transition:none!important;animation:none!important}
}
.apct .body{padding:9px 12px}
.apct .tr{display:flex;flex-direction:column;gap:8px;padding:11px;border-radius:16px;
background:var(--pt-surface);border:1px solid var(--pt-border-subtle)}
.apct .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.apct .hd b{font-size:9.5px;color:var(--pt-text-primary)}
.apct .awb{display:block;font-size:7px;color:var(--pt-text-muted);
font-family:var(--pt-font-mono);margin-top:1px}
.apct .eta{font-size:11px;color:var(--pt-accent);white-space:nowrap}
.apct .map{position:relative;height:44px;border-radius:10px;overflow:hidden;
background:repeating-linear-gradient(0deg,var(--pt-bg-inset) 0 1px,transparent 1px 11px),
repeating-linear-gradient(90deg,var(--pt-bg-inset) 0 1px,transparent 1px 11px),
var(--pt-bg-base)}
.apct .path{position:absolute;inset-block-start:50%;inset-inline:12px;height:2px;
background:var(--pt-border-strong);border-radius:99px}
.apct .dot{position:absolute;inset-block-start:calc(50% - 3px);width:6px;height:6px;
border-radius:50%;background:var(--pt-text-muted)}
.apct .d1{inset-inline-start:10px}
.apct .d2{inset-inline-end:10px;background:var(--pt-accent)}
.apct .van{position:absolute;inset-block-start:calc(50% - 5px);width:10px;height:10px;
border-radius:50%;background:var(--pt-accent);
box-shadow:0 0 0 4px color-mix(in srgb,var(--pt-accent) 26%,transparent);
transition:inset-inline-start var(--pt-motion-duration-slow) linear}
/* خطّ زمني رأسي لا أفقي: العناوين تأخذ العرض كاملًا بدل أن تُقصّ إلى إبهام */
.apct .tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.apct .tl li{position:relative;padding-inline-start:16px;padding-bottom:8px;font-size:8px}
.apct .tl li::before{content:'';position:absolute;inset-inline-start:2px;inset-block-start:3px;
width:7px;height:7px;border-radius:50%;background:var(--pt-border-strong)}
.apct .tl li::after{content:'';position:absolute;inset-inline-start:5px;inset-block-start:11px;
bottom:0;width:1px;background:var(--pt-border-subtle)}
.apct .tl li:last-child::after{display:none}
.apct .tl li.on::before{background:var(--pt-accent)}
.apct .tl li.now::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--pt-accent) 26%,transparent)}
.apct .tl .t{color:var(--pt-text-primary)}
.apct .tl .m{color:var(--pt-text-muted);font-size:7px}
.apct .cx{padding:8px;border-radius:9px;border:1px solid var(--pt-border-default);
background:transparent;color:var(--pt-text-secondary);font-size:8.5px}
/* يعمل داخل إطار معزول — لا يعتمد على شيء خارجه */
/* pt-remount — يعاد التركيب عند تبديل اللغة */
(function () {
var host = document.querySelector('.apct');
if (!host) return;
var snapshot = host.innerHTML;
var timers = [];
var ac = null;
/* الجسم كما كتبه المولِّد. يستقبل بدائل مظلَّلة لـ root وdocument
والمؤقّتات، فينظّف نفسه دون أن يعرف أنه قابل لإعادة التركيب. */
function run(root, document, setTimeout, setInterval) {
var ar = document.documentElement.lang !== 'en';
var n = function (v, d) { return Number(v).toLocaleString('en-US', {
minimumFractionDigits: d || 0, maximumFractionDigits: d || 0 }); };
var money = function (usd, d) {
return ar ? n(usd * 3.75, d) + ' ر.س' : '$' + n(usd, d);
};
var set = function (sel, txt) {
var el = root.querySelector(sel); if (el) el.textContent = txt; return el;
};
/* الساعة بأرقام لاتينية دائمًا — قرار موحّد في المشروع كلّه */
(function clock() {
var t = root.querySelector('.tm');
if (!t) return;
function tick() {
var d = new Date();
t.textContent = String(d.getHours()).padStart(2, '0') + ':' +
String(d.getMinutes()).padStart(2, '0');
setTimeout(tick, 20000);
}
tick();
})();
var bt = root.querySelector('.bt');
if (bt) bt.textContent = '84%';
/* اهتزاز خفيف حيث يوجد — تأكيد لمسيّ لا يعتمد عليه شيء */
var buzz = function (ms) { try { if (navigator.vibrate) navigator.vibrate(ms || 8); } catch (e) {} };
var STEPS = [
{ t: 'استُلم من المتجر', m: 'جدّة · 09:14' },
{ t: 'في مركز الفرز', m: 'جدّة · 13:40' },
{ t: 'خرج للتوصيل', m: 'الرياض · 07:20' },
{ t: 'تسليم للعميل', m: 'متوقّع اليوم' }
];
var AT = 2, ETA_MIN = 38;
root.querySelector('.tl').innerHTML = STEPS.map(function (s, i) {
return '<li class="' + (i <= AT ? 'on' : '') + (i === AT ? ' now' : '') +
'"><span class="t">' + s.t + '</span><br><span class="m">' + s.m + '</span></li>';
}).join('');
set('.eta', ar ? 'خلال ' + ETA_MIN + ' دقيقة' : ETA_MIN + ' min');
// موضع المركبة مشتقّ من المرحلة — لا رقم مكتوب بجانب خطّ زمني يخالفه
var van = root.querySelector('.van');
var p = AT / (STEPS.length - 1);
function place(v) { van.style.insetInlineStart = 'calc(10px + ' + (v * 100) + '% - ' +
(v * 30) + 'px)'; }
place(p);
var drift = p;
setInterval(function () {
drift = Math.min(0.96, drift + 0.008);
place(drift);
}, 1400);
}
function mount() {
ac = new AbortController();
var real = window.document;
/* وسيط يمرّر كل شيء إلى المستند الحقيقي، ويعلّق كل مستمع بإشارة
تُقطع عند إعادة التركيب — فلا يبقى مستمع من نسخة ماتت. */
var doc = new Proxy(real, {
get: function (t, k) {
if (k === 'addEventListener') {
return function (type, fn, opts) {
var o = (opts && typeof opts === 'object') ? Object.assign({}, opts)
: { capture: !!opts };
o.signal = ac.signal;
return t.addEventListener(type, fn, o);
};
}
var v = t[k];
return typeof v === 'function' ? v.bind(t) : v;
}
});
function track(fn) {
return function (f, ms) { var id = fn(f, ms); timers.push(id); return id; };
}
run(host, doc, track(window.setTimeout.bind(window)),
track(window.setInterval.bind(window)));
}
function unmount() {
if (ac) ac.abort();
// المعرّفان يتشاركان فضاءً واحدًا في المتصفّح، فالإلغاء المزدوج آمن
timers.forEach(function (id) { window.clearTimeout(id); window.clearInterval(id); });
timers = [];
host.innerHTML = snapshot;
}
mount();
addEventListener('pt-lang', function () { unmount(); mount(); });
})();
# Live Tracking Card
**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:** Live Tracking Card — A vertical timeline with an ETA derived from the current stage
**Why this component matters:** A vertical timeline suits narrow screens far better than a horizontal one: labels get full width instead of being truncated into ambiguity.
**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.