templates/tracking/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}AFI Tracking{% endblock %}
  5. {% block body %}
  6.     <style>
  7.         :root {
  8.             --primary: #006E51;
  9.             --primary-dark: #004d39;
  10.             --accent: #F6D155;
  11.             --bg: #f8fafc;
  12.             --text-muted: #64748b;
  13.         }
  15.         body {
  16.             background-color: var(--bg);
  17.             font-family: 'Inter', system-ui, -apple-system, sans-serif;
  18.         }
  20.         /* Card principale */
  21.         .tracking-card {
  22.             background: #fff;
  23.             border-radius: 24px;
  24.             padding: 40px;
  25.             box-shadow: 0 20px 40px rgba(0,0,0,.06);
  26.             border: 1px solid rgba(0,0,0,.03);
  27.             transition: transform 0.3s ease;
  28.         }
  30.         /* Titres */
  31.         .search-title {
  32.             color: var(--primary);
  33.             font-size: 2.2rem;
  34.             font-weight: 800;
  35.             margin-bottom: 4px;
  36.         }
  38.         .brand-subtitle {
  39.             font-size: .75rem;
  40.             letter-spacing: 2px;
  41.             text-transform: uppercase;
  42.             color: var(--text-muted);
  43.             margin-bottom: 35px;
  44.             display: block;
  45.         }
  47.         /* Champs de saisie */
  48.         .input-wrapper {
  49.             display: flex;
  50.             align-items: center;
  51.             height: 58px;
  52.             padding: 0 15px;
  53.             background: #f1f5f9;
  54.             border-radius: 16px;
  55.             border: 2px solid transparent;
  56.             transition: all .3s ease;
  57.         }
  59.         .input-wrapper:focus-within {
  60.             background: #fff;
  61.             border-color: var(--primary);
  62.             box-shadow: 0 0 0 4px rgba(0,110,81,.1);
  63.         }
  65.         .input-icon {
  66.             color: var(--primary);
  67.             opacity: .7;
  68.             margin-right: 12px;
  69.             font-size: 1.1rem;
  70.         }
  72.         .form-control-custom {
  73.             border: none;
  74.             background: transparent;
  75.             outline: none;
  76.             width: 100%;
  77.             font-weight: 500;
  78.             color: #1e293b;
  79.             font-size: 16px; /* Empêche le zoom auto sur iOS */
  80.         }
  82.         select.form-control-custom {
  83.             cursor: pointer;
  84.         }
  86.         /* Bouton de recherche */
  87.         .btn-search {
  88.             background: var(--primary);
  89.             color: #fff;
  90.             font-weight: 700;
  91.             border-radius: 14px;
  92.             padding: 0 28px;
  93.             height: 58px;
  94.             border: none;
  95.             display: flex;
  96.             align-items: center;
  97.             justify-content: center;
  98.             gap: 12px;
  99.             transition: all .3s ease;
  100.             cursor: pointer;
  101.         }
  103.         .btn-search:hover {
  104.             background: var(--primary-dark);
  105.             transform: translateY(-2px);
  106.             color: var(--accent);
  107.             box-shadow: 0 10px 20px rgba(0,110,81,0.2);
  108.         }
  110.         .btn-search:active {
  111.             transform: translateY(0);
  112.         }
  114.         /* Placeholder & Résultats */
  115.         .placeholder-view {
  116.             text-align: center;
  117.             padding: 50px 20px;
  118.             border-radius: 22px;
  119.             border: 2px dashed #e2e8f0;
  120.             background: rgba(255,255,255,.5);
  121.         }
  123.         .placeholder-icon {
  124.             width: 80px;
  125.             height: 80px;
  126.             line-height: 80px;
  127.             border-radius: 50%;
  128.             margin: 0 auto 20px;
  129.             background: #fff;
  130.             color: #cbd5e1;
  131.             font-size: 36px;
  132.             box-shadow: 0 10px 20px rgba(0,0,0,.04);
  133.         }
  135.         /* --- RESPONSIVE OPTIMISÉ --- */
  136.         @media (max-width: 768px) {
  137.             .container {
  138.                 padding-left: 15px;
  139.                 padding-right: 15px;
  140.             }
  142.             .py-5 {
  143.                 padding-top: 2rem !important;
  144.                 padding-bottom: 2rem !important;
  145.             }
  147.             .tracking-card {
  148.                 padding: 25px 20px;
  149.                 border-radius: 20px;
  150.             }
  152.             .search-title {
  153.                 font-size: 1.6rem;
  154.             }
  156.             .brand-subtitle {
  157.                 margin-bottom: 25px;
  158.             }
  160.             .input-wrapper {
  161.                 height: 52px; /* Hauteur réduite pour gagner de la place */
  162.                 border-radius: 12px;
  163.             }
  165.             .btn-search {
  166.                 height: 54px;
  167.                 width: 100%;
  168.                 border-radius: 12px;
  169.             }
  171.             .placeholder-view {
  172.                 padding: 30px 15px;
  173.                 margin-top: 25px !important;
  174.             }
  176.             .placeholder-icon {
  177.                 width: 60px;
  178.                 height: 60px;
  179.                 line-height: 60px;
  180.                 font-size: 28px;
  181.             }
  182.         }
  183.     </style>
  185.     <div class="container py-5">
  186.         <div class="row justify-content-center">
  187.             <div class="col-xl-8 col-lg-10 col-12">
  189.                 <div class="tracking-card text-center">
  190.                     <h2 class="search-title">Track Your Goods</h2>
  191.                     <span class="brand-subtitle">AFI Import Export Ltd</span>
  193.                     <form id="formTrack"
  194.                           action="{{ path('tracking_query') }}"
  195.                           method="POST"
  196.                           class="mt-2">
  198.                         <div class="row g-3">
  199.                             <div class="col-md-5 col-12">
  200.                                 <div class="input-wrapper">
  201.                                     <span class="input-icon"><i class="fa fa-tag"></i></span>
  202.                                     <select name="flagsearch" class="form-control-custom">
  203.                                         <option value="c" selected>Container / MCO</option>
  204.                                         <option value="p">Cargo Receipt</option>
  205.                                         <option value="n">Tracking Number</option>
  206.                                         <option value="cc">Customer Code</option>
  207.                                     </select>
  208.                                 </div>
  209.                             </div>
  211.                             <div class="col-md-7 col-12">
  212.                                 <div class="input-wrapper">
  213.                                     <span class="input-icon"><i class="fa fa-search"></i></span>
  214.                                     <input name="number"
  215.                                            type="text"
  216.                                            class="form-control-custom"
  217.                                            placeholder="Enter number..."
  218.                                            autocomplete="off"
  219.                                            required>
  220.                                 </div>
  221.                             </div>
  223.                             <div class="col-12">
  224.                                 <button onclick="sendAjaxFormCommun('#formTrack','.ldd','#infoTrack','','')"
  225.                                         type="submit"
  226.                                         class="btn btn-search w-100 ldd">
  227.                                     <i class="fa fa-paper-plane"></i> Track Shipment
  228.                                 </button>
  229.                             </div>
  230.                         </div>
  231.                     </form>
  232.                 </div>
  234.                 <div id="infoTrack" class="mt-4">
  235.                     <div class="placeholder-view">
  236.                         <div class="placeholder-icon">
  237.                             <i class="fa fa-map-marker-alt"></i>
  238.                         </div>
  239.                         <h4 class="fw-bold h5">Ready to Track?</h4>
  240.                         <p class="text-muted mx-auto mb-0" style="max-width:380px; font-size: 0.9rem;">
  241.                             Enter your shipment details above to get real-time updates on your cargo status.
  242.                         </p>
  243.                     </div>
  244.                 </div>
  246.             </div>
  247.         </div>
  248.     </div>
  249. {% endblock %}