Order Tracking

<div class="uk-ord-card">
    <div class="uk-ord-card-head">
        <div>
            <div class="uk-ord-id">Order #WN-8402</div>
            <div class="uk-ord-date">Placed on Mar 15, 2025</div>
        </div>
        <span class="uk-ord-status processing">Processing</span>
    </div>
    <div class="uk-ord-items">
        <div class="uk-ord-item">
            <img src="..." alt="">
            <div class="uk-ord-item-info">
                <div class="uk-ord-item-name">Premium UI Template</div>
                <div class="uk-ord-item-meta">Qty: 1</div>
            </div>
            <div class="uk-ord-item-price">$49.00</div>
        </div>
    </div>
    <div class="uk-ord-totals">
        <div class="uk-ord-total-row"><span>Subtotal</span><span>$78.00</span></div>
        <div class="uk-ord-total-row uk-ord-total-final"><span>Total</span><span>$78.00</span></div>
    </div>
</div>

<style>
    .uk-ord-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
    }
    .uk-ord-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    .uk-ord-id {
        font-size: 0.9rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-ord-date {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 2px;
    }
    .uk-ord-status {
        font-size: 0.65rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .uk-ord-status.processing { background: #fef3c7; color: #d97706; }
    
    .uk-ord-items { padding: 0 1.25rem; }
    .uk-ord-item {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #f1f5f9;
        align-items: center;
    }
    .uk-ord-item:last-child { border-bottom: 0; }
    .uk-ord-item img {
        width: 56px; height: 56px;
        border-radius: 0.5rem;
        object-fit: cover;
        flex-shrink: 0;
    }
    .uk-ord-item-info { flex: 1; text-align: left; }
    .uk-ord-item-name {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0b1b2f;
    }
    .uk-ord-item-meta {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 2px;
    }
    .uk-ord-item-price {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0b1b2f;
        flex-shrink: 0;
    }
    
    .uk-ord-totals {
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }
    .uk-ord-total-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        color: #475569;
        padding: 0.35rem 0;
    }
    .uk-ord-total-final {
        font-weight: 800;
        color: #0b1b2f;
        font-size: 0.95rem;
        border-top: 1px solid #e2e8f0;
        padding-top: 0.65rem;
        margin-top: 0.35rem;
    }
</style>

<div class="uk-ord-track-head">
    <div class="uk-ord-id">Tracking #1Z9988XX2093</div>
    <div class="uk-ord-eta">Arrives Tomorrow</div>
</div>
<div class="uk-ord-timeline">
    <div class="uk-ord-timeline-item done">
        <div class="uk-ord-timeline-dot"><i class="fas fa-check"></i></div>
        <div class="uk-ord-timeline-content">
            <div class="uk-ord-timeline-title">Order Placed</div>
            <div class="uk-ord-timeline-date">Mar 15, 10:42 AM</div>
        </div>
    </div>
    <div class="uk-ord-timeline-item">
        <div class="uk-ord-timeline-dot"></div>
        <div class="uk-ord-timeline-content">
            <div class="uk-ord-timeline-title">Delivered</div>
            <div class="uk-ord-timeline-date">Pending</div>
        </div>
    </div>
</div>

<style>
    .uk-ord-track-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        text-align: left;
    }
    .uk-ord-eta {
        font-size: 0.75rem;
        font-weight: 700;
        color: #059669;
    }
    .uk-ord-timeline {
        position: relative;
        padding-left: 1.5rem;
        text-align: left;
    }
    .uk-ord-timeline::before {
        content: '';
        position: absolute;
        left: 9px;
        top: 12px; bottom: 12px;
        width: 2px;
        background: #e2e8f0;
    }
    .uk-ord-timeline-item {
        position: relative;
        padding-bottom: 1.25rem;
    }
    .uk-ord-timeline-item:last-child { padding-bottom: 0; }
    .uk-ord-timeline-dot {
        position: absolute;
        left: -1.5rem;
        top: 0;
        width: 20px; height: 20px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #cbd5e1;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.55rem;
        color: transparent;
        z-index: 1;
    }
    .uk-ord-timeline-item.done .uk-ord-timeline-dot {
        background: #1e3a8a;
        border-color: #1e3a8a;
        color: #fff;
    }
    .uk-ord-timeline-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #64748b;
    }
    .uk-ord-timeline-item.done .uk-ord-timeline-title {
        color: #0b1b2f;
    }
    .uk-ord-timeline-date {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 2px;
    }
</style>

<table class="uk-ord-table">
    <thead>
        <tr>
            <th>Item</th>
            <th>Qty</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="uk-ord-table-item">
                    <div class="uk-ord-table-icon"><i class="fas fa-box"></i></div>
                    <div>
                        <strong>Premium UI Template</strong>
                        <span>SKU: UIX-001</span>
                    </div>
                </div>
            </td>
            <td>1</td>
            <td>$49.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2" style="text-align:right;">Total:</td>
            <td>$78.00</td>
        </tr>
    </tfoot>
</table>

