<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>تتبّع شحنتك - برلين</title>
<meta name="color-scheme" content="light" />
<style>
/* كل شيء داخل berlin-track فقط — لا يؤثر على المتجر */
#berlin-track{
--red:#dc2626;
--red-dark:#b91c1c;
--red-weak:#fee2e2;
--bg:#f9fafb;
--text:#0f172a;
--muted:#64748b;
--border:#e2e8f0;
--ok:#16a34a;
--err:#b91c1c;
--radius:12px;
--shadow:0 8px 22px rgba(0,0,0,.08);
font-family: system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
color:var(--text);
}
/* حاوية صغيرة ومتجاوبة */
#berlin-track .br-wrap{
max-width: 720px;
margin: clamp(12px,4vw,24px) auto;
padding: 0 12px;
}
#berlin-track .br-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding: clamp(12px,3vw,18px);
}
/* رأس بسيط */
#berlin-track .br-head{
display:grid; gap:10px; align-items:center; margin-bottom:8px;
grid-template-columns: 1fr auto;
}
@media (max-width:560px){
#berlin-track .br-head{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
}
#berlin-track h1{
margin:0; letter-spacing:.2px;
font-size: clamp(18px,3.5vw,22px);
font-weight:900; color:var(--red);
}
#berlin-track .br-logos{
display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
}
@media (max-width:560px){ #berlin-track .br-logos{ justify-content:center; } }
#berlin-track .br-logos img{
height: 24px; width:auto; object-fit:contain; display:block;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.05));
}
#berlin-track .lead{
color:var(--muted);
font-size: 13px;
margin: 4px 0 12px; text-align: center;
}
/* نموذج */
#berlin-track form.br-form{ display:grid; gap:10px; }
/* وصولية */
#berlin-track .vh{
position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}
/* اختيار شركة الشحن */
#berlin-track .segmented{
display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden;
width:100%; max-width:520px; margin: 0 auto 4px; padding:0; min-inline-size:0;
}
#berlin-track .segmented input{ display:none; }
#berlin-track .segmented label{
flex:1; text-align:center; padding:9px 8px; cursor:pointer; font-weight:800; background:#fff; user-select:none;
font-size:13px;
}
#berlin-track .segmented input:checked + label{ background:var(--red); color:#fff; }
#berlin-track .field-label{ font-size: 13px; font-weight:700; margin: 2px 0 4px; display:block; text-align:right; }
#berlin-track .row{ display:grid; gap:8px; grid-template-columns: 1fr; align-items:start; }
@media (min-width:560px){ #berlin-track .row{ grid-template-columns: 1fr auto; } }
#berlin-track input{
width:100%; padding: 12px;
font-size: 14px; line-height:1.4;
border:1px solid var(--border); border-radius:10px; outline:none; background:#fff; color:var(--text);
transition:border-color .2s, box-shadow .2s;
direction:ltr; text-align:left;
}
#berlin-track input:focus{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-weak); }
/* زر صغير وواضح */
#berlin-track .btn{
position: relative;
border: 1px solid rgba(0,0,0,.06);
border-radius:10px;
padding: 11px 14px; min-height: 42px;
font-weight:800; font-size: 14px;
cursor:pointer; color:#fff; background:var(--red);
box-shadow:0 6px 14px rgba(220,38,38,.26);
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
transition:background .2s, transform .05s, opacity .2s;
touch-action: manipulation; overflow:hidden;
}
@media (max-width:560px){ #berlin-track .btn{ width:100%; justify-content:center; } }
#berlin-track .btn:hover{ background:var(--red-dark); }
#berlin-track .btn:active{ transform:scale(.985); }
#berlin-track .btn[disabled]{
opacity:1; cursor:not-allowed; background:#e5e7eb; color:#334155; border-color:#e5e7eb;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
#berlin-track .spinner{ width:16px; height:16px; border-radius:999px; border:2px solid #fff; border-right-color:transparent; display:none; animation:spin .6s linear infinite; }
#berlin-track .loading .spinner{ display:inline-block; }
#berlin-track .hint{ font-size: 12.5px; color:var(--muted); text-align:center; }
#berlin-track .err-msg{ display:none; font-size: 12.5px; color:var(--err); line-height:1.4; text-align:center; }
#berlin-track .err-show .err-msg{ display:block; }
#berlin-track #status{ display:none; font-size: 13px; margin-top:4px; text-align:center; }
#berlin-track #status.ok{ color:var(--ok); }
#berlin-track #status.err{ color:var(--err); }
#berlin-track .note{ margin-top:6px; font-size: 12.5px; color:var(--muted); text-align:center; }
#berlin-track .note b{ color:var(--ok); }
#berlin-track .whatsapp-link { display:inline-flex; align-items:center; margin-right:4px; }
#berlin-track .whatsapp-icon { width:18px; height:18px; display:inline-block; vertical-align:middle; }
@keyframes spin{ to{ transform:rotate(360deg) } }
</style>
</head>
<body>
<!-- ضع هذا القسم حيث تريد داخل صفحتك؛ لن يؤثر على السلة أو أزرار المتجر -->
= 6) return last;
}catch(_){}
return v;
}
// تحويل أرقام عربية/فارسيّة وإزالة غير اللاتيني
function normalize(value){
if(!value) return '';
let raw = extractAwbFromAny(value);
let out = '';
for(const ch of raw){
const code = ch.codePointAt(0);
if(code >= 0x0660 && code <= 0x0669){ out += String(code - 0x0660); continue; } // ٠-٩
if(code >= 0x06F0 && code <= 0x06F9){ out += String(code - 0x06F0); continue; } // ۰-۹
out += ch;
}
out = out.replace(/[^A-Za-z0-9]/g, '');
return out.toUpperCase();
}
function isValid(v){ return v.length >= MIN && v.length <= MAX && /^[A-Z0-9]+$/.test(v); }
function updateUI(){
const raw = input.value;
const norm = normalize(raw);
if(raw !== norm){ input.value = norm; }
const valid = isValid(norm);
btn.disabled = !valid;
input.setAttribute('aria-invalid', String(!valid));
field.classList.toggle('err-show', !valid && norm.length > 0);
errBox.textContent = (!valid && norm.length>0)
? ('الرقم غير صالح. أدخل من ' + MIN + ' إلى ' + MAX + ' رمزًا (أرقام/أحرف إنجليزية).')
: '';
}
input.addEventListener('input', updateUI);
input.addEventListener('blur', updateUI);
input.addEventListener('paste', () => setTimeout(updateUI, 0));
async function copyToClipboard(text){
try{
await navigator.clipboard.writeText(text);
return true;
}catch(_){
return false;
}
}
form.addEventListener('submit', async function(e){
e.preventDefault();
const awb = normalize(input.value);
if(!isValid(awb)){
updateUI();
status.style.display = 'block';
status.className = 'err';
status.textContent = 'تحقّق من الرقم ثم أعد المحاولة.';
return;
}
// حالة تحميل للزر
btn.classList.add('loading');
btn.disabled = true;
status.style.display = 'block';
status.className = '';
status.textContent = 'جارٍ فتح صفحة التتبّع...';
// تحديد شركة الشحن وبناء الرابط
let url = '';
if (carrierDhl.checked){
url = 'https://www.dhl.com/sa-en/home/tracking.html?tracking-id=' + encodeURIComponent(awb);
} else if (carrierSmsa.checked){
url = 'https://www.smsaexpress.com/sa/ar/trackingdetails?tracknumbers=' + encodeURIComponent(awb);
} else {
// أرامكس: صفحة التتبع العامة (تقبل عدة أرقام). ننسخ الرقم للحافظة لتسهيل اللصق هناك.
url = 'https://www.aramex.com/ae/ar/track/shipments';
const copied = await copyToClipboard(awb);
if(copied){
status.textContent = 'تم نسخ رقم الشحنة للحافظة. جارٍ فتح صفحة أرامكس...';
}
}
window.open(url, '_blank', 'noopener,noreferrer');
setTimeout(() => {
btn.classList.remove('loading');
btn.disabled = false;
status.className = 'ok';
status.textContent = 'تم فتح صفحة التتبّع في تبويب جديد.';
}, 600);
});
// بداية
updateUI();
})();
<noscript>
<div style="max-width:720px;margin:10px auto;padding:10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#0f172a;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif">
لتتبّع الشحنة، فعّل الجافاسكربت. أو انتقل يدويًا إلى
<a href="https://www.smsaexpress.com/sa/ar/trackingdetails" target="_blank" rel="noopener">سمسا</a>
أو
<a href="https://www.dhl.com/sa-en/home/tracking.html" target="_blank" rel="noopener">DHL</a>
أو
<a href="https://www.aramex.com/ae/ar/track/shipments" target="_blank" rel="noopener">أرامكس</a>.
</div>
</noscript>
</body>
</html>
<header class="br-head">
تتبّع شحنتك
أدخل رقم تتبّع الطلب أو رقم تتبّع الإرجاع ثم اختر الشركة (سمسا أو DHL أو أرامكس).
<!-- اختيار شركة الشحن --> <form id="trackForm" class="br-form" novalidate>
<input
id="awb" name="awb" inputmode="text" autocomplete="off"
placeholder="مثال: 123456789012 أو SM123456789"
aria-describedby="hint" aria-invalid="false" required
minlength="6" maxlength="25" pattern="[A-Za-z0-9]{6,25}"
/>
<button id="btn" class="btn" type="submit" aria-label="تتبّع الآن" disabled>
تتبّع الآن
</button>
الرقم غير صالح. أدخل من 6 إلى 25 رمزًا من الأرقام أو الأحرف الإنجليزية فقط.
يمكنك الحصول على رقم التتبّع من حسابك في المتجر
أو التواصل مع خدمة العملاء
عند اكتمال التوصيل ستظهر الحالة: تم التسليم.
</form>