<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TcgBunker - Home</title>
<!-- Metadatos Open Graph para control de la miniatura y la descripción -->
<meta property="og:title" content="TcgBunker">
<meta property="og:description" content="Compra decks y mucho mas">
<meta property="og:image" content="/images/test.png">
<meta property="og:type" content="website">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet"> <!-- AOS CSS -->
<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" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
overflow-y: scroll;
}
.btn-primary {
background-color: #E63946;
border: none;
}
.btn-outline-primary{
--bs-btn-color: #E63946;
--bs-btn-border-color: #E63946;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #E63946;
--bs-btn-hover-border-color: #E63946;
--bs-btn-focus-shadow-rgb: 13, 110, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #E63946;
--bs-btn-active-border-color: #E63946;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #E63946;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #E63946;
--bs-gradient: none;
}
.btn-primary:hover {
background-color: #D62839;
}
.btn-secondary {
background-color: #F4A261;
border: none;
color: #FFFFFF;
}
.btn-secondary:hover {
background-color: #E08E3C;
}
.pointer{
cursor:pointer;
}
.form-section {
background-color: #F2F2F2;
padding: 50px 20px;
}
.contact-section {
background-color: #F2F2F2;
padding: 50px 20px;
}
.carousel-item img {
height: 300px;
object-fit: cover;
}
footer {
background-color: #333333;
color: white;
padding: 20px 0;
text-align: center;
}
.cart-icon {
font-size: 1.5rem;
color: #F2F2F2;
}
.bg-deg{
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5))
}
</style>
<style>
.product-row img {
height: 200px;
object-fit: cover;
width: 100%;
}
.category-section {
padding: 20px 0;
border-bottom: 1px solid #eaeaea;
}
h1.category-section {
padding: 20px 0;
border-bottom: 2px solid #333;
}
.category-section h3 {
border-bottom: 2px solid #333;
padding-bottom: 5px;
}
</style>
<style>
/* Estilo del carrito dinámico */
.cart-sidebar {
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100%;
background: white;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
overflow-y: auto;
transition: right 0.3s ease;
z-index: 1050;
}
.cart-sidebar.open {
right: 0;
}
.cart-header {
background-color: #f8f9fa;
font-weight: bold;
}
.cart-items {
flex: 1;
overflow-y: auto;
}
.cart-footer {
background-color: #f8f9fa;
}
.list-group-item .btn {
padding: 0 8px;
font-size: 12px;
line-height: 1.5;
margin-left: 5px;
margin-right: 5px;
}
</style>
<!-- Estilos adicionales -->
<style>
nav ul li a {
color: #fff;
}
nav ul li a:hover {
color: #dc3545; /* Efecto hover para los enlaces del menú */
}
.section-title
{
font-weight: 600;
color: #e50914!important;
}
a.section-title
{
font-weight: 600;
color: #e50914!important;
}
.m-h-75{
min-height: 75vh;
}
.m-h-60{
min-height: 60vh;
}
.fs-7{
font-size: 14px!important;
}
/* CSS: transición suave y origen del zoom centrado */
.zoom {
transition: transform 0.3s ease;
transform-origin: center center;
}
.out-of-stock {
position: relative;
opacity: 0.5; /* Da un efecto sombreado o deshabilitado */
}
.out-of-stock::after {
content: "AGOTADO";
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 0, 0, 0.7);
color: white;
padding: 5px 15px;
font-weight: bold;
border-radius: 5px;
}
</style>
</style>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<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>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
{% for label, messages in app.flashes %}
{% for message in messages %}
<div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endfor %}
{% block body %}{% endblock %}
<!-- Sidebar del carrito -->
<div id="cart-sidebar" class="cart-sidebar">
<!-- El contenido del carrito será cargado dinámicamente aquí -->
</div>
<!-- Footer -->
<footer class="bg-dark text-white pt-5">
<div class="container">
<div class="row fs-7">
<!-- Políticas -->
<div class="col-12 col-md-12 mb-4">
<h5 class="text-uppercase mb-4 d-none">Políticas</h5>
<ul class="list-unstyled d-md-flex d-block justify-content-start gap-3">
<li class="mb-2"><a href="/politica-de-privacidad" class="text-white text-decoration-none">Política de Privacidad</a></li>
<li class="mb-2"><a href="/terminos-del-servicio" class="text-white text-decoration-none">Términos y Condiciones</a></li>
<li class="mb-2"><a href="/politica-de-cookies" class="text-white text-decoration-none">Política de Cookies</a></li>
<li class="mb-2"><a href="/politica-de-devoluciones" class="text-white text-decoration-none">Devoluciones</a></li>
<li class="mb-2"><a href="/contact" class="text-white text-decoration-none">Contáctanos</a></li>
</ul>
</div>
<!-- Métodos de Pago -->
<div class="col-12 col-md-4 mb-4 d-none">
<h5 class="text-uppercase mb-4">Métodos de Pago</h5>
<ul class="list-inline">
<li class="list-inline-item mb-2">
<i class="bi bi-credit-card fs-4" aria-label="Tarjetas de crédito"></i>
<div class="small">Tarjetas</div>
</li>
<!--<li class="list-inline-item mb-2">
<i class="bi bi-paypal fs-4" aria-label="PayPal"></i>
<div class="small">PayPal</div>
</li>
<li class="list-inline-item mb-2">
<i class="bi bi-cash fs-4" aria-label="Efectivo"></i>
<div class="small">Contraentrega</div>
</li>-->
</ul>
</div>
<!-- Métodos de Envío -->
<div class="col-12 col-md-4 mb-4 d-none">
<h5 class="text-uppercase mb-4">Envíos</h5>
<ul class="list-inline">
<li class="list-inline-item mb-2">
<i class="bi bi-truck fs-4" aria-label="Envío estándar"></i>
<div class="small">Estándar</div>
</li>
<!--<li class="list-inline-item mb-2">
<i class="bi bi-box-seam fs-4" aria-label="Envío express"></i>
<div class="small">Express</div>
</li>
<li class="list-inline-item mb-2">
<i class="bi bi-globe fs-4" aria-label="Envío internacional"></i>
<div class="small">Internacional</div>
</li>-->
</ul>
</div>
<!-- Redes Sociales (extra) -->
<!--<div class="col-12 col-md-3 mb-4">
<h5 class="text-uppercase mb-4">Síguenos</h5>
<div class="d-flex gap-3 justify-content-center">
<a href="#" class="text-white"><i class="bi bi-facebook fs-4"></i></a>
<a href="#" class="text-white"><i class="bi bi-instagram fs-4"></i></a>
<a href="#" class="text-white"><i class="bi bi-twitter-x fs-4"></i></a>
<a href="#" class="text-white"><i class="bi bi-tiktok fs-4"></i></a>
</div>
</div>-->
</div>
<!-- Derechos de autor -->
<div class="border-top pt-4">
<div class="row">
<div class="col-12 text-center">
<p class="small mb-0">© 2025 TcgBunker. Todos los derechos reservados.</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Barra de cookies -->
<div id="cookie-banner" style="position: fixed; bottom: 0; left: 0; right: 0; background: #222; color: white; padding: 1em; display: none; z-index: 1000;">
<div style="max-width: 800px; margin: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
<span>Este sitio usa cookies para mejorar tu experiencia. <a href="/politica-de-cookies" style="color: #e50914;">Leer más</a></span>
<div>
<button id="accept-cookies" style="border: none; padding: 0.5em 1em; margin-left: 0.5em;" class="btn btn-primary">Aceptar</button>
<button id="reject-cookies" style="background: #555; color: #fff; border: none; padding: 0.5em 1em; margin-left: 0.5em;" class="btn">Rechazar</button>
</div>
</div>
</div>
<script>
function cargarGA() {
var gaScript = document.createElement('script');
gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-JL6JLQZRZR';
gaScript.async = true;
document.head.appendChild(gaScript);
gaScript.onload = function () {
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
window.gtag = gtag;
gtag('js', new Date());
gtag('config', 'G-JL6JLQZRZR');
}
}
const banner = document.getElementById("cookie-banner");
if (localStorage.getItem("cookies-consent") === "accepted") {
cargarGA();
} else if (localStorage.getItem("cookies-consent") !== "rejected") {
banner.style.display = "block";
}
document.getElementById("accept-cookies").onclick = function () {
localStorage.setItem("cookies-consent", "accepted");
banner.style.display = "none";
cargarGA();
};
document.getElementById("reject-cookies").onclick = function () {
localStorage.setItem("cookies-consent", "rejected");
banner.style.display = "none";
// No se carga GA
};
</script>
<script>
AOS.init(); // Inicializar animaciones
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const headerHeight = document.querySelector('.header').offsetHeight;
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
const offsetTop = target.offsetTop - headerHeight;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
});
});
});
</script>
<script>
$(document).ready(function () {
const confirmationMessage = document.getElementById('confirmation-message');
// Manejar el clic en "Añadir al carrito"
$('body').on('click','.addToCart', function () {
const $parent = $(this).closest('.product-row');
const productId = $(this).data('product-id');
const quantity = $parent.find('input[type="number"]').val();
const open = $(this).data('open') ?? false;
const goCheckout = $(this).data('checkout') ?? false;
const extras = $('#extraIngredients').val() || [];
const removals = $('#removableIngredients').val() || [];
// Enviar solicitud AJAX
$.ajax({
url: '/cart/add',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify({
productId: productId,
quantity: parseInt(quantity),
extras: extras,
removals: removals
}),
success: function (data) {
if (data.success) {
$('.cartIconView').html(data.htmlCart);
if(goCheckout){
window.location.href = "/checkout";
}
if(open){
$('.cart-icon').trigger('click');
}
if(confirmationMessage && confirmationMessage.classList){
confirmationMessage.classList.remove('d-none');
// Ocultar el mensaje después de 3 segundos
setTimeout(() => {
confirmationMessage.classList.add('d-none');
}, 3000);
}
} else {
alert('Hubo un problema al añadir el producto al carrito');
}
},
error: function () {
alert('Error de red al añadir el producto al carrito');
}
});
});
// Manejar el clic en los botones "+" y "-"
$('#cart-sidebar').on('click', '.increment-btn, .decrement-btn', function () {
const productId = $(this).data('product-id');
const action = $(this).hasClass('increment-btn') ? 'increment' : 'decrement';
// Realizar solicitud AJAX al backend
$.ajax({
url: '/cart/update',
method: 'POST',
data: JSON.stringify({
productId: productId,
action: action
}),
success: function (data) {
if (data.success) {
const cartPanel = $('#cart-sidebar');
cartPanel.html(data.htmlSlider); // Actualizar el HTML del carrito
const cartIcon = $('.cartIconView');
cartIcon.html(data.htmlCart);
} else {
alert('Hubo un problema al actualizar el carrito');
}
},
error: function () {
alert('Error de red al actualizar el carrito');
}
});
});
// Manejar el clic en el ícono del carrito
$('body').on('click' ,'.cart-icon', function () {
$.ajax({
url: '/cart',
method: 'GET',
success: function (data) {
if (data.success) {
const cartPanel = $('#cart-sidebar');
cartPanel.html(data.htmlSlider); // Insertar el HTML recibido
cartPanel.addClass('open'); // Mostrar el panel lateral
const cartIcon = $('.cartIconView');
cartIcon.html(data.htmlCart);
} else {
alert('Hubo un problema al cargar el carrito');
}
},
error: function () {
alert('Error de red al cargar el carrito');
}
});
});
// Cerrar el carrito cuando se haga clic fuera del panel
$(document).on('click', function (e) {
if (!$(e.target).closest('#cart-sidebar, .cart-icon').length) {
$('#cart-sidebar').removeClass('open');
}
});
// Cerrar el carrito cuando se haga clic en la x
$(document).on('click', '.close-cart', function (e) {
console.log('here');
$('#cart-sidebar').removeClass('open');
});
// Manejar el clic en el botón de Checkout
$(document).on('click', '#checkout-btn', function () {
window.location.href = '/checkout';
});
});
</script>
<script>
// JavaScript: ampliar/reducir al pasar/retirar el ratón
document.addEventListener('DOMContentLoaded', () => {
const zoomImages = document.querySelectorAll('img.zoom');
zoomImages.forEach(img => {
img.addEventListener('mouseenter', () => {
img.style.transform = 'scale(1.1)'; // Ajusta 1.1 por el nivel de zoom deseado
});
img.addEventListener('mouseleave', () => {
img.style.transform = 'scale(1)'; // Vuelve al estado original
});
});
});
</script>
</body>
</html>