Nexilant Delivery Tracker PRO

Track Your Order

Ordered

Processing

Delivery

Estimated Delivery: ...

PRO STATIC CLEAN CODE (READY TO PASTE)

.nexilant-tracker-{{ section.id }} {
    /* UNIVERSAL SENSOR MAPPING - IDs match Schema exactly for Deep Scan */
    --bg_color: {{ section.settings.bg_color }};
    --card_bg: {{ section.settings.card_bg }};
    --text_color: {{ section.settings.text_color }};
    --accent_color: {{ section.settings.accent_color }};
    
    /* Sensors: border_radius (px), font_size_h (rem), padding_v (px) */
    --border_radius: {{ section.settings.border_radius }}px;
    --font_size_h: {{ section.settings.font_size_h }}rem;
    --padding_v: {{ section.settings.padding_v }}px;

background-color: var(--bg_color);
    padding: var(--padding_v) 20px;
    font-family: "{{ section.settings.font_family }}", sans-serif;
    color: var(--text_color);
    text-align: center;
    width: 100%;
  }

.tracker-card {
    background: var(--card_bg);
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 30px;
    border-radius: var(--border_radius);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 15px 45px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

.tracker-header {
    font-size: var(--font_size_h);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--text_color);
  }

.tracking-steps {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
    margin: 20px 0;
  }

.tracking-steps::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e5e5e7;
    z-index: 1;
  }

.step {
    position: relative;
    z-index: 2;
    background: var(--card_bg);
    padding: 0 10px;
    text-align: center;
    flex: 1;
  }

.step-dot {
    width: 42px;
    height: 42px;
    background: #f4f4f7;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #e5e5e7;
  }

.step-dot svg {
    width: 20px;
    height: 20px;
    fill: #b5b5be;
    transition: 0.3s;
  }

.step.active .step-dot {
    background: var(--accent_color);
    border-color: var(--accent_color);
    box-shadow: 0 0 20px rgba({{ section.settings.accent_color | color_to_rgb | split: '(' | last | split: ')' | first }}, 0.3);
    transform: scale(1.1);
  }

.step.active .step-dot svg {
    fill: #000;
  }

.step-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text_color);
    opacity: 0.6;
  }

.delivery-estimate {
    background: rgba(0,0,0,0.03);
    padding: 18px 30px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(0,0,0,0.05);
  }

.delivery-date {
    color: var(--accent_color);
    font-weight: 800;
  }

.truck-icon-main {
    width: 22px;
    fill: var(--accent_color);
  }

@media (max-width: 768px) {
    .tracker-card { padding: 30px 20px; }
    .step-dot { width: 35px; height: 35px; }
    .step-label { font-size: 0.6rem; letter-spacing: 0.5px; }
    /* Mobile Scale Override for Sensor Engine */
    .tracker-header { font-size: calc(var(--font_size_h) * 0.8); }
  }
</style>

<section class="nexilant-tracker-{{ section.id }}">
  <div class="tracker-card">
    <h2 class="tracker-header">{{ section.settings.heading }}</h2>
    
    <div class="tracking-steps">
      <div class="step active">
        <div class="step-dot">
          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
        </div>
        <span class="step-label">Ordered</span>
      </div>

<div class="step active">
        <div class="step-dot">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
        </div>
        <span class="step-label">Processing</span>
      </div>

<div class="step">
        <div class="step-dot">
          <svg viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm13.5-8.5l1.96 2.5H17V9.5h2.5zM18 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
        </div>
        <span class="step-label">Delivery</span>
      </div>
    </div>

<div class="delivery-estimate">
      <svg class="truck-icon-main" viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm13.5-8.5l1.96 2.5H17V9.5h2.5zM18 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
      <span>Estimated Delivery: <span class="delivery-date" id="delivery-date-{{ section.id }}">...</span></span>
    </div>
  </div>
</section>