File Explorer

<?php include("db_config.php");
if(isset($_POST['sr_enq'])){
extract($_POST);
date_default_timezone_set('Asia/Kolkata');
$date = date('Y-m-d H:i:s');
$sidd = mysqli_real_escape_string($conn,$sid);
$names = mysqli_real_escape_string($conn,$ssfname);;
$econtact_no = mysqli_real_escape_string($conn,$ssphone);
$emailid = mysqli_real_escape_string($conn,$ssemail_id);
$msg = mysqli_real_escape_string($conn,$ssmessage);
$sqlenq="INSERT into service_enquiry(service_id,first_name,contact_no,email_id,message) values ('$sidd','$names','$econtact_no','$emailid','$msg')"; 
    echo $sqlenq;
$resulteq = mysqli_query($conn, $sqlenq); 
if($resulteq) {
  echo '<script>alert("Thank you!")</script>';  
}
}
 ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Are you seeking a talented interior and exterior designer to bring your space to life? Our team of experts specializes in creating captivating designs that harmonize indoor and outdoor spaces. With a blend of creativity and expertise, we'll transform your vision into a stunning reality. From conceptualization to implementation, we'll work closely with you to ensure every detail reflects your unique style and preferences. Whether you're looking to revamp a single room or reimagine your entire property, our innovative techniques and trendsetting designs will exceed your expectations. Elevate your living or working environment today by contacting our exceptional interior and exterior design services." />
    <meta name="keywords" content="Interior designer, exterior designer, space transformation, creative design, personalized style, innovative techniques, trendsetting, room revamp, property design">
    <meta name="author" content="" />
    <meta name="viewport" content=" width=device-width, initial-scale=1, maximum-scale=2" />
    <title>Callipers Interiors</title>
    <link rel="shortcut icon" href="images/favicon.png" />
    <?php include("css.php");?>
    <style>
        .featured-imagebox-post.style1 .featured-content .featured-title h3 a {
            color: #232323;
        }
        .featured-title h3 {
            font-size: 20px;
            line-height: 25px;
            margin-bottom: 0px;
        } 
        .site-main {
            border-top: 1px solid #ccc
        } 
        #slider img {
            border-radius: 8px;
        }
        #slider-thumbs .list-inline-item {
            width: 30% !important;
            float: left !important;
            margin-right: 10px;
            margin-bottom: 20px;
        }
        #slider-thumbs a img {
            border: 2px solid #6ec6b6;
            transition-duration: .2s;
            border-radius: 8px;
            width: 100%;
            height: 120px;
        }
        #slider-thumbs a img:hover {
            transform: scale(1.1);
            transition-duration: .2s;
        }
        #slider-thumbs .selected img {
            border: 2px solid #ea1a66;
        }
        #more {
            display: none;
        }
        .overlay {
            position: fixed;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 500ms;
            visibility: hidden;
            opacity: 0;
            z-index: 1;
        }
        .mdi-help {
            border: 2px solid #cb5300 !important;
            border-radius: 50%;
            padding: 4px 4px 2px 4px !important;
            font-size: 11px !important;
            margin-right: 2px;
            color: #FFF !important;
            font-weight: 900 !important;
            text-align: center !important;
            font-family: arial;
            background-color: #cb5300 !important;
        }
        .overlay:target {
            visibility: visible;
            opacity: 1;
        }
        .popup {
            margin: 30px auto;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            width: 30%;
            position: relative;
            transition: all 5s ease-in-out;
        }
        .popup h2 {
            margin-top: 0;
            color: #333;
            font-family: Tahoma, Arial, sans-serif;
            font-size: 22px;
        }
        .popup .close {
            position: absolute;
            top: 20px;
            right: 30px;
            transition: all 200ms;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
        }
        .popup .close:hover {
            color: #06D85F;
        }
        .popup h2 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: left;
            color: #474a50;
            font-weight: 700;
            line-height: 25px;
        }
        .popup .content {
            max-height: 30%;
            overflow: auto;
        }
        .popup input[type="text"],
        .popup input[type="email"],
        .popup textarea[type="text"] {
            background-color: #fff;
            border: 0px solid #ccc !important;
            border-bottom: 1px solid #cacaca !important;
            border-radius: 0px !important;
            box-shadow: none !important;
            box-sizing: border-box !important;
            color: #474a50 !important;
            display: block;
            font-size: 14px;
            font-weight: 500 !important;
            height: auto !important;
            padding: 10px 18px !important;
            width: 100%;
            margin-top: 20px;
            font-family: arial;
            line-height: 10px;
        }
        .popup .btnrequests {
            width: 100%;
            border-radius: 25px;
            padding: 10px;
            color: #fff;
            background-color: #eb1e6a;
            margin-top: 25px;
            margin-bottom: 20px;
            border: none;
            font-weight: 500;
            letter-spacing: .75px;
            line-height: 24px;
            text-transform: uppercase;
            text-align: center;
            font-size: 20px;
        }
        @media (min-width: 320px) and (max-width: 640px) {
            #slider-thumbs .list-inline-item {
                width: 48% !important;
                float: left !important;
                margin-right: 1%;
                margin-bottom: 10px;
            }
            .popup {
                margin: 20px auto;
                padding: 20px;
                background: #fff;
                border-radius: 5px;
                width: 98%;
                position: relative;
                transition: all 5s ease-in-out;
            }
        }
    </style>
