Untitled
unknown
plain_text
a year ago
37 kB
3
Indexable
Never
<?php include 'components/connect.php'; session_start(); $user_id = $_SESSION['user_id']; if(!isset($user_id)){ header('location:user_login.php'); } if (isset($_SESSION['user_id'])) { $user_id = $_SESSION['user_id']; } else { $user_id = ''; }; if (isset($_POST['update_qty'])) { $cart_id = $_POST['pid']; $qty = $_POST['qty']; $qty = filter_var($qty, FILTER_SANITIZE_STRING); $update_qty = $conn->prepare("UPDATE `cart` SET quantity = ? WHERE id = ?"); $update_qty->execute([$qty, $pid]); $message[] = 'cart quantity updated'; } $products_query = "SELECT * FROM products"; $result = mysqli_query($link, $products_query); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Buy Now</title> <!-- font awesome cdn link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> --> <!-- custom css file link --> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <style> .message-box { border: 1px solid green; background-color: #f9f9f9; padding: 10px; margin-bottom: 20px; } .form-container { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 80%; /* Adjust as needed */ margin: auto; border: 2px solid #ffffff; /* Add a white border to the form container */ padding: 20px; border-radius: 5px; } .contact form { padding: 2rem; text-align: center; background-color: var(--white); box-shadow: var(--box-shadow); border-radius: 0.5rem; border: var(--border); max-width: 99rem; margin: 0 auto; } .contact form .box { margin: 9rem 0; width: 100%; background-color: var(--light-bg); padding: 1rem; font-size: 1.8rem; height: 100%; color: var(--black); } .section-heading { text-align: center; color: #fff; /* Change this to the color you prefer */ } .textarea, .upload-label { height: 300px; /* Adjust this value to control the height of the textarea and upload box */ position: relative; display: flex; align-items: center; justify-content: center; text-align: center; } .file-input { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .form-label { color: white; font-size: 16px; width: 120px; text-align: center; font-weight: bold; } .form-input { width: 100%; border: 1px solid white; border-radius: 0.5rem; background-color: var(--white); box-shadow: var(--box-shadow); padding: 0.8rem; font-size: 14px; color: var(--black); } .file-message { font-size: small; font-weight: 300; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .choose-file-button { flex-shrink: 0; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; padding: 8px 15px; margin-right: 10px; font-size: 12px; text-transform: uppercase; } .upload-label { cursor: pointer; } .upload-icon { font-size: 5rem; } #product option { background-color: #2e2c39; color: white; font-size: 18px; } #product, #country { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; background-color: #2e2c39; color: white; text-align: center; width: 27%; } input[type="file"] { padding: 10px 20px; } .buy { width: 80%; /* Adjust the width of the buy section */ margin: auto; border: 2px solid #ffffff; /* Add a white border to the buy section */ padding: 20px; border-radius: 5px; } .product-name { font-size: 24px; font-weight: bold; color: #000; } .product-details { font-size: 18px; color: #666; } .buy .box-container .form-row { display: flex; gap: 20px; margin-bottom: 15px; } .form-label { width: 120px; text-align: center; font-weight: bold; } .form-input { flex: 1; max-width: 250px; text-align: center; } .buy .box-container { display: flex; } .file-drop-area { position: relative; display: flex; align-items: center; width: 450px; max-width: 100%; padding: 25px; border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: 3px; transition: 0.2s; height : 200px; } .file-drop-area .file-message, .file-drop-area .choose-file-button { color: white; } .img-preview { max-width: 100%; max-height: 100%; } .text-below-input { font-size: 12px; color: var(--black); /* Change this color as needed */ margin-top: 5px; /* Adjust margin as needed */ } .product-name { display: flex; flex-direction: column; align-items: center; /* Center horizontally */ justify-content: center; /* Center vertically */ text-align: center; /* Center text horizontally */ height: 100%; /* Ensure the container takes up the full height */ } .product-name .name { font-size: 35px; } .product-name .price { color: #e74c3c; margin-top: 10px; /* Add a little space between the name and price */ } .product-name .details { font-size: x-small; margin-top: 10px; /* Add space between price and details */ } @keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; } 99% { left: 0; } } @keyframes tostart { 75% { left: 0; } 95% { left: -300%; } 98% { left: -300%; } 99% { left: 0; } } @keyframes snap { 96% { scroll-snap-align: center; } 97% { scroll-snap-align: none; } 99% { scroll-snap-align: none; } 100% { scroll-snap-align: center; } } .carousel { position: relative; padding-top: 75%; filter: drop-shadow(0 0 10px #0003); perspective: 100px; } .carousel__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .carousel__slide { position: relative; flex: 0 0 100%; width: 100%; background-color: #f99; counter-increment: item; } .carousel__slide:nth-child(even) { background-color: #99f; } .carousel__slide:before { content: counter(item); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em; } .carousel__snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; } @media (hover: hover) { .carousel__snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite; } .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; } } @media (prefers-reduced-motion: reduce) { .carousel__snapper { animation-name: none; } } .carousel:hover .carousel__snapper, .carousel:focus-within .carousel__snapper { animation-name: none; } .carousel__navigation { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; } .carousel__navigation-list, .carousel__navigation-item { display: inline-block; } .carousel__navigation-button { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: #333; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%; font-size: 0; transition: transform 0.1s; } .carousel::before, .carousel::after, .carousel__prev, .carousel__next { position: absolute; top: 0; margin-top: 37.5%; width: 4rem; height: 4rem; transform: translateY(-50%); border-radius: 50%; font-size: 0; outline: 0; } .carousel::before, .carousel__prev { left: -1rem; } .carousel::after, .carousel__next { right: -1rem; } .carousel::before, .carousel::after { content: ''; z-index: 1; background-color: #333; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 2.5rem; line-height: 4rem; text-align: center; pointer-events: none; } .carousel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); } .carousel::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); } </style> </head> <body> <div id="myModal" class="modal"> <div class="modal-content"> <img id="modalImg" src="" alt=""> </div> </div> <?php include 'components/user_header.php'; ?> <section class="buy"> <img src="images/buy_now.jpg" style="width: 100%; height: auto; display: block; margin: 0 auto;"> <h1 class="heading">Proceed to Buy</h1> <div class="select-product" style="display: flex; justify-content: center; align-items: center;"> <label for="country" style="font-size: 18px; color:white;">Select Product: </label> <?php // Check if the pid key exists in the POST data if (isset($_POST['pid'])) { $selected_pid = $_POST['pid']; } else { $selected_pid = null; // Set a default value if pid is not set } ?> <select name="product" id="product" class="box"> <?php // Check if the result has any rows if (mysqli_num_rows($result) > 0) { // Fetch all rows while ($row = mysqli_fetch_assoc($result)) { // Check if this option should be pre-selected $selected = $row['id'] == $selected_pid ? 'selected' : ''; echo "<option value=" . $row['id'] . " " . $selected . ">" . $row['name'] . "</option>"; } } ?> </select> </div><br> <div class="box-container"> <form action="cartbackend.php" method="post" class="box" enctype="multipart/form-data"> <div class="row"> <div class="col-md-6"> <input type="hidden" name="pid" class="id" value="<?= isset($_REQUEST['pid']) ? $_REQUEST['pid'] : '-'; ?>"> <input type="hidden" name="image" class="image" value="<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : '-'; ?>"> <!-- Display the image --> <h1>CSS-only Carousel</h1> <p>This carousel is created with HTML and CSS only.</p> <section class="carousel" aria-label="Gallery"> <ol class="carousel__viewport"> <li id="carousel__slide1" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"> <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a> <a href="#carousel__slide2" class="carousel__next">Go to next slide</a> </div> </li> <li id="carousel__slide2" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"></div> <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide3" class="carousel__next">Go to next slide</a> </li> <li id="carousel__slide3" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"></div> <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide4" class="carousel__next">Go to next slide</a> </li> <li id="carousel__slide4" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"></div> <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide1" class="carousel__next">Go to first slide</a> </li> </ol> <aside class="carousel__navigation"> <ol class="carousel__navigation-list"> <li class="carousel__navigation-item"> <a href="#carousel__slide1" class="carousel__navigation-button">Go to slide 1</a> </li> <li class="carousel__navigation-item"> <a href="#carousel__slide2" class="carousel__navigation-button">Go to slide 2</a> </li> <li class="carousel__navigation-item"> <a href="#carousel__slide3" class="carousel__navigation-button">Go to slide 3</a> </li> <li class="carousel__navigation-item"> <a href="#carousel__slide4" class="carousel__navigation-button">Go to slide 4</a> </li> </ol> </aside> </section> <div class="slider"> <div class="slides"> <div class="carousel-item active"> <img id="myImage" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>"> </div> <div class="carousel-item"> <img id="myImage1" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>"> </div> <div class="carousel-item"> <img id="myImage2" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="product-name text-center mt-3"> <input type="hidden" style="text-align: center;" name="name" class="name" value="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>"> <input type="hidden" name="price" class="price" value="<?= isset($_REQUEST['price']) ? $_REQUEST['price'] : '0'; ?>"> <div class="name nametext" style="font-size: 35px;"> <?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?> </div> <div class="price" style="color: #e74c3c;"> <?= isset($_REQUEST['price']) ? $_REQUEST['price'] : '-'; ?> </div><hr> <div class="details" style="font-size: x-small; color:#fff; text-align:left;"> <?= isset($_REQUEST['details']) ? nl2br($_REQUEST['details']) : '-'; ?> </div> <input type="hidden" name="details" class="name" value="<?= isset($_REQUEST['details']) ? $_REQUEST['details'] : '-'; ?>"> <div class="flex"> </div> </div><br> </div> </div><hr> <div class="buyform" style="margin-left: 6%; margin-top:15px;"> <div class="form-row"> <span class="form-label">First Name:</span> <input type="text" class="form-input" name="firstName" required="required" pattern="[A-Za-z]+" title="Please enter only letters."> <span class="form-label">Middle Name:</span> <input type="text" class="form-input" name="middleName" required="required" pattern="[A-Za-z]+" title="Please enter only letters."> </div> <div class="form-row"> <span class="form-label">Last Name:</span> <input type="text" class="form-input" name="lastName" required="required" pattern="[A-Za-z]+" title="Please enter only letters."> <span class="form-label">Gender:</span> <select class="form-input" name="gender" required="required"> <option value="male">Male</option> <option value="female">Female</option> </select> </div> <div class="form-row"> <span class="form-label">Eye Color:</span> <select class="form-input" name="eyeColor" required="required"> <option value="BLU">Blue</option> <option value="BRN">Brown</option> <option value="GRN">Green</option> <option value="HAZ">Hazel</option> <option value="BLK">Black</option> <option value="GRY">Gray</option> <option value="SDY">Sandy</option> <option value="MUL">Multicolor</option> </select> <span class="form-label">Hair Color:</span> <select class="form-input" name="hairColor" required="required"> <option value="BLN">Blonde</option> <option value="BRN">Brown</option> <option value="BLK">Black</option> <option value="GRY">Gray</option> <option value="BLD">Bald</option> <option value="RED">Red</option> </select> </div> <div class="form-row"> <span class="form-label">Date of Birth:</span> <input type="date" class="form-input" name="dob" required="required" min="1950-01-01"> <span class="form-label">Height:</span> <input type="text" placeholder="Mention centimetres or ft." class="form-input" name="height" required="required"> </div> <div class="form-row"> <span class="form-label">Weight:</span> <input type="text" placeholder="Mention KG or lbs." class="form-input" name="weight" required="required"> <span class="form-label">Street Address:</span> <input type="text" class="form-input" name="streetAddress"> </div> <div class="form-row"> <span class="form-label">City for ID:</span> <input type="text" class="form-input" name="cityForID"> <span class="form-label">Zip Code for ID:</span> <input type="text" class="form-input" name="zipCodeForID"> </div> <div class="form-row"> <span class="form-label">ISS Date:</span> <input type="date" class="form-input" name="issDate"> <span class="form-label">Restrictions:</span> <select class="form-input" name="restrictions"> <option value="none">None</option> <option value="limited">Limited</option> <option value="full">Full</option> </select> </div> <div class="form-row"> <span class="form-label">Organ Donor:</span> <select class="form-input" name="organDonor"> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> <input type="hidden" class="quanty" name="country" value="0"> <div class="country-select"> <label for="country" style="font-size: 18px; color:white;">Duplicate Copy: </label> <select name="coutry" id="country"> <option value="0">Select</option> <option value="1">1x</option> <option value="2">2x</option> <option value="3">3x</option> </select> <p style="color:#fff; margin-left:20%">By Default You Will Receive 2 copies.</p> </div><br> <label for="#" style="font-size: 18px; color:white;">Upload Images </label> <div class="form-row"> <div class="file-drop-area"> <span class="choose-file-button">Choose files</span> <span class="file-message">or drag and drop files here</span> <input class="file-input" type="file" accept="image/*" multiple name="file1" onchange="readURL(this, 'preview1')" required> <img id="preview1" class="img-preview" src="#" style = "display:none;"> </div> <div class="file-drop-area"> <span class="choose-file-button">Choose files</span> <span class="file-message">or drag and drop files here</span> <input class="file-input" type="file" accept="image/*" multiple name="file2" onchange="readURL(this, 'preview2')" required> <img id="preview2" class="img-preview" src="#" style = "display:none;"> </div> </div> <button type="submit" id="proceedToCheckoutBtn" class="btn" name="submitaddtocart">Add To Cart</button> </form> </div> </section> <?php include 'components/footer.php'; ?> <script src="js/script.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { var modal = document.getElementById("myModal"); var modalImg = document.getElementById("modalImg"); // Loop through all carousel images var imgs = document.querySelectorAll(".carousel-item img"); for (var i = 0; i < imgs.length; i++) { imgs[i].addEventListener('click', function() { modal.style.display = "flex"; modalImg.src = this.src; modalImg.alt = this.alt; }); } // Close the modal when the background is clicked modal.addEventListener('click', function(event) { if (event.target === modal) { modal.style.display = "none"; } }); }); </script> </body> </html> <?php require 'vendor/autoload.php'; if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['name']) && isset($_POST['email'])) { $name = $_POST['name']; $email = $_POST['email']; // Process image1 upload $targetDirectoryImg1 = "user_images/"; $targetImage1File = $targetDirectoryImg1 . basename($_FILES["image1"]["name"]); $uploadImage1Ok = 1; $image1FileType = strtolower(pathinfo($targetImage1File, PATHINFO_EXTENSION)); // Check if the uploaded file is a valid image (you can adjust the allowed file types as needed) if ($image1FileType !== "jpg" && $image1FileType !== "jpeg" && $image1FileType !== "png") { echo "Only JPG, JPEG, and PNG images are allowed for image1."; $uploadImage1Ok = 0; } // Move the uploaded image1 file to the target directory if ($uploadImage1Ok === 1 && move_uploaded_file($_FILES["image1"]["tmp_name"], $targetImage1File)) { // Insert the record into the database with the image1 file path $image1_path = $targetImage1File; } else { echo "Error uploading your image1."; exit; } // Process image2 upload $targetDirectoryImg2 = "user_images/"; $targetImage2File = $targetDirectoryImg2 . basename($_FILES["image2"]["name"]); $uploadImage2Ok = 1; $image2FileType = strtolower(pathinfo($targetImage2File, PATHINFO_EXTENSION)); // Check if the uploaded file is a valid image (you can adjust the allowed file types as needed) if ($image2FileType !== "jpg" && $image2FileType !== "jpeg" && $image2FileType !== "png") { echo "Only JPG, JPEG, and PNG images are allowed for image2."; $uploadImage2Ok = 0; } // Move the uploaded image2 file to the target directory if ($uploadImage2Ok === 1 && move_uploaded_file($_FILES["image2"]["tmp_name"], $targetImage2File)) { // Insert the record into the database with the image2 file path $image2_path = $targetImage2File; } else { echo "Error uploading your image2."; exit; } } ?> <script> // dropdown $(document).ready(function() { $("#product").change(function() { var productid = $(this).val(); $.ajax({ url: "product_fetch_buy_now.php", // Replace with your API URL type: "POST", data: { 'id': productid, 'onchange': "onchange" }, success: function(data) { // Handle the response data var parsedData = JSON.parse(data); // console.log(parsedData.details); var processedResponse = parsedData.details.replace(/\n/g, '<br>').replace(/ /g, ' '); $(".id").val(parsedData.id); $(".name").val(parsedData.name); $(".image").val(parsedData.image_01); $(".price").val(parsedData.price); $(".price").html('Total price: $' + parsedData.price + '/-'); $(".nametext").text(parsedData.name); $(".showedprice").text(parsedData.price); $(".details").html('<strong>Description:</strong> <br>'+processedResponse); // Display the product details var newImageSrc = "uploaded_img/" + parsedData.image_01; var newImageSrc2 = "uploaded_img/" + parsedData.image_02; var newImageSrc3 = "uploaded_img/" + parsedData.image_03; $("#myImage").attr("src", newImageSrc); $("#myImage").attr("alt", parsedData.name); $("#myImage1").attr("src", newImageSrc2); $("#myImage1").attr("alt", parsedData.name); $("#myImage2").attr("src", newImageSrc3); $("#myImage2").attr("alt", parsedData.name); // $("#result").html("<p>" + JSON.stringify(data) + "</p>"); }, error: function(xhr, status, error) { } }); }); // Also fetch and display the details when the page is first loaded $(document).ready(function() { var productid = $("#product").val(); $.ajax({ url: "product_fetch_buy_now.php", // Replace with your API URL type: "POST", data: { 'id': productid, 'onchange': "onchange" }, success: function(data) { // Handle the response data var parsedData = JSON.parse(data); // console.log(parsedData.details); var processedResponse = parsedData.details.replace(/\n/g, '<br>').replace(/ /g, ' '); $(".id").val(parsedData.id); $(".name").val(parsedData.name); $(".image").val(parsedData.image_01); $(".price").val(parsedData.price); $(".price").html('Total price: $' + parsedData.price + '/-'); $(".nametext").text(parsedData.name); $(".showedprice").text(parsedData.price); $(".details").html('<strong>Description: </strong><br>'+processedResponse); // Display the product details var newImageSrc = "uploaded_img/" + parsedData.image_01; var newImageSrc2 = "uploaded_img/" + parsedData.image_02; var newImageSrc3 = "uploaded_img/" + parsedData.image_03; $("#myImage").attr("src", newImageSrc); $("#myImage").attr("alt", parsedData.name); $("#myImage1").attr("src", newImageSrc2); $("#myImage1").attr("alt", parsedData.name); $("#myImage2").attr("src", newImageSrc3); $("#myImage2").attr("alt", parsedData.name); // $("#result").html("<p>" + JSON.stringify(data) + "</p>"); }, error: function(xhr, status, error) { } }); }); }); </script> <script> $(document).on('change', '.file-input', function() { var filesCount = $(this)[0].files.length; var textbox = $(this).prev(); if (filesCount === 1) { var fileName = $(this).val().split('\\').pop(); textbox.text(fileName); } else { textbox.text(filesCount + ' files selected'); } }); </script> <script> // JavaScript to set and get the selected option using local storage var selectElement = document.getElementById('product'); selectElement.addEventListener('change', function() { var selectedValue = selectElement.value; localStorage.setItem('selectedProduct', selectedValue); }); var storedSelectedValue = localStorage.getItem('selectedProduct'); if (storedSelectedValue !== null) { for (var i = 0; i < selectElement.options.length; i++) { if (selectElement.options[i].value === storedSelectedValue) { selectElement.options[i].selected = true; break; } } } </script> <!-- js for image preview --> <script> function readURL(input, previewId) { var previewElement = document.getElementById(previewId); if(input.files){ previewElement.style.display = "block"; }else{ previewElement.style.display = "none"; } if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { previewElement.src = e.target.result; }; reader.readAsDataURL(input.files[0]); } else { // previewElement.src = "images/noimage.png"; } } $('#country').change(function(){ var polucarbostate = ['TEXAS','GEORGIA','COLORADO','MARYLAND','OHIO','WISCONSIN','PENNSYLVANIA','INDIANA','NEW-YORK','UNITED-KINGDOM','ONTARIO']; var countryarray = $(".name").val().split(" "); console.log(countryarray); var countryupper = countryarray[0].toUpperCase(); var price = 40; var price2 = 60; var totlamt = 0; if($(this).val()==1){ if(polucarbostate.includes(countryupper)){ totlamt = price2 * 1; Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success"); $('.quanty').val(totlamt); }else{ totlamt = price * 1; Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success"); $('.quanty').val(totlamt); } }else if($(this).val()==2){ if(polucarbostate.includes(countryupper)){ totlamt = price2 * 2; Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success"); $('.quanty').val(totlamt); }else{ totlamt = price * 2; Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success"); $('.quanty').val(totlamt); } }else if($(this).val()==3){ if(polucarbostate.includes(countryupper)){ totlamt = price2 * 4; Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success"); $('.quanty').val(totlamt); }else{ totlamt = price * 4; Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success"); $('.quanty').val(totlamt); } }else{ $('.quanty').val(totlamt); } }); </script> <script> // Add your JavaScript code here const slides = document.querySelector('.slides'); const prevButton = document.querySelector('.carousel-control-prev'); const nextButton = document.querySelector('.carousel-control-next'); let currentIndex = 0; nextButton.addEventListener('click', () => { currentIndex = (currentIndex + 1) % slides.children.length; updateSlidePosition(); }); prevButton.addEventListener('click', () => { currentIndex = (currentIndex - 1 + slides.children.length) % slides.children.length; updateSlidePosition(); }); function updateSlidePosition() { slides.style.transform = `translateX(-${currentIndex * 100}%)`; } </script>