DummyJSON-API-Test/index.html at main · Final-Year-Project-Kec/DummyJSON-API-Test · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce Store - GraphQL</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <div class="header-content">
                <h1>🛍️ Store</h1>
                <div class="header-actions">
                    <input type="text" id="searchInput" placeholder="Search products..." class="search-bar">
                    <button class="cart-btn" id="cartBtn">
                        🛒 Cart <span class="cart-count">0</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- Category Filter -->
        <section class="filters">
            <div class="filter-container">
                <label>Filter by Category:</label>
                <select id="categoryFilter">
                    <option value="">All Categories</option>
                </select>
                <span class="filter-info">Showing all products</span>
            </div>
        </section>

        <!-- Main Content -->
        <main class="main">
            <!-- Products Grid -->
            <div class="products-container">
                <div class="products-grid" id="productsGrid">
                    <!-- Products will be loaded here -->
                </div>
                <div class="loading" id="loading">Loading products...</div>
            </div>

            <!-- Cart Sidebar -->
            <aside class="cart-sidebar" id="cartSidebar">
                <div class="cart-header">
                    <h2>Shopping Cart</h2>
                    <button class="close-cart" id="closeCart">✕</button>
                </div>
                <div class="cart-items" id="cartItems">
                    <!-- Cart items will be displayed here -->
                </div>
                <div class="cart-footer">
                    <div class="cart-total">
                        <strong>Total:</strong>
                        <span id="cartTotal">$0.00</span>
                    </div>
                    <button class="checkout-btn">Checkout</button>
                    <button class="clear-cart-btn" id="clearCartBtn">Clear Cart</button>
                </div>
            </aside>
        </main>

        <!-- Product Modal -->
        <div class="modal" id="productModal">
            <div class="modal-content">
                <button class="modal-close" id="closeModal">✕</button>
                <div class="modal-body">
                    <img id="modalImage" src="" alt="Product" class="modal-image">
                    <div class="modal-info">
                        <h2 id="modalTitle"></h2>
                        <p class="modal-category" id="modalCategory"></p>
                        <p class="modal-description" id="modalDescription"></p>
                        <div class="modal-rating">
                            <span id="modalRating">★★★★☆</span>
                            <span id="modalCount">(0 reviews)</span>
                        </div>
                        <div class="modal-price">
                            <h3 id="modalPrice">$0.00</h3>
                        </div>
                        <div class="modal-actions">
                            <input type="number" id="modalQuantity" min="1" max="10" value="1" class="quantity-input">
                            <button class="add-to-cart-btn" id="modalAddToCart">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>