Order-Management-System-UI/shop.html at main · Hemanth0701/Order-Management-System-UI · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Browse trendy fashion products at Tenjiku - clothing, shoes, bags, and more." />
  <meta name="robots" content="index, follow" />
  <meta property="og:title" content="Shop Stylish Fashion at Tenjiku" />
  <meta property="og:description" content="Browse clothing, shoes & accessories. Great quality, best prices!" />
  <meta property="og:image" content="https://yourdomain.com/images/stylish-jacket.jpg" />
  <link rel="canonical" href="https://yourdomain.com/shop.html" />
  <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
  <title>Shop | Tenjiku</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/shop.css" />
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom shadow-sm px-4 py-2 position-relative">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold text-primary" href="index.html">TENJIKU</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
        aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
        <form class="d-flex flex-wrap align-items-center gap-2 position-relative" role="search" style="min-width: 400px;">
          <!-- Category Filter -->
          <select class="form-select form-select-sm" id="shopCategoryFilter" aria-label="Category Filter" style="width: 140px;">
            <option value="" selected>All Categories</option>
            <option value="clothing">Clothing</option>
            <option value="shoes">Shoes</option>
            <option value="bags">Bags</option>
          </select>

          <!-- Sort Order -->
          <select class="form-select form-select-sm" id="sortOrder" aria-label="Sort Order" style="width: 140px;">
            <option value="default" selected>Sort by</option>
            <option value="price-asc">Price: Low to High</option>
            <option value="price-desc">Price: High to Low</option>
            <option value="name">Name A-Z</option>
          </select>

          <!-- Search Input -->
          <div class="input-group input-group-sm" style="flex-grow:1;">
            <input type="search" class="form-control" placeholder="Search..." id="shopSearchInput" aria-label="Search products" />
            <button class="btn btn-outline-secondary" type="button" id="searchBtn">
              <i class="bi bi-search"></i>
            </button>
          </div>

          <!-- User Greeting -->
          <span id="userGreeting" class="fw-bold d-none"></span>

          <!-- Auth Buttons -->
          <a id="loginBtn" href="login.html" class="btn btn-sm btn-outline-primary">Login</a>
          <button id="logoutBtn" class="btn btn-sm btn-outline-danger d-none">Logout</button>

          <!-- Cart Button with Badge -->
          <a href="cart.html" class="btn btn-sm btn-outline-secondary position-relative">
            Cart <i class="bi bi-cart3 ms-1"></i>
            <span id="cartBadge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" aria-label="Items in cart" title="Items in cart">0</span>
          </a>
        </form>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <main class="container py-5" role="main" aria-labelledby="shop-heading">
    <h1 id="shop-heading" class="mb-4">Shop All Products</h1>

    <!-- Product Grid -->
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="shopProductGrid">
      <!-- Products will be rendered here dynamically via JS -->
    </div>

    <!-- Pagination Controls -->
    <nav aria-label="Product pagination" class="mt-4">
      <ul class="pagination justify-content-center" id="paginationControls">
        <!-- Pagination buttons generated by JS -->
      </ul>
    </nav>
  </main>

  <!-- Footer -->
  <footer class="bg-light text-center text-muted border-top py-3">
    <small>&copy; 2025 Tenjiku E-Commerce. All rights reserved.</small>
  </footer>

  <!-- Toast Notification Container -->
  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1080;">
    <div id="toastNotification" class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive"
      aria-atomic="true" data-bs-delay="3000">
      <div class="d-flex">
        <div class="toast-body" id="toastMessage"></div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>

  <!-- Bootstrap Bundle JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Utility JS (ES Module) -->
  <script type="module" src="js/utils.js"></script>
  <!-- Shop Page JS (ES Module, deferred) -->
  <script type="module" src="js/shop.js" defer></script>

</body>
</html>