Mobile Accessories Shop

:root { --bg: #f5f7fb; --card: #ffffff; --muted: #6b7280; --accent: #0f172a; --primary: #0ea5e9; --success: #10b981; --danger: #ef4444; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: var(--accent); -webkit-font-smoothing:antialiased; } .app-header { display: flex; gap: 12px; align-items: center; padding: 12px; background: linear-gradient(90deg, #fff, #fbfbfe); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #eee; } .brand { font-weight: 800; font-size: 18px; color: var(--primary); padding-left: 6px; } .search-wrap { flex: 1; } #search { width: 100%; padding: 10px 12px; border-radius: 999px; border: 1px solid #e6e6ee; background: #fff; outline: none; font-size: 14px; } .categories { display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: linear-gradient(90deg, #fff, #fbfbfe); border-bottom: 1px solid #eee; } .category-btn { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; border: 1px solid transparent; background: #fff; cursor: pointer; font-weight: 700; color: var(--muted); } .category-btn.active { border-color: rgba(14,165,233,0.14); box-shadow: 0 2px 8px rgba(14,165,233,0.08); color: var(--primary); } .container { padding: 12px; padding-bottom: 96px; /* leave space for bottom bar */ max-width: 980px; margin: 0 auto; } .products-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .product { display: flex; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px; align-items: center; box-shadow: 0 1px 4px rgba(2,6,23,0.04); } .product-media { width: 78px; height: 78px; border-radius: 12px; flex: 0 0 78px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; } .product-body { flex: 1; display: flex; flex-direction: column; gap: 6px; } .product-title { font-size: 16px; font-weight: 700; } .product-desc { font-size: 13px; color: var(--muted); } .product-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .price { font-weight: 800; color: var(--accent); } .btn { background: var(--primary); color: #fff; border: none; padding: 8px 12px; font-size: 14px; border-radius: 8px; cursor: pointer; } .btn.ghost { background: transparent; border: 1px solid #e6e6ee; color: var(--accent); } .bottom-bar { position: fixed; bottom: 12px; left: 12px; right: 12px; display: flex; gap: 8px; justify-content: space-between; background: transparent; z-index: 50; } .nav-btn { flex: 1; padding: 12px; border-radius: 999px; background: #fff; border: 1px solid #e6e6ee; font-weight: 700; cursor: pointer; } .cart-btn { position: relative; } .badge { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; padding: 0 6px; margin-left: 8px; vertical-align: middle; } .cart-modal { position: fixed; inset: 0; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.35); z-index: 60; padding: 12px; } .cart-modal[aria-hidden="false"] { display: flex; } .cart-panel { width: 100%; max-width: 720px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(2,6,23,0.12); } .cart-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #eee; } .close { background: transparent; border: none; font-size: 14px; color: var(--muted); cursor: pointer; padding: 6px 8px; } .cart-items { max-height: 60vh; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .cart-item { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid #f1f1f5; } .cart-item .media { width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; } .cart-item .meta { flex: 1; display: flex; flex-direction: column; } .qty-controls { display: flex; gap: 6px; align-items: center; } .qty-controls button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e6e6ee; background: #fff; cursor: pointer; font-weight: 700; } .cart-footer { padding: 12px; border-top: 1px solid #eee; display: flex; gap: 12px; align-items: center; justify-content: space-between; } .total { display: flex; flex-direction: column; gap: 4px; } .checkout { background: var(--success); color: #fff; padding: 10px 14px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; } @media (min-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .products-grid { grid-template-columns: repeat(3, 1fr); } .bottom-bar { left: auto; right: 24px; width: 420px; } } export const products = [ { id: 'case-01', title: 'Clear Guard Case', desc: 'Slim transparent case for iPhone and Android', price: 12.99, color: '#0ea5e9', category: 'Cases' }, { id: 'case-02', title: 'Rugged Armor Case', desc: 'Heavy duty drop protection', price: 24.99, color: '#0f172a', category: 'Cases' }, { id: 'charger-01', title: '20W USB-C Charger', desc: 'Fast charge brick', price: 18.99, color: '#10b981', category: 'Chargers' }, { id: 'cable-01', title: 'Braided USB-C Cable', desc: 'Durable 1.5m cable', price: 9.99, color: '#f97316', category: 'Cables' }, { id: 'pb-01', title: '10,000mAh Power Bank', desc: 'Compact external battery', price: 29.99, color: '#6366f1', category: 'Power Banks' }, { id: 'charger-02', title: 'Wireless Charger Pad', desc: 'Qi fast wireless charging', price: 21.99, color: '#ef4444', category: 'Chargers' }, { id: 'ear-01', title: 'True Wireless Earbuds', desc: 'Bluetooth earbuds with mic', price: 49.99, color: '#3b82f6', category: 'Audio' }, { id: 'protector-01', title: 'Tempered Glass Protector', desc: '9H hardness screen protector', price: 6.99, color: '#94a3b8', category: 'Protection' }, { id: 'mount-01', title: 'Magnetic Car Mount', desc: 'Secure phone mount for cars', price: 14.99, color: '#f59e0b', category: 'Mounts' }, { id: 'stand-01', title: 'Foldable Phone Stand', desc: 'Portable adjustable stand', price: 11.99, color: '#0ea5e9', category: 'Stands' } ]; const STORAGE_KEY = 'mobile-accessories-cart-v1'; class CartManager extends EventTarget { constructor() { super(); this.items = {}; this.load(); } load() { try { const raw = localStorage.getItem(STORAGE_KEY); this.items = raw ? JSON.parse(raw) : {}; } catch (e) { this.items = {}; } this._emit(); } save() { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(this.items)); } catch (e) {} this._emit(); } _emit() { this.dispatchEvent(new CustomEvent('change', { detail: { items: this.items } })); } add(id, qty = 1) { this.items[id] = (this.items[id] || 0) + qty; if (this.items[id] <= 0) delete this.items[id]; this.save(); } set(id, qty) { if (qty <= 0) { delete this.items[id]; } else { this.items[id] = qty; } this.save(); } remove(id) { delete this.items[id]; this.save(); } clear() { this.items = {}; this.save(); } getItems() { return { ...this.items }; } } export const Cart = new CartManager(); import { products } from './products.js'; import { Cart } from './cart.js'; function formatPrice(n) { return '$' + n.toFixed(2); } function findProduct(id) { return products.find(p => p.id === id); } // Build category list from products export function renderCategories(container) { const cats = ['All', ...Array.from(new Set(products.map(p => p.category)))]; container.innerHTML = ''; cats.forEach(c => { const btn = document.createElement('button'); btn.className = 'category-btn'; btn.textContent = c; btn.dataset.category = c; if (c === 'All') btn.classList.add('active'); container.appendChild(btn); }); } // Render product grid with optional category and query export function renderProducts(container, { category = 'All', query = '' } = {}) { container.innerHTML = ''; const q = query.trim().toLowerCase(); let list = products.slice(); if (category && category !== 'All') { list = list.filter(p => p.category === category); } if (q) { list = list.filter(p => (p.title + ' ' + p.desc + ' ' + p.category).toLowerCase().includes(q)); } if (list.length === 0) { container.innerHTML = '

No products found.

'; return; } list.forEach(p => { const card = document.createElement('article'); card.className = 'product'; card.innerHTML = `

${p.title.split(' ').map(w=>w[0]).slice(0,2).join('')}

${p.title}

${p.desc}

${formatPrice(p.price)}

`; container.appendChild(card); }); } // Cart rendering export function renderCart(panelItemsContainer) { const items = Cart.getItems(); panelItemsContainer.innerHTML = ''; const ids = Object.keys(items); if (ids.length === 0) { panelItemsContainer.innerHTML = '

Your cart is empty.

'; updateCartTotal(); return; } ids.forEach(id => { const qty = items[id]; const p = findProduct(id); if (!p) return; const node = document.createElement('div'); node.className = 'cart-item'; node.innerHTML = `

${p.title.split(' ').map(w=>w[0]).slice(0,2).join('')}

${p.title}

${formatPrice(p.price * qty)}

${qty}

`; panelItemsContainer.appendChild(node); }); updateCartTotal(); } export function updateCartTotal() { const totalEl = document.getElementById('cartTotal'); const cartCountEl = document.getElementById('cartCount'); const items = Cart.getItems(); let total = 0; let count = 0; for (const id in items) { const p = findProduct(id); if (!p) continue; total += p.price * items[id]; count += items[id]; } if (totalEl) totalEl.textContent = formatPrice(total); if (cartCountEl) cartCountEl.textContent = String(count); } // UI wiring export function bindUI(state = { category: 'All', query: '' }) { const productsContainer = document.getElementById('products'); const categoriesContainer = document.getElementById('categories'); const searchInput = document.getElementById('search'); // Category click categoriesContainer.addEventListener('click', (e) => { const btn = e.target.closest('.category-btn'); if (!btn) return; categoriesContainer.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); state.category = btn.dataset.category; renderProducts(productsContainer, state); }); // Add product to cart (delegation) productsContainer.addEventListener('click', (e) => { const add = e.target.closest('.add'); if (add) { const id = add.dataset.id; Cart.add(id, 1); // quick feedback add.textContent = 'Added'; setTimeout(() => { add.textContent = 'Add'; }, 700); } }); // Bottom nav: cart open document.getElementById('cartBtn').addEventListener('click', () => { openCart(); }); // Cart panel buttons (delegation) const cartPanel = document.getElementById('cartItems'); cartPanel.addEventListener('click', (e) => { const inc = e.target.closest('.inc'); const dec = e.target.closest('.dec'); const rem = e.target.closest('.remove'); if (inc) { const id = inc.dataset.id; Cart.add(id, 1); } else if (dec) { const id = dec.dataset.id; Cart.add(id, -1); } else if (rem) { const id = rem.dataset.id; Cart.remove(id); } }); // Close cart document.getElementById('closeCart').addEventListener('click', () => closeCart()); document.getElementById('cartModal').addEventListener('click', (e) => { if (e.target === e.currentTarget) closeCart(); }); // Checkout document.getElementById('checkoutBtn').addEventListener('click', () => { alert('Checkout simulated. Thank you for shopping!'); Cart.clear(); closeCart(); }); // Search input let t; searchInput.addEventListener('input', (e) => { clearTimeout(t); t = setTimeout(() => { state.query = searchInput.value; renderProducts(productsContainer, state); }, 180); }); // Listen cart updates Cart.addEventListener('change', () => { renderCart(document.getElementById('cartItems')); updateCartTotal(); }); } export function openCart() { const modal = document.getElementById('cartModal'); modal.setAttribute('aria-hidden', 'false'); document.getElementById('closeCart').focus(); renderCart(document.getElementById('cartItems')); } export function closeCart() { const modal = document.getElementById('cartModal'); modal.setAttribute('aria-hidden', 'true'); } import { renderCategories, renderProducts, bindUI, updateCartTotal } from './ui.js'; import { Cart } from './cart.js'; import { products } from './products.js'; // Initial setup const categoriesContainer = document.getElementById('categories'); const productsContainer = document.getElementById('products'); renderCategories(categoriesContainer); renderProducts(productsContainer, { category: 'All', query: '' }); bindUI({ category: 'All', query: '' }); updateCartTotal(); // Ensure cart state reflects current storage (Cart emits change on load) window.addEventListener('load', () => { // noop - Cart.load already emitted change });