|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>La Cogotuda - Arte para Armar</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #FDFBF8; |
|
|
color: #1a202c; |
|
|
} |
|
|
.logo-font { |
|
|
font-weight: 900; |
|
|
letter-spacing: -0.05em; |
|
|
} |
|
|
.hero-bg { |
|
|
background-color: #f0eada; |
|
|
} |
|
|
.btn-primary { |
|
|
background-color: #D95F43; |
|
|
color: white; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
.btn-primary:hover { |
|
|
background-color: #b94e36; |
|
|
} |
|
|
.btn-primary:disabled { |
|
|
background-color: #f3a996; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
.btn-secondary { |
|
|
background-color: #2C4A6E; |
|
|
color: white; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
.btn-secondary:hover { |
|
|
background-color: #1f3550; |
|
|
} |
|
|
.section-title { |
|
|
font-weight: 900; |
|
|
font-size: 2.5rem; |
|
|
text-align: center; |
|
|
margin-bottom: 3rem; |
|
|
letter-spacing: -0.025em; |
|
|
} |
|
|
|
|
|
#cart-modal { |
|
|
transition: opacity 0.3s ease-in-out; |
|
|
} |
|
|
#cart-container { |
|
|
transition: transform 0.3s ease-in-out; |
|
|
} |
|
|
|
|
|
.config-btn { |
|
|
transition: all 0.2s ease-in-out; |
|
|
border: 2px solid #e2e8f0; |
|
|
} |
|
|
.config-btn.selected { |
|
|
border-color: #2C4A6E; |
|
|
background-color: #eef2f9; |
|
|
box-shadow: 0 0 0 2px #2C4A6E; |
|
|
} |
|
|
#canvas-preview-container { |
|
|
perspective: 1000px; |
|
|
} |
|
|
#canvas-preview { |
|
|
box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1); |
|
|
transform: rotateX(10deg) rotateY(-15deg); |
|
|
border: 10px solid #fff; |
|
|
border-bottom-width: 20px; |
|
|
border-right-width: 20px; |
|
|
background-color: #f0eada; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-40 border-b border-gray-200"> |
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.png" alt="Logo La Cogotuda" class="h-10 w-10 object-cover rounded-md shadow-sm"> |
|
|
<span class="text-2xl logo-font text-gray-800">LA COGOTUDA</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#configurador" class="text-gray-600 hover:text-gray-900 font-semibold">Configurador</a> |
|
|
<a href="#como-funciona" class="text-gray-600 hover:text-gray-900 font-semibold">Cómo Funciona</a> |
|
|
<a href="#manifiesto" class="text-gray-600 hover:text-gray-900 font-semibold">Manifiesto</a> |
|
|
</nav> |
|
|
<div class="flex items-center"> |
|
|
<button id="cart-button" class="relative"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-700"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> |
|
|
<span id="cart-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section class="hero-bg py-20 md:py-32"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-black text-gray-800 mb-4 leading-tight">El Arte del Futuro, en Tus Manos.</h1> |
|
|
<p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">Bastidores de alta calidad, impresos en 3D, que armas en minutos. Recíbelos en una caja, listos para tu creatividad.</p> |
|
|
<a href="#configurador" class="btn-primary font-bold py-3 px-8 rounded-lg text-lg inline-block">Crear mi Bastidor</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="configurador" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="section-title text-gray-800">Crea tu Bastidor Perfecto</h2> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
|
|
|
<div class="relative min-h-[300px] md:min-h-[500px]"> |
|
|
<div id="canvas-preview-container" class="w-full h-full flex items-center justify-center transition-all duration-300 ease-in-out"> |
|
|
<div id="canvas-preview" class="bg-cover bg-center transition-all duration-300 ease-in-out rounded-sm" style="width: 80%; aspect-ratio: 4/3;"> |
|
|
</div> |
|
|
</div> |
|
|
<label for="artwork-upload" class="absolute bottom-4 right-4 btn-secondary py-2 px-4 rounded-lg text-sm font-semibold cursor-pointer shadow-lg"> |
|
|
Visualizar mi obra |
|
|
</label> |
|
|
<input type="file" id="artwork-upload" class="hidden" accept="image/*"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md border border-gray-200"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-bold mb-3">1. Elige el Tamaño</h3> |
|
|
<div class="grid grid-cols-3 gap-3 mb-3"> |
|
|
<button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="30" data-h="40">30x40 cm</button> |
|
|
<button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="50" data-h="70">50x70 cm</button> |
|
|
<button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="80" data-h="100">80x100 cm</button> |
|
|
</div> |
|
|
<div class="flex items-center gap-3"> |
|
|
<input type="number" id="custom-width" placeholder="Ancho" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent"> |
|
|
<span class="text-gray-400">x</span> |
|
|
<input type="number" id="custom-height" placeholder="Alto" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent"> |
|
|
</div> |
|
|
<p id="custom-error" class="text-red-500 text-sm mt-2 hidden">Medidas entre 20 y 150 cm.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold mb-3">2. Elige el Tipo de Lienzo</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3"> |
|
|
<button class="canvas-type-btn config-btn p-4 rounded-lg text-left" data-type="Algodón" data-multiplier="1.0"> |
|
|
<h4 class="font-bold">Algodón Universal</h4> |
|
|
<p class="text-sm text-gray-500">Ideal para acrílico y óleo.</p> |
|
|
</button> |
|
|
<button class="canvas-type-btn config-btn p-4 rounded-lg text-left" data-type="Lino Premium" data-multiplier="1.5"> |
|
|
<h4 class="font-bold">Lino Premium</h4> |
|
|
<p class="text-sm text-gray-500">Calidad profesional (+50%)</p> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div> |
|
|
<span class="text-lg font-semibold text-gray-800">Tu Kit Personalizado</span> |
|
|
<p id="final-details" class="text-sm text-gray-500">Selecciona tus opciones</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-4xl font-black text-gray-800" id="final-price">$0</p> |
|
|
</div> |
|
|
</div> |
|
|
<button id="add-to-cart-btn" class="w-full btn-primary font-bold py-3 rounded-lg text-lg" disabled>Agregar al Carrito</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="como-funciona" class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="section-title text-gray-800">Montaje sin herramientas. Creatividad sin límites.</h2> |
|
|
<div class="grid md:grid-cols-4 gap-10 text-center"> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-orange-100 p-6 rounded-full mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#D95F43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v2"/><path d="m7 19 5 3 5-3"/><path d="M7 12v5l5 3 5-3v-5"/><path d="M22 10.5V14a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 2 14v-3.5"/><path d="M12 22V17"/></svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">1. Recibe</h3> |
|
|
<p class="text-gray-600">Tu kit llega en una caja compacta con las piezas 3D y el lienzo en un tubo protector.</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-blue-100 p-6 rounded-full mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#2C4A6E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">2. Ensambla</h3> |
|
|
<p class="text-gray-600">Une las piezas con nuestro sistema "Click-Lock". Sin tornillos ni pegamento.</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-orange-100 p-6 rounded-full mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#D95F43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-3 3-3-3"/><path d="m15 19-3-3-3 3"/><path d="m5 15 3-3-3-3"/><path d="m19 15-3-3 3-3"/></svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">3. Tensa</h3> |
|
|
<p class="text-gray-600">Fija el lienzo fácilmente con nuestro innovador sistema de ranura y spline.</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="bg-blue-100 p-6 rounded-full mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#2C4A6E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z"/><path d="M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">4. Crea</h3> |
|
|
<p class="text-gray-600">Tu bastidor está listo. De calidad profesional y preparado para tu talento.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="manifiesto" class="py-20"> |
|
|
<div class="container mx-auto px-6 max-w-4xl text-center"> |
|
|
<img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.jpg" alt="Logo La Cogotuda" class="h-20 w-20 mx-auto mb-6 object-cover rounded-lg shadow-md"> |
|
|
<h2 class="text-3xl md:text-4xl font-black text-gray-800 mb-6">Somos La Cogotuda.</h2> |
|
|
<p class="text-lg text-gray-600 mb-4">Creemos en un futuro donde la automatización nos regala tiempo. Tiempo para crear, para expresarnos, para ser más humanos. No vemos un futuro de trabajos perdidos, sino de pasiones encontradas.</p> |
|
|
<p class="text-lg text-gray-600">Nuestra misión es derribar las barreras. Hacemos que el arte sea accesible, no barato. Inteligente, no complicado. Te damos las herramientas para que construyas tu visión, con la cabeza en alto. Con orgullo. Con tu arte.</p> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-10"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<p>© 2025 La Cogotuda. Todos los derechos reservados.</p> |
|
|
<p class="text-gray-400 mt-2">Hecho con ❤️ y filamento en Argentina.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 flex justify-end hidden z-50"> |
|
|
<div id="cart-container" class="w-full max-w-md bg-white h-full shadow-2xl transform translate-x-full"> |
|
|
<div class="flex flex-col h-full"> |
|
|
|
|
|
<div class="flex justify-between items-center p-6 border-b"> |
|
|
<h2 class="text-2xl font-bold">Tu Carrito</h2> |
|
|
<button id="close-cart-btn"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="cart-items" class="flex-grow p-6 overflow-y-auto"> |
|
|
<p class="text-gray-500 text-center">Tu carrito está vacío.</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 border-t bg-gray-50"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="text-lg font-semibold">Subtotal</span> |
|
|
<span id="cart-subtotal" class="text-xl font-bold">$0</span> |
|
|
</div> |
|
|
<button class="w-full btn-primary font-bold py-3 rounded-lg text-lg">Finalizar Compra</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const config = { |
|
|
width: null, |
|
|
height: null, |
|
|
canvasType: null, |
|
|
priceMultiplier: null, |
|
|
price: 0, |
|
|
isValid: false, |
|
|
}; |
|
|
let cart = []; |
|
|
|
|
|
|
|
|
const cartButton = document.getElementById('cart-button'); |
|
|
const closeCartBtn = document.getElementById('close-cart-btn'); |
|
|
const cartModal = document.getElementById('cart-modal'); |
|
|
const cartContainer = document.getElementById('cart-container'); |
|
|
const cartCount = document.getElementById('cart-count'); |
|
|
const cartItemsContainer = document.getElementById('cart-items'); |
|
|
const cartSubtotal = document.getElementById('cart-subtotal'); |
|
|
|
|
|
|
|
|
const sizeButtons = document.querySelectorAll('.size-btn'); |
|
|
const canvasTypeButtons = document.querySelectorAll('.canvas-type-btn'); |
|
|
const customWidthInput = document.getElementById('custom-width'); |
|
|
const customHeightInput = document.getElementById('custom-height'); |
|
|
const customError = document.getElementById('custom-error'); |
|
|
const canvasPreview = document.getElementById('canvas-preview'); |
|
|
const artworkUpload = document.getElementById('artwork-upload'); |
|
|
const finalPriceDisplay = document.getElementById('final-price'); |
|
|
const finalDetailsDisplay = document.getElementById('final-details'); |
|
|
const addToCartBtn = document.getElementById('add-to-cart-btn'); |
|
|
|
|
|
|
|
|
|
|
|
const updateConfigurator = () => { |
|
|
|
|
|
config.isValid = config.width && config.height && config.canvasType; |
|
|
|
|
|
if (!config.isValid) { |
|
|
finalPriceDisplay.textContent = '$0'; |
|
|
finalDetailsDisplay.textContent = 'Selecciona tus opciones'; |
|
|
addToCartBtn.disabled = true; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const area = config.width * config.height; |
|
|
const basePrice = 1000; |
|
|
const pricePerSqCm = 0.55; |
|
|
const rawPrice = basePrice + (area * pricePerSqCm); |
|
|
config.price = Math.round(rawPrice * config.priceMultiplier); |
|
|
|
|
|
|
|
|
finalPriceDisplay.textContent = `$${config.price.toLocaleString('es-AR')}`; |
|
|
finalDetailsDisplay.textContent = `${config.width}x${config.height}cm, Lienzo ${config.canvasType}`; |
|
|
addToCartBtn.disabled = false; |
|
|
|
|
|
|
|
|
canvasPreview.style.aspectRatio = `${config.width} / ${config.height}`; |
|
|
}; |
|
|
|
|
|
const handleSizeSelection = (w, h) => { |
|
|
config.width = w; |
|
|
config.height = h; |
|
|
customWidthInput.value = w; |
|
|
customHeightInput.value = h; |
|
|
|
|
|
sizeButtons.forEach(btn => { |
|
|
btn.classList.toggle('selected', btn.dataset.w == w && btn.dataset.h == h); |
|
|
}); |
|
|
customError.classList.add('hidden'); |
|
|
updateConfigurator(); |
|
|
}; |
|
|
|
|
|
const handleCanvasTypeSelection = (button) => { |
|
|
config.canvasType = button.dataset.type; |
|
|
config.priceMultiplier = parseFloat(button.dataset.multiplier); |
|
|
|
|
|
canvasTypeButtons.forEach(btn => btn.classList.remove('selected')); |
|
|
button.classList.add('selected'); |
|
|
updateConfigurator(); |
|
|
}; |
|
|
|
|
|
const handleCustomSizeInput = () => { |
|
|
const width = parseInt(customWidthInput.value); |
|
|
const height = parseInt(customHeightInput.value); |
|
|
const minDim = 20; |
|
|
const maxDim = 150; |
|
|
|
|
|
|
|
|
sizeButtons.forEach(btn => btn.classList.remove('selected')); |
|
|
|
|
|
if (isNaN(width) || isNaN(height) || width < minDim || width > maxDim || height < minDim || height > maxDim) { |
|
|
config.width = null; |
|
|
config.height = null; |
|
|
customError.classList.remove('hidden'); |
|
|
updateConfigurator(); |
|
|
return; |
|
|
} |
|
|
|
|
|
customError.classList.add('hidden'); |
|
|
config.width = width; |
|
|
config.height = height; |
|
|
updateConfigurator(); |
|
|
}; |
|
|
|
|
|
|
|
|
const openCart = () => { |
|
|
cartModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
setTimeout(() => cartContainer.style.transform = 'translateX(0)', 10); |
|
|
}; |
|
|
|
|
|
const closeCart = () => { |
|
|
cartContainer.style.transform = 'translateX(100%)'; |
|
|
setTimeout(() => { |
|
|
cartModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}, 300); |
|
|
}; |
|
|
|
|
|
const updateCartUI = () => { |
|
|
cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0); |
|
|
if (cart.length === 0) { |
|
|
cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center">Tu carrito está vacío.</p>'; |
|
|
} else { |
|
|
cartItemsContainer.innerHTML = cart.map(item => ` |
|
|
<div class="flex items-center justify-between mb-4" data-id="${item.id}"> |
|
|
<div class="flex items-center"> |
|
|
<img src="${item.image || 'https://placehold.co/80x80/f0eada/1a202c?text=Kit'}" alt="${item.name}" class="w-16 h-16 object-cover rounded-md mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">${item.name}</h4> |
|
|
<p class="text-sm text-gray-500">${item.details}</p> |
|
|
<p class="font-bold text-gray-800">$${item.price.toLocaleString('es-AR')}</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<span class="font-semibold">x ${item.quantity}</span> |
|
|
<button class="remove-from-cart-btn text-red-500 hover:text-red-700" data-id="${item.id}"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
cartSubtotal.textContent = `$${subtotal.toLocaleString('es-AR')}`; |
|
|
document.querySelectorAll('.remove-from-cart-btn').forEach(button => { |
|
|
button.addEventListener('click', (e) => removeFromCart(e.currentTarget.dataset.id)); |
|
|
}); |
|
|
}; |
|
|
|
|
|
const addToCart = () => { |
|
|
if (!config.isValid) return; |
|
|
|
|
|
const id = `kit-${config.width}x${config.height}-${config.canvasType}`; |
|
|
const existingItem = cart.find(item => item.id === id); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity++; |
|
|
} else { |
|
|
cart.push({ |
|
|
id: id, |
|
|
name: `Kit ${config.width}x${config.height}cm`, |
|
|
details: `Lienzo ${config.canvasType}`, |
|
|
price: config.price, |
|
|
quantity: 1, |
|
|
image: canvasPreview.style.backgroundImage.startsWith('url("data:image') ? canvasPreview.style.backgroundImage.slice(5, -2) : null |
|
|
}); |
|
|
} |
|
|
updateCartUI(); |
|
|
showAddedToCartFeedback(`Kit ${config.width}x${config.height}cm`); |
|
|
}; |
|
|
|
|
|
const removeFromCart = (id) => { |
|
|
cart = cart.filter(item => item.id !== id); |
|
|
updateCartUI(); |
|
|
}; |
|
|
|
|
|
const showAddedToCartFeedback = (itemName) => { |
|
|
const feedbackEl = document.createElement('div'); |
|
|
feedbackEl.textContent = `"${itemName}" agregado al carrito!`; |
|
|
feedbackEl.className = 'fixed bottom-5 right-5 bg-green-500 text-white py-2 px-4 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50'; |
|
|
document.body.appendChild(feedbackEl); |
|
|
setTimeout(() => { |
|
|
feedbackEl.style.transform = 'translateY(0)'; |
|
|
feedbackEl.style.opacity = '1'; |
|
|
}, 10); |
|
|
setTimeout(() => { |
|
|
feedbackEl.style.transform = 'translateY(20px)'; |
|
|
feedbackEl.style.opacity = '0'; |
|
|
setTimeout(() => feedbackEl.remove(), 300); |
|
|
}, 3000); |
|
|
}; |
|
|
|
|
|
|
|
|
cartButton.addEventListener('click', openCart); |
|
|
closeCartBtn.addEventListener('click', closeCart); |
|
|
cartModal.addEventListener('click', (e) => e.target === cartModal && closeCart()); |
|
|
|
|
|
sizeButtons.forEach(button => { |
|
|
button.addEventListener('click', () => handleSizeSelection(parseInt(button.dataset.w), parseInt(button.dataset.h))); |
|
|
}); |
|
|
|
|
|
canvasTypeButtons.forEach(button => { |
|
|
button.addEventListener('click', () => handleCanvasTypeSelection(button)); |
|
|
}); |
|
|
|
|
|
[customWidthInput, customHeightInput].forEach(input => { |
|
|
input.addEventListener('input', handleCustomSizeInput); |
|
|
}); |
|
|
|
|
|
artworkUpload.addEventListener('change', (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (event) => { |
|
|
canvasPreview.style.backgroundImage = `url('${event.target.result}')`; |
|
|
} |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
addToCartBtn.addEventListener('click', addToCart); |
|
|
|
|
|
|
|
|
handleCanvasTypeSelection(canvasTypeButtons[0]); |
|
|
handleSizeSelection(30, 40); |
|
|
updateCartUI(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
