templates/tracking/_Tab_track_code.html.twig line 1

Open in your IDE?
  3. <style>
  4.     :root { --afi-green: #006E51; --afi-yellow: #F6D155; }
  6.     /* Card & Grid */
  7.     .result-card { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 30px; border: 1px solid #eee; }
  8.     .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: #fdfdfd; border-bottom: 2px solid var(--afi-green); padding: 15px; text-align: center; }
  9.     .summary-box { padding: 10px; border-right: 1px solid #eee; }
  10.     .summary-box:last-child { border-right: none; }
  11.     .summary-box label { display: block; font-size: 10px; color: #888; text-transform: uppercase; font-weight: bold; margin-bottom: 3px; }
  12.     .summary-box span { font-weight: 800; color: #333; font-size: 13px; display: block; }
  14.     /* Container de l'image miniature */
  15.     .img-preview-container {
  16.         position: relative;
  17.         cursor: pointer;
  18.         border-radius: 12px;
  19.         overflow: hidden;
  20.         border: 2px solid #eee;
  21.         background: #f9f9f9;
  22.         height: 110px;
  23.         transition: all 0.3s ease;
  24.     }
  25.     .img-preview-container:hover { border-color: var(--afi-green); transform: translateY(-3px); }
  26.     .img-preview-container img { width: 100%; height: 100%; object-fit: cover; }
  28.     .img-overlay-icon {
  29.         position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  30.         background: rgba(0, 110, 81, 0.2); display: flex; align-items: center; justify-content: center;
  31.         opacity: 0; transition: 0.3s; color: white; font-size: 20px;
  32.     }
  33.     .img-preview-container:hover .img-overlay-icon { opacity: 1; }
  35.     /* LIGHTBOX CSS (Le Preview) */
  36.     .afi-lightbox {
  37.         position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  38.         background: rgba(0, 0, 0, 0.85);
  39.         backdrop-filter: blur(5px); /* Flou d'arrière-plan */
  40.         display: none; z-index: 10000;
  41.         align-items: center; justify-content: center;
  42.         padding: 20px;
  43.     }
  44.     .afi-lightbox:target { display: flex; animation: fadeIn 0.3s ease; }
  46.     .afi-lightbox img {
  47.         max-width: 95%; max-height: 85vh;
  48.         border-radius: 10px;
  49.         box-shadow: 0 0 30px rgba(0,0,0,0.5);
  50.         border: 3px solid white;
  51.     }
  53.     .close-lightbox {
  54.         position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  55.         cursor: default;
  56.     }
  58.     .close-btn-icon {
  59.         position: absolute; top: 20px; right: 20px;
  60.         width: 45px; height: 45px; background: white; color: black;
  61.         border-radius: 50%; display: flex; align-items: center; justify-content: center;
  62.         font-size: 24px; text-decoration: none; font-weight: bold; z-index: 10001;
  63.     }
  65.     @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  67.     /* Détails Colis */
  68.     .goods-box { background: #fff; border: 1px solid #efefef; border-radius: 15px; padding: 15px; margin-bottom: 15px; border-left: 4px solid var(--afi-yellow); }
  69.     .location-badge { background: #fff9e6; border: 1px solid #f6d155; border-radius: 10px; padding: 10px; margin-top: 10px; text-align: center; }
  70. </style>
  72. {% if recept is not empty %}
  73.     {% for reception in recept|reverse %}
  74.         {% set pathBase = "https://a.afisarl.com/file/agents/reception/" ~ reception.dateOperation|date('d-m-Y') ~ "-" ~ reception.recunumero ~ "/" %}
  75.         {% set defaultImg = "https://a.afisarl.com/dist/images/defaultColis.png" %}
  76.         {{ include('tracking/_Tab.html.twig') }}
  77.     {% endfor %}
  78. {% else %}
  79.     <div class="container mt-5">
  80.         <div class="text-center py-5 shadow-sm rounded-lg bg-white border-0" style="border-radius: 20px;">
  81.             <div class="mb-4">
  82.                 <div class="d-inline-flex align-items-center justify-content-center bg-light rounded-circle" style="width: 100px; height: 100px;">
  83.                     <i class="fas fa-search fa-3x text-muted"></i>
  84.                 </div>
  85.             </div>
  87.             <h3 class="text-dark font-weight-bold mb-2">NO RECORDS FOUND</h3>
  89.             <p class="text-muted mx-auto mb-4" style="max-width: 450px;">
  90.                 We couldn't find any cargo tracking information for this customer code.
  91.                 Please verify the code or check back later once the warehouse has updated the system.
  92.             </p>
  94.             <div class="d-flex justify-content-center gap-3">
  95.                 <button onclick="window.location.reload()" class="btn btn-outline-secondary px-4 mr-2">
  96.                     <i class="fas fa-sync-alt mr-2"></i> Refresh
  97.                 </button>
  98.                 <a href="/" class="btn btn-warning px-4 font-weight-bold">
  99.                     <i class="fas fa-home mr-2"></i> New Search
  100.                 </a>
  101.             </div>
  102.         </div>
  104.         <p class="text-center mt-4 text-muted small">
  105.             <i class="fas fa-question-circle mr-1"></i> Need help? Contact our support at <strong>support@afisarl.com</strong>
  106.         </p>
  107.     </div>
  108. {% endif %}