test-space / index.html
KingNish's picture
Implement product page, cart, and checkout functionality with icons and animations (#28)
c821e69 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon Clone</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav class="bg-gray-800 p-4 text-white">
<div class="container mx-auto flex items-center justify-between">
<a href="/" class="text-2xl font-bold">Amazon</a>
<div class="flex items-center">
<input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
<button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
</div>
<div>
<a href="/cart.html" class="hover:text-yellow-500"><i class="fas fa-shopping-cart"></i>&nbsp;Cart</a>
</div>
</div>
</nav>
<main class="container mx-auto mt-8">
<div class="carousel">
<div class="carousel-item">
<img src="https://placehold.co/800x300" alt="Featured Product 1" class="w-full rounded-md">
</div>
<div class="carousel-item">
<img src="https://placehold.co/800x300" alt="Featured Product 2" class="w-full rounded-md">
</div>
<div class="carousel-item">
<img src="https://placehold.co/800x300" alt="Featured Product 3" class="w-full rounded-md">
</div>
</div>
<section class="product-listing">
<h2 class="text-2xl font-bold mb-4">Products</h2>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
</div>
</section>
</main>
<footer class="bg-gray-800 p-4 text-white text-center mt-8">
<p>&copy; 2024 Amazon Clone</p>
</footer>
<script src="script.js"></script>
<script type="module">
import { products } from './data.js';
const productListing = document.querySelector('.product-listing .grid');
productListing.innerHTML = ''; // Clear existing products
products.forEach(product => {
const productCard = document.createElement('a');
productCard.href = `product.html?id=${product.id}`;
productCard.className = 'product-card';
productCard.innerHTML = `
<img src="${product.image}" alt="${product.name}" class="w-full rounded-md">
<h3 class="text-lg font-semibold">${product.name}</h3>
<p class="text-gray-600">$${product.price.toFixed(2)}</p>
<div class="flex items-center">
<i class="fas fa-star text-yellow-500"></i>
<i class="fas fa-star text-yellow-500"></i>
<i class="fas fa-star text-yellow-500"></i>
<i class="fas fa-star text-yellow-500"></i>
<i class="fas fa-star-half-alt text-yellow-500"></i>
<span class="text-gray-600 ml-2">4.5</span>
</div>
`;
productListing.appendChild(productCard);
});
updateCartIcon();
</script>
</body>
</html>