LoveShop - Ecommerce Simulation

❤ LoveShop ❤

Fall in love with shopping!

Featured Products

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;400&display=swap'); :root { --primary: #ff4b7d; --secondary: #fff0f6; --accent: #ffb6d5; --text: #2d2d2d; --card: #fff; --shadow: 0 4px 24px 0 rgba(255, 75, 125, 0.12); } html, body { height: 100%; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; background: var(--secondary); color: var(--text); overflow-x: hidden; } .background-3d { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } header { text-align: center; margin-top: 2rem; z-index: 2; position: relative; } .love-heart { color: var(--primary); font-size: 2rem; vertical-align: middle; animation: pulse 1.2s infinite alternate; } @keyframes pulse { 0% { transform: scale(1);} 100% { transform: scale(1.2);} } .subtitle { color: var(--primary); font-size: 1.2rem; margin-top: 0.5rem; letter-spacing: 1px; } main { display: flex; justify-content: center; align-items: flex-start; gap: 3rem; margin: 3rem auto; max-width: 1200px; z-index: 2; position: relative; } .products-section { flex: 2; background: var(--card); border-radius: 1.5rem; box-shadow: var(--shadow); padding: 2rem; min-width: 350px; } .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-top: 1.5rem; } .product-card { background: var(--secondary); border-radius: 1rem; box-shadow: 0 2px 12px 0 rgba(255, 75, 125, 0.08); padding: 1.2rem; text-align: center; transition: transform 0.15s; position: relative; overflow: hidden; } .product-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 6px 24px 0 rgba(255, 75, 125, 0.18); } .product-img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 1rem; filter: drop-shadow(0 2px 8px var(--accent)); border-radius: 50%; background: #fff; padding: 0.5rem; } .product-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; } .product-price { color: var(--primary); font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; } .add-btn { background: var(--primary); color: #fff; border: none; border-radius: 2rem; padding: 0.5rem 1.2rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s; box-shadow: 0 2px 8px 0 rgba(255, 75, 125, 0.12); } .add-btn:hover { background: #e13a6a; } .cart-section { flex: 1; background: var(--card); border-radius: 1.5rem; box-shadow: var(--shadow); padding: 2rem 1.5rem; min-width: 300px; position: sticky; top: 2rem; z-index: 2; } #cart-items { min-height: 80px; margin-bottom: 1rem; } .cart-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; font-size: 1rem; border-bottom: 1px dashed var(--accent); padding-bottom: 0.3rem; } .cart-item-title { flex: 2; } .cart-item-qty { flex: 1; text-align: center; } .cart-item-price { flex: 1; text-align: right; color: var(--primary); font-weight: 700; } .cart-total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 700; margin-bottom: 1.2rem; color: var(--primary); } .print-btn { width: 100%; background: var(--primary); color: #fff; border: none; border-radius: 2rem; padding: 0.7rem 0; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background 0.2s; box-shadow: 0 2px 8px 0 rgba(255, 75, 125, 0.12); } .print-btn:disabled { background: #ffd1e3; color: #fff; cursor: not-allowed; } /* Modal for receipt */ .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(255, 75, 125, 0.12); align-items: center; justify-content: center; } .modal.show { display: flex; } .modal-content { background: #fff; border-radius: 1rem; padding: 2rem 2.5rem; box-shadow: 0 8px 32px 0 rgba(255, 75, 125, 0.18); min-width: 320px; max-width: 90vw; text-align: center; position: relative; animation: popin 0.3s; } @keyframes popin { 0% { transform: scale(0.7);} 100% { transform: scale(1);} } .receipt-title { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; } .receipt-items { margin-bottom: 1rem; text-align: left; } .receipt-item { display: flex; justify-content: space-between; margin-bottom: 0.3rem; } .receipt-total { font-weight: 700; color: var(--primary); font-size: 1.1rem; margin-bottom: 1.2rem; text-align: right; } .close-btn { background: var(--primary); color: #fff; border: none; border-radius: 1rem; padding: 0.4rem 1.2rem; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 1rem; transition: background 0.2s; } .close-btn:hover { background: #e13a6a; } @media (max-width: 900px) { main { flex-direction: column; align-items: stretch; gap: 2rem; margin: 2rem 1rem; } .products-section, .cart-section { min-width: unset; } } // --- 3D Hearts Animation --- function randomBetween(a, b) { return a + Math.random() * (b - a); } class Heart { constructor(width, height) { this.reset(width, height); } reset(width, height) { this.x = randomBetween(0, width); this.y = randomBetween(-40, height * 0.2); this.size = randomBetween(18, 36); this.speed = randomBetween(0.7, 1.7); this.amp = randomBetween(10, 40); this.phase = randomBetween(0, Math.PI * 2); this.color = `rgba(255,75,125,${randomBetween(0.5,0.9)})`; } update(width, height) { this.y += this.speed; this.x += Math.sin(this.y / 30 + this.phase) * 0.7; if (this.y > height + 40) this.reset(width, height); } draw(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.scale(this.size / 32, this.size / 32); ctx.beginPath(); ctx.moveTo(16, 29); ctx.bezierCurveTo(7, 29, 0, 22, 0, 13); ctx.bezierCurveTo(0, 6, 6, 0, 13, 0); ctx.bezierCurveTo(16, 0, 19, 2, 20, 5); ctx.bezierCurveTo(21, 2, 24, 0, 27, 0); ctx.bezierCurveTo(34, 0, 40, 6, 40, 13); ctx.bezierCurveTo(40, 22, 33, 29, 24, 29); ctx.lineTo(16, 29); ctx.closePath(); ctx.fillStyle = this.color; ctx.shadowColor = "#ffb6d5"; ctx.shadowBlur = 8; ctx.fill(); ctx.restore(); } } function startHeartsAnimation() { const canvas = document.getElementById('hearts-canvas'); const ctx = canvas.getContext('2d'); let width = window.innerWidth, height = window.innerHeight; canvas.width = width; canvas.height = height; let hearts = Array.from({length: 24}, () => new Heart(width, height)); function resize() { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; hearts.forEach(h => h.reset(width, height)); } window.addEventListener('resize', resize); function animate() { ctx.clearRect(0, 0, width, height); for (let h of hearts) { h.update(width, height); h.draw(ctx); } requestAnimationFrame(animate); } animate(); } startHeartsAnimation(); // --- Product Data --- const PRODUCTS = [ { id: 1, title: "Love Mug", price: 12.99, img: "https://cdn.pixabay.com/photo/2016/03/23/17/45/coffee-1276778_1280.png" }, { id: 2, title: "Heart Pillow", price: 24.99, img: "https://cdn.pixabay.com/photo/2017/01/31/13/14/valentines-day-2028241_1280.png" }, { id: 3, title: "Rose Bouquet", price: 19.99, img: "https://cdn.pixabay.com/photo/2016/03/05/19/02/abstract-1238247_1280.jpg" }, { id: 4, title: "Chocolate Box", price: 15.49, img: "https://cdn.pixabay.com/photo/2014/12/21/23/50/chocolate-579437_1280.png" }, { id: 5, title: "Love Letter", price: 6.99, img: "https://cdn.pixabay.com/photo/2013/07/12/13/57/love-letter-147399_1280.png" }, { id: 6, title: "Teddy Bear", price: 29.99, img: "https://cdn.pixabay.com/photo/2013/07/12/13/57/teddy-bear-147393_1280.png" } ]; // --- Cart Logic --- let cart = {}; function renderProducts() { const productsDiv = document.getElementById('products'); productsDiv.innerHTML = ''; for (let p of PRODUCTS) { const card = document.createElement('div'); card.className = 'product-card'; card.innerHTML = `

