Commit 0a74ca97 by Hussain Mohamed

chnages

parent 617c3fde
......@@ -2402,6 +2402,33 @@ section,
margin: 10px 0 20px;
}
.category-card a {
padding: 5px 5px;
padding-left: 20px;
display: inline-flex;
font-size:12px;
align-items: center;
position: relative;
transition: background-color 0.3s ease, color 0.3s ease;
}
.category-card a i {
font-size: 14px;
text-align: center;
opacity: 0; /* Hide arrow by default */
transition: opacity 0.3s ease, transform 0.3s ease;
}
.category-card .teal-btn {
border: 2px solid rgb(255, 255, 255);
color: #ffffff;
}
.category-card .sand-btn {
border: 2px solid black;
color: #000;
}
.bg-sand {
background-color: #E4D8D3;
}
......@@ -2410,10 +2437,15 @@ section,
background-color: #1f9c96;
}
.category-card img {
max-height: 180px;
.category-card a:hover i {
opacity: 1; /* Show the arrow */
transform: translateX(5px); /* Move the arrow slightly to the right */
}
.category-card img {
max-height: 230px;
}
/*--------------------------------------------------------------
# Team Section
......@@ -4421,7 +4453,17 @@ section,
background-color: transparent;
}
.contact ,.form-container ,.btn-submit {
.contact .form-container .btn-submit {
background-color: #038c7f;
border: 2px solid #038c7f;
padding: 12px 30px;
color: #ffffff;
border-radius: 0;
transition: 0.3s;
width: 150px;
}
.btnsubmit {
background-color: #038c7f;
border: 2px solid #038c7f;
padding: 12px 30px;
......
public/assets/img/accessories.png

61.8 KB | W: | H:

public/assets/img/accessories.png

332 KB | W: | H:

public/assets/img/accessories.png
public/assets/img/accessories.png
public/assets/img/accessories.png
public/assets/img/accessories.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/img/aircon.png

57 KB | W: | H:

public/assets/img/aircon.png

247 KB | W: | H:

public/assets/img/aircon.png
public/assets/img/aircon.png
public/assets/img/aircon.png
public/assets/img/aircon.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/img/monitor-3.png

79.8 KB | W: | H:

public/assets/img/monitor-3.png

503 KB | W: | H:

public/assets/img/monitor-3.png
public/assets/img/monitor-3.png
public/assets/img/monitor-3.png
public/assets/img/monitor-3.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -98,34 +98,36 @@
<section class="container">
<div class="achievements-banner" data-aos="zoom-in" data-aos-delay="700">
<div class="row text-center">
<div class="col-lg-3 col-sm-6">
<div class="col-lg-2 col-sm-6"></div>
<div class="col-lg-2 col-sm-6">
<div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g2.png" />
<p>NUMBER OF <br>BRANDS </p>
<h4>20+</h4>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="col-lg-2 col-sm-6">
<div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g3.png" />
<p>NUMBER OF <br>DEALERS</p>
<h4>350+</h4>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="col-lg-2 col-sm-6">
<div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g4.png" />
<p>EXPERIENCE</p>
<h4>15+</h4>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="col-lg-2 col-sm-6">
<div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g1.png" />
<p>SUCCESSFULL PROJECTS<br></p>
<h4>2000+</h4>
</div>
</div>
<div class="col-lg-1 col-sm-6"></div>
</div>
</div>
</section>
......@@ -133,16 +135,16 @@
<section class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row g-4">
<!-- Monitors -->
<!-- Monitors -->
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100">
<div class="category-card bg-sand">
<div class="row align-items-center h-100">
<div class="col-md-7">
<div class="col-md-6">
<h3>Monitors</h3>
<p>Perfect monitor for all Applications</p>
<a href="#" class="btn btn-outline-dark">See All</a>
<a href="#" class="sand-btn">See All <i class="bi bi-arrow-right"></i></a>
</div>
<div class="col-md-5 text-end">
<div class="col-md-6 text-end">
<img src="<?php echo asset('assets') ?>/img/monitor-3.png" class="img-fluid" alt="Monitors">
</div>
</div>
......@@ -153,12 +155,12 @@
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="200">
<div class="category-card bg-teal text-white">
<div class="row align-items-center h-100">
<div class="col-md-7">
<div class="col-md-6">
<h3>Aircon</h3>
<p>Beat the heat, Stay cool!</p>
<a href="#" class="btn btn-outline-light">See All</a>
<a href="#" class="teal-btn">See All <i class="bi bi-arrow-right"></i></a>
</div>
<div class="col-md-5 text-end">
<div class="col-md-6 text-end">
<img src="<?php echo asset('assets') ?>/img/aircon.png" class="img-fluid" alt="Aircon">
</div>
</div>
......@@ -169,12 +171,12 @@
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="300">
<div class="category-card bg-teal text-white">
<div class="row align-items-center h-100">
<div class="col-md-7">
<div class="col-md-6">
<h3>Small Appliances</h3>
<p>Small Appliances for Offices</p>
<a href="#" class="btn btn-outline-light">See All</a>
<a href="#" class="teal-btn">See All <i class="bi bi-arrow-right"></i></a>
</div>
<div class="col-md-5 text-end">
<div class="col-md-6 text-end">
<img src="<?php echo asset('assets') ?>/img/small-appliances.png" class="img-fluid" alt="Appliances">
</div>
</div>
......@@ -185,12 +187,12 @@
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100">
<div class="category-card bg-sand">
<div class="row align-items-center h-100">
<div class="col-md-7">
<div class="col-md-6">
<h3>Accessories</h3>
<p>Accessories for your every need!</p>
<a href="#" class="btn btn-outline-dark">See All</a>
<a href="#" class="sand-btn">See All <i class="bi bi-arrow-right"></i></a>
</div>
<div class="col-md-5 text-end">
<div class="col-md-6 text-end">
<img src="<?php echo asset('assets') ?>/img/accessories.png" class="img-fluid" alt="Accessories">
</div>
</div>
......
......@@ -47,7 +47,7 @@
<label for="messageInput">Phone *</label>
</div>
<div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button>
<button type="submit" class="btnsubmit">Submit</button>
</div>
</form>
<form action="" method="post" class="catalogForm">
......@@ -58,14 +58,15 @@
<label for="messageInput">Phone *</label>
</div>
<div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button>
<button type="submit" class="btnsubmit">Submit</button>
</div>
</form>
<div class="mb-1">
<h6 class=" text-muted">Brand</h6>
<?php foreach($brands as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->brand ?>" data-placement="top" class="tag-box-brand"><?= $val->brand ?></span></a>
<a href="javascript:void(0)" ><span data-toggle="tooltip" title="<?= $val->brand ?>" data-placement="top" class="tag-box-brand"><?= $val->brand ?></span></a>
<?php } ?>
<input name="brand" type="hidden" id="filter-brand" />
</div>
<hr>
......@@ -74,8 +75,9 @@
<h6 class=" text-muted">Size/Range/Capacity</h6>
<div class="d-flex flex-wrap gap-2">
<?php foreach($size as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->size ?>" data-placement="top" class="tag-box-size"><?= $val->size ?></span></a>
<a href="javascript:void(0)" ><span data-toggle="tooltip" title="<?= $val->size ?>" data-placement="top" class="tag-box-size"><?= $val->size ?></span></a>
<?php } ?>
</div>
</div>
......@@ -85,8 +87,9 @@
<h6 class=" text-muted">Industry</h6>
<div class="d-flex flex-wrap gap-2">
<?php foreach($industrys as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->industry ?>" data-placement="top" class="tag-box-indus"><?= ucwords($val->industry) ?></span></a>
<a href="javascript:void(0)" ><span data-toggle="tooltip" title="<?= $val->industry ?>" data-placement="top" class="tag-box-indus"><?= ucwords($val->industry) ?></span></a>
<?php } ?>
</div>
</div>
......@@ -104,5 +107,7 @@ function showForm(showid,hideid)
$('.'+showid).show();
$('.'+hideid).hide();
}
</script>
@endsection
\ No newline at end of file
......@@ -22,10 +22,11 @@
<div class="accordion-body">
<?php if (isset($productType)) {
foreach ($productType as $row) { ?>
<div><?php echo $row->type ?></div>
<div onclick="filterCatgory('<?= $row->id ?>')"><?php echo $row->category_name ?></div>
<?php }
} ?>
</div>
<input name="category" type="hidden" id="filter-category" />
</div>
</div>
......@@ -42,10 +43,11 @@
<div class="accordion-body">
<?php if (isset($industryData)) {
foreach ($industryData as $row) { ?>
<div><?php echo $row->industry ?></div>
<div onclick="filterIndustry('<?= $row->id ?>')"><?php echo $row->industry ?></div>
<?php }
} ?>
</div>
<input name="industry" type="hidden" id="filter-industry" />
</div>
</div>
......@@ -62,10 +64,12 @@
<div class="accordion-body">
<?php if (isset($brandData)) {
foreach ($brandData as $row) { ?>
<div><?php echo $row->brand ?></div>
<div onclick="filterBrand('<?= $row->id ?>')" ><?php echo $row->brand ?></div>
<?php }
} ?>
</div>
<input name="brand" type="hidden" id="filter-brand" />
</div>
</div>
......@@ -113,12 +117,18 @@ function loadProducts(reset = false) {
$('#productList').html('');
}
$('#loadMore').show();
var industry = $('#filter-industry').val();
var category = $('#filter-category').val();
var brand = $('#filter-brand').val();
$.ajax({
url: '<?php echo route('getProducts') ?>',
type: 'GET',
data: {
offset: offset,
limit: limit
limit: limit,
industry: industry,
category: category,
brand: brand,
},
success: function(data) {
......@@ -149,6 +159,22 @@ function loadProducts(reset = false) {
// $('#loadMore').on('click', function () {
// loadProducts();
// });
function filterIndustry(id)
{
$('#filter-industry').val(id);
loadProducts(true);
}
function filterCatgory(id)
{
$('#filter-category').val(id);
loadProducts(true);
}
function filterBrand(id)
{
$('#filter-brand').val(id);
loadProducts(true);
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment