templates/main/main.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Digital Menu - GIRUS CAFE</title>
  7.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  8.     <style>
  9.         body {
  10.             font-family: 'Montserrat', sans-serif;
  11.             background-color: #f5f4f2;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.         .menu-container {
  16.             display: flex;
  17.             flex-direction: column;
  18.             min-height: 100vh;
  19.             padding: 20px;
  20.         }
  21.         .categories-container {
  22.             display: flex;
  23.             overflow-x: auto;
  24.             padding: 10px 0;
  25.             margin-bottom: 20px;
  26.             -webkit-overflow-scrolling: touch;
  27.             scrollbar-width: none;
  28.             -ms-overflow-style: none;
  29.         }
  30.         .categories-container::-webkit-scrollbar {
  31.             display: none;
  32.         }
  33.         .category-button {
  34.             background-color: white;
  35.             border: none;
  36.             border-radius: 20px;
  37.             padding: 12px 20px;
  38.             margin-right: 10px;
  39.             font-weight: 600;
  40.             font-size: 16px;
  41.             cursor: pointer;
  42.             transition: all 0.3s ease;
  43.             white-space: nowrap;
  44.         }
  45.         .category-button.active {
  46.             background-color: #4CAF50;
  47.             color: white;
  48.             transform: scale(1.05);
  49.         }
  50.         .menu-content {
  51.             flex-grow: 1;
  52.         }
  53.         .menu-header {
  54.             height: 200px;
  55.             border-radius: 20px;
  56.             background-size: cover;
  57.             background-position: center;
  58.             margin-bottom: 20px;
  59.             display: flex;
  60.             align-items: center;
  61.             justify-content: center;
  62.             text-align: center;
  63.             color: white;
  64.             text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  65.         }
  66.         .menu-items {
  67.             display: grid;
  68.             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  69.             gap: 20px;
  70.         }
  71.         .menu-item {
  72.             background-color: white;
  73.             border-radius: 16px;
  74.             overflow: hidden;
  75.             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  76.             transition: transform 0.3s ease;
  77.         }
  78.         .menu-item:hover {
  79.             transform: translateY(-5px);
  80.         }
  81.         .menu-item img {
  82.             width: 100%;
  83.             height: 200px;
  84.             object-fit: cover;
  85.         }
  86.         .menu-item-content {
  87.             padding: 15px;
  88.         }
  89.         .menu-item-title {
  90.             margin-top: 0;
  91.             color: #333;
  92.             font-size: 18px;
  93.         }
  94.         .menu-item-description {
  95.             color: #666;
  96.             margin-bottom: 10px;
  97.             font-size: 14px;
  98.         }
  99.         .menu-item-price {
  100.             font-weight: bold;
  101.             color: #4CAF50;
  102.             font-size: 16px;
  103.         }
  105.         @media (min-width: 768px) {
  106.             .menu-container {
  107.                 flex-direction: row;
  108.             }
  109.             .categories-container {
  110.                 flex-direction: column;
  111.                 width: 200px;
  112.                 height: calc(100vh - 40px);
  113.                 overflow-y: auto;
  114.                 padding-right: 20px;
  115.             }
  116.             .category-button {
  117.                 margin-bottom: 10px;
  118.                 margin-right: 0;
  119.             }
  120.             .menu-content {
  121.                 margin-left: 20px;
  122.             }
  123.             .menu-header {
  124.                 height: 300px;
  125.             }
  126.         }
  127.     </style>
  128. </head>
  129. <body>
  130.     <div class="menu-container">
  131.         <div class="categories-container">
  132.             <button class="category-button active" data-category="all">Mostrar Tudo</button>
  133.             <button class="category-button" data-category="entradas">Entradas</button>
  134.             <button class="category-button" data-category="sopas">Sopas</button>
  135.             <button class="category-button" data-category="peixe">Peixe</button>
  136.             <button class="category-button" data-category="carnes">Carnes</button>
  137.             <button class="category-button" data-category="sobremesas">Sobremesas</button>
  138.             <button class="category-button" data-category="bebidas">Bebidas</button>
  139.         </div>
  140.         <div class="menu-content">
  141.             <div class="menu-header" style="background-image: url('{{ asset('img/bg.jpg') }}');">
  142.                 <h1>GIRUS CAFE</h1>
  143.             </div>
  144.             <div class="menu-items">
  145.                 {% for entrada in entradas %}
  146.                     <div class="menu-item" data-category="entradas">
  147.                         <img src="{{ asset('img/Entradas/' ~ entrada.img) }}" alt="{{ entrada.nome }}">
  148.                         <div class="menu-item-content">
  149.                             <h4 class="menu-item-title">{{ entrada.nome }}</h4>
  150.                             <p class="menu-item-description">{{ entrada.descricao }}</p>
  151.                             <p class="menu-item-price">{{ entrada.preco }} €</p>
  152.                         </div>
  153.                     </div>
  154.                 {% endfor %}
  155.                 {% for sopa in sopas %}
  156.                     <div class="menu-item" data-category="sopas">
  157.                         <img src="{{ asset('img/Sopas/' ~ sopa.img) }}" alt="{{ sopa.nome }}">
  158.                         <div class="menu-item-content">
  159.                             <h4 class="menu-item-title">{{ sopa.nome }}</h4>
  160.                             <p class="menu-item-description">{{ sopa.descricao }}</p>
  161.                             <p class="menu-item-price">{{ sopa.preco }} €</p>
  162.                         </div>
  163.                     </div>
  164.                 {% endfor %}
  165.                 {% for peixe in peixes %}
  166.                     <div class="menu-item" data-category="peixe">
  167.                         <img src="{{ asset('img/Peixes/' ~ peixe.img) }}" alt="{{ peixe.nome }}">
  168.                         <div class="menu-item-content">
  169.                             <h4 class="menu-item-title">{{ peixe.nome }}</h4>
  170.                             <p class="menu-item-description">{{ peixe.descricao }}</p>
  171.                             <p class="menu-item-price">{{ peixe.preco }} €</p>
  172.                         </div>
  173.                     </div>
  174.                 {% endfor %}
  175.                 {% for carne in carnes %}
  176.                     <div class="menu-item" data-category="carnes">
  177.                         <img src="{{ asset('img/Carnes/' ~ carne.img) }}" alt="{{ carne.nome }}">
  178.                         <div class="menu-item-content">
  179.                             <h4 class="menu-item-title">{{ carne.nome }}</h4>
  180.                             <p class="menu-item-description">{{ carne.descricao }}</p>
  181.                             <p class="menu-item-price">{{ carne.preco }} €</p>
  182.                         </div>
  183.                     </div>
  184.                 {% endfor %}
  185.                 {% for sobremesa in sobremesas %}
  186.                     <div class="menu-item" data-category="sobremesas">
  187.                         <img src="{{ asset('img/Sobremesas/' ~ sobremesa.img) }}" alt="{{ sobremesa.nome }}">
  188.                         <div class="menu-item-content">
  189.                             <h4 class="menu-item-title">{{ sobremesa.nome }}</h4>
  190.                             <p class="menu-item-description">{{ sobremesa.descricao }}</p>
  191.                             <p class="menu-item-price">{{ sobremesa.preco }} €</p>
  192.                         </div>
  193.                     </div>
  194.                 {% endfor %}
  195.                 {% for bebida in bebidas %}
  196.                     <div class="menu-item" data-category="bebidas">
  197.                         <img src="{{ asset('img/Bebidas/' ~ bebida.img) }}" alt="{{ bebida.nome }}">
  198.                         <div class="menu-item-content">
  199.                             <h4 class="menu-item-title">{{ bebida.nome }}</h4>
  200.                             <p class="menu-item-description">{{ bebida.descricao }}</p>
  201.                             <p class="menu-item-price">{{ bebida.preco }} €</p>
  202.                         </div>
  203.                     </div>
  204.                 {% endfor %}
  205.             </div>
  206.         </div>
  207.     </div>
  209.     <script>
  210.         const categoryButtons = document.querySelectorAll('.category-button');
  211.         const menuItems = document.querySelectorAll('.menu-item');
  213.         categoryButtons.forEach(button => {
  214.             button.addEventListener('click', () => {
  215.                 const category = button.getAttribute('data-category');
  216.                 
  217.                 categoryButtons.forEach(btn => btn.classList.remove('active'));
  218.                 button.classList.add('active');
  220.                 menuItems.forEach(item => {
  221.                     if (category === 'all' || item.getAttribute('data-category') === category) {
  222.                         item.style.display = 'block';
  223.                         item.style.animation = 'fadeIn 0.5s';
  224.                     } else {
  225.                         item.style.display = 'none';
  226.                     }
  227.                 });
  228.             });
  229.         });
  231.         // Smooth scrolling for category buttons on mobile
  232.         const categoriesContainer = document.querySelector('.categories-container');
  233.         let isScrolling = false;
  235.         categoriesContainer.addEventListener('touchmove', () => {
  236.             isScrolling = true;
  237.         });
  239.         categoriesContainer.addEventListener('touchend', () => {
  240.             isScrolling = false;
  241.         });
  243.         categoryButtons.forEach(button => {
  244.             button.addEventListener('click', (e) => {
  245.                 if (isScrolling) {
  246.                     e.preventDefault();
  247.                     return;
  248.                 }
  249.                 button.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
  250.             });
  251.         });
  252.     </script>
  253. </body>
  254. </html>