Spaces:
Running
Running
File size: 7,138 Bytes
f2efb9e 5cc830e f282b32 19a1ee1 5cc830e f282b32 5cc830e f282b32 5cc830e f282b32 19a1ee1 0894d9b 19a1ee1 0894d9b 19a1ee1 5cc830e f282b32 f2efb9e 19a1ee1 a99548a 5cc830e f282b32 5cc830e f282b32 a99548a f2efb9e a99548a f2efb9e a99548a f2efb9e a99548a f2efb9e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details - 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">Cart</a>
</div>
</div>
</nav>
<main class="container mx-auto mt-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="image-gallery">
<img src="https://placehold.co/400x400" alt="Product Image 1" class="w-full rounded-md mb-2">
<div class="grid grid-cols-4 gap-2">
<img src="https://placehold.co/100x100" alt="Product Image 2" class="w-full rounded-md">
<img src="https://placehold.co/100x100" alt="Product Image 3" class="w-full rounded-md">
<img src="https://placehold.co/100x100" alt="Product Image 4" class="w-full rounded-md">
<img src="https://placehold.co/100x100" alt="Product Image 5" class="w-full rounded-md">
</div>
</div>
</div>
<div>
<h1 class="text-2xl font-bold" id="productName">Product Title</h1>
<p class="text-gray-600" id="productDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-xl font-semibold" id="productPrice">$99.99</p>
<div class="flex items-center mb-4">
<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>
<button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400 add-to-cart-button" id="addToCartButton"><i class="fas fa-cart-plus"></i> Add to Cart</button>
</div>
</div>
</main>
<footer class="bg-gray-800 p-4 text-white text-center mt-8">
<p>© 2024 Amazon Clone</p>
</footer>
<script src="script.js">
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get("id");
document.addEventListener('DOMContentLoaded', function() {
if (productId) {
const product = products.find(p => p.id === productId);
if (product) {
document.getElementById('productName').textContent = product.name;
document.getElementById('productDescription').textContent = product.description;
document.getElementById('productPrice').textContent = '$' + product.price.toFixed(2);
// Assuming you have an image element with id 'productImage'
// document.getElementById('productImage').src = product.image;
// document.getElementById('productImage').alt = product.name;
} else {
console.error('Product not found with ID:', productId);
document.getElementById('productName').textContent = 'Product Not Found';
}
} else {
console.error('Product ID not provided.');
document.getElementById('productName').textContent = 'Product ID Not Provided';
}
const addToCartButton = document.getElementById('addToCartButton');
if (addToCartButton) {
addToCartButton.addEventListener('click', () => {
if (productId) {
const product = products.find(p => p.id === productId);
if (product) {
addToCart(product);
} else {
console.error('Product not found with ID:', productId);
}
} else {
console.error('Product ID not provided.');
}
});
}
});
</script>
<script src="data.js"></script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get("id");
document.addEventListener('DOMContentLoaded', function() {
const product = products[0];
trackProductView(product.id);
});
</script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get("id");
document.addEventListener('DOMContentLoaded', function() {
trackProductView('product123');
});
</script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get("id");
const productNameElement = document.getElementById('productName');
const productDescriptionElement = document.getElementById('productDescription');
const productPriceElement = document.getElementById('productPrice');
const productImageElement = document.getElementById('productImage');
const addToCartButton = document.getElementById('addToCartButton');
if (products && products.length > 0) {
const product = products[0];
if (productNameElement) productNameElement.textContent = product.name;
if (productDescriptionElement) productDescriptionElement.textContent = product.description;
if (productPriceElement) productPriceElement.textContent = '$' + product.price.toFixed(2);
if (productImageElement) productImageElement.src = product.image;
if (productImageElement) productImageElement.alt = product.name;
} else {
console.error('No products found in data.js');
}
addToCartButton.addEventListener('click', () => {
addToCart(products[0]);
});
</script>
</body>
</html>
|