</head>
<body>
    <div class="page ttm-bgcolor-grey">

<?php include("header.php");?>
        <div class="mm-page mm-slideout" id="mm-0">
            <?php $page_name = str_replace(".php", "", basename($_SERVER['PHP_SELF']));
    $Current_URL = basename(dirname(__FILE__));
    $findid = (mysqli_query($conn, "SELECT * FROM service_detail"));
    while ($res2=mysqli_fetch_array($findid)) {
        if(strtolower(str_replace(" ", "-", $res2["service_title"])) == $page_name){
            $pdid = $res2["id"];
        }
    } 
    $srid=$pdid;
    $sql_prdss="select category.name as categoryn,service_detail.* from service_detail join category on service_detail.cat_id=category.id where service_detail.id='".$srid."'";
    $result_prdss = mysqli_query($conn, $sql_prdss);
    $res_prdss= mysqli_fetch_array($result_prdss);  ?>

<div class="site-main">
                <div class="ttm-row sidebar ttm-sidebar-left ttm-bgcolor-white clearfix">
                    <div class="container-fluid">
                        
                        <div class="row">
                            <div class="col-lg-7" id="slider">
                                <div class="col-lg-12" id="carousel-bounding-box">
                                    <div id="myCarousel" class="carousel slide">
                                        
                                        <div class="carousel-inner">
                                            <?php $id=$res_prdss["id"]; $k='0';
                            $sqlsr=mysqli_query($conn,"select * from service_img where service_id='$id'");
                            while($resmg= mysqli_fetch_array($sqlsr)){ ?>
                                            <div class="<?php if($k=='0'){ echo "active"; } ?> item carousel-item" data-slide-number="<?= $k;?>">
                                                <img src="https://callipersinteriors.com/admin/images/service/<?= $resmg['service_image']; ?>" class="img-fluid">
                                            </div>
                                            <?php $k++; } ?>

</div>
                                        <a class="carousel-control-prev pt-4" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                                        <a class="carousel-control-next pt-5" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>

</div>
                                </div>
                            </div>
                            <div class="col-lg-5" id="slider-thumbs">
                                <div class="">
                                    <h2><?= $res_prdss['service_title']; ?></h2>
                                    <p class="text-justify">
                                        <?php $strings=html_entity_decode($res_prdss['desp']);
                    $shortcontent = substr($strings, 0, 350);
                    $shortdesp = substr($strings, -100);
                     echo $shortcontent; ?>
                                        <span id="dots">...</span><span id="more"><?= $shortdesp?></span>
                                        <button onclick="myFunction()" id="myBtn" style="border:0px solid #fff;background-color:#fff;color:#ea1a66;height:50px">Read more</button>
                                    </p>
                                </div>
                                <div class="">
                                    <a class="btn estbtn" style="color:#fff" href="#question">Get Free Estimate</a>
                                </div>
                                <div class="mt-3">
                                    <h2>Related Images</h2>
                                    <ul class="list-inline">
                                        <?php $sid=$res_prdss["id"];
                    $sqlsrs=mysqli_query($conn,"select * from service_img where service_id='$sid'");
                             $j='0';
                    while($ress= mysqli_fetch_array($sqlsrs)){ ?>
                                        <li class="list-inline-item">
                                            <a class="selected" id="carousel-selector-<?= $j;?>">
                                                <img src="https://callipersinteriors.com/admin/images/service/<?= $ress['service_image']; ?>" class="">
                                            </a>
                                        </li><?php $j++; } ?>

