Spaces:

KingNish
/

test-space

Running

App Files Files Community

test-space / index.html

KingNish

Implement product page, cart, and checkout functionality with icons and animations (#28)

c821e69 verified 6 months ago

raw

history blame contribute delete

3.57 kB

	<!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> 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>© 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>