maxima/motorvehicle.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Motor Vehicles</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Header -->
  <header class="header">
    <div class="logo">
      <img src="img/BMW M4.jpg" alt="Logo" />
      <h1>Motor Vehicles</h1>
      <p>Our website. Our marketplace. Our goods.</p>
    </div>

    <!-- Search -->
    <div class="search-bar">
      <input type="search" placeholder="Search for Motor Vehicles..." />
    </div>
  </header>

  <!-- Navigation -->
  <nav class="navbar">
    <a href="index.html">Home</a>
    <a href="kitchen.html">Kitchen</a>
    <a href="electronics.html">Electronics</a>
    <a href="motorvehicle.html" class="active">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/Nissan Titan.jpeg" alt="Nissan Titan" />
      <h2>Nissan Titan</h2>
      <p><strong>Price:</strong> $9000<br>Speed: 600 km/hr | Cool engine</p>
      <button data-id="$1" onclick="addToCart({ id: 1, name: 'Nissan Titan', price: 9000, image: 'img/Nissan Titan.jpeg' })">
        Add to Cart
      </button>
    </div>

    <div class="product-card">
      <img src="img/BMW M4.jpg" alt="BMW M4" />
      <h2>BMW M4</h2>
      <p><strong>Price:</strong> $12000<br>Speed: 600 km/hr<br>Cool Engine<br>Petroleum: 300L</p>
      <button data-id="$1" onclick="addToCart({ id: 2, name: 'BMW M4', price: 12000, image: 'img/BMW M4.jpg' })">
        Add to Cart
      </button>
    </div>

    <div class="product-card">
      <img src="img/Porche.jpg" alt="Porsche" />
      <h2>Porsche</h2>
      <p><strong>Price:</strong> $18808<br>Speed: 900 km/hr<br>Cool Engine<br>Petroleum: 400L</p>
      <button data-id="$1" onclick="addToCart({ id: 3, name: 'Porsche', price: 18808, image: 'img/Porche.jpg' })">
        Add to Cart
      </button>
    </div>

    <div class="product-card">
      <img src="img/Rangerover.jpeg" alt="Range Rover" />
      <h2>Range Rover</h2>
      <p><strong>Price:</strong> $11300<br>Speed: 900 km/hr<br>Petroleum: 400L</p>
      <button data-id="$1" onclick="addToCart({ id: 4, name: 'Range Rover', price: 11300, image: 'img/Rangerover.jpeg' })">
        Add to Cart
      </button>
    </div>

    <div class="product-card">
      <img src="img/This Midnight Black TRD Pro trim was brought in to….jpeg" alt="TX 470" />
      <h2>TX 470</h2>
      <p><strong>Price:</strong> $12300<br>Speed: 900 km/hr</p>
      <button data-id="$1" onclick="addToCart({ id: 5, name: 'TX 470', price: 12300, image: 'img/This Midnight Black TRD Pro trim was brought in to….jpeg' })">
        Add to Cart
      </button>
    </div>
  </main>

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

  <script>
    function addToCart(product, button) {
    let cart = JSON.parse(localStorage.getItem("cart")) || [];

    // Add item only once
    if (!cart.some(item => item.id === product.id)) {
        cart.push(product);
        localStorage.setItem("cart", JSON.stringify(cart));
    }

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

    updateCartCount();
}

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

// Reset buttons after page reload
document.addEventListener("DOMContentLoaded", () => {

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

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