Skip to main content

Posts

Showing posts from February, 2025
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .perspective-1000 { perspective: 1000px; } .transform-style-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } } @layer base { :root { --background: 224 71% 4%; --foreground: 213 31% 91%; --primary: 224 64% 33%; --primary-foreground: 210 40% 98%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --border: 216 34% 17%; --ring: 216 34% 17%; --radius: 0.5rem; } }
// Sample product data (you can replace this with your actual product data) const products = [ { id: 1, name: 'Product 1', price: 19.99, image: 'https://via.placeholder.com/150' }, { id: 2, name: 'Product 2', price: 29.99, image: 'https://via.placeholder.com/150' }, { id: 3, name: 'Product 3', price: 39.99, image: 'https://via.placeholder.com/150' }, // Add more products as needed ]; let cart = []; // Function to render product list function renderProducts() { const productList = document.querySelector('.product-list'); productList.innerHTML = ''; products.forEach(product => { const productElement = document.createElement('div'); productElement.classList.add('product-item'); productElement.innerHTML = ` ${product.name} $${product.price.toFixed(2)} Add to Cart `; productList.appendChild(productElement); }); } // Fu...