|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /proc/self/root/var/www/kamariallee.com/public_html/application/views/ |
Upload File : |
<div class=" w-full">
<!-- hero -->
<div class="mb-0 hidden md:block">
<div class=" duration-700 ease-in-out">
<img src="<?= base_url() . 'uploads/category/category-banner11.jpg'; ?>" class="hidden w-full md:block">
<div class="absolute top-80 left-36 text-center" style="z-index: 9999;">
<h1 class="font-custom text-primary text-5xl">Search Products</h1>
<div class="font-custom text-lg text-primary max-w-xl mx-auto mt-4">
</div>
</div>
</div>
</div>
<!-- section filter -->
<section class=" mx-auto">
<div class="bg-secondary md:bg-primary p-8">
<div class="flex justify-between items-center">
<h1 class="text-secondary font-custom md:text-secondary text-xl mdtext-3xl hidden md:block">Search Products</h1>
<h1 class="font-custom text-white md:text-secondary text-xl mdtext-3xl flex items-center md:hidden ">
<span class="mr-3">Search</span>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6" fill="none">
<path d="M12 1L6.5 5L1 1" stroke="white" />
</svg> -->
</h1>
<div class="flex items-center">
<button style="display:none" id="toggleBtnFilter"><span class="text-white md:text-secondary font-custom text-xl text-3xl mr-8">Filter +</span></button>
<button style="display:none" id="toggleBtnSort"><span class="text-white md:text-secondary font-custom text-xl text-3xl">Sort +</span></button>
</div>
</div>
</div>
<!-- mega menu filter -->
<div id="megaMenuFilter" class="bg-primary/90 shadow-lg hidden absolute w-full" style="z-index: 999;">
<div class="grid grid-cols-5 gap-4 hidden md:grid p-6">
<!-- Column 1 -->
<div class="col-span-1">
<h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Product Type</h2>
<a href="#" class="block mb-2 text-white font-custom">Mules</a>
<a href="#" class="block mb-2 text-secondary font-custom flex items-center"> <span>Block Heels</span>
<div class="w-2 h-2 bg-secondary rounded-full ml-2"></div>
</a>
<a href="#" class="block mb-2 text-white font-custom">Sandals</a>
<a href="#" class="block mb-2 text-white font-custom">Pump Heels</a>
</div>
<!-- Column 2 -->
<div class="col-span-1">
<h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Size</h2>
<div class="flex items-center">
<div>
<a href="#" class="block mb-2 text-white font-custom">35</a>
<a href="#" class="block mb-2 text-secondary font-custom flex items-center"> <span>36</span>
<div class="w-2 h-2 bg-secondary rounded-full ml-2"></div>
</a>
<a href="#" class="block mb-2 text-white font-custom">37</a>
<a href="#" class="block mb-2 text-white font-custom">38</a>
</div>
<div class="ml-8">
<a href="#" class="block mb-2 text-white font-custom">39</a>
<a href="#" class="block mb-2 text-white font-custom">40</a>
<a href="#" class="block mb-2 text-white font-custom">41</a>
<a href="#" class="block mb-2 text-white font-custom">42</a>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="col-span-1">
<h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Color</h2>
<div class="flex items-center">
<div>
<div class="w-8 h-8 bg-blue-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-yellow-300 rounded-full ml-2 m-2"></div>
</div>
<div>
<div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-blue-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-green-300 rounded-full ml-2 m-2"></div>
</div>
<div>
<div class="w-8 h-8 bg-yellow-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-secondary rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
</div>
</div>
</div>
<!-- Column 4 -->
<div class="col-span-1">
<h2 class="text-lg font-semibold mb-4 text-secondary font-custom">Price</h2>
<div class="flex items-center">
<input type="text" name="" id="" value="Rp. 0" class="w-28 bg-black text-white font-custom" style="background-color: rgba(250, 250, 250,0.5);">
<img src="./Images/icon/divider.svg" alt="" class="p-2">
<input type="text" name="" id="" value="Rp. 1" class="w-28 bg-black text-white font-custom" style="background-color: rgba(250, 250, 250,0.5);">
</div>
<!-- <input type="range" min="0" max="100" value="10" step="1" class="slider appearance-none w-64 h-3 bg-secondary rounded-full focus:outline-none mr-4 mt-8" id="rangeSlider"> -->
<div class="two-range-slider js-two-range-slider mt-4">
<input type="range" value="80" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input" id="rangeSlider">
<input type="range" value="30" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input" id="rangeSlider">
</div>
</div>
<!-- Column 5 -->
<div class="col-span-1">
<div class="border border-white w-40 px-3 mx-auto text-center mt-8">
<span class="text-white text-center font-custom">APPLY</span>
</div>
<div class="border border-white w-40 px-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">RESET</span>
</div>
</div>
</div>
<!-- menu mobile -->
<div class="block md:hidden text-center">
<div class=" ">
<div class="flex items-center py-2 cursor-pointer justify-center " onclick="toggleAccordion('accordion1')">
<span class="text-lg text-secondary font-custom border-b border-b-secondary">Product Type</span>
<svg class="w-6 h-6 transition-transform transform border-b border-b-secondary mt-1" id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div id="accordion1" class="hidden">
<div class="flex flex-col items-center justify-center">
<a href="#" class="block mb-2 text-white font-custom">Mules</a>
<a href="#" class="block mb-2 text-secondary font-custom flex items-center"> <span>Block Heels</span>
<div class="w-2 h-2 bg-secondary rounded-full ml-2"></div>
</a>
<a href="#" class="block mb-2 text-white font-custom">Sandals</a>
<a href="#" class="block mb-2 text-white font-custom">Pump Heels</a>
</div>
</div>
</div>
<!-- item 2 -->
<div class="">
<div class="flex items-center justify-center py-2 cursor-pointer" onclick="toggleAccordion('accordion2')">
<span class="text-lg text-secondary font-custom border-b border-b-secondary">Size</span>
<svg class="w-6 h-6 transition-transform transform border-b border-b-secondary mt-1" id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div id="accordion2" class="hidden">
<div class="flex items-center justify-center">
<div>
<a href="#" class="block mb-2 text-white font-custom">35</a>
<a href="#" class="block mb-2 text-secondary font-custom flex items-center"> <span>36</span>
<div class="w-2 h-2 bg-secondary rounded-full ml-2"></div>
</a>
<a href="#" class="block mb-2 text-white font-custom">37</a>
<a href="#" class="block mb-2 text-white font-custom">38</a>
</div>
<div class="ml-8">
<a href="#" class="block mb-2 text-white font-custom">39</a>
<a href="#" class="block mb-2 text-white font-custom">40</a>
<a href="#" class="block mb-2 text-white font-custom">41</a>
<a href="#" class="block mb-2 text-white font-custom">42</a>
</div>
</div>
</div>
</div>
<!-- item 3 -->
<div class="">
<div class="flex items-center justify-center py-2 cursor-pointer" onclick="toggleAccordion('accordion3')">
<span class="text-lg text-secondary font-custom border-b border-b-secondary">Color</span>
<svg class="w-6 h-6 transition-transform transform border-b border-b-secondary mt-1" id="arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div id="accordion3" class="hidden">
<div class="flex items-center justify-center">
<div>
<div class="w-8 h-8 bg-blue-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-yellow-300 rounded-full ml-2 m-2"></div>
</div>
<div>
<div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-blue-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-green-300 rounded-full ml-2 m-2"></div>
</div>
<div>
<div class="w-8 h-8 bg-yellow-300 rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-secondary rounded-full ml-2 m-2"></div>
<div class="w-8 h-8 bg-red-300 rounded-full ml-2 m-2"></div>
</div>
</div>
</div>
</div>
<!-- item 4 -->
<div class="">
<div class="flex items-center justify-center py-2 cursor-pointer" onclick="toggleAccordion('accordion4')">
<span class="text-lg text-secondary font-custom border-b border-b-secondary">Price</span>
<svg class="w-6 h-6 transition-transform transform border-b border-b-secondary mt-1 id=" arrow1" fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div id="accordion4" class="hidden py-4 mx-auto">
<div class="flex items-center">
<input type="text" name="" id="" value="Rp. 0" class="w-1/2 bg-black text-white font-custom" style="background-color: rgba(250, 250, 250,0.5);">
<img src="./Images/icon/divider.svg" alt="" class="p-2">
<input type="text" name="" id="" value="Rp. 1" class="w-1/2 bg-black text-white font-custom" style="background-color: rgba(250, 250, 250,0.5);">
</div>
<!-- <input type="range" min="0" max="100" value="10" step="1" class="slider appearance-none w-64 h-3 bg-secondary rounded-full focus:outline-none mr-4 mt-8" id="rangeSlider"> -->
<div class="two-range-slider js-two-range-slider mt-4 w-full mx-auto">
<input type="range" value="80" min="10" max="100" step="1" class=" ml-8 two-range-slider__input js-two-range-slider-input" id="rangeSlider">
<input type="range" value="30" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input" id="rangeSlider">
</div>
</div>
</div>
<!-- action -->
<div class="grid grid-cols-2 gap-0 ">
<div class="border border-secondary bg-secondary w-full p-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">APPLY</span>
</div>
<div class="border border-primary bg-primary w-full p-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">RESET</span>
</div>
</div>
</div>
</div>
<!-- mega menu sort -->
<div id="megaMenuSort" class="bg-primary/90 shadow-lg hidden absolute w-full" style="z-index: 999;">
<div class="grid grid-cols-4 gap-4 hidden md:grid py-6 pt-8">
<!-- Column 1 -->
<div class="col-span-1 ">
<h2 class="text-lg md:text-xl text-secondary font-custom ml-8">Most Favourites</h2>
</div>
<!-- Column 2 -->
<div class="col-span-1">
<h2 class="text-xl font-semibold text-secondary font-custom">Price</h2>
<div class="flex items-center">
<div class="border border-secondary w-40 px-3 mx-auto text-center mt-2 bg-secondary mr-2">
<span class="text-white text-center font-custom">Low To Hight</span>
</div>
<div class="ml-8 border border-secondary w-40 px-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">Hight To Low</span>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="col-span-1">
<h2 class="text-xl font-semibold text-secondary font-custom">Price</h2>
<div class="flex items-center">
<div class="ml-8 border border-secondary w-40 px-3 mx-auto text-center mt-2 mr-2">
<span class="text-white text-center font-custom">Oldest to Newest</span>
</div>
<div class="ml-8 border border-secondary w-40 px-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">Newest to Oldest</span>
</div>
</div>
</div>
<!-- Column 4 -->
<div class="col-span-1">
<div class="border border-secondary w-40 px-3 mx-auto text-center mt-8 bg-secondary">
<span class="text-white text-center font-custom">APPLY</span>
</div>
<div class="border border-white w-40 px-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">RESET</span>
</div>
</div>
</div>
<!-- menu mobile -->
<div class="block md:hidden">
<div class="px-8 mt-8 md:mt-2">
<h2 class="text-xl font-semibold mb-4 text-secondary font-custom">Most Favourites</h2>
</div>
<!-- Column 2 -->
<div class="px-8">
<h2 class="text-xl font-semibold mb-2 text-secondary font-custom">Price</h2>
<div class="flex items-center">
<div class="border border-secondary p-1 px-2 text-center bg-secondary">
<span class="text-white text-center font-custom">Low To Hight</span>
</div>
<div class="ml-2 border border-secondary p-1 px-2 text-center">
<span class="text-white text-center font-custom">Hight To Low</span>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="px-8 mt-8 mb-4">
<h2 class="text-xl font-semibold mb-2 text-secondary font-custom">Collection</h2>
<div class="flex items-center">
<div class="border border-secondary w-40 p-1 px-2 text-center ">
<span class="text-white text-center font-custom">Oldest to Newest</span>
</div>
<div class="ml-2 border border-secondary w-40 p-1 px-2 text-center">
<span class="text-white text-center font-custom">Newest to Oldest</span>
</div>
</div>
</div>
<!-- action -->
<div class="grid grid-cols-2 gap-0 ">
<div class="border border-secondary bg-secondary w-full p-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">APPLY</span>
</div>
<div class="border border-primary bg-primary w-full p-3 mx-auto text-center mt-2">
<span class="text-white text-center font-custom">RESET</span>
</div>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="bg-[#F4F4F1] mx-auto px-8">
<!-- product -->
<div class="max-w-4xl mx-auto mt-6 md:mt-24">
<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
<?php foreach($products as $product) : ?>
<a href="<?= base_url() . 'product/' . strtolower($product->alias); ?>">
<div class="py-4 text-center relative">
<!--alert min stock-->
<!-- <div class="absolute ml-2">
<div class="w-12 py-1 md:py-4 px-4 bg-secondary flex justify-center items-center px-">
<span class="text-white font-custom text-sm flex flex-col -4">
<span class="span text-lg md:text-xl">2</span>
<span class="text-xs md:text-sm px-2">
Pieces left
</span>
</span>
</div>
</div> -->
<?php if($product->new_arrival == 'yes') : ?>
<!-- new arrival -->
<div class="absolute top-0 right-0 -mt-1 -mr-1 hidden md:block">
<div class="w-12 h-12 rounded-full bg-primary flex justify-center items-center">
<span class="text-secondary font-custom text-xs">New Arrival</span>
</div>
</div>
<?php endif; ?>
<img src="<?= base_url() . 'uploads/product/small/' . $product->image1; ?>" alt="" class="xs:h-60 md:h-80 w-full mx-auto">
<div class="text-center mt-3">
<p class="text-secondary text-lg font-custom">
<?= strtoupper($product->title); ?>
</p>
<p class="text-primary font-custom">
<?php
//get product details
$details = $this->db->select('price, discounted_price')->from('product_details')->where('product_id', $product->id_products)->get()->row_array();
?>
<?php if($details) : ?>
<?php if ($details['discounted_price'] != 0): ?>
<div class="product-price">Rp <?= number_format($details['discounted_price']); ?> <span style="color:grey; font-size:15px; text-decoration:line-through">Rp <?= number_format($details['price']); ?></span></div>
<?php else : ?>
Rp <?= number_format($details['price']); ?>
<?php endif; ?>
<?php endif; ?>
</p>
<?php if(!empty($product->preorder_message)) : ?>
<p class="text-[#C4C4C4] italic font-tinosItalic"><?= ucwords($product->preorder_message); ?></p>
<?php endif; ?>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
<?php
//create pagination...
echo '<div class="flex items-center justify-center space-x-2 mb-8 font-custom txt-2xl" style="text-align:center;">' . $this->pagination->create_links() . '</div>';
?>
</div>
</section>