<!DOCTYPE html>
<html>
<head>
<title>E-Commerce Page</title>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
body { background: #f5f5f5; }
/* PRODUCT CARD */
.product-card {
background: #fff;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
border: 1px solid #e0e0e0;
}
/* LIFT & SHADOW ON HOVER */
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
border-color: #ccc;
}
/* IMAGE ZOOM EFFECT */
.product-card img {
width: 100%;
height: 180px;
object-fit: cover;
margin-bottom: 10px;
transition: transform 0.4s ease;
}
.product-card:hover img {
transform: scale(1.05);
}
/* BUTTON HOVER */
.product-card button {
transition: 0.3s;
}
.product-card button:hover {
background-color: #286090 !important;
color: #fff !important;
}
/* PAGE TITLE */
h2 {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">E-Commerce Products</h2>
<hr>
<!-- PRODUCT GRID -->
<div class="row" id="product-list"></div>
<!-- PAGINATION -->
<div class="text-center">
<ul class="pagination" id="pagination"></ul>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap 3 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
// ---------------------------
// SAMPLE PRODUCT DATA
// ---------------------------
var products = [];
for (let i = 1; i <= 30; i++) {
products.push({
id: i,
name: "Product " + i,
price: (100 + i),
image: "https://via.placeholder.com/300x180?text=Product+" + i
});
}
// ---------------------------
// PAGINATION SETTINGS
// ---------------------------
var currentPage = 1;
var itemsPerPage = 6;
var totalPages = Math.ceil(products.length / itemsPerPage);
// ---------------------------
// DISPLAY PRODUCTS
// ---------------------------
function loadProducts(page) {
$("#product-list").html("");
let start = (page - 1) * itemsPerPage;
let end = start + itemsPerPage;
let pageProducts = products.slice(start, end);
$.each(pageProducts, function(i, product) {
$("#product-list").append(`
<div class="col-sm-4">
<div class="product-card">
<img src="${product.image}">
<h4>${product.name}</h4>
<p><strong>₹${product.price}</strong></p>
<button class="btn btn-primary btn-block">Add to Cart</button>
</div>
</div>
`);
});
}
// ---------------------------
// BUILD PAGINATION
// ---------------------------
function buildPagination() {
$("#pagination").html("");
let html = "";
// FIRST BUTTON
html += `<li ${currentPage==1?'class="disabled"':''}>
<a href="#" data-page="1">First</a>
</li>`;
// PREVIOUS BUTTON
html += `<li ${currentPage==1?'class="disabled"':''}>
<a href="#" data-page="${currentPage-1}">Previous</a>
</li>`;
// NUMBERED PAGES
for (let i = 1; i <= totalPages; i++) {
html += `<li ${currentPage==i?'class="active"':''}>
<a href="#" data-page="${i}">${i}</a>
</li>`;
}
// NEXT BUTTON
html += `<li ${currentPage==totalPages?'class="disabled"':''}>
<a href="#" data-page="${currentPage+1}">Next</a>
</li>`;
// LAST BUTTON
html += `<li ${currentPage==totalPages?'class="disabled"':''}>
<a href="#" data-page="${totalPages}">Last</a>
</li>`;
$("#pagination").html(html);
}
// ---------------------------
// PAGINATION CLICK EVENT
// ---------------------------
$(document).on("click", "#pagination li a", function (e) {
e.preventDefault();
let page = $(this).data("page");
if (page < 1 || page > totalPages) return;
currentPage = page;
loadProducts(currentPage);
buildPagination();
});
// ---------------------------
// INITIAL LOAD
// ---------------------------
loadProducts(currentPage);
buildPagination();
</script>
</body>
</html>
