Personaliza tu pizza | Pizzeria 360

/* style.css - Personalizador de Pizzas (paleta blanco/gris/negro) */ :root{ --bg:#ffffff; --muted:#6b6b6b; --card:#f7f7f7; --accent:#1f2937; /* dark gray */ --accent-2:#111827; --border: #e6e6e6; --glass: rgba(0,0,0,0.04); } *{box-sizing:border-box} html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;} body{background:linear-gradient(180deg,#fff 0%, #f3f4f6 100%);color:var(--accent);-webkit-font-smoothing:antialiased;} .app{min-height:100vh;display:flex;flex-direction:column;} .header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);background:transparent} .brand{font-weight:800;font-size:18px} .cart-btn{background:var(--accent-2);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600} .main-grid{display:grid;grid-template-columns:320px 1fr 360px;gap:20px;padding:24px;flex:1;align-items:start} .panel{display:flex;flex-direction:column;gap:16px} .card{background:var(--card);padding:16px;border-radius:14px;border:1px solid var(--border);box-shadow:0 4px 10px rgba(16,24,40,0.04)} .muted{color:var(--muted);margin:0;font-size:13px} .small{font-size:12px} .big{font-size:28px;margin:6px 0 0;font-weight:800;color:var(--accent-2)} .masa-list button{display:block;width:100%;text-align:left;padding:10px;border-radius:10px;margin-bottom:8px;border:1px solid transparent;background:#fff;font-weight:700} .masa-list button.active{outline:3px solid rgba(0,0,0,0.06);background:linear-gradient(180deg,#fff,#fafafa)} .porciones-control{display:flex;align-items:center;justify-content:center;gap:16px} .circle{width:44px;height:44px;border-radius:50%;border:0;background:#111827;color:#fff;font-size:20px;font-weight:700;cursor:pointer} .porciones-count{font-size:26px;font-weight:800;color:var(--accent-2)} .ingredientes-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:420px;overflow:auto;padding-top:8px} .ingrediente{padding:10px;border-radius:10px;text-align:center;cursor:grab;user-select:none;font-weight:700;border:1px solid var(--border);background:#fff} .ingrediente.disabled{opacity:0.5;cursor:not-allowed} .center-area{display:flex;flex-direction:column;align-items:center;gap:14px} .pizza-drop{width:320px;height:320px;border-radius:50%;border:10px solid #e5e7eb;background:linear-gradient(180deg,#fff,#f6f7f8);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 10px 30px rgba(16,24,40,0.06)} .pizza-center-text{color:var(--muted);text-align:center;font-weight:800;opacity:0.6} .center-actions{display:flex;gap:10px;align-items:center} .btn{padding:10px 14px;border-radius:10px;border:0;font-weight:800;cursor:pointer} .btn.secondary{background:#fff;border:1px solid var(--border)} .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px} .nutri-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px} .nutri-item{display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,0.02);padding:10px;border-radius:8px;font-weight:700} .selected-ingredients{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto;padding-top:8px} .selected-row{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:#fff;border:1px solid var(--border);cursor:pointer} .selected-row:hover{background:var(--glass)} .masa-info-box{padding:12px;border-radius:10px;text-align:center;background:#fff;border:1px solid var(--border)} .masa-nombre{font-weight:800;font-size:18px} .footer{padding:14px 24px;border-top:1px solid var(--border);text-align:center;color:var(--muted)} /* small screens */ @media (max-width: 980px){ .main-grid{grid-template-columns:1fr; padding:16px; gap:14px} .header{padding:12px} .pizza-drop{width:260px;height:260px} .cart-btn{padding:8px 10px;font-size:14px} .panel.right-panel{order:3} } /* very small phones */ @media (max-width:420px){ .pizza-drop{width:220px;height:220px} .masa-list button{padding:8px;font-size:14px} .ingrediente{font-size:13px;padding:8px} }

top of page

Esta página web se diseñó con la plataforma

.com

. Crea tu página web hoy.Comienza ya

bottom of page

Arrastra aquí ingredientes

/* script.js - Lógica del personalizador (sin frameworks) */ // --- Datos (copiados y adaptados del original) --- const masas = { clasica: { nombre: 'Masa Clásica', caloriasPorPizza: 120, proteina: 4, carbs: 22, grasa: 1.5, color: '#EDEDED' }, integral: { nombre: 'Masa Integral', caloriasPorPizza: 110, proteina: 5, carbs: 20, grasa: 1, color: '#E6E0D6' }, delgada: { nombre: 'Masa Delgada', caloriasPorPizza: 80, proteina: 3, carbs: 15, grasa: 0.8, color: '#F7F7F7' }, gruesa: { nombre: 'Masa Gruesa', caloriasPorPizza: 160, proteina: 5, carbs: 28, grasa: 2.5, color: '#E4DCCF' }, rellena: { nombre: 'Masa Rellena de Queso', caloriasPorPizza: 180, proteina: 8, carbs: 24, grasa: 6, color: '#EAD9C9' }, }; const todosIngredientes = { 'salsa-tomate': { nombre: 'Salsa de Tomate', calorias: 15, proteina: 0.5, carbs: 3, grasa: 0.1, emoji: '🍅' }, 'queso-mozarella': { nombre: 'Queso Mozarella', calorias: 85, proteina: 6, carbs: 1, grasa: 7, emoji: '🧀' }, 'pepperoni': { nombre: 'Pepperoni', calorias: 65, proteina: 3, carbs: 0.5, grasa: 6, emoji: '🌶️' }, 'jamon': { nombre: 'Jamón', calorias: 50, proteina: 6, carbs: 0.3, grasa: 2.5, emoji: '🍖' }, 'champinones': { nombre: 'Champiñones', calorias: 10, proteina: 1, carbs: 1.5, grasa: 0.1, emoji: '🍄' }, 'cebolla': { nombre: 'Cebolla', calorias: 8, proteina: 0.3, carbs: 2, grasa: 0, emoji: '🧅' }, 'pimiento': { nombre: 'Pimiento', calorias: 12, proteina: 0.4, carbs: 2.5, grasa: 0.1, emoji: '🫑' }, 'aceitunas': { nombre: 'Aceitunas', calorias: 35, proteina: 0.3, carbs: 1, grasa: 3.5, emoji: '🫒' }, 'pina': { nombre: 'Piña', calorias: 20, proteina: 0.2, carbs: 5, grasa: 0, emoji: '🍍' }, 'queso-azul': { nombre: 'Queso Azul', calorias: 95, proteina: 6, carbs: 0.5, grasa: 8, emoji: '🧀' }, 'tomate-fresco': { nombre: 'Tomate', calorias: 8, proteina: 0.3, carbs: 1.5, grasa: 0, emoji: '🍅' }, 'albahaca': { nombre: 'Albahaca', calorias: 2, proteina: 0.2, carbs: 0.3, grasa: 0, emoji: '🌿' }, 'ajo': { nombre: 'Ajo', calorias: 8, proteina: 0.3, carbs: 1.8, grasa: 0, emoji: '🧄' }, 'bacon': { nombre: 'Bacon', calorias: 80, proteina: 5, carbs: 0.2, grasa: 7, emoji: '🥓' }, 'ricota': { nombre: 'Ricota', calorias: 40, proteina: 7, carbs: 2, grasa: 1.5, emoji: '🥛' } }; // --- Estado local --- let masaSeleccionada = 'clasica'; let porciones = 8; let ingredientesEnPizza = []; // array of ids // --- Elementos DOM --- const masaListEl = document.getElementById('masa-list'); const ingredientesListEl = document.getElementById('ingredientes-list'); const pizzaDropEl = document.getElementById('pizza-drop'); const selectedIngredientsEl = document.getElementById('selected-ingredients'); const totalCaloriasEl = document.getElementById('total-calorias'); const proteinasEl = document.getElementById('proteinas'); const carbsEl = document.getElementById('carbs'); const grasasEl = document.getElementById('grasas'); const porcionesCountEl = document.getElementById('porciones-count'); const porDecreaseBtn = document.getElementById('por-decrease'); const porIncreaseBtn = document.getElementById('por-increase'); const clearBtn = document.getElementById('clear-pizza'); const masaNombreEl = document.getElementById('masa-nombre'); const masaCalEl = document.getElementById('masa-cal'); const pizzaCenterText = document.getElementById('pizza-center-text'); const gotoCartBtn = document.getElementById('goto-cart'); // Set Wix cart link provided by user gotoCartBtn.href = 'https://pizzzas360.wixsite.com/pizzeria/cart-page?appSectionParams=%7B%22origin%22%3A%22cart-icon%22%7D'; // --- Inicializar UI --- function init(){ renderMasaOptions(); renderIngredientesList(); renderSelected(); updateNutritionUI(); attachDragEvents(); } function renderMasaOptions(){ masaListEl.innerHTML = ''; Object.entries(masas).forEach(([key, m]) => { const btn = document.createElement('button'); btn.textContent = m.nombre; btn.className = key === masaSeleccionada ? 'active' : ''; btn.addEventListener('click', ()=>{ masaSeleccionada = key; document.querySelectorAll('#masa-list button').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); updateNutritionUI(); updateMasaInfo(); updatePizzaBg(); }); masaListEl.appendChild(btn); }); updateMasaInfo(); updatePizzaBg(); } function renderIngredientesList(){ ingredientesListEl.innerHTML = ''; Object.entries(todosIngredientes).forEach(([id, ing])=>{ const div = document.createElement('div'); div.className = 'ingrediente'; div.draggable = true; div.dataset.id = id; div.title = ing.nombre; div.innerHTML = `

${ing.emoji}

${ing.nombre}

`; div.addEventListener('dragstart', (e)=>{ e.dataTransfer.setData('text/plain', id); e.dataTransfer.effectAllowed = 'copy'; }); div.addEventListener('click', ()=>{ // toggle ingredient add/remove if(!ingredientesEnPizza.includes(id)){ ingredientesEnPizza.push(id); } else { ingredientesEnPizza = ingredientesEnPizza.filter(x=>x!==id); } renderSelected(); updateNutritionUI(); }); ingredientesListEl.appendChild(div); }); } function attachDragEvents(){ pizzaDropEl.addEventListener('dragover', (e)=>{ e.preventDefault(); pizzaDropEl.classList.add('drop-over'); }); pizzaDropEl.addEventListener('dragleave', ()=>{ pizzaDropEl.classList.remove('drop-over'); }); pizzaDropEl.addEventListener('drop', (e)=>{ e.preventDefault(); pizzaDropEl.classList.remove('drop-over'); const id = e.dataTransfer.getData('text/plain'); if(id && todosIngredientes[id] && !ingredientesEnPizza.includes(id)){ ingredientesEnPizza.push(id); renderSelected(); updateNutritionUI(); } }); } function renderSelected(){ selectedIngredientsEl.innerHTML = ''; if(ingredientesEnPizza.length === 0){ selectedIngredientsEl.innerHTML = '

Arrastra ingredientes...

'; pizzaCenterText.style.display = 'block'; } else { pizzaCenterText.style.display = 'none'; ingredientesEnPizza.forEach(id=>{ const ing = todosIngredientes[id]; const row = document.createElement('div'); row.className = 'selected-row'; row.innerHTML = `

${ing.emoji}

${ing.nombre}

${ing.calorias} kcal

`; row.addEventListener('click', ()=>{ ingredientesEnPizza = ingredientesEnPizza.filter(x=>x!==id); renderSelected(); updateNutritionUI(); }); selectedIngredientsEl.appendChild(row); }); } // Also update visual small emojis on pizza area for fun updatePizzaVisual(); } function updatePizzaVisual(){ // Remove previous ingredient nodes // Keep only center text and dynamically add emoji elements // Clear existing emoji nodes Array.from(pizzaDropEl.querySelectorAll('.pizza-emoji')).forEach(n=>n.remove()); ingredientesEnPizza.forEach((id, idx)=>{ const ing = todosIngredientes[id]; const span = document.createElement('div'); span.className = 'pizza-emoji'; span.style.position = 'absolute'; // position them in approx circular layout const angle = (idx * 360 / ingredientesEnPizza.length) + Math.random()*20; const radius = 60 + Math.random()*50; const x = Math.cos(angle * Math.PI/180) * radius; const y = Math.sin(angle * Math.PI/180) * radius; span.style.left = `calc(50% + ${x}px)`; span.style.top = `calc(50% + ${y}px)`; span.style.transform = 'translate(-50%,-50%)'; span.style.fontSize = '30px'; span.style.cursor = 'pointer'; span.title = 'Haz clic para remover'; span.textContent = ing.emoji; span.addEventListener('click', ()=>{ ingredientesEnPizza = ingredientesEnPizza.filter(x=>x!==id); renderSelected(); updateNutritionUI(); }); pizzaDropEl.appendChild(span); }); } function calculateTotals(){ const masa = masas[masaSeleccionada]; let totalCalorias = masa.caloriasPorPizza; let totalProteina = masa.proteina; let totalCarbs = masa.carbs; let totalGrasa = masa.grasa; ingredientesEnPizza.forEach(id=>{ const ing = todosIngredientes[id]; if(ing){ totalCalorias += ing.calorias; totalProteina += ing.proteina; totalCarbs += ing.carbs; totalGrasa += ing.grasa; } }); // Whole pizza totals const whole = { calorias: Math.round(totalCalorias), proteina: Math.round(totalProteina * 10)/10, carbs: Math.round(totalCarbs * 10)/10, grasa: Math.round(totalGrasa * 10)/10 }; const perPortion = { calorias: Math.round(whole.calorias / Math.max(1, porciones)), proteina: Math.round((whole.proteina / Math.max(1, porciones)) * 10)/10, carbs: Math.round((whole.carbs / Math.max(1, porciones)) * 10)/10, grasa: Math.round((whole.grasa / Math.max(1, porciones)) * 10)/10 }; return { whole, perPortion }; } function updateNutritionUI(){ const totals = calculateTotals(); totalCaloriasEl.textContent = `${totals.whole.calorias} kcal`; proteinasEl.textContent = `${totals.perPortion.proteina} g`; carbsEl.textContent = `${totals.perPortion.carbs} g`; grasasEl.textContent = `${totals.perPortion.grasa} g`; document.getElementById('cal-por-porcion').textContent = `${totals.perPortion.calorias} kcal`; porcionesCountEl.textContent = porciones; masaNombreEl.textContent = masas[masaSeleccionada].nombre; masaCalEl.textContent = `${masas[masaSeleccionada].caloriasPorPizza} kcal base`; } function updateMasaInfo(){ masaNombreEl.textContent = masas[masaSeleccionada].nombre; masaCalEl.textContent = `${masas[masaSeleccionada].caloriasPorPizza} kcal base`; } function updatePizzaBg(){ const color = masas[masaSeleccionada].color || '#fff'; pizzaDropEl.style.background = `linear-gradient(180deg, ${color}, #f8f8f8)`; } // --- Porciones buttons --- porDecreaseBtn.addEventListener('click', ()=>{ porciones = Math.max(1, porciones - 1); updateNutritionUI(); }); porIncreaseBtn.addEventListener('click', ()=>{ porciones = porciones + 1; updateNutritionUI(); }); // Clear pizza clearBtn.addEventListener('click', ()=>{ ingredientesEnPizza = []; renderSelected(); updateNutritionUI(); }); function agregarAlCarrito(precio, nombrePizza) { // Aquí usamos el enlace del carrito de Wix const carritoURL = "https://pizzzas360.wixsite.com/pizzeria/cart-page?appSectionParams=%7B%22origin%22%3A%22cart-icon%22%7D"; // Guardamos el precio temporalmente localStorage.setItem("pizzaPrecio", precio); localStorage.setItem("pizzaNombre", nombrePizza); // Redirigir al carrito window.location.href = carritoURL; } // Init run init();