</ul>

</div>
                            </div>

</div>
                    </div>
                </div>
            </div>
            <div id="question" class="overlay">
                <div class="popup">
                    <h2 style="margin-bottom:0px">Designs for Your Budget</h2>
                    <a class="close" href="#">&times;</a>
                    <div class="content">
                        <hr />
                        <fieldset>
                            <form method="post" action="">
                                <div class="row ttm-boxes-spacing-20px enqs"> 
                                    <div class="col-md-12 pl-0">
                                        <input type="hidden" name="sid" id="sid" value="<?= $res_prdss['id']; ?>">
                                        <input name="ssfname" type="text" value="" placeholder="Enter Name..." class="inrenq" required="required">
                                    </div>

<div class="col-md-12 pl-0">
                                        <input name="ssemail_id" type="email" value="" placeholder="Enter Email Address..." class="inrenq" required="required">
                                    </div>
                                    <div class="col-md-12 pl-0">
                                        <input name="ssphone" type="text" value="" placeholder="Enter Contact Number..." class="inrenq" required="required">
                                    </div>
                                    <div class="col-md-12 pl-0">
                                        <textarea name="ssmessage" cols="50" rows="2" placeholder="Enter Message Here..." class="inrenq" required="required"></textarea>
                                    </div>
                                    <div class="col-md-12">
                                        <button name="sr_enq" type="submit" class="btn btnrequests" style="">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php include("footer.php");?>
    <script src="https://callipersinteriors.com/js/jquery.min.js"></script>
    <script src="https://callipersinteriors.com/js/jquery-migrate-1.4.1.min.js"></script>
    <script src="https://callipersinteriors.com/js/tether.min.js"></script>
    <script src="https://callipersinteriors.com/js/bootstrap.min.js"></script>
    <script src="https://callipersinteriors.com/js/jquery.easing.js"></script>
    <script src="https://callipersinteriors.com/js/jquery-waypoints.js"></script>
    <script src="https://callipersinteriors.com/js/jquery-validate.js"></script>
    <script src="https://callipersinteriors.com/js/jquery.prettyPhoto.js"></script>
    <script src="https://callipersinteriors.com/js/slick.min.js"></script>
    <script src="https://callipersinteriors.com/js/numinate.min.js"></script>
    <script src="https://callipersinteriors.com/js/imagesloaded.min.js"></script>
    <script src="https://callipersinteriors.com/js/jquery-isotope.js"></script>
    <script src="https://callipersinteriors.com/js/jquery.event.move.js"></script>
    <script src="https://callipersinteriors.com/js/jquery.twentytwenty.js"></script>
    <script src="https://callipersinteriors.com/js/circle-progress.min.js"></script>
    <script src="https://callipersinteriors.com/js/main.js"></script>
    <script src="https://callipersinteriors.com/revolution/js/slider.js"></script>
    <script src='https://callipersinteriors.com/revolution/js/revolution.tools.min.js'></script>
    <script src='https://callipersinteriors.com/revolution/js/rs6.min.js'></script>
    <script>
        // on the slide and slid events:
        // https://stackoverflow.com/a/29671410/242848

$('#myCarousel').carousel({
            interval: 4000
        });

// handles the carousel thumbnails
        $('[id^=carousel-selector-]').click(function() {
            var id_selector = $(this).attr("id");
            var id = id_selector.substr(id_selector.length - 1);
            id = parseInt(id);
            $('#myCarousel').carousel(id);
            $('[id^=carousel-selector-]').removeClass('selected');
            $(this).addClass('selected');
        });

// when the carousel slides, auto update
        //$('#myCarousel').bind('slid.bs.carousel', function (e) {
        $('#myCarousel').on('slid.bs.carousel', function(e) {
            var id = $('.carousel-item.active').data('slide-number');
            id = parseInt(id);
            $('[id^=carousel-selector-]').removeClass('selected');
            $('[id=carousel-selector-' + id + ']').addClass('selected');
        });
    </script> 
    <script>
        function myFunction() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("more");
            var btnText = document.getElementById("myBtn");

if (dots.style.display === "none") {
                dots.style.display = "inline";
                btnText.innerHTML = "Read more";
                moreText.style.display = "none";
            } else {
                dots.style.display = "none";
                btnText.innerHTML = "Read less";
                moreText.style.display = "inline";
            }
        }
    </script> 
</body>

</html>

Editing File: dining-room.php