Skip to content

P
palaniapp_demo
Commit 0a74ca97 by Hussain Mohamed
Options

chnages

parent 617c3fde
Showing with 105 additions and 29 deletions
public/assets/css/main.css
...@@ -2402,6 +2402,33 @@ section, ...@@ -2402,6 +2402,33 @@ section,
margin: 10px 0 20px; 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 { .bg-sand {
background-color: #E4D8D3; background-color: #E4D8D3;
} }
...@@ -2410,10 +2437,15 @@ section, ...@@ -2410,10 +2437,15 @@ section,
background-color: #1f9c96; 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 # Team Section
...@@ -4421,7 +4453,17 @@ section, ...@@ -4421,7 +4453,17 @@ section,
background-color: transparent; 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; background-color: #038c7f;
border: 2px solid #038c7f; border: 2px solid #038c7f;
padding: 12px 30px; padding: 12px 30px;
......
public/assets/img/accessories.png
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
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
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
resources/views/index.blade.php
...@@ -98,34 +98,36 @@ ...@@ -98,34 +98,36 @@
<section class="container"> <section class="container">
<div class="achievements-banner" data-aos="zoom-in" data-aos-delay="700"> <div class="achievements-banner" data-aos="zoom-in" data-aos-delay="700">
<div class="row text-center"> <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"> <div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g2.png" /> <img src="<?= asset('assets/img/') ?>/g2.png" />
<p>NUMBER OF <br>BRANDS </p> <p>NUMBER OF <br>BRANDS </p>
<h4>20+</h4> <h4>20+</h4>
</div> </div>
</div> </div>
<div class="col-lg-3 col-sm-6"> <div class="col-lg-2 col-sm-6">
<div class="achievement-item"> <div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g3.png" /> <img src="<?= asset('assets/img/') ?>/g3.png" />
<p>NUMBER OF <br>DEALERS</p> <p>NUMBER OF <br>DEALERS</p>
<h4>350+</h4> <h4>350+</h4>
</div> </div>
</div> </div>
<div class="col-lg-3 col-sm-6"> <div class="col-lg-2 col-sm-6">
<div class="achievement-item"> <div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g4.png" /> <img src="<?= asset('assets/img/') ?>/g4.png" />
<p>EXPERIENCE</p> <p>EXPERIENCE</p>
<h4>15+</h4> <h4>15+</h4>
</div> </div>
</div> </div>
<div class="col-lg-3 col-sm-6"> <div class="col-lg-2 col-sm-6">
<div class="achievement-item"> <div class="achievement-item">
<img src="<?= asset('assets/img/') ?>/g1.png" /> <img src="<?= asset('assets/img/') ?>/g1.png" />
<p>SUCCESSFULL PROJECTS<br></p> <p>SUCCESSFULL PROJECTS<br></p>
<h4>2000+</h4> <h4>2000+</h4>
</div> </div>
</div> </div>
<div class="col-lg-1 col-sm-6"></div>
</div> </div>
</div> </div>
</section> </section>
...@@ -133,16 +135,16 @@ ...@@ -133,16 +135,16 @@
<section class="container" data-aos="fade-up" data-aos-delay="100"> <section class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row g-4"> <div class="row g-4">
<!-- Monitors --> <!-- Monitors -->
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100"> <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100">
<div class="category-card bg-sand"> <div class="category-card bg-sand">
<div class="row align-items-center h-100"> <div class="row align-items-center h-100">
<div class="col-md-7"> <div class="col-md-6">
<h3>Monitors</h3> <h3>Monitors</h3>
<p>Perfect monitor for all Applications</p> <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>
<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"> <img src="<?php echo asset('assets') ?>/img/monitor-3.png" class="img-fluid" alt="Monitors">
</div> </div>
</div> </div>
...@@ -153,12 +155,12 @@ ...@@ -153,12 +155,12 @@
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="200"> <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="200">
<div class="category-card bg-teal text-white"> <div class="category-card bg-teal text-white">
<div class="row align-items-center h-100"> <div class="row align-items-center h-100">
<div class="col-md-7"> <div class="col-md-6">
<h3>Aircon</h3> <h3>Aircon</h3>
<p>Beat the heat, Stay cool!</p> <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>
<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"> <img src="<?php echo asset('assets') ?>/img/aircon.png" class="img-fluid" alt="Aircon">
</div> </div>
</div> </div>
...@@ -169,12 +171,12 @@ ...@@ -169,12 +171,12 @@
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="300"> <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="300">
<div class="category-card bg-teal text-white"> <div class="category-card bg-teal text-white">
<div class="row align-items-center h-100"> <div class="row align-items-center h-100">
<div class="col-md-7"> <div class="col-md-6">
<h3>Small Appliances</h3> <h3>Small Appliances</h3>
<p>Small Appliances for Offices</p> <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>
<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"> <img src="<?php echo asset('assets') ?>/img/small-appliances.png" class="img-fluid" alt="Appliances">
</div> </div>
</div> </div>
...@@ -185,12 +187,12 @@ ...@@ -185,12 +187,12 @@
<div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100"> <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100">
<div class="category-card bg-sand"> <div class="category-card bg-sand">
<div class="row align-items-center h-100"> <div class="row align-items-center h-100">
<div class="col-md-7"> <div class="col-md-6">
<h3>Accessories</h3> <h3>Accessories</h3>
<p>Accessories for your every need!</p> <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>
<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"> <img src="<?php echo asset('assets') ?>/img/accessories.png" class="img-fluid" alt="Accessories">
</div> </div>
</div> </div>
......
resources/views/product_detail.blade.php
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<label for="messageInput">Phone *</label> <label for="messageInput">Phone *</label>
</div> </div>
<div class="d-grid mt-5"> <div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button> <button type="submit" class="btnsubmit">Submit</button>
</div> </div>
</form> </form>
<form action="" method="post" class="catalogForm"> <form action="" method="post" class="catalogForm">
...@@ -58,14 +58,15 @@ ...@@ -58,14 +58,15 @@
<label for="messageInput">Phone *</label> <label for="messageInput">Phone *</label>
</div> </div>
<div class="d-grid mt-5"> <div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button> <button type="submit" class="btnsubmit">Submit</button>
</div> </div>
</form> </form>
<div class="mb-1"> <div class="mb-1">
<h6 class=" text-muted">Brand</h6> <h6 class=" text-muted">Brand</h6>
<?php foreach($brands as $val){ ?> <?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 } ?> <?php } ?>
<input name="brand" type="hidden" id="filter-brand" />
</div> </div>
<hr> <hr>
...@@ -74,8 +75,9 @@ ...@@ -74,8 +75,9 @@
<h6 class=" text-muted">Size/Range/Capacity</h6> <h6 class=" text-muted">Size/Range/Capacity</h6>
<div class="d-flex flex-wrap gap-2"> <div class="d-flex flex-wrap gap-2">
<?php foreach($size as $val){ ?> <?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 } ?> <?php } ?>
</div> </div>
</div> </div>
...@@ -85,8 +87,9 @@ ...@@ -85,8 +87,9 @@
<h6 class=" text-muted">Industry</h6> <h6 class=" text-muted">Industry</h6>
<div class="d-flex flex-wrap gap-2"> <div class="d-flex flex-wrap gap-2">
<?php foreach($industrys as $val){ ?> <?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 } ?> <?php } ?>
</div> </div>
</div> </div>
...@@ -104,5 +107,7 @@ function showForm(showid,hideid) ...@@ -104,5 +107,7 @@ function showForm(showid,hideid)
$('.'+showid).show(); $('.'+showid).show();
$('.'+hideid).hide(); $('.'+hideid).hide();
} }
</script> </script>
@endsection @endsection
\ No newline at end of file
resources/views/products.blade.php
...@@ -22,10 +22,11 @@ ...@@ -22,10 +22,11 @@
<div class="accordion-body"> <div class="accordion-body">
<?php if (isset($productType)) { <?php if (isset($productType)) {
foreach ($productType as $row) { ?> foreach ($productType as $row) { ?>
<div><?php echo $row->type ?></div> <div onclick="filterCatgory('<?= $row->id ?>')"><?php echo $row->category_name ?></div>
<?php } <?php }
} ?> } ?>
</div> </div>
<input name="category" type="hidden" id="filter-category" />
</div> </div>
</div> </div>
...@@ -42,10 +43,11 @@ ...@@ -42,10 +43,11 @@
<div class="accordion-body"> <div class="accordion-body">
<?php if (isset($industryData)) { <?php if (isset($industryData)) {
foreach ($industryData as $row) { ?> foreach ($industryData as $row) { ?>
<div><?php echo $row->industry ?></div> <div onclick="filterIndustry('<?= $row->id ?>')"><?php echo $row->industry ?></div>
<?php } <?php }
} ?> } ?>
</div> </div>
<input name="industry" type="hidden" id="filter-industry" />
</div> </div>
</div> </div>
...@@ -62,10 +64,12 @@ ...@@ -62,10 +64,12 @@
<div class="accordion-body"> <div class="accordion-body">
<?php if (isset($brandData)) { <?php if (isset($brandData)) {
foreach ($brandData as $row) { ?> foreach ($brandData as $row) { ?>
<div><?php echo $row->brand ?></div> <div onclick="filterBrand('<?= $row->id ?>')" ><?php echo $row->brand ?></div>
<?php } <?php }
} ?> } ?>
</div> </div>
<input name="brand" type="hidden" id="filter-brand" />
</div> </div>
</div> </div>
...@@ -113,12 +117,18 @@ function loadProducts(reset = false) { ...@@ -113,12 +117,18 @@ function loadProducts(reset = false) {
$('#productList').html(''); $('#productList').html('');
} }
$('#loadMore').show(); $('#loadMore').show();
var industry = $('#filter-industry').val();
var category = $('#filter-category').val();
var brand = $('#filter-brand').val();
$.ajax({ $.ajax({
url: '<?php echo route('getProducts') ?>', url: '<?php echo route('getProducts') ?>',
type: 'GET', type: 'GET',
data: { data: {
offset: offset, offset: offset,
limit: limit limit: limit,
industry: industry,
category: category,
brand: brand,
}, },
success: function(data) { success: function(data) {
...@@ -149,6 +159,22 @@ function loadProducts(reset = false) { ...@@ -149,6 +159,22 @@ function loadProducts(reset = false) {
// $('#loadMore').on('click', function () { // $('#loadMore').on('click', function () {
// loadProducts(); // 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> </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