Server : LiteSpeed System : Linux in-mum-web1112.main-hosting.eu 4.18.0-553.34.1.lve.el8.x86_64 #1 SMP Thu Jan 9 16:30:32 UTC 2025 x86_64 User : u451330669 ( 451330669) PHP Version : 8.2.27 Disable Function : NONE Directory : /home/u451330669/domains/wecareindustry.in/public_html/ |
<?php
require('top.php');
$cat_res=mysqli_query($con,"select * from categories where status=1 order by categories asc");
$cat_arr=array();
while($row=mysqli_fetch_assoc($cat_res)){
$cat_arr[]=$row;
}
$about_res=mysqli_query($con,"select * from about where status=1 order by about asc");
$about_arr=array();
while($row=mysqli_fetch_assoc($about_res)){
$about_arr[]=$row;
}
if(isset($_GET['id'])){
$product_id=mysqli_real_escape_string($con,$_GET['id']);
if($product_id>0){
$get_product=get_product($con,'','',$product_id);
}else{
?>
<?php
}
}else{
?>
<?php
}
?>
<!-- Page Header End -->
<div class="container-xxl py-5 page-header position-relative mb-5">
<div class="container py-5">
<h1 class="display-2 text-white animated slideInDown mb-4">Product</h1>
<nav aria-label="breadcrumb animated slideInDown">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Product</a></li>
<li class="breadcrumb-item text-white active" aria-current="page"><?php echo $get_product['0']['name']?></li>
</ol>
</nav>
</div>
</div>
<!-- Page Header End -->
<div class="container">
<div class="single-product">
<div class="row">
<div class="col-6">
<div class="product-image">
<div class="product-image-main">
<img style="width: 310px;max-width:310px" src="<?php echo PRODUCT_IMAGE_SITE_PATH.$get_product['0']['image']?>" alt="<?php echo $get_product['0']['meta_title']?>" title="<?php echo $get_product['0']['name']?>" id="product-main-image">
</div>
<!-- <div class="product-image-slider">-->
<!-- <img src="img/tshirt-1.png" alt="" class="image-list">-->
<!-- <img src="img/tshirt-2.png" alt="" class="image-list">-->
<!-- <img src="img/tshirt-3.png" alt="" class="image-list">-->
<!-- <img src="img/tshirt-group.png" alt="" class="image-list">-->
<!-- </div>-->
<!--</div>--></div>
</div>
<div class="col-lg-6 items left">
<div class="breadcrumb"style=" background: #fff;">
<span><a href="#">Home</a></span>
<span><a href="#">Product</a></span>
<span class="active"><?php echo $get_product['0']['categories']?> </span>
</div>
<div class="product">
<div class="product-title">
<h2><?php echo $get_product['0']['name']?></h2>
<h3>Short Description</h3>
<?php echo $get_product['0']['short_desc']?>
</div>
<div class="h-100 d-inline-flex align-items-center">
<button style=" background-color: #000; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;" class="add-to-cart-btn" data-modal="modalOne"><i class="fa fa-envelope " style="font-size:18px;color:#fff"></i> Enquiry Now</button></a>
</div>
<!--
<div class="product-size">
<h4>Size</h4>
<div class="size-layout">
<input type="radio" name="size" value="S" id="1" class="size-input">
<label for="1" class="size">S</label>
<input type="radio" name="size" value="M" id="2" class="size-input">
<label for="2" class="size">M</label>
<input type="radio" name="size" value="L" id="3" class="size-input">
<label for="3" class="size">L</label>
<input type="radio" name="size" value="XL" id="4" class="size-input">
<label for="4" class="size">XL</label>
<input type="radio" name="size" value="XXL" id="5" class="size-input">
<label for="5" class="size">XXL</label>
</div>
</div>
<div class="product-color">
<h4>Color</h4>
<div class="color-layout">
<input type="radio" name="color" value="black" class="color-input">
<label for="black" class="black"></label>
<input type="radio" name="color" value="red" class="color-input">
<label for="red" class="red"></label>
<input type="radio" name="color" value="blue" class="color-input">
<label for="blue" class="blue"></label>
</div>
</div>
<span class="divider"></span>
<div class="product-btn-group">
<div class="button buy-now"><i class='bx bxs-zap' ></i> Buy Now</div>
<div class="button add-cart"><i class='bx bxs-cart' ></i> Add to Cart</div>
<div class="button heart"><i class='bx bxs-heart' ></i> Add to Wishlist</div>
</div> -->
</div>
</div>
</div>
</div> <div class="product-details">
<h3>Description</h3>
<?php echo $get_product['0']['description']?>
</div>
</div>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /** Poppins Font **/
/** gobal layout */
.single-product{
width: 1080px;
position: relative;
}
/** Breadcrumb **/
.single-product .breadcrumb{
background: #48484810;
padding: 8px 4px;
border-radius: 8px;
font-size: 15px;
}
.breadcrumb span{
display: inline-flex;
flex-direction: row;
gap: 8px;
margin-left: 8px;
}
.breadcrumb span:not(:last-child)::after{
content: '/';
}
.breadcrumb span a{
text-decoration: none;
color: var(--primary-color);
}
/** product image **/
.single-product .product-image{
width: 100%;
}
.product-image .product-image-main{
position: relative;
display: block;
height: 480px;
background: var(--bg-grey);
padding: 10px;
}
.product-image-main img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.product-image-slider{
display: flex;
gap: 10px;
margin: 10px 0;
}
.product-image-slider img{
width: 90px;
height: 90px;
background: var(--bg-grey);
padding: 6px;
cursor: pointer;
}
/** product title **/
.product-title{
margin-top: 20px;
}
.product-title h2{
font-size: 32px;
line-height: 2.4rem;
font-weight: 700;
letter-spacing: -0.02rem;
}
/** product rating **/
.product-rating{
display: flex;
margin-top: 4px;
margin-bottom: 10px;
align-items: center;
}
.product-rating span:not(:last-child){
color: #ffc600;
}
.product-rating .review{
color: var(--grey);
font-size: 12px;
font-weight: 500;
}
/** Product price **/
.product-price{
display: flex;
position: relative;
margin: 10px 0;
align-items: center;
}
.product-price .offer-price{
font-size: 48px;
font-weight: 700;
}
.product-price .sale-price{
font-size: 22px;
font-weight: 500;
text-decoration: line-through;
color: var(--grey);
margin-left: 12px;
}
/** Product Details **/
.product-details{
margin: 10px 0;
}
.product-details h3{
font-size: 18px;
font-weight: 500;
}
.product-details p{
margin: 5px 0;
font-size: 14px;
line-height: 1.2rem;
}
/** Product size **/
.product-size{
margin: 10px 0;
}
.product-size h4{
font-size: 16px;
font-weight: 500;
}
.product-size .size-layout{
margin: 5px 0;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.product-size .size-layout .size-input{
display: none;
}
.product-size .size-layout .size{
background: var(--bg-grey);
padding: 10px 18px;
border: 1px solid var(--bg-grey);
border-radius: 4px;
margin-left: 0px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.product-size .size-layout .size:hover{
border: 1px solid var(--grey);
}
.product-size .size-layout input[type="radio"]:checked + .size{
background-color: rgb(35, 35, 35);
border: 1px solid var(--grey);
color: var(--bg-grey);
box-shadow: 0 3px 6px var(--shadow);
}
/** Product Color **/
.product-color{
margin: 10px 0;
justify-content: center;
}
.product-color h4{
font-size: 16px;
font-weight: 500;
}
.product-color .color-layout{
margin: 5px 0;
display: flex;
gap: 10px;
}
.product-color .color-layout label{
border-radius: 4px;
cursor: pointer;
content: '';
width: 40px;
height: 40px;
display: inline-block;
}
.product-color .color-layout .black{
background-color: black;
}
.product-color .color-layout .red{
background-color: red;
}
.product-color .color-layout .blue{
background-color: blue;
}
.product-color .color-layout input[type="radio"]:checked + label{
box-shadow: 0 3px 6px var(--shadow);
}
.product-color .color-layout .color-input{
display: none;
}
/** divider **/
.divider{
display: block;
height: 1px;
width: 100%;
background: #48484830;
margin: 20px 0;
}
/** product Button Group **/
.product-btn-group{
display: flex;
gap: 15px;
}
.product-btn-group .button{
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 24px;
font-size: 16px;
font-weight: 500;
}
.product-btn-group .buy-now{
background-color: var(--accent-color);
color: #fff;
border: 1px solid var(--accent-color);
border-radius: 4px;
cursor: pointer;
}
.product-btn-group .buy-now i{
font-size: 20px;
}
.product-btn-group .buy-now:hover{
box-shadow: 0 3px 6px var(--shadow);
}
.product-btn-group .add-cart{
background-color: var(--bg-grey);
color: var(--grey);
border-radius: 4px;
cursor: pointer;
}
.product-btn-group .add-cart i{
font-size: 20px;
}
.product-btn-group .add-cart:hover{
box-shadow: 0 3px 6px var(--shadow);
background: var(--grey);
color: #fff;
}
.product-btn-group .heart{
color: var(--grey);
cursor: pointer;
}
.product-btn-group .heart i{
font-size: 20px;
}
.product-btn-group .heart:hover{
color: var(--accent-color);
}
/** Responsive Mobile **/
@media screen and (max-width:520px) {
.container{
padding: 20px;
height: auto;
}
.row{
display: block;
}
.col-6{
width: 100%;
display: block;
}
.single-product{
width: 100%;
position: relative;
}
.product-image .product-image-main{
width: 100%;
height: 280px;
}
.product-image-slider{
gap: 5px;
}
.breadcrumb{
display: none;
}
.product-title h2{
font-size: 24px;
line-height: 1.6rem;
}
.product-size{
display: block;
}
.product-size .size-layout{
display: block;
margin: 10px 0;
}
.product-size .size-layout .size{
padding: 6px 10px;
}
.product-btn-group{
display: flex;
flex-direction: column;
gap: 10px;
}
}
/** Responsive Tablet **/
@media (min-width: 520px ) and (max-width: 1080px) {
.container{
display: block;
height: auto;
padding: 20px;
}
}
</style>
<script type="text/javascript">
const sliderMainImage = document.getElementById("product-main-image"); //product container image
const sliderImageList = document.getElementsByClassName("image-list"); // image thumblian group selection
console.log(sliderImageList);
sliderImageList[0].onclick = function(){
sliderMainImage.src = sliderImageList[0].src;
console.log(sliderMainImage.src);
};
sliderImageList[1].onclick = function(){
sliderMainImage.src = sliderImageList[1].src;
console.log(sliderMainImage.src);
};
sliderImageList[2].onclick = function(){
sliderMainImage.src = sliderImageList[2].src;
console.log(sliderMainImage.src);
};
sliderImageList[3].onclick = function(){
sliderMainImage.src = sliderImageList[3].src;
console.log(sliderMainImage.src);
};
</script>
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="contact-form">
<a class="close">×</a>
<form action="mail/mail.php" method="post">
<h3>Apply Now</h3>
<div>
<input class="fname" type="text" name="name" placeholder="Full name" />
<input type="email" name="email" placeholder="Email" />
<input type="number"name="number" placeholder="Phone number" />
</div>
<div>
</div> <div class="form-group ">
<div class="product-details">
<div class="add-to-cart">
<button type="submit" type="submit" name="review_submit" class="add-to-cart-btn"><i class="fa fa-sign-in"></i> Submit</button>
</div></div></div>
</form>
</div>
</div>
</div>
<script>
let modalBtns = [...document.querySelectorAll(".add-to-cart-btn")];
modalBtns.forEach(function (btn) {
btn.onclick = function () {
let modal = btn.getAttribute("data-modal");
document.getElementById(modal).style.display = "block";
};
});
let closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function (btn) {
btn.onclick = function () {
let modal = btn.closest(".modal");
modal.style.display = "none";
};
});
window.onclick = function (event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
};
</script>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 8;
left: 0;
top: 0;
width: 100%;
height: 300%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
margin: 145px auto;
border: 1px solid #999;
width: 70%;
}
h2,
p {
margin: 0 0 20px;
font-weight: 400;
color: #999;
}
span {
color: #666;
display: block;
padding: 0 0 5px;
}
.contact-form {
padding: 25px;
margin: 25px;
box-shadow: 0 2px 5px#DC318B;
background: #fff;
}
input,
textarea {
width: 90%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #A51E22;
outline: none;
}
.contact-form button {
width: 100%;
padding: 10px;
border: none;
background: #DC318B;
font-size: 16px;
font-weight: 400;
color: #fff;
}
button:hover {
background: #A51E22;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
button.button {
background: none;
border-top: none;
outline: none;
border-right: none;
border-left: none;
border-bottom: #02274a 1px solid;
padding: 0 0 3px 0;
font-size: 16px;
cursor: pointer;
}
button.button:hover {
border-bottom: #a99567 1px solid;
color: #a99567;
}
.center{
width: 100px; height: 100px; display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
<!-- Partners End -->
<?php require('footer.php');
?>