81 lines
2.1 KiB
HTML
81 lines
2.1 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>جستجوی محصولات</title>
|
|
|
|
<!-- Bootstrap 5 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<style>
|
|
body {
|
|
background: #f5f6fa;
|
|
font-family: "Vazir", sans-serif;
|
|
padding: 20px;
|
|
}
|
|
.card {
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|
}
|
|
.card img {
|
|
height: 150px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
border-top-left-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
.card-body {
|
|
padding: 0.75rem;
|
|
}
|
|
.name {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
.price {
|
|
color: #e74c3c;
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.source {
|
|
font-size: 0.8rem;
|
|
color: #7f8c8d;
|
|
}
|
|
#results {
|
|
margin-top: 20px;
|
|
}
|
|
#searchBtn {
|
|
min-width: 120px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h2 class="mb-4 text-center">جستجوی محصولات</h2>
|
|
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-md-9 col-sm-12">
|
|
<input id="query" type="text" class="form-control" placeholder="نام محصول را وارد کنید...">
|
|
</div>
|
|
<div class="col-md-3 col-sm-12">
|
|
<button id="searchBtn" class="btn btn-primary w-100">جستجو</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
|
|
<!-- Result cards appear here -->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|