maxima/kitchen.html at main · devwhitewizard/maxima · 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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kitchen</title>
  <link rel="stylesheet" href="style.css" />

  <style>
    /* Style for buttons that have been clicked */
    button.added {
      background-color: #4CAF50;
      color: white;
      cursor: default;
    }
  </style>
</head>

<body>

<!-- Header -->
<header class="header">
    <div class="logo">
      <img src="img/Sufurias and lids.jpeg" alt="Logo">
      <h1>Kitchen Essentials</h1>
      <p>High-quality utensils and kitchen appliances.</p>
    </div>

    <div class="search-bar">
      <input type="search" placeholder="Search for an utensils..." />
    </div>
</header>

<!-- Navigation -->
<nav class="navbar">
  <a href="index.html">Home</a>
  <a href="kitchen.html" class="active">Kitchen</a>
  <a href="electronics.html">Electronics</a>
  <a href="motorvehicle.html">Motor Vehicles</a>
  <a href="Bedroom_layout.html">Bedroom Layouts</a>
  <a href="cart.html" class="cart-link">
    <span id="cart-logo">🛒</span>Cart <span id="cart-count" class="cart-count">0</span>
  </a>
</nav>

<!-- Main Section -->
<main class="products">

  <div class="product-card">
    <img src="img/Sufurias and lids.jpeg" alt="Sufuria with Lid">
    <h2>Sufuria and lids</h2>
    <p>Price: $35</p>
    <button data-id="1"
      onclick="addToCart({ id: 1, name: 'Sufuria and lids', price: 35, image: 'img/Sufurias and lids.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

  <div class="product-card">
    <img src="img/Stainless Spoons and Fork.jpeg" alt="Cutlery Set">
    <h2>Stainless Cutlery Set</h2>
    <p><strong>Price:</strong>$13</p>
    <button data-id="2"
      onclick="addToCart({ id: 2, name: 'Stainless Cutlery Set', price: 13, image: 'img/Stainless Spoons and Fork.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

  <div class="product-card">
    <img src="img/Modified blender.jpeg" alt="Blender">
    <h2>HQ Modern Blender</h2>
    <p><strong>Price:</strong>$25</p>
    <button data-id="3"
      onclick="addToCart({ id: 3, name: 'HQ Modern Blender', price: 25, image: 'img/Modified blender.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

  <div class="product-card">
    <img src="img/classic_knifes.jpeg" alt="Knives">
    <h2>Stainless Set Knives</h2>
    <p><strong>Price:</strong>$13</p>
    <button data-id="4"
      onclick="addToCart({ id: 4, name: 'Stainless Set Knives', price: 13, image: 'img/classic_knifes.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

  <div class="product-card">
    <img src="img/design_knife - Copy.jpeg" alt="Cutlery Knives">
    <h2>Stainless Cutlery Knives</h2>
    <p><strong>Price:</strong>$10</p>
    <button data-id="5"
      onclick="addToCart({ id: 5, name: 'Stainless Cutlery Knives', price: 10, image: 'img/design_knife - Copy.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

  <div class="product-card">
    <img src="img/Mordern sufurias.jpeg" alt="Sufurias">
    <h2>Sufurias and Lids</h2>
    <p><strong>Price:</strong>$15</p>
    <button data-id="6"
      onclick="addToCart({ id: 6, name: 'Sufurias and Lids', price: 15, image: 'img/Mordern sufurias.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

  <div class="product-card">
    <img src="img/wooden spoons.jpeg" alt="Spoons">
    <h2>Wooden Spoons</h2>
    <p><strong>Price:</strong>$18</p>
    <button data-id="7"
      onclick="addToCart({ id: 7, name: 'Wooden Spoons', price: 18, image: 'img/wooden spoons.jpeg' }, this)">
      Add to Cart
    </button>
  </div>

</main>

<hr>

<!-- Footer -->
<footer>
  <p>&copy; 2025 Maximall. All rights reserved. | Designed with 💙 by Billy & White Wizard.</p>
</footer>

<!-- ========================= -->
<!--      CART / BUTTON JS     -->
<!-- ========================= -->
<script>

// Add product to cart and instantly update button
function addToCart(product, button) {
    let cart = JSON.parse(localStorage.getItem("cart")) || [];

    // Add item (duplicates allowed)
    cart.push(product);
    localStorage.setItem("cart", JSON.stringify(cart));

    // Update button immediately
    button.textContent = "Added to Cart";
    button.classList.add("added");
    button.disabled = true;

    updateCartCount();
}

// Update cart number
function updateCartCount() {
    let cart = JSON.parse(localStorage.getItem("cart")) || [];
    document.getElementById("cart-count").textContent = cart.length;
}

// On load reset buttons back to Add to Cart
document.addEventListener("DOMContentLoaded", () => {

    // Reset button appearance
    document.querySelectorAll("button[data-id]").forEach(button => {
        button.textContent = "Add to Cart";
        button.classList.remove("added");
        button.disabled = false;
    });

    updateCartCount();
});
</script>
 <script src="Cart.js"></script>
</body>
</html>