Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SwiftShip - Package Delivery</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2a59fe; | |
| --secondary: #ff9f1c; | |
| --dark: #1e1e24; | |
| --light: #f8f9fa; | |
| --danger: #e63946; | |
| --success: #2ecc71; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7fb; | |
| color: var(--dark); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), #4d7cff); | |
| color: white; | |
| padding: 20px 0; | |
| border-radius: 0 0 20px 20px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 30px; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .logo i { | |
| font-size: 28px; | |
| } | |
| .user-actions { | |
| display: flex; | |
| gap: 20px; | |
| align-items: center; | |
| } | |
| .user-actions i { | |
| font-size: 20px; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .user-actions i:hover { | |
| transform: scale(1.1); | |
| } | |
| .user-profile { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: white; | |
| display: grid; | |
| place-items: center; | |
| color: var(--primary); | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| /* Main Content */ | |
| .app-title { | |
| font-size: 28px; | |
| margin-bottom: 20px; | |
| color: var(--dark); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .app-title i { | |
| color: var(--primary); | |
| } | |
| /* Tracking Section */ | |
| .tracking-card { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 25px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| margin-bottom: 30px; | |
| transition: transform 0.3s; | |
| } | |
| .tracking-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .tracking-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .tracking-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .track-input { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .track-input input { | |
| flex: 1; | |
| padding: 12px 15px; | |
| border: 2px solid #e0e4e8; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| transition: border-color 0.3s; | |
| } | |
| .track-input input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .track-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0 25px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .track-btn:hover { | |
| background-color: #1a49e5; | |
| } | |
| /* Tracking Results */ | |
| .tracking-result { | |
| display: none; | |
| margin-top: 20px; | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .status-card { | |
| background: linear-gradient(135deg, #f5f7fa, #e4e8ec); | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-bottom: 15px; | |
| } | |
| .status-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| align-items: center; | |
| } | |
| .package-id { | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .status-badge { | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .status-in-transit { | |
| background-color: #fff3cd; | |
| color: #856404; | |
| } | |
| .status-delivered { | |
| background-color: #d4edda; | |
| color: #155724; | |
| } | |
| .status-pending { | |
| background-color: #cce5ff; | |
| color: #004085; | |
| } | |
| .status-progress { | |
| margin: 20px 0; | |
| position: relative; | |
| height: 6px; | |
| background-color: #e0e4e8; | |
| border-radius: 3px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| width: 65%; | |
| position: relative; | |
| } | |
| .progress-dots { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .dot { | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background-color: white; | |
| border: 3px solid var(--primary); | |
| position: relative; | |
| } | |
| .dot.active { | |
| background-color: var(--primary); | |
| } | |
| .dot.completed { | |
| background-color: var(--secondary); | |
| border-color: var(--secondary); | |
| } | |
| .progress-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 5px; | |
| } | |
| .progress-label { | |
| font-size: 12px; | |
| color: #6c757d; | |
| text-align: center; | |
| flex: 1; | |
| } | |
| .progress-label.active { | |
| font-weight: 600; | |
| color: var(--primary); | |
| } | |
| .address-info { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| } | |
| .address { | |
| flex: 1; | |
| padding: 15px; | |
| background-color: #f8f9fa; | |
| border-radius: 8px; | |
| text-align: center; | |
| } | |
| .address-icon { | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--primary); | |
| border-radius: 50%; | |
| display: grid; | |
| place-items: center; | |
| margin: 0 auto 10px; | |
| color: white; | |
| } | |
| .address-title { | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .address-details { | |
| font-size: 14px; | |
| color: #6c757d; | |
| } | |
| /* Delivery Options */ | |
| .options-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .option-card { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 25px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| } | |
| .option-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| border-color: var(--primary); | |
| } | |
| .option-card.selected { | |
| border-color: var(--primary); | |
| background-color: #f5f8ff; | |
| } | |
| .option-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .option-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), #4d7cff); | |
| display: grid; | |
| place-items: center; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| .option-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .option-price { | |
| font-size: 22px; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| color: var(--primary); | |
| } | |
| .option-features { | |
| list-style-type: none; | |
| } | |
| .option-features li { | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .option-features i { | |
| color: var(--success); | |
| } | |
| /* Order History */ | |
| .history-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| margin-top: 30px; | |
| } | |
| .history-table th, | |
| .history-table td { | |
| padding: 15px 20px; | |
| text-align: left; | |
| border-bottom: 1px solid #f1f1f1; | |
| } | |
| .history-table th { | |
| background-color: #f8f9fa; | |
| font-weight: 600; | |
| color: #495057; | |
| } | |
| .history-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .history-table tr:hover { | |
| background-color: #f8f9fa; | |
| } | |
| .status-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .delivered { | |
| background-color: var(--success); | |
| } | |
| .in-progress { | |
| background-color: var(--secondary); | |
| } | |
| .cancelled { | |
| background-color: var(--danger); | |
| } | |
| /* Map Container */ | |
| .map-container { | |
| height: 400px; | |
| background-color: #e9ecef; | |
| border-radius: 15px; | |
| margin: 30px 0; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .map-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: grid; | |
| place-items: center; | |
| background: linear-gradient(135deg, #e9ecef, #ced4da); | |
| color: #6c757d; | |
| font-size: 18px; | |
| } | |
| .map-placeholder i { | |
| font-size: 50px; | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| /* Schedule Pickup Form */ | |
| .pickup-form { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 25px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| margin-top: 30px; | |
| } | |
| .form-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: #495057; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 2px solid #e0e4e8; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| transition: border-color 0.3s; | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .submit-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 12px 25px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .submit-btn:hover { | |
| background-color: #1a49e5; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .user-actions { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .address-info { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .option-card { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-shipping-fast"></i> | |
| <span>SwiftShip</span> | |
| </div> | |
| <div class="user-actions"> | |
| <i class="fas fa-search" id="searchBtn"></i> | |
| <i class="fas fa-bell" id="notifBtn"></i> | |
| <i class="fas fa-question-circle" id="helpBtn"></i> | |
| <div class="user-profile">JS</div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <h1 class="app-title"> | |
| <i class="fas fa-box-open"></i> | |
| Package Delivery Dashboard | |
| </h1> | |
| <div class="tracking-card"> | |
| <div class="tracking-header"> | |
| <div class="tracking-title"> | |
| <i class="fas fa-search-location"></i> | |
| Track Your Package | |
| </div> | |
| <div class="help-text"> | |
| <i class="fas fa-info-circle"></i> | |
| Need help? | |
| </div> | |
| </div> | |
| <div class="track-input"> | |
| <input type="text" id="trackingNumber" placeholder="Enter your tracking number (e.g. SWIFT123456789)" value="SWIFT123456789"> | |
| <button class="track-btn" id="trackBtn">Track</button> | |
| </div> | |
| <div class="tracking-result" id="trackingResult"> | |
| <div class="status-card"> | |
| <div class="status-header"> | |
| <div class="package-id">Package #SWIFT123456789</div> | |
| <div class="status-badge status-in-transit"> | |
| In Transit | |
| </div> | |
| </div> | |
| <p>Estimated delivery: <strong>Friday, June 10</strong></p> | |
| <div class="status-progress"> | |
| <div class="progress-bar"></div> | |
| <div class="progress-dots"> | |
| <div class="dot completed"></div> | |
| <div class="dot completed"></div> | |
| <div class="dot active"></div> | |
| <div class="dot"></div> | |
| </div> | |
| </div> | |
| <div class="progress-labels"> | |
| <div class="progress-label completed">Order Placed</div> | |
| <div class="progress-label completed">Package Processed</div> | |
| <div class="progress-label active">In Transit</div> | |
| <div class="progress-label">Delivered</div> | |
| </div> | |
| </div> | |
| <div class="address-info"> | |
| <div class="address"> | |
| <div class="address-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="address-title">Sender</div> | |
| <div class="address-details"> | |
| Jane Smith<br> | |
| 123 Main St, Apt 4B<br> | |
| New York, NY 10001 | |
| </div> | |
| </div> | |
| <div class="address"> | |
| <div class="address-icon"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <div class="address-title">Current Location</div> | |
| <div class="address-details"> | |
| Distribution Center<br> | |
| 456 Industrial Park<br> | |
| Newark, NJ 07102 | |
| </div> | |
| </div> | |
| <div class="address"> | |
| <div class="address-icon"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <div class="address-title">Recipient</div> | |
| <div class="address-details"> | |
| John Doe<br> | |
| 789 Oak Avenue<br> | |
| Boston, MA 02115 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="app-title"> | |
| <i class="fas fa-truck"></i> | |
| Delivery Options | |
| </h2> | |
| <div class="options-container"> | |
| <div class="option-card selected"> | |
| <div class="option-header"> | |
| <div class="option-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <div class="option-title">Express Delivery</div> | |
| <div class="option-price">$24.99</div> | |
| </div> | |
| </div> | |
| <ul class="option-features"> | |
| <li><i class="fas fa-check"></i> Next business day delivery</li> | |
| <li><i class="fas fa-check"></i> Real-time tracking</li> | |
| <li><i class="fas fa-check"></i> Package insurance up to $500</li> | |
| <li><i class="fas fa-check"></i> Delivery window selection</li> | |
| </ul> | |
| </div> | |
| <div class="option-card"> | |
| <div class="option-header"> | |
| <div class="option-icon"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <div> | |
| <div class="option-title">Standard Delivery</div> | |
| <div class="option-price">$12.99</div> | |
| </div> | |
| </div> | |
| <ul class="option-features"> | |
| <li><i class="fas fa-check"></i> 2-3 business days</li> | |
| <li><i class="fas fa-check"></i> Real-time tracking</li> | |
| <li><i class="fas fa-check"></i> Package insurance up to $200</li> | |
| <li><i class="fas fa-check"></i> Signature confirmation</li> | |
| </ul> | |
| </div> | |
| <div class="option-card"> | |
| <div class="option-header"> | |
| <div class="option-icon"> | |
| <i class="fas fa-ship"></i> | |
| </div> | |
| <div> | |
| <div class="option-title">Economy Delivery</div> | |
| <div class="option-price">$7.99</div> | |
| </div> | |
| </div> | |
| <ul class="option-features"> | |
| <li><i class="fas fa-check"></i> 4-6 business days</li> | |
| <li><i class="fas fa-check"></i> Basic tracking</li> | |
| <li><i class="fas fa-check"></i> Package insurance up to $100</li> | |
| <li><i class="fas fa-check"></i> Parcel locker delivery</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="map-container"> | |
| <div class="map-placeholder"> | |
| <div> | |
| <i class="fas fa-map-marked-alt"></i> | |
| <p>Package Tracking Map</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pickup-form"> | |
| <h3 class="form-title"> | |
| <i class="fas fa-calendar-alt"></i> | |
| Schedule a Package Pickup | |
| </h3> | |
| <form id="pickupForm"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="pickupDate">Pickup Date</label> | |
| <input type="date" id="pickupDate" class="form-control" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="pickupTime">Pickup Time Window</label> | |
| <select id="pickupTime" class="form-control" required> | |
| <option value="">Select a time window</option> | |
| <option value="morning">8:00 AM - 12:00 PM</option> | |
| <option value="afternoon">12:00 PM - 4:00 PM</option> | |
| <option value="evening">4:00 PM - 8:00 PM</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="pickupAddress">Pickup Address</label> | |
| <input type="text" id="pickupAddress" class="form-control" placeholder="123 Main St, Apt 4B, New York, NY 10001" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="specialInstructions">Special Instructions</label> | |
| <textarea id="specialInstructions" class="form-control" rows="3" placeholder="Any special instructions for the driver..."></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn"> | |
| <i class="fas fa-calendar-check"></i> | |
| Schedule Pickup | |
| </button> | |
| </form> | |
| </div> | |
| <h2 class="app-title"> | |
| <i class="fas fa-history"></i> | |
| Order History | |
| </h2> | |
| <table class="history-table"> | |
| <thead> | |
| <tr> | |
| <th>Tracking #</th> | |
| <th>Destination</th> | |
| <th>Service</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>SWIFT987654321</td> | |
| <td>Los Angeles, CA</td> | |
| <td>Express</td> | |
| <td class="status-cell"> | |
| <span class="status-indicator delivered"></span> | |
| Delivered | |
| </td> | |
| <td> | |
| <i class="fas fa-file-alt" title="View Details"></i> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>SWIFT123456789</td> | |
| <td>Boston, MA</td> | |
| <td>Standard</td> | |
| <td class="status-cell"> | |
| <span class="status-indicator in-progress"></span> | |
| In Transit | |
| </td> | |
| <td> | |
| <i class="fas fa-file-alt" title="View Details"></i> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>SWIFT456789123</td> | |
| <td>Chicago, IL</td> | |
| <td>Economy</td> | |
| <td class="status-cell"> | |
| <span class="status-indicator delivered"></span> | |
| Delivered | |
| </td> | |
| <td> | |
| <i class="fas fa-file-alt" title="View Details"></i> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>SWIFT789123456</td> | |
| <td>Miami, FL</td> | |
| <td>Express</td> | |
| <td class="status-cell"> | |
| <span class="status-indicator cancelled"></span> | |
| Cancelled | |
| </td> | |
| <td> | |
| <i class="fas fa-file-alt" title="View Details"></i> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize elements | |
| const trackBtn = document.getElementById('trackBtn'); | |
| const trackingResult = document.getElementById('trackingResult'); | |
| const optionCards = document.querySelectorAll('.option-card'); | |
| const pickupForm = document.getElementById('pickupForm'); | |
| // Show tracking results when track button is clicked | |
| trackBtn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const trackingNumber = document.getElementById('trackingNumber').value.trim(); | |
| if (trackingNumber) { | |
| // Simulate API call with setTimeout | |
| trackBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Tracking...'; | |
| setTimeout(function() { | |
| trackingResult.style.display = 'block'; | |
| trackBtn.innerHTML = 'Track'; | |
| // Scroll to results | |
| trackingResult.scrollIntoView({ behavior: 'smooth' }); | |
| }, 1000); | |
| } else { | |
| alert('Please enter a valid tracking number'); | |
| } | |
| }); | |
| // Make option cards selectable | |
| optionCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| optionCards.forEach(c => c.classList.remove('selected')); | |
| this.classList.add('selected'); | |
| }); | |
| }); | |
| // Handle pickup form submission | |
| pickupForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const pickupDate = document.getElementById('pickupDate').value; | |
| const pickupTime = document.getElementById('pickupTime').value; | |
| const pickupAddress = document.getElementById('pickupAddress').value; | |
| if (pickupDate && pickupTime && pickupAddress) { | |
| // Show success message | |
| alert('Pickup scheduled successfully!\n\n' + | |
| `Date: ${pickupDate}\n` + | |
| `Time: ${document.getElementById('pickupTime').options[document.getElementById('pickupTime').selectedIndex].text}\n` + | |
| `Address: ${pickupAddress}`); | |
| // Reset form | |
| pickupForm.reset(); | |
| } else { | |
| alert('Please fill in all required fields'); | |
| } | |
| }); | |
| // Simulate live tracking updates (demo purposes) | |
| setInterval(function() { | |
| if (trackingResult.style.display === 'block') { | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const dots = document.querySelectorAll('.progress-dots .dot'); | |
| const labels = document.querySelectorAll('.progress-label'); | |
| // Reset all to inactive first | |
| dots.forEach(dot => { | |
| dot.classList.remove('active', 'completed'); | |
| }); | |
| labels.forEach(label => { | |
| label.classList.remove('active', 'completed'); | |
| }); | |
| // For demo, we'll cycle through the statuses | |
| const now = new Date(); | |
| const seconds = now.getSeconds(); | |
| if (seconds < 15) { | |
| // Order Placed | |
| progressBar.style.width = '25%'; | |
| dots[0].classList.add('completed'); | |
| dots[1].classList.add('completed'); | |
| dots[2].classList.add('completed'); | |
| dots[3].classList.add('completed'); | |
| labels[0].classList.add('completed'); | |
| labels[1].classList.add('completed'); | |
| labels[2].classList.add('completed'); | |
| labels[3].classList.add('completed'); | |
| document.querySelector('.status-badge').className = 'status-badge status-delivered'; | |
| document.querySelector('.status-badge').textContent = 'Delivered'; | |
| } else if (seconds < 30) { | |
| // Package Processed | |
| progressBar.style.width = '45%'; | |
| dots[0].classList.add('completed'); | |
| dots[1].classList.add('active'); | |
| labels[0].classList.add('completed'); | |
| labels[1].classList.add('active'); | |
| document.querySelector('.status-badge').className = 'status-badge status-in-transit'; | |
| document.querySelector('.status-badge').textContent = 'In Transit'; | |
| } else if (seconds < 45) { | |
| // In Transit | |
| progressBar.style.width = '65%'; | |
| dots[0].classList.add('completed'); | |
| dots[1].classList.add('completed'); | |
| dots[2].classList.add('active'); | |
| labels[0].classList.add('completed'); | |
| labels[1].classList.add('completed'); | |
| labels[2].classList.add('active'); | |
| } else { | |
| // Out for Delivery | |
| progressBar.style.width = '85%'; | |
| dots[0].classList.add('completed'); | |
| dots[1].classList.add('completed'); | |
| dots[2].classList.add('completed'); | |
| dots[3].classList.add('active'); | |
| labels[0].classList.add('completed'); | |
| labels[1].classList.add('completed'); | |
| labels[2].classList.add('completed'); | |
| labels[3].classList.add('active'); | |
| } | |
| } | |
| }, 1000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |