templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>TcgBunker - Home</title>
  7.         <!-- Metadatos Open Graph para control de la miniatura y la descripción -->
  8.         <meta property="og:title" content="TcgBunker">
  9.         <meta property="og:description" content="Compra decks y mucho mas">
  10.         <meta property="og:image" content="/images/test.png">
  11.         <meta property="og:type" content="website">
  12.         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  13.         <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet"> <!-- AOS CSS -->
  14.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  15.         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  16.         <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  17.         <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  18.         <!-- Google Font -->
  19.         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  20.         <style>
  21.             body {
  22.                 font-family: 'Poppins', sans-serif;
  23.                 background-color: #f8f9fa;
  24.                 color: #333;
  25.                 overflow-y: scroll;
  26.             }
  27.             .btn-primary {
  28.                 background-color: #E63946;
  29.                 border: none;
  30.             }
  31.             .btn-outline-primary{
  32.                     --bs-btn-color: #E63946;
  33.                     --bs-btn-border-color: #E63946;
  34.                     --bs-btn-hover-color: #fff;
  35.                     --bs-btn-hover-bg: #E63946;
  36.                     --bs-btn-hover-border-color: #E63946;
  37.                     --bs-btn-focus-shadow-rgb: 13, 110, 253;
  38.                     --bs-btn-active-color: #fff;
  39.                     --bs-btn-active-bg: #E63946;
  40.                     --bs-btn-active-border-color: #E63946;
  41.                     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  42.                     --bs-btn-disabled-color: #E63946;
  43.                     --bs-btn-disabled-bg: transparent;
  44.                     --bs-btn-disabled-border-color: #E63946;
  45.                     --bs-gradient: none;
  46.             }
  47.             .btn-primary:hover {
  48.                 background-color: #D62839;
  49.             }
  50.             .btn-secondary {
  51.                 background-color: #F4A261;
  52.                 border: none;
  53.                 color: #FFFFFF;
  54.             }
  55.             .btn-secondary:hover {
  56.                 background-color: #E08E3C;
  57.             }
  58.             .pointer{
  59.                 cursor:pointer;
  60.             }
  61.             .form-section {
  62.                 background-color: #F2F2F2;
  63.                 padding: 50px 20px;
  64.             }
  65.             .contact-section {
  66.                 background-color: #F2F2F2;
  67.                 padding: 50px 20px;
  68.             }
  69.             .carousel-item img {
  70.                 height: 300px;
  71.                 object-fit: cover;
  72.             }
  73.             footer {
  74.                 background-color: #333333;
  75.                 color: white;
  76.                 padding: 20px 0;
  77.                 text-align: center;
  78.             }
  79.             .cart-icon {
  80.                 font-size: 1.5rem;
  81.                 color: #F2F2F2;
  82.             }
  83.             
  84.             .bg-deg{
  85.                 background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5))
  86.             }
  87.             
  88.         </style>
  89.         <style>
  90.             .product-row img {
  91.                 height: 200px;
  92.                 object-fit: cover;
  93.                 width: 100%;
  94.             }
  95.             .category-section {
  96.                 padding: 20px 0;
  97.                 border-bottom: 1px solid #eaeaea;
  98.             }
  99.             h1.category-section {
  100.                 padding: 20px 0;
  101.                 border-bottom: 2px solid #333;
  102.             }
  103.             .category-section h3 {
  104.                 border-bottom: 2px solid #333;
  105.                 padding-bottom: 5px;
  106.             }
  107.         </style>
  108.         <style>
  109.             /* Estilo del carrito dinámico */
  110.             .cart-sidebar {
  111.                 position: fixed;
  112.                 top: 0;
  113.                 right: -320px;
  114.                 width: 320px;
  115.                 height: 100%;
  116.                 background: white;
  117.                 box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  118.                 padding: 20px;
  119.                 overflow-y: auto;
  120.                 transition: right 0.3s ease;
  121.                 z-index: 1050;
  122.             }
  123.             .cart-sidebar.open {
  124.                 right: 0;
  125.             }
  126.             .cart-header {
  127.                 background-color: #f8f9fa;
  128.                 font-weight: bold;
  129.             }
  130.             .cart-items {
  131.                 flex: 1;
  132.                 overflow-y: auto;
  133.             }
  134.             .cart-footer {
  135.                 background-color: #f8f9fa;
  136.             }
  137.             .list-group-item .btn {
  138.                 padding: 0 8px;
  139.                 font-size: 12px;
  140.                 line-height: 1.5;
  141.                 margin-left: 5px;
  142.                 margin-right: 5px;
  143.             }
  144.         </style>
  145.         <!-- Estilos adicionales -->
  146.         <style>
  147.             nav ul li a {
  148.                 color: #fff;
  149.             }
  150.             nav ul li a:hover {
  151.                 color: #dc3545; /* Efecto hover para los enlaces del menú */
  152.             }
  153.             .section-title 
  154.             {
  155.                 font-weight: 600;
  156.                 color: #e50914!important;
  157.             }
  158.             a.section-title 
  159.             {
  160.                 font-weight: 600;
  161.                 color: #e50914!important;
  162.             }
  163.             .m-h-75{
  164.                 min-height: 75vh;
  165.             }
  166.             .m-h-60{
  167.                 min-height: 60vh;
  168.             }
  169.             .fs-7{
  170.                 font-size: 14px!important;
  171.             }
  172.             /* CSS: transición suave y origen del zoom centrado */
  173.             .zoom {
  174.                 transition: transform 0.3s ease;
  175.                 transform-origin: center center;
  176.             }
  177.             .out-of-stock {
  178.                 position: relative;
  179.                 opacity: 0.5; /* Da un efecto sombreado o deshabilitado */
  180.             }
  181.             .out-of-stock::after {
  182.                 content: "AGOTADO";
  183.                 position: absolute;
  184.                 top: 40%;
  185.                 left: 50%;
  186.                 transform: translate(-50%, -50%);
  187.                 background: rgba(255, 0, 0, 0.7);
  188.                 color: white;
  189.                 padding: 5px 15px;
  190.                 font-weight: bold;
  191.                 border-radius: 5px;
  192.             }
  193. </style>
  194.             
  195.         </style>
  196.         <meta charset="UTF-8">
  197.         <title>{% block title %}Welcome!{% endblock %}</title>
  198.         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
  199.         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  200.         {% block stylesheets %}
  201.             {{ encore_entry_link_tags('app') }}
  202.         {% endblock %}
  203.         {% block javascripts %}
  204.             {{ encore_entry_script_tags('app') }}
  205.         {% endblock %}
  206.     </head>
  207.     <body>
  208.         
  209.         {% for label, messages in app.flashes %}
  210.             {% for message in messages %}
  211.                 <div class="alert alert-{{ label }} alert-dismissible fade show"  role="alert">
  212.                     {{ message }}
  213.                       <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  214.                 </div>
  215.             {% endfor %}
  216.         {% endfor %}
  217.         {% block body %}{% endblock %}
  218.         
  219.         <!-- Sidebar del carrito -->
  220.         <div id="cart-sidebar" class="cart-sidebar">
  221.             <!-- El contenido del carrito será cargado dinámicamente aquí -->
  222.         </div>
  223.         <!-- Footer -->
  224.         <footer class="bg-dark text-white pt-5">
  225.             <div class="container">
  226.                 <div class="row fs-7">
  227.                     <!-- Políticas -->
  228.                     <div class="col-12 col-md-12 mb-4">
  229.                         <h5 class="text-uppercase mb-4 d-none">Políticas</h5>
  230.                         <ul class="list-unstyled d-md-flex d-block justify-content-start gap-3">
  231.                             <li class="mb-2"><a href="/politica-de-privacidad" class="text-white text-decoration-none">Política de Privacidad</a></li>
  232.                             <li class="mb-2"><a href="/terminos-del-servicio" class="text-white text-decoration-none">Términos y Condiciones</a></li>
  233.                             <li class="mb-2"><a href="/politica-de-cookies" class="text-white text-decoration-none">Política de Cookies</a></li>
  234.                             <li class="mb-2"><a href="/politica-de-devoluciones" class="text-white text-decoration-none">Devoluciones</a></li>
  235.                             <li class="mb-2"><a href="/contact" class="text-white text-decoration-none">Contáctanos</a></li>
  236.                         </ul>
  237.                     </div>
  238.                     <!-- Métodos de Pago -->
  239.                     <div class="col-12 col-md-4 mb-4 d-none">
  240.                         <h5 class="text-uppercase mb-4">Métodos de Pago</h5>
  241.                         <ul class="list-inline">
  242.                             <li class="list-inline-item mb-2">
  243.                                 <i class="bi bi-credit-card fs-4" aria-label="Tarjetas de crédito"></i>
  244.                                 <div class="small">Tarjetas</div>
  245.                             </li>
  246.                             <!--<li class="list-inline-item mb-2">
  247.                                 <i class="bi bi-paypal fs-4" aria-label="PayPal"></i>
  248.                                 <div class="small">PayPal</div>
  249.                             </li>
  250.                             <li class="list-inline-item mb-2">
  251.                                 <i class="bi bi-cash fs-4" aria-label="Efectivo"></i>
  252.                                 <div class="small">Contraentrega</div>
  253.                             </li>-->
  254.                         </ul>
  255.                     </div>
  256.                     <!-- Métodos de Envío -->
  257.                     <div class="col-12 col-md-4 mb-4 d-none">
  258.                         <h5 class="text-uppercase mb-4">Envíos</h5>
  259.                         <ul class="list-inline">
  260.                             <li class="list-inline-item mb-2">
  261.                                 <i class="bi bi-truck fs-4" aria-label="Envío estándar"></i>
  262.                                 <div class="small">Estándar</div>
  263.                             </li>
  264.                             <!--<li class="list-inline-item mb-2">
  265.                                 <i class="bi bi-box-seam fs-4" aria-label="Envío express"></i>
  266.                                 <div class="small">Express</div>
  267.                             </li>
  268.                             <li class="list-inline-item mb-2">
  269.                                 <i class="bi bi-globe fs-4" aria-label="Envío internacional"></i>
  270.                                 <div class="small">Internacional</div>
  271.                             </li>-->
  272.                         </ul>
  273.                     </div>
  274.                     
  275.                     <!-- Redes Sociales (extra) -->
  276.                     <!--<div class="col-12 col-md-3 mb-4">
  277.                         <h5 class="text-uppercase mb-4">Síguenos</h5>
  278.                         <div class="d-flex gap-3 justify-content-center">
  279.                             <a href="#" class="text-white"><i class="bi bi-facebook fs-4"></i></a>
  280.                             <a href="#" class="text-white"><i class="bi bi-instagram fs-4"></i></a>
  281.                             <a href="#" class="text-white"><i class="bi bi-twitter-x fs-4"></i></a>
  282.                             <a href="#" class="text-white"><i class="bi bi-tiktok fs-4"></i></a>
  283.                         </div>
  284.                     </div>-->
  285.                 </div>
  286.                 <!-- Derechos de autor -->
  287.                 <div class="border-top pt-4">
  288.                     <div class="row">
  289.                         <div class="col-12 text-center">
  290.                             <p class="small mb-0">&copy; 2025 TcgBunker. Todos los derechos reservados.</p>
  291.                         </div>
  292.                     </div>
  293.                 </div>
  294.             </div>
  295.         </footer>
  296.         <!-- Barra de cookies -->
  297.         <div id="cookie-banner" style="position: fixed; bottom: 0; left: 0; right: 0; background: #222; color: white; padding: 1em; display: none; z-index: 1000;">
  298.             <div style="max-width: 800px; margin: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
  299.                 <span>Este sitio usa cookies para mejorar tu experiencia. <a href="/politica-de-cookies" style="color: #e50914;">Leer más</a></span>
  300.                 <div>
  301.                 <button id="accept-cookies" style="border: none; padding: 0.5em 1em; margin-left: 0.5em;" class="btn btn-primary">Aceptar</button>
  302.                 <button id="reject-cookies" style="background: #555; color: #fff; border: none; padding: 0.5em 1em; margin-left: 0.5em;" class="btn">Rechazar</button>
  303.                 </div>
  304.             </div>
  305.         </div>
  306.         <script>
  307.             function cargarGA() {
  308.                 var gaScript = document.createElement('script');
  309.                 gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-JL6JLQZRZR';
  310.                 gaScript.async = true;
  311.                 document.head.appendChild(gaScript);
  312.                 gaScript.onload = function () {
  313.                 window.dataLayer = window.dataLayer || [];
  314.                 function gtag(){ dataLayer.push(arguments); }
  315.                 window.gtag = gtag;
  316.                 gtag('js', new Date());
  317.                 gtag('config', 'G-JL6JLQZRZR');
  318.                 }
  319.             }
  320.             const banner = document.getElementById("cookie-banner");
  321.             if (localStorage.getItem("cookies-consent") === "accepted") {
  322.                 cargarGA();
  323.             } else if (localStorage.getItem("cookies-consent") !== "rejected") {
  324.                 banner.style.display = "block";
  325.             }
  326.             document.getElementById("accept-cookies").onclick = function () {
  327.                 localStorage.setItem("cookies-consent", "accepted");
  328.                 banner.style.display = "none";
  329.                 cargarGA();
  330.             };
  331.             document.getElementById("reject-cookies").onclick = function () {
  332.                 localStorage.setItem("cookies-consent", "rejected");
  333.                 banner.style.display = "none";
  334.                 // No se carga GA
  335.             };
  336.         </script>
  337.         
  338.         <script>
  339.             AOS.init(); // Inicializar animaciones
  340.         </script>
  341.         <script>
  342.             document.addEventListener('DOMContentLoaded', function () {
  343.                 const headerHeight = document.querySelector('.header').offsetHeight;
  344.                 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  345.                     anchor.addEventListener('click', function (e) {
  346.                         e.preventDefault();
  347.                         const target = document.querySelector(this.getAttribute('href'));
  348.                         const offsetTop = target.offsetTop - headerHeight;
  349.                         window.scrollTo({
  350.                             top: offsetTop,
  351.                             behavior: 'smooth'
  352.                         });
  353.                     });
  354.                 });
  355.             });
  356.         </script>
  357.         <script>
  358.             
  359.             $(document).ready(function () {
  360.                 const confirmationMessage = document.getElementById('confirmation-message');
  361.                 // Manejar el clic en "Añadir al carrito"
  362.                 $('body').on('click','.addToCart', function () {
  363.                     const $parent = $(this).closest('.product-row');
  364.                     const productId = $(this).data('product-id');
  365.                     const quantity = $parent.find('input[type="number"]').val();
  366.                     const open = $(this).data('open') ?? false;
  367.                     const goCheckout = $(this).data('checkout') ?? false;
  368.                     const extras = $('#extraIngredients').val() || [];
  369.                     const removals = $('#removableIngredients').val() || [];
  370.                     // Enviar solicitud AJAX
  371.                     $.ajax({
  372.                         url: '/cart/add',
  373.                         method: 'POST',
  374.                         contentType: 'application/json',
  375.                         data: JSON.stringify({
  376.                             productId: productId,
  377.                             quantity: parseInt(quantity),
  378.                             extras: extras,
  379.                             removals: removals
  380.                         }),
  381.                         success: function (data) {
  382.                             if (data.success) {
  383.                                 $('.cartIconView').html(data.htmlCart);
  384.                                 
  385.                                 if(goCheckout){
  386.                                     window.location.href = "/checkout";
  387.                                 }
  388.                                 if(open){
  389.                                     $('.cart-icon').trigger('click');
  390.                                 }
  391.                                 if(confirmationMessage && confirmationMessage.classList){
  392.                                     confirmationMessage.classList.remove('d-none');
  393.                                     // Ocultar el mensaje después de 3 segundos
  394.                                     setTimeout(() => {
  395.                                         confirmationMessage.classList.add('d-none');
  396.                                     }, 3000);
  397.                                 }
  398.                                 
  399.                             } else {
  400.                                 alert('Hubo un problema al añadir el producto al carrito');
  401.                             }
  402.                         },
  403.                         error: function () {
  404.                             alert('Error de red al añadir el producto al carrito');
  405.                         }
  406.                     });
  407.                 });
  408.                 // Manejar el clic en los botones "+" y "-"
  409.                 $('#cart-sidebar').on('click', '.increment-btn, .decrement-btn', function () {
  410.                     const productId = $(this).data('product-id');
  411.                     const action = $(this).hasClass('increment-btn') ? 'increment' : 'decrement';
  412.                     // Realizar solicitud AJAX al backend
  413.                     $.ajax({
  414.                         url: '/cart/update',
  415.                         method: 'POST',
  416.                         data: JSON.stringify({
  417.                             productId: productId,
  418.                             action: action
  419.                         }),
  420.                         success: function (data) {
  421.                             if (data.success) {
  422.                                 const cartPanel = $('#cart-sidebar');
  423.                                 cartPanel.html(data.htmlSlider); // Actualizar el HTML del carrito
  424.                                 const cartIcon = $('.cartIconView');
  425.                                 cartIcon.html(data.htmlCart);
  426.                             } else {
  427.                                 alert('Hubo un problema al actualizar el carrito');
  428.                             }
  429.                         },
  430.                         error: function () {
  431.                             alert('Error de red al actualizar el carrito');
  432.                         }
  433.                     });
  434.                 });
  435.                 // Manejar el clic en el ícono del carrito
  436.                 $('body').on('click' ,'.cart-icon', function () {
  437.                     $.ajax({
  438.                         url: '/cart',
  439.                         method: 'GET',
  440.                         success: function (data) {
  441.                             if (data.success) {
  442.                                 const cartPanel = $('#cart-sidebar');
  443.                                 cartPanel.html(data.htmlSlider); // Insertar el HTML recibido
  444.                                 cartPanel.addClass('open'); // Mostrar el panel lateral
  445.                                 const cartIcon = $('.cartIconView');
  446.                                 cartIcon.html(data.htmlCart);
  447.                             } else {
  448.                                 alert('Hubo un problema al cargar el carrito');
  449.                             }
  450.                         },
  451.                         error: function () {
  452.                             alert('Error de red al cargar el carrito');
  453.                         }
  454.                     });
  455.                 });
  456.                 // Cerrar el carrito cuando se haga clic fuera del panel
  457.                 $(document).on('click', function (e) {
  458.                     if (!$(e.target).closest('#cart-sidebar, .cart-icon').length) {
  459.                         $('#cart-sidebar').removeClass('open');
  460.                     }
  461.                 });
  462.                 // Cerrar el carrito cuando se haga clic en la x
  463.                 $(document).on('click', '.close-cart', function (e) {
  464.                     console.log('here');
  465.                     
  466.                         $('#cart-sidebar').removeClass('open');
  467.                 });
  468.                 // Manejar el clic en el botón de Checkout
  469.                 $(document).on('click', '#checkout-btn', function () {
  470.                     window.location.href = '/checkout';
  471.                 });
  472.             });
  473.         </script>
  474.         <script>
  475.             // JavaScript: ampliar/reducir al pasar/retirar el ratón
  476.             document.addEventListener('DOMContentLoaded', () => {
  477.             const zoomImages = document.querySelectorAll('img.zoom');
  478.             zoomImages.forEach(img => {
  479.                 img.addEventListener('mouseenter', () => {
  480.                 img.style.transform = 'scale(1.1)';  // Ajusta 1.1 por el nivel de zoom deseado
  481.                 });
  482.                 img.addEventListener('mouseleave', () => {
  483.                 img.style.transform = 'scale(1)';    // Vuelve al estado original
  484.                 });
  485.             });
  486.             });
  487.         </script>
  488.     </body>
  489. </html>