<style>
    .uk-ord-invoice {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
    }
    .uk-ord-table {
        width: 100%;
        border-collapse: collapse;
    }
    .uk-ord-table thead {
        background: #f8fafc;
    }
    .uk-ord-table th {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e2e8f0;
    }
    .uk-ord-table tbody td {
        padding: 1rem;
        font-size: 0.85rem;
        color: #475569;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-ord-table tfoot td {
        padding: 1rem;
        font-size: 0.9rem;
        font-weight: 800;
        color: #0b1b2f;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }
    .uk-ord-table-item {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        text-align: left;
    }
    .uk-ord-table-icon {
        width: 36px; height: 36px;
        border-radius: 0.5rem;
        background: #eef2f8;
        color: #1e3a8a;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    .uk-ord-table-item strong {
        display: block;
        font-size: 0.85rem;
        color: #0b1b2f;
    }
    .uk-ord-table-item span {
        font-size: 0.7rem;
        color: #94a3b8;
    }
</style>

<div class="uk-ord-list-item">
    <div class="uk-ord-list-info">
        <div class="uk-ord-id">#WN-8402</div>
        <div class="uk-ord-date">Mar 15</div>
    </div>
    <div class="uk-ord-list-price">$78.00</div>
    <div class="uk-ord-status processing">Processing</div>
    <i class="fas fa-chevron-right uk-ord-list-arrow"></i>
</div>

<style>
    .uk-ord-list-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-ord-link {
        font-size: 0.75rem;
        font-weight: 700;
        color: #1e3a8a;
        text-decoration: none;
    }
    .uk-ord-list-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s;
        cursor: pointer;
    }
    .uk-ord-list-item:last-child { border-bottom: 0; }
    .uk-ord-list-item:hover { background: #f8fafc; }
    .uk-ord-list-info { flex: 1; text-align: left; }
    .uk-ord-list-price {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0b1b2f;
    }
    .uk-ord-list-arrow {
        color: #cbd5e1;
        font-size: 0.7rem;
    }
    
    .uk-ord-status.shipped { background: #dbeafe; color: #1e40af; }
    .uk-ord-status.delivered { background: #ecfdf5; color: #059669; }
    .uk-ord-status.cancelled { background: #fee2e2; color: #dc2626; }
</style>

<div class="uk-ord-details">
    <div class="uk-ord-details-section">
        <div class="uk-ord-details-title"><i class="fas fa-map-marker-alt"></i> Shipping Address</div>
        <div class="uk-ord-details-text">
            Marcus Johnson<br>
            123 Market Street...<br>
            San Francisco, CA 94103
        </div>
    </div>
    <div class="uk-ord-details-section">
        <div class="uk-ord-details-title"><i class="fas fa-truck"></i> Delivery Method</div>
        <div class="uk-ord-details-card">
            <div class="uk-ord-details-icon"><i class="fas fa-shipping-fast"></i></div>
            <div>
                <div class="uk-ord-details-bold">Express Shipping</div>
                <div class="uk-ord-details-meta">Est. Mar 18</div>
            </div>
            <div class="uk-ord-details-price">Free</div>
        </div>
    </div>
</div>

<style>
    .uk-ord-details {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
    }
    .uk-ord-details-section { margin-bottom: 1.5rem; }
    .uk-ord-details-section:last-child { margin-bottom: 0; }
    .uk-ord-details-title {
        font-size: 0.85rem;
        font-weight: 800;
        color: #0b1b2f;
        margin-bottom: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .uk-ord-details-title i { color: #1e3a8a; }
    .uk-ord-details-text {
        font-size: 0.85rem;
        color: #475569;
        line-height: 1.7;
    }
    .uk-ord-details-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 0.65rem;
    }
    .uk-ord-details-icon {
        width: 36px; height: 36px;
        border-radius: 0.5rem;
        background: #eef2f8;
        color: #1e3a8a;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.85rem;
    }
    .uk-ord-details-bold {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0b1b2f;
    }
    .uk-ord-details-meta {
        font-size: 0.72rem;
        color: #94a3b8;
    }
    .uk-ord-details-price {
        margin-left: auto;
        font-size: 0.85rem;
        font-weight: 700;
        color: #059669;
    }
</style>

<div class="uk-ord-success">
    <div class="uk-ord-success-icon"><i class="fas fa-check"></i></div>
    <h2 class="uk-ord-success-title">Order Confirmed!</h2>
    <p class="uk-ord-success-desc">Thank you for your purchase.</p>
    
    <div class="uk-ord-success-receipt">
        <div class="uk-ord-total-row"><span>Order number</span><span>#WN-8402</span></div>
        <div class="uk-ord-total-row uk-ord-total-final"><span>Total paid</span><span>$78.00</span></div>
    </div>
    
    <button class="uk-ord-success-btn">Track Your Order</button>
    <a href="#" class="uk-ord-success-link">Continue Shopping</a>
</div>

<style>
    .uk-ord-success {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 2.5rem 2rem;
        text-align: center;
    }
    .uk-ord-success-icon {
        width: 72px; height: 72px;
        border-radius: 50%;
        background: #ecfdf5;
        color: #059669;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }
    .uk-ord-success-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #0b1b2f;
        margin-bottom: 0.5rem;
    }
    .uk-ord-success-desc {
        font-size: 0.9rem;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
    .uk-ord-success-desc strong { color: #0b1b2f; }
    
    .uk-ord-success-receipt {
        background: #f8fafc;
        border-radius: 0.65rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        text-align: left;
    }
    .uk-ord-success-btn {
        width: 100%;
        padding: 0.75rem;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.88rem;
        cursor: pointer;
        margin-bottom: 0.75rem;
    }
    .uk-ord-success-btn:hover { background: #0f2a5c; }
    .uk-ord-success-link {
        font-size: 0.8rem;
        font-weight: 700;
        color: #1e3a8a;
        text-decoration: none;
    }
</style>