Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29
test-space
File size: 3,569 Bytes 
803aaea
5cc830e
803aaea
5cc830e
 
f282b32
 
 
19a1ee1
803aaea
19d2497
f282b32
 
 
 
 
 
 
 
ffcde35
5cc830e
 
f282b32
 
 
19a1ee1
 
 
0894d9b
f282b32
19a1ee1
0894d9b
19a1ee1
 
0894d9b
19a1ee1
 
 
 
 
 
ffcde35
c821e69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ffcde35
 
 
 
 
 
 
 
c821e69
f282b32
c821e69
 
f282b32
c821e69
 
19d2497
cc0a382
 
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
 
<!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>