${p.title}

$${p.price.toFixed(2)}

`; productsDiv.appendChild(card); } productsDiv.querySelectorAll('.add-btn').forEach(btn => { btn.addEventListener('click', () => { addToCart(parseInt(btn.dataset.id)); }); }); } function addToCart(productId) { if (!cart[productId]) cart[productId] = 0; cart[productId]++; renderCart(); } function renderCart() { const cartDiv = document.getElementById('cart-items'); cartDiv.innerHTML = ''; let total = 0; let hasItems = false; for (let id in cart) { if (cart[id] > 0) { hasItems = true; const prod = PRODUCTS.find(p => p.id == id); const itemTotal = prod.price * cart[id]; total += itemTotal; const itemDiv = document.createElement('div'); itemDiv.className = 'cart-item'; itemDiv.innerHTML = ` ${prod.title} x${cart[id]} $${itemTotal.toFixed(2)} `; cartDiv.appendChild(itemDiv); } } document.getElementById('cart-total').textContent = `$${total.toFixed(2)}`; document.getElementById('print-receipt').disabled = !hasItems; } // --- Receipt Modal and Printing --- function showReceipt() { const modal = document.getElementById('receipt-modal'); const content = document.getElementById('receipt-content'); let date = new Date(); let receiptHTML = `

❤ LoveShop Receipt ❤

${date.toLocaleString()}

`; let total = 0; for (let id in cart) { if (cart[id] > 0) { const prod = PRODUCTS.find(p => p.id == id); const itemTotal = prod.price * cart[id]; total += itemTotal; receiptHTML += `

${prod.title} x${cart[id]} $${itemTotal.toFixed(2)}

`; } } receiptHTML += `

Total: $${total.toFixed(2)}

`; content.innerHTML = receiptHTML; modal.classList.add('show'); document.getElementById('close-receipt').onclick = () => modal.classList.remove('show'); document.getElementById('print-only').onclick = () => { printReceiptContent(content.innerHTML); }; } function printReceiptContent(html) { const win = window.open('', '', 'width=400,height=600'); win.document.write(` LoveShop Receipt ${html.replace(//g, '')} `); win.document.close(); win.focus(); win.print(); setTimeout(() => win.close(), 500); } // --- Event Listeners --- document.getElementById('print-receipt').addEventListener('click', showReceipt); // --- Initial Render --- renderProducts(); renderCart(); // --- Modal close on outside click --- document.getElementById('receipt-modal').addEventListener('click', (e) => { if (e.target === e.currentTarget) { e.currentTarget.classList.remove('show'); } });