Shop-X-Task-3-IP/cart.html at main · RayanBadarCS/Shop-X-Task-3-IP · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Shop-X | Cart</title>
  <link rel="icon" href="assets/images/favicon.png">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
  html { scroll-behavior: smooth; }

  #mobileMenu {
    transition: transform .25s ease, opacity .25s ease, max-height .25s ease;
    overflow: hidden;
  }
  .menu-hidden {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    max-height: 0;
  }
</style>
</head>
<body class="text-gray-800 bg-slate-50">

  <!-- Header -->
  <header class="sticky top-0 z-50 bg-white/90 backdrop-blur shadow">
    <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
      <a href="index.html" class="flex items-center gap-2">
        <img src="assets/images/logo.svg" alt="ShopX" class="h-8 w-8">
        <span class="font-extrabold text-xl">Shop-X</span>
      </a>
      <nav class="hidden md:flex items-center gap-6 font-medium">
        <a href="index.html" class="hover:text-blue-600">Home</a>
        <a href="shop.html" class="hover:text-blue-600">Shop</a>
        <a href="cart.html" class="text-blue-600 font-semibold relative">
          Cart
          <span id="cartCount" class="absolute -right-4 -top-3 bg-black text-white text-xs w-5 h-5 rounded-full grid place-items-center">0</span>
        </a>
      </nav>
      <button id="menuBtn" class="md:hidden text-2xl">☰</button>
    </div>
    <div id="mobileMenu" class="md:hidden menu-hidden border-t bg-white">
      <a class="block px-4 py-3 hover:bg-slate-100" href="index.html">Home</a>
      <a class="block px-4 py-3 hover:bg-slate-100" href="shop.html">Shop</a>
      <a class="block px-4 py-3 hover:bg-slate-100" href="cart.html">Cart</a>
    </div>
  </header>

  <!-- Cart -->
  <section class="max-w-6xl mx-auto px-4 py-12">
    <h1 class="text-2xl font-bold">Your Cart</h1>

    <div id="cartItems" class="mt-6 bg-white rounded-lg shadow divide-y"></div>

    <div class="mt-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div class="text-xl">
        Subtotal: <span id="subtotal" class="font-extrabold text-blue-600">$0.00</span>
      </div>
      <div>
        <a href="checkout.html" class="inline-block bg-black text-white px-6 py-3 rounded hover:bg-blue-600 transition">
          Proceed to Checkout
        </a>
      </div>
    </div>
  </section>

  <footer class="bg-white border-t">
    <div class="max-w-6xl mx-auto px-4 py-8 text-center text-sm text-gray-500">
      © 2025 Shop-X by nayar
    </div>
  </footer>

  <script>
    const btn = document.getElementById('menuBtn');
    const mm = document.getElementById('mobileMenu');
    btn?.addEventListener('click', () => mm?.classList.toggle('menu-hidden'));
    mm?.querySelectorAll('a').forEach(a => a.addEventListener('click', ()=>mm.classList.add('menu-hidden')));
  </script>

  <script type="module" src="./assets/js/products.js"></script>
  <script type="module" src="./assets/js/ui.js"></script>
  <script type="module" src="./assets/js/cartpage.js"></script>
  <script type="module" src="./assets/js/cart.js"></script>
</body>
</html>