templates/default/achatRecap.html.twig line 1

Open in your IDE?
  1. {% extends 'base2.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5. {% block body %}
  6. <style>
  7. body{
  8.     background-color: #f1f3f7;
  9. }
  11. .avatar-lg {
  12.     height: 5rem;
  13.     width: 5rem;
  14. }
  16. .font-size-18 {
  17.     font-size: 18px!important;
  18. }
  20. .text-truncate {
  21.     overflow: hidden;
  22.     text-overflow: ellipsis;
  23.     white-space: nowrap;
  24. }
  26. a {
  27.     text-decoration: none!important;
  28. }
  30. .w-xl {
  31.     min-width: 160px;
  32. }
  34. .card {
  35.     margin-bottom: 24px;
  36.     -webkit-box-shadow: 0 2px 3px #e4e8f0;
  37.     box-shadow: 0 2px 3px #e4e8f0;
  38. }
  40. .card {
  41.     position: relative;
  42.     display: -webkit-box;
  43.     display: -ms-flexbox;
  44.     display: flex;
  45.     -webkit-box-orient: vertical;
  46.     -webkit-box-direction: normal;
  47.     -ms-flex-direction: column;
  48.     flex-direction: column;
  49.     min-width: 0;
  50.     word-wrap: break-word;
  51.     background-color: #fff;
  52.     background-clip: border-box;
  53.     border: 1px solid #eff0f2;
  54.     border-radius: 1rem;
  55. }
  56. </style>
  57. <section class="landing-padding">
  58. <div class="container my-5" style="height: 100vh;">
  59.     <div class="row">
  60.         <div class="col-xl-8">
  61.             <div class="card border shadow-none">
  62.                 <div class="card-body">
  64.                     <div class="d-flex align-items-start border-bottom pb-3">
  65.                        
  66.                         <div class="flex-grow-1 align-self-center overflow-hidden">
  67.                             <div>
  68.                                 <h5 class="text-truncate font-size-18"><a href="#" class="text-dark">Crédit Modixom </a></h5>
  69.                                
  70.                             </div>
  71.                         </div>
  72.                         <div class="flex-shrink-0 ms-2">
  73.                             <ul class="list-inline mb-0 font-size-16">
  74.                                 <li class="list-inline-item">
  75.                                     <a href="#" class="text-muted px-1">
  76.                                         <i class="mdi mdi-trash-can-outline"></i>
  77.                                     </a>
  78.                                 </li>
  79.                                 <li class="list-inline-item">
  80.                                     <a href="#" class="text-muted px-1">
  81.                                         <i class="mdi mdi-heart-outline"></i>
  82.                                     </a>
  83.                                 </li>
  84.                             </ul>
  85.                         </div>
  86.                     </div>
  88.                     <div>
  89.                         <div class="row">
  90.                             <div class="col-md-4">
  91.                                 <div class="mt-3">
  92.                                     <p class="text-muted mb-2">Prix</p>
  93.                                     <h5 class="mb-0 mt-2"><span class="text-muted me-2">{{qt}}€</span></h5>
  94.                                 </div>
  95.                             </div>
  96.                             <div class="col-md-5">
  97.                                 <div class="mt-3">
  98.                                     <p class="text-muted mb-2">Quantité</p>
  99.                                     <div class="d-inline-flex">
  100.                                         {{qt}}
  101.                                     </div>
  102.                                 </div>
  103.                             </div>
  104.                             <div class="col-md-3">
  105.                                 <div class="mt-3">
  106.                                     <p class="text-muted mb-2">Total</p>
  107.                                     <h5>{{qt}}€</h5>
  108.                                 </div>
  109.                             </div>
  110.                         </div>
  111.                     </div>
  112.                     <div>
  113.                     <form action="{{path('paiementStripeForm')}}" method="post" >
  114.                         <div class="row">
  115.                             <div class="col-md-12">
  116.                                 <div class="mt-3">
  117.                                     <input type="checkbox" required><label> J'accepte les <a href='#' style='color: #D82E9F !important'>conditions générales de ventes</a></label>
  118.                                 </div>
  119.                             </div>
  120.                         </div>
  121.                     </div>
  123.                 </div>
  124.             </div>
  125.             <!-- end card -->
  127.             <div class="row my-4">
  128.                 <div class="col-sm-6">
  129.                     <a href="{{path('achatCredit')}}" class="btn btn-link text-muted">
  130.                         <i class="mdi mdi-arrow-left me-1"></i> Retour au choix des crédits </a>
  131.                 </div> <!-- end col -->
  132.                 <div class="col-sm-6">
  133.                     <div class="text-sm-end mt-2 mt-sm-0">
  134.                         
  135.                         <input type="hidden" name="qt" value="{{qt}}">
  136.                             <button class="btn" style="background-color: #ACB9CA; color: white" type="submit"><i class="mdi mdi-cart-outline me-1"></i> Acheter </button>
  137.                             </form>
  138.                     </div>
  139.                 </div> <!-- end col -->
  140.             </div> <!-- end row-->
  141.         </div>
  143.         <div class="col-xl-4">
  144.             <div class="mt-5 mt-lg-0">
  145.                 <div class="card border shadow-none">
  146.                     <div class="card-header bg-transparent border-bottom py-3 px-4">
  147.                         <h5 class="font-size-16 mb-0">Récapitulatif de la commande</h5>
  148.                     </div>
  149.                     <div class="card-body p-4 pt-2">
  151.                         <div class="table-responsive">
  152.                             <table class="table mb-0">
  153.                                 <tbody>
  154.                                     <tr>
  155.                                         <td>Sous-total :</td>
  156.                                         <td class="text-end">{{qt}}€</td>
  157.                                     </tr>
  158.                                     <tr>
  159.                                         <td>Nombre de crédit : </td>
  160.                                         <td class="text-end">{{qt}}</td>
  161.                                     </tr>
  162.                                     <tr class="bg-light">
  163.                                         <th>Total :</th>
  164.                                         <td class="text-end">
  165.                                             <span class="fw-bold">
  166.                                                 {{qt}}€
  167.                                             </span>
  168.                                         </td>
  169.                                     </tr>
  170.                                 </tbody>
  171.                             </table>
  172.                         </div>
  173.                         <!-- end table-responsive -->
  174.                     </div>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.     </div>
  179. </section>
  180.     <!-- end row -->
  182. {% endblock %}