Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>تطبيق إنترناشونال – تتبع الشحنات والحاويات</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-deep: #050d1a; | |
| --bg-card: #0a1628; | |
| --bg-panel: #0e1e35; | |
| --accent: #00c8ff; | |
| --accent2: #0057ff; | |
| --accent-glow: rgba(0,200,255,0.15); | |
| --gold: #f0a500; | |
| --success: #00e5a0; | |
| --warn: #ff8c00; | |
| --danger: #ff3b5c; | |
| --text-main: #e8f4ff; | |
| --text-dim: #6b8cae; | |
| --border: rgba(0,200,255,0.12); | |
| --border-bright: rgba(0,200,255,0.35); | |
| } | |
| * { margin:0; padding:0; box-sizing:border-box; } | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| background: var(--bg-deep); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* BG GRID */ | |
| body::before { | |
| content:''; | |
| position:fixed; | |
| inset:0; | |
| background-image: | |
| linear-gradient(rgba(0,200,255,0.04) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,200,255,0.04) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events:none; | |
| z-index:0; | |
| } | |
| /* HEADER */ | |
| header { | |
| position:sticky; top:0; z-index:100; | |
| background: rgba(5,13,26,0.92); | |
| backdrop-filter: blur(16px); | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 32px; | |
| height: 64px; | |
| display:flex; align-items:center; justify-content:space-between; | |
| } | |
| .brand { | |
| display:flex; align-items:center; gap:14px; | |
| } | |
| .brand-icon { | |
| width:38px; height:38px; | |
| background: linear-gradient(135deg, var(--accent2), var(--accent)); | |
| border-radius:8px; | |
| display:flex; align-items:center; justify-content:center; | |
| font-size:18px; | |
| box-shadow: 0 0 18px rgba(0,200,255,0.4); | |
| } | |
| .brand-name { | |
| font-family:'Rajdhani', sans-serif; | |
| font-size:20px; font-weight:700; | |
| letter-spacing:2px; | |
| color:var(--accent); | |
| text-shadow: 0 0 20px rgba(0,200,255,0.5); | |
| } | |
| .brand-sub { | |
| font-size:11px; color:var(--text-dim); | |
| letter-spacing:1px; | |
| } | |
| .header-center { | |
| font-family:'Cairo',sans-serif; | |
| font-size:17px; font-weight:700; | |
| color:var(--text-main); | |
| display:flex; align-items:center; gap:8px; | |
| } | |
| .header-right { | |
| display:flex; align-items:center; gap:16px; | |
| } | |
| .badge-preview { | |
| background: linear-gradient(90deg, var(--gold), #ffcd60); | |
| color:#1a0e00; | |
| font-size:11px; font-weight:700; | |
| padding:4px 12px; border-radius:20px; | |
| letter-spacing:1px; | |
| animation: pulse-gold 2s infinite; | |
| } | |
| @keyframes pulse-gold { | |
| 0%,100%{box-shadow:0 0 8px rgba(240,165,0,0.4)} | |
| 50%{box-shadow:0 0 18px rgba(240,165,0,0.8)} | |
| } | |
| .fastpro-tag { | |
| font-size:11px; color:var(--text-dim); | |
| border:1px solid var(--border); | |
| padding:4px 10px; border-radius:20px; | |
| } | |
| .fastpro-tag span { color:var(--accent); font-weight:700; } | |
| /* HERO SEARCH */ | |
| .hero { | |
| position:relative; z-index:1; | |
| padding: 48px 32px 32px; | |
| text-align:center; | |
| } | |
| .hero-title { | |
| font-size:13px; letter-spacing:4px; | |
| color:var(--accent); font-weight:600; | |
| margin-bottom:12px; | |
| text-transform:uppercase; | |
| } | |
| .hero-heading { | |
| font-size:clamp(24px,4vw,38px); | |
| font-weight:900; line-height:1.2; | |
| background: linear-gradient(135deg, #ffffff 30%, var(--accent)); | |
| -webkit-background-clip:text; | |
| -webkit-text-fill-color:transparent; | |
| margin-bottom:10px; | |
| } | |
| .hero-desc { | |
| color:var(--text-dim); font-size:14px; | |
| margin-bottom:32px; | |
| } | |
| .search-box { | |
| max-width:680px; margin:0 auto; | |
| display:flex; gap:0; | |
| background:var(--bg-card); | |
| border:1px solid var(--border-bright); | |
| border-radius:14px; | |
| overflow:hidden; | |
| box-shadow: 0 0 40px rgba(0,200,255,0.1); | |
| transition: box-shadow 0.3s; | |
| } | |
| .search-box:focus-within { | |
| box-shadow: 0 0 60px rgba(0,200,255,0.2); | |
| border-color: var(--accent); | |
| } | |
| .search-input { | |
| flex:1; background:transparent; | |
| border:none; outline:none; | |
| padding:16px 20px; | |
| font-family:'Cairo',sans-serif; | |
| font-size:15px; color:var(--text-main); | |
| direction:rtl; | |
| } | |
| .search-input::placeholder { color:var(--text-dim); } | |
| .search-btn { | |
| background:linear-gradient(90deg, var(--accent2), var(--accent)); | |
| border:none; cursor:pointer; | |
| padding:0 28px; | |
| font-family:'Cairo',sans-serif; | |
| font-size:14px; font-weight:700; | |
| color:#fff; | |
| transition:opacity 0.2s; | |
| white-space:nowrap; | |
| } | |
| .search-btn:hover { opacity:0.85; } | |
| /* STATS BAR */ | |
| .stats-bar { | |
| position:relative; z-index:1; | |
| display:flex; gap:1px; | |
| margin: 0 32px 32px; | |
| background: var(--border); | |
| border-radius:12px; overflow:hidden; | |
| border:1px solid var(--border); | |
| } | |
| .stat-item { | |
| flex:1; background:var(--bg-card); | |
| padding:18px 24px; | |
| display:flex; align-items:center; gap:14px; | |
| transition: background 0.2s; | |
| } | |
| .stat-item:hover { background: var(--bg-panel); } | |
| .stat-icon { | |
| font-size:24px; | |
| width:44px; height:44px; | |
| border-radius:10px; | |
| display:flex; align-items:center; justify-content:center; | |
| } | |
| .stat-icon.blue { background:rgba(0,200,255,0.1); } | |
| .stat-icon.green { background:rgba(0,229,160,0.1); } | |
| .stat-icon.gold { background:rgba(240,165,0,0.1); } | |
| .stat-icon.red { background:rgba(255,59,92,0.1); } | |
| .stat-val { | |
| font-family:'Rajdhani',sans-serif; | |
| font-size:26px; font-weight:700; line-height:1; | |
| } | |
| .stat-val.blue { color:var(--accent); } | |
| .stat-val.green { color:var(--success); } | |
| .stat-val.gold { color:var(--gold); } | |
| .stat-val.red { color:var(--danger); } | |
| .stat-label { font-size:12px; color:var(--text-dim); margin-top:2px; } | |
| /* MAIN GRID */ | |
| .main-grid { | |
| position:relative; z-index:1; | |
| display:grid; | |
| grid-template-columns: 1fr 340px; | |
| gap:24px; | |
| padding: 0 32px 40px; | |
| } | |
| /* SHIPMENTS TABLE */ | |
| .panel { | |
| background:var(--bg-card); | |
| border:1px solid var(--border); | |
| border-radius:16px; | |
| overflow:hidden; | |
| } | |
| .panel-header { | |
| padding:20px 24px; | |
| border-bottom:1px solid var(--border); | |
| display:flex; align-items:center; justify-content:space-between; | |
| } | |
| .panel-title { | |
| font-size:15px; font-weight:700; | |
| display:flex; align-items:center; gap:10px; | |
| } | |
| .panel-title .dot { | |
| width:8px; height:8px; border-radius:50%; | |
| background:var(--accent); | |
| box-shadow:0 0 8px var(--accent); | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes blink { | |
| 0%,100%{opacity:1} 50%{opacity:0.3} | |
| } | |
| .filter-tabs { | |
| display:flex; gap:4px; | |
| } | |
| .tab { | |
| padding:6px 14px; border-radius:20px; | |
| font-size:12px; cursor:pointer; | |
| border:1px solid var(--border); | |
| color:var(--text-dim); | |
| background:transparent; | |
| font-family:'Cairo',sans-serif; | |
| transition: all 0.2s; | |
| } | |
| .tab.active { | |
| background:rgba(0,200,255,0.12); | |
| border-color:var(--accent); | |
| color:var(--accent); | |
| } | |
| table { | |
| width:100%; border-collapse:collapse; | |
| font-size:13px; | |
| } | |
| thead th { | |
| padding:12px 20px; | |
| text-align:right; | |
| color:var(--text-dim); | |
| font-weight:600; | |
| font-size:11px; | |
| letter-spacing:1px; | |
| text-transform:uppercase; | |
| border-bottom:1px solid var(--border); | |
| background:rgba(0,0,0,0.2); | |
| } | |
| tbody tr { | |
| border-bottom:1px solid rgba(255,255,255,0.04); | |
| transition: background 0.15s; | |
| cursor:pointer; | |
| } | |
| tbody tr:hover { background:rgba(0,200,255,0.04); } | |
| tbody td { | |
| padding:14px 20px; | |
| vertical-align:middle; | |
| } | |
| .ship-id { | |
| font-family:'Rajdhani',sans-serif; | |
| font-size:14px; font-weight:700; | |
| color:var(--accent); | |
| } | |
| .ship-name { font-weight:600; font-size:13px; } | |
| .ship-origin { font-size:11px; color:var(--text-dim); margin-top:2px; } | |
| .flag { font-size:16px; margin-left:6px; } | |
| .progress-wrap { | |
| width:120px; | |
| } | |
| .progress-bar-bg { | |
| height:5px; background:rgba(255,255,255,0.07); | |
| border-radius:3px; overflow:hidden; | |
| } | |
| .progress-bar-fill { | |
| height:100%; border-radius:3px; | |
| transition: width 0.6s ease; | |
| } | |
| .progress-pct { | |
| font-size:11px; color:var(--text-dim); | |
| margin-top:4px; | |
| } | |
| .status-badge { | |
| display:inline-flex; align-items:center; gap:5px; | |
| padding:4px 10px; border-radius:20px; | |
| font-size:11px; font-weight:600; | |
| white-space:nowrap; | |
| } | |
| .status-badge.transit { | |
| background:rgba(0,200,255,0.1); | |
| color:var(--accent); | |
| border:1px solid rgba(0,200,255,0.25); | |
| } | |
| .status-badge.customs { | |
| background:rgba(240,165,0,0.1); | |
| color:var(--gold); | |
| border:1px solid rgba(240,165,0,0.25); | |
| } | |
| .status-badge.arrived { | |
| background:rgba(0,229,160,0.1); | |
| color:var(--success); | |
| border:1px solid rgba(0,229,160,0.25); | |
| } | |
| .status-badge.delayed { | |
| background:rgba(255,59,92,0.1); | |
| color:var(--danger); | |
| border:1px solid rgba(255,59,92,0.25); | |
| } | |
| .eta-val { font-weight:700; font-size:13px; } | |
| .eta-days { font-size:11px; color:var(--text-dim); } | |
| /* SIDE PANEL */ | |
| .side-col { | |
| display:flex; flex-direction:column; gap:20px; | |
| } | |
| /* ROUTE MAP MOCK */ | |
| .route-panel { | |
| background:var(--bg-card); | |
| border:1px solid var(--border); | |
| border-radius:16px; | |
| overflow:hidden; | |
| } | |
| .route-map { | |
| height:200px; | |
| background: radial-gradient(ellipse at 30% 60%, rgba(0,87,255,0.15) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 40%, rgba(0,200,255,0.1) 0%, transparent 50%), | |
| linear-gradient(180deg, #060f1e 0%, #0a1628 100%); | |
| position:relative; | |
| overflow:hidden; | |
| display:flex; align-items:center; justify-content:center; | |
| } | |
| .route-svg { width:100%; height:100%; position:absolute; inset:0; } | |
| .map-label { | |
| position:relative; z-index:2; | |
| text-align:center; | |
| pointer-events:none; | |
| } | |
| .map-label .title { | |
| font-size:13px; font-weight:700; | |
| color:var(--text-dim); margin-bottom:4px; | |
| } | |
| /* ACTIVE SHIPMENT DETAIL */ | |
| .detail-panel { | |
| background:var(--bg-card); | |
| border:1px solid var(--border); | |
| border-radius:16px; | |
| padding:20px; | |
| } | |
| .detail-title { | |
| font-size:14px; font-weight:700; | |
| margin-bottom:16px; | |
| display:flex; align-items:center; gap:8px; | |
| } | |
| .timeline { | |
| display:flex; flex-direction:column; gap:0; | |
| } | |
| .tl-item { | |
| display:flex; gap:14px; | |
| position:relative; | |
| } | |
| .tl-line-wrap { | |
| display:flex; flex-direction:column; align-items:center; flex-shrink:0; | |
| } | |
| .tl-dot { | |
| width:12px; height:12px; border-radius:50%; | |
| border:2px solid var(--border-bright); | |
| background:var(--bg-deep); | |
| flex-shrink:0; | |
| z-index:1; | |
| } | |
| .tl-dot.done { background:var(--success); border-color:var(--success); box-shadow:0 0 8px var(--success); } | |
| .tl-dot.active { background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent); animation: pulse-dot 1.5s infinite; } | |
| .tl-dot.pending { background:transparent; border-color:var(--border-bright); } | |
| @keyframes pulse-dot { | |
| 0%,100%{box-shadow:0 0 6px var(--accent)} 50%{box-shadow:0 0 16px var(--accent)} | |
| } | |
| .tl-connector { | |
| width:2px; flex:1; min-height:24px; | |
| background:linear-gradient(var(--success), var(--border)); | |
| margin:2px 0; | |
| } | |
| .tl-connector.pending { background:var(--border); } | |
| .tl-content { | |
| padding-bottom:20px; flex:1; | |
| } | |
| .tl-place { font-size:13px; font-weight:700; } | |
| .tl-date { font-size:11px; color:var(--text-dim); margin-top:2px; } | |
| .tl-note { font-size:11px; color:var(--accent); margin-top:4px; } | |
| /* QUICK STATS */ | |
| .quick-stats { | |
| display:grid; grid-template-columns:1fr 1fr; | |
| gap:12px; | |
| } | |
| .qs-card { | |
| background:var(--bg-panel); | |
| border:1px solid var(--border); | |
| border-radius:12px; | |
| padding:14px 16px; | |
| } | |
| .qs-val { | |
| font-family:'Rajdhani',sans-serif; | |
| font-size:22px; font-weight:700; | |
| color:var(--accent); | |
| } | |
| .qs-label { font-size:11px; color:var(--text-dim); margin-top:2px; } | |
| /* FOOTER */ | |
| footer { | |
| position:relative; z-index:1; | |
| text-align:center; | |
| padding:20px; | |
| border-top:1px solid var(--border); | |
| font-size:11px; color:var(--text-dim); | |
| letter-spacing:1px; | |
| } | |
| footer span { color:var(--accent); font-weight:700; } | |
| /* ANIMATIONS */ | |
| @keyframes fadeUp { | |
| from { opacity:0; transform:translateY(20px); } | |
| to { opacity:1; transform:translateY(0); } | |
| } | |
| .hero { animation: fadeUp 0.5s ease both; } | |
| .stats-bar { animation: fadeUp 0.5s 0.15s ease both; } | |
| .main-grid { animation: fadeUp 0.5s 0.25s ease both; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- HEADER --> | |
| <header> | |
| <div class="brand"> | |
| <div class="brand-icon">🌐</div> | |
| <div> | |
| <div class="brand-name">INTERNATIONAL</div> | |
| <div class="brand-sub">نظام تتبع الشحنات والحاويات</div> | |
| </div> | |
| </div> | |
| <div class="header-center"> | |
| 📦 تتبع الشحنات القادمة من الصين | |
| </div> | |
| <div class="header-right"> | |
| <div class="badge-preview">⚠ نسخة معاينة</div> | |
| <div class="fastpro-tag">تصميم <span>FastPro للبرمجيات والذكاء الاصطناعي</span></div> | |
| </div> | |
| </header> | |
| <!-- HERO SEARCH --> | |
| <div class="hero"> | |
| <div class="hero-title">🚢 الصين → مصر | تتبع فوري</div> | |
| <div class="hero-heading">تتبع شحنتك أو حاويتك الآن</div> | |
| <div class="hero-desc">أدخل رقم الشحنة أو رقم الحاوية للحصول على آخر التحديثات</div> | |
| <div class="search-box"> | |
| <input class="search-input" type="text" placeholder="مثال: INT-2024-CN-88741 أو CNSH-9944221..."> | |
| <button class="search-btn" onclick="fakeSearch()">🔍 تتبع الآن</button> | |
| </div> | |
| </div> | |
| <!-- STATS BAR --> | |
| <div class="stats-bar"> | |
| <div class="stat-item"> | |
| <div class="stat-icon blue">🚢</div> | |
| <div> | |
| <div class="stat-val blue">124</div> | |
| <div class="stat-label">شحنة نشطة</div> | |
| </div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-icon green">✅</div> | |
| <div> | |
| <div class="stat-val green">38</div> | |
| <div class="stat-label">وصلت هذا الشهر</div> | |
| </div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-icon gold">⏳</div> | |
| <div> | |
| <div class="stat-val gold">17</div> | |
| <div class="stat-label">في الجمارك</div> | |
| </div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-icon red">⚠</div> | |
| <div> | |
| <div class="stat-val red">5</div> | |
| <div class="stat-label">تأخير مبلّغ</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MAIN GRID --> | |
| <div class="main-grid"> | |
| <!-- SHIPMENTS TABLE --> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <div class="panel-title"> | |
| <div class="dot"></div> | |
| الشحنات الحالية | |
| </div> | |
| <div class="filter-tabs"> | |
| <button class="tab active">الكل</button> | |
| <button class="tab">في الطريق</button> | |
| <button class="tab">الجمارك</button> | |
| <button class="tab">وصلت</button> | |
| </div> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>رقم الشحنة</th> | |
| <th>البضاعة</th> | |
| <th>الميناء</th> | |
| <th>التقدم</th> | |
| <th>الحالة</th> | |
| <th>الوصول المتوقع</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr onclick="selectShipment(this)"> | |
| <td><div class="ship-id">INT-2024-88741</div></td> | |
| <td> | |
| <div class="ship-name">إلكترونيات – حاوية 40ft</div> | |
| <div class="ship-origin">🇨🇳 شنغهاي ← 🇪🇬 الإسكندرية</div> | |
| </td> | |
| <td>Shanghai Port</td> | |
| <td> | |
| <div class="progress-wrap"> | |
| <div class="progress-bar-bg"><div class="progress-bar-fill" style="width:72%;background:linear-gradient(90deg,#0057ff,#00c8ff)"></div></div> | |
| <div class="progress-pct">72% مكتمل</div> | |
| </div> | |
| </td> | |
| <td><span class="status-badge transit">🚢 في الطريق</span></td> | |
| <td> | |
| <div class="eta-val">20 أبريل 2026</div> | |
| <div class="eta-days">بعد 5 أيام</div> | |
| </td> | |
| </tr> | |
| <tr onclick="selectShipment(this)"> | |
| <td><div class="ship-id">INT-2024-77322</div></td> | |
| <td> | |
| <div class="ship-name">ملابس ومنسوجات</div> | |
| <div class="ship-origin">🇨🇳 قوانغجو ← 🇪🇬 بورسعيد</div> | |
| </td> | |
| <td>Guangzhou Port</td> | |
| <td> | |
| <div class="progress-wrap"> | |
| <div class="progress-bar-bg"><div class="progress-bar-fill" style="width:91%;background:linear-gradient(90deg,#00c8ff,#00e5a0)"></div></div> | |
| <div class="progress-pct">91% مكتمل</div> | |
| </div> | |
| </td> | |
| <td><span class="status-badge customs">⏳ جمارك</span></td> | |
| <td> | |
| <div class="eta-val">16 أبريل 2026</div> | |
| <div class="eta-days">غداً</div> | |
| </td> | |
| </tr> | |
| <tr onclick="selectShipment(this)"> | |
| <td><div class="ship-id">INT-2024-65188</div></td> | |
| <td> | |
| <div class="ship-name">قطع غيار سيارات</div> | |
| <div class="ship-origin">🇨🇳 تيانجين ← 🇪🇬 الإسكندرية</div> | |
| </td> | |
| <td>Tianjin Port</td> | |
| <td> | |
| <div class="progress-wrap"> | |
| <div class="progress-bar-bg"><div class="progress-bar-fill" style="width:100%;background:linear-gradient(90deg,#00e5a0,#00e5a0)"></div></div> | |
| <div class="progress-pct">100% وصلت</div> | |
| </div> | |
| </td> | |
| <td><span class="status-badge arrived">✅ وصلت</span></td> | |
| <td> | |
| <div class="eta-val">12 أبريل 2026</div> | |
| <div class="eta-days">منذ 3 أيام</div> | |
| </td> | |
| </tr> | |
| <tr onclick="selectShipment(this)"> | |
| <td><div class="ship-id">INT-2024-59003</div></td> | |
| <td> | |
| <div class="ship-name">أجهزة منزلية</div> | |
| <div class="ship-origin">🇨🇳 نينغبو ← 🇪🇬 الإسكندرية</div> | |
| </td> | |
| <td>Ningbo Port</td> | |
| <td> | |
| <div class="progress-wrap"> | |
| <div class="progress-bar-bg"><div class="progress-bar-fill" style="width:45%;background:linear-gradient(90deg,#ff3b5c,#ff8c00)"></div></div> | |
| <div class="progress-pct">45% مكتمل</div> | |
| </div> | |
| </td> | |
| <td><span class="status-badge delayed">⚠ تأخير</span></td> | |
| <td> | |
| <div class="eta-val">28 أبريل 2026</div> | |
| <div class="eta-days">بعد 13 يوم</div> | |
| </td> | |
| </tr> | |
| <tr onclick="selectShipment(this)"> | |
| <td><div class="ship-id">INT-2024-44910</div></td> | |
| <td> | |
| <div class="ship-name">مواد بناء – حاوية 20ft</div> | |
| <div class="ship-origin">🇨🇳 شنجن ← 🇪🇬 بورسعيد</div> | |
| </td> | |
| <td>Shenzhen Port</td> | |
| <td> | |
| <div class="progress-wrap"> | |
| <div class="progress-bar-bg"><div class="progress-bar-fill" style="width:60%;background:linear-gradient(90deg,#0057ff,#00c8ff)"></div></div> | |
| <div class="progress-pct">60% مكتمل</div> | |
| </div> | |
| </td> | |
| <td><span class="status-badge transit">🚢 في الطريق</span></td> | |
| <td> | |
| <div class="eta-val">23 أبريل 2026</div> | |
| <div class="eta-days">بعد 8 أيام</div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- SIDE COL --> | |
| <div class="side-col"> | |
| <!-- ROUTE MAP --> | |
| <div class="route-panel"> | |
| <div class="panel-header" style="padding:14px 18px"> | |
| <div class="panel-title" style="font-size:13px"> | |
| <div class="dot"></div> | |
| خريطة المسار | |
| </div> | |
| <div style="font-size:11px;color:var(--text-dim)">🇨🇳 → 🇪🇬</div> | |
| </div> | |
| <div class="route-map"> | |
| <svg class="route-svg" viewBox="0 0 340 200" fill="none"> | |
| <!-- sea bg dots --> | |
| <circle cx="20" cy="40" r="1.5" fill="rgba(0,200,255,0.2)"/> | |
| <circle cx="80" cy="90" r="1" fill="rgba(0,200,255,0.2)"/> | |
| <circle cx="160" cy="30" r="1.5" fill="rgba(0,200,255,0.2)"/> | |
| <circle cx="240" cy="80" r="1" fill="rgba(0,200,255,0.2)"/> | |
| <circle cx="310" cy="50" r="1.5" fill="rgba(0,200,255,0.2)"/> | |
| <!-- route dashed line --> | |
| <path d="M 280 80 Q 200 40 140 70 Q 100 90 60 120" stroke="rgba(0,200,255,0.3)" stroke-width="1.5" stroke-dasharray="6 4" fill="none"/> | |
| <!-- active segment --> | |
| <path d="M 280 80 Q 220 55 175 65" stroke="url(#routeGrad)" stroke-width="2.5" fill="none" stroke-linecap="round"/> | |
| <defs> | |
| <linearGradient id="routeGrad" x1="280" y1="80" x2="175" y2="65" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0%" stop-color="#0057ff"/> | |
| <stop offset="100%" stop-color="#00c8ff"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- China port --> | |
| <circle cx="282" cy="80" r="6" fill="rgba(0,87,255,0.3)" stroke="#0057ff" stroke-width="1.5"/> | |
| <circle cx="282" cy="80" r="3" fill="#0057ff"/> | |
| <!-- ship position --> | |
| <circle cx="175" cy="65" r="8" fill="rgba(0,200,255,0.2)" stroke="var(--accent)" stroke-width="1.5"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <circle cx="175" cy="65" r="4" fill="var(--accent)"/> | |
| <text x="175" y="50" text-anchor="middle" fill="var(--accent)" font-size="9" font-family="Cairo">🚢 INT-88741</text> | |
| <!-- Egypt port --> | |
| <circle cx="62" cy="120" r="6" fill="rgba(0,229,160,0.3)" stroke="var(--success)" stroke-width="1.5"/> | |
| <circle cx="62" cy="120" r="3" fill="var(--success)"/> | |
| <!-- labels --> | |
| <text x="282" y="100" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Cairo">🇨🇳 شنغهاي</text> | |
| <text x="62" y="138" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="Cairo">🇪🇬 الإسكندرية</text> | |
| <!-- suez hint --> | |
| <text x="118" y="108" text-anchor="middle" fill="rgba(240,165,0,0.6)" font-size="8" font-family="Cairo">قناة السويس</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- TIMELINE --> | |
| <div class="detail-panel"> | |
| <div class="detail-title">📍 تتبع الشحنة INT-88741</div> | |
| <div class="timeline"> | |
| <div class="tl-item"> | |
| <div class="tl-line-wrap"> | |
| <div class="tl-dot done"></div> | |
| <div class="tl-connector"></div> | |
| </div> | |
| <div class="tl-content"> | |
| <div class="tl-place">🇨🇳 ميناء شنغهاي</div> | |
| <div class="tl-date">5 أبريل 2026</div> | |
| <div class="tl-note">✅ تم الشحن</div> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-line-wrap"> | |
| <div class="tl-dot done"></div> | |
| <div class="tl-connector"></div> | |
| </div> | |
| <div class="tl-content"> | |
| <div class="tl-place">🌊 بحر الصين الجنوبي</div> | |
| <div class="tl-date">8 أبريل 2026</div> | |
| <div class="tl-note">✅ عبور المضيق</div> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-line-wrap"> | |
| <div class="tl-dot active"></div> | |
| <div class="tl-connector pending"></div> | |
| </div> | |
| <div class="tl-content"> | |
| <div class="tl-place">🌊 المحيط الهندي</div> | |
| <div class="tl-date">15 أبريل 2026 – الآن</div> | |
| <div class="tl-note">🚢 في الطريق حالياً</div> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-line-wrap"> | |
| <div class="tl-dot pending"></div> | |
| <div class="tl-connector pending"></div> | |
| </div> | |
| <div class="tl-content"> | |
| <div class="tl-place">🇪🇬 قناة السويس</div> | |
| <div class="tl-date">متوقع 18 أبريل 2026</div> | |
| </div> | |
| </div> | |
| <div class="tl-item"> | |
| <div class="tl-line-wrap"> | |
| <div class="tl-dot pending"></div> | |
| </div> | |
| <div class="tl-content"> | |
| <div class="tl-place">🇪🇬 ميناء الإسكندرية</div> | |
| <div class="tl-date">متوقع 20 أبريل 2026</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- QUICK STATS --> | |
| <div class="quick-stats"> | |
| <div class="qs-card"> | |
| <div class="qs-val">22 يوم</div> | |
| <div class="qs-label">متوسط وقت الشحن</div> | |
| </div> | |
| <div class="qs-card"> | |
| <div class="qs-val">96%</div> | |
| <div class="qs-label">نسبة التسليم في الوقت</div> | |
| </div> | |
| <div class="qs-card"> | |
| <div class="qs-val">4</div> | |
| <div class="qs-label">موانئ صينية نشطة</div> | |
| </div> | |
| <div class="qs-card"> | |
| <div class="qs-val">2</div> | |
| <div class="qs-label">موانئ مصرية مستخدمة</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FOOTER --> | |
| <footer> | |
| <p>تطبيق إنترناشونال | نسخة معاينة v0.1 | تصميم وتطوير <span>FastPro للبرمجيات والذكاء الاصطناعي</span> | © 2026</p> | |
| </footer> | |
| <script> | |
| // Filter tabs | |
| document.querySelectorAll('.tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Row select highlight | |
| function selectShipment(row) { | |
| document.querySelectorAll('tbody tr').forEach(r => r.style.background = ''); | |
| row.style.background = 'rgba(0,200,255,0.07)'; | |
| } | |
| // Fake search | |
| function fakeSearch() { | |
| const input = document.querySelector('.search-input'); | |
| const val = input.value.trim(); | |
| if (!val) { | |
| input.style.borderLeft = '3px solid var(--danger)'; | |
| input.placeholder = '⚠ يرجى إدخال رقم الشحنة أولاً'; | |
| setTimeout(() => { | |
| input.style.borderLeft = ''; | |
| input.placeholder = 'مثال: INT-2024-CN-88741 أو CNSH-9944221...'; | |
| }, 2000); | |
| return; | |
| } | |
| const btn = document.querySelector('.search-btn'); | |
| btn.textContent = '⏳ جاري البحث...'; | |
| setTimeout(() => { | |
| btn.textContent = '✅ تم العثور'; | |
| setTimeout(() => { btn.textContent = '🔍 تتبع الآن'; }, 2000); | |
| }, 1200); | |
| } | |
| // Enter key search | |
| document.querySelector('.search-input').addEventListener('keydown', e => { | |
| if (e.key === 'Enter') fakeSearch(); | |
| }); | |
| // Animate progress bars on load | |
| window.addEventListener('load', () => { | |
| document.querySelectorAll('.progress-bar-fill').forEach(bar => { | |
| const w = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { bar.style.width = w; }, 300); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |