templates/ModComercio/Carta/index.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  2.   <head>
  3.         {{ include('partials/title-meta.html.twig', {title: 'Carta'}) }}
  4.         {{ include('partials/head-css.html.twig') }}
  5.     <style>
  6.         .menu-section {
  7.             padding: 30px;
  8.             border-radius: 10px;
  9.         }
  10.         @media screen and (min-width: 768px) {
  11.           .menu-container {
  12.             padding: 0 200px;
  13.             border-radius: 10px;
  14.         }
  15.         @media screen and (max-width: 768px) {
  16.           .menu-container {
  17.             padding: 30px;
  18.             border-radius: 10px;
  19.                     }
  20.         }
  21.         .menu-header {
  22.             font-size: 1.5rem;
  23.             font-weight: bold;
  24.             margin-bottom: 20px;
  25.             border-bottom: 2px solid;
  26.             display: inline-block;
  27.         }
  28.         .menu-item {
  29.             display: flex;
  30.             justify-content: space-between;
  31.             align-items: center;
  32.             margin-bottom: 15px;
  33.         }
  34.         .menu-item-description {
  35.             font-size: 0.9rem;
  36.         }
  37.         .menu-image img {
  38.             width: 100%;
  39.             border-radius: 10px;
  40.         }
  41.     </style>
  42.     </head>
  43.   <body>
  44.     {# {{ include('ModComercio/Carta/modalDetail.html.twig') }} #}
  45.     <main>
  46.       <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  47.         <div class="carousel-inner">
  48.           {% for item in banner %}
  49.             {% if loop.first %}
  50.               <div class="carousel-item active">
  51.                 <img src="{{item.imagen}}" alt="..." width="100%"/>
  52.               </div>
  53.               {% else %}
  54.               <div class="carousel-item">
  55.                 <img src="{{item.imagen}}" alt="..." width="100%"/>
  56.               </div>
  57.             {% endif %}
  58.           {% endfor %}
  59.         </div>
  60.         <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
  61.           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  62.           <span class="visually-hidden">Previous</span>
  63.         </button>
  64.         <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
  65.           <span class="carousel-control-next-icon" aria-hidden="true"></span>
  66.           <span class="visually-hidden">Next</span>
  67.         </button>
  68.       </div>
  70.       {# Section #}
  71.       <section class="menu-container">
  72.         <div class="mt-4">
  73.           {% for item in productos %}
  74.             <div class="row justify-content-center">
  75.               <div class="col-12">
  76.                 <img src="{{ item.hero }}" class="mb-2 rounded" width="100%">
  77.               </div>
  78.             </div>
  79.             <div class="row mb-3">
  80.               <div class="col-md-6 menu-section order-{{item.column1}}">
  81.                 <div class="menu-header"># {{item.nombre}}</div>
  82.                 {% for menu in item.menus %}
  83.                   <div class="menu-item">
  84.                     <div>
  85.                       <strong>{{menu.nombre}}</strong>
  86.                       <div class="menu-item-description">{{menu.descripcion}}</div>
  87.                     </div>
  88.                     <div class="text-danger" style="font-size: 22px; font-weight: bold;">${{menu.precio|number_format(2, '.', ',')}}</div>
  89.                   </div>
  90.                 {% endfor %}
  91.               </div>
  92.               <div class="col-md-6 menu-image order-{{item.column2}}">
  93.                 <img src="{{ item.imagen }}" alt="categoria_{{item.nombre}}">
  94.               </div>
  95.             </div>
  96.           {% endfor %}
  97.         </div>
  98.       </section>
  100.       {# Footer #}
  101.       <footer class="py-2 bg-dark">
  102.         <div class="container">
  103.           <p class="m-0 text-center text-white"><script>document.write(new Date().getFullYear())</script> @ DIC Comercios.</p>
  104.         </div>
  105.       </footer>
  106.     </main>
  107.   {{ include('partials/vendor-scripts.html.twig') }}
  108.     <script src="{{ asset('assets/js/app.js') }}"></script>
  110.   <script src="{{ asset('assets/js/ModComercio/Carta/selectors.js')}}"></script>
  111.     <script src="{{ asset('assets/js/ModComercio/Carta/functions.js')}}"></script>
  112.   </body>
  113. </html>