JezK
Edit File: index.php
<?php session_start(); include("mainHeader.php"); $categories = $users->categories(); ?> <html> <head>z <meta charset="utf-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Video Consultation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="all,follow"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/fontastic.css"> <!-- Google fonts - Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- Custom Scrollbar--> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"> <!-- theme stylesheet--> <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="build/css/intlTelInput.css" /> <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" /> <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="css/user.css" /> </head> <style> .masthead { padding-top: calc(6rem + 74px); padding-bottom: 6rem; } @media screen and (max-width: 768px) and (min-width: 360px) { .mrWidth { width: 100%; } } </style> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mx-0"> <div class="container-fluid mx-0"> <a class="navbar-brand" href="#"><img src="img/logo1.png" alt="logo" width="207px" height="41px"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <?php if (isset($_SESSION['id'])) { ?> <li class="nav-item"> <a class="nav-link login-padding border-right-0" href="appointment.php">Dashboard</a> </li> <?php } ?> <li class="nav-item"> <a class="nav-link help-padding" href="#">Help</a> </li> <li class="nav-item"> <a class="nav-link support-padding" href="#">Support</a> </li> <?php if (isset($_SESSION['id'])) { ?> <li class="nav-item"> <a class="nav-link login-padding border-right-0" href="logout.php">Logout</a> </li> <?php } else { ?> <li class="nav-item"> <a class="nav-link login-padding border-right-0" href="signup.php">Signup</a> </li> <li class="nav-item"> <a class="nav-link login-padding border-right-0" href="login.php">Login</a> </li> <?php } ?> </ul> </div> </div> </nav> <header class="masthead bg-img text-white text-center mt-5"> <div class="container d-flex align-items-center flex-column"> <!-- Masthead Avatar Image --> <img class="masthead-avatar " src="img/avataaars.svg" alt=""> <!-- Masthead Heading --> <h1 class="masthead-heading">Create an Online Appointment with a professional / service agency of your choice</h1> <p>Are you a Business / Professional? Join the fast growing online platform for appointment management</p> <form method="get" action="searchProfessionalList.php" class="" onsubmit="return searchValidation();"> <div class="row"> <div class="col-12 col-xl-5 col-md-5 col-lg-4 px-0"> <img src="img/location.png" class="locationIcon"> <input type="text" class="form-control pl-4 pr-Right" placeholder="City" name="location" id="location"> <button class="btn btn-light btn-sm fs-13 detectIcon mr-1" onclick="return detectlocation();"><img src="img/detedt.png" class="">Detect</button> </div> <div class="col-12 col-xl-7 col-md-7 col-lg-8 px-0"> <img src="img/searchgray.png" class="locationIcon"> <input type="text" class="form-control pl-4 pr-Search" name="search" id="search" placeholder="Search doctors, clinics, hospitals etc."> <button class="btn btn-primary fs-13 searchIcon"><img src="img/search.png" class=""></button> </div> </div> </form> <h3 class="mt-4 ">Popular<span class="book"> Categories</span></h3> <div class="row pt-2"> <?php foreach ($categories as $k => $v) { $image = 'img/it.png'; if ($v['image'] != '' && file_exists("admin/uploads/" . $v['image'])) { $image = 'admin/uploads/' . $v['image']; } ?> <div class="col-4 col-xl-2 col-md-2 col-lg-2"> <a href="list.php?cid=<?php echo $users->encrypt_decrypt('encrypt', $v['id']) ?>"> <img src="<?php echo $image; ?>" class="bg-primary mrWidth p-4" height="114px"> <p class="fs-15"><?php echo $v['name']; ?></p> </a> </div> <?php } ?> </div> </div> </header> <section class="text-center"> <div class="container"> <h1 class="mt-3">How<span class="book"> it W</span>orks</h1> <div class="row"> <div class="col-12 col-xl-3 col-md-6 col-lg-4 text-center align-items-center"> <span class="button button5">1</span> <!-- <img src="img/thread.png"> --> <div class="bg-white pt-5 mx-2"> <img src="img/registration.png" class="mb-2 mt-4" style="height:140px;width:140px"> <p class="pb-2">REGISTER</p> </div> </div> <div class="col-12 col-xl-3 col-md-6 col-lg-4 text-center align-items-center"> <span class="button button5">2</span> <div class="bg-white pt-5 mx-2"> <img src="img/slotBooking.png" style="height:140px;width:140px" class="mb-2 mt-4"> <p class="pb-2">BOOK SLOT</p> </div> </div> <div class="col-12 col-xl-3 col-md-6 col-lg-4 text-center align-items-center"> <span class="button button5">3</span> <div class="bg-white pt-5 mx-2"> <img src="img/payment.png" class="mb-2 mt-4" style="height:140px;width:140px"> <p class="pb-2">PAY</p> </div> </div> <div class="col-12 col-xl-3 col-md-6 col-lg-4 text-center align-items-center"> <span class="button buttonLast">4</span> <div class="bg-white pt-5 mx-2"> <img src="img/video-call.png" class="mb-2 mt-4" style="height:140px;width:140px"> <p class="pb-2">CALL / CHAT</p> </div> </div> </div> </div> </section> <section class="bg-white pb-5"> <div class="container"> <h1 class="pt-5 text-center">Why <span class="book">Choo</span>se Us</h1> <div class="row pb-2"> <div class="col-12 col-xl-3 col-md-3 col-sm-3 col-lg-3 text-center border bg-light"> <!-- <img src="img/thread.png"> --> <div class="p-4"> <img src="img/fastestresponse.png" class=""> <span class="">REGISTER</span> </div> </div> <div class="col-12 col-xl-3 col-md-3 col-sm-3 col-lg-3 text-center border bg-light"> <div class="p-4"> <img src="img/consultation.png" class=""> <span class="">BOOK SLOT</span> </div> </div> <div class="col-12 col-xl-3 col-md-3 col-sm-3 col-lg-3 text-center border bg-light"> <div class="p-4"> <img src="img/specialists.png" class=""> <span class="">PAY</span> </div> </div> <div class="col-12 col-xl-3 col-md-3 col-sm-3 col-lg-3 text-center border bg-light"> <div class="p-4"> <img src="img/quality.png" class=""> <span class="">CALL / CHAT</span> </div> </div> </div> <!-- <h1 class="pt-5 text-center">Our exp<span class="book">erts</span> in Online</h1> --> <!-- <div class="row"> <div class="col-12 col-xl-4 col-sm-4 col-md-4 col-lg-4 pl-0"> <div class="well well-sm border p-4"> <div class="row"> <div class="col-sm-6 col-md-4"> <img src="img/avatar-7.jpg" width="100px" height="100px" alt="" class="img-rounded img-border img-responsive rounded-circle" /> </div> <div class="col-sm-6 col-md-8"> <h4 class="mb-0">Bhaumik Patel</h4> <p class="mb-0">UX / UI Designer</p> <p class="fs-14 mb-0 paraColor">5 Years Experience</p> </small> <section class='rating-widget'> <span class='rating-stars text-center'> <ul id='stars' class="d-flex list-style-none"> <li class='star ' title='Poor' data-value='1'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Fair' data-value='2'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Good' data-value='3'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Excellent' data-value='4'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='WOW!!!' data-value='5'> <i class='fa fa-star fa-fw'></i> </li> </ul> </span> </section> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-sm-4 col-md-4 col-lg-4 pl-0"> <div class="well well-sm border p-4"> <div class="row"> <div class="col-sm-6 col-md-4"> <img src="img/avatar-7.jpg" width="100px" height="100px" alt="" class="img-rounded img-border img-responsive rounded-circle" /> </div> <div class="col-sm-6 col-md-8"> <h4 class="mb-0">Bhaumik Patel</h4> <p class="mb-0">UX / UI Designer</p> <p class="fs-14 mb-0 paraColor">5 Years Experience</p> <section class='rating-widget'> <span class='rating-stars text-center'> <ul id='stars' class="d-flex list-style-none"> <li class='star ' title='Poor' data-value='1'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Fair' data-value='2'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Good' data-value='3'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Excellent' data-value='4'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='WOW!!!' data-value='5'> <i class='fa fa-star fa-fw'></i> </li> </ul> </span> </section> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-sm-4 col-md-4 col-lg-4 px-0"> <div class="well well-sm border p-4"> <div class="row"> <div class="col-sm-6 col-md-4"> <img src="img/avatar-7.jpg" width="100px" height="100px" alt="" class="img-rounded img-border img-responsive rounded-circle" /> </div> <div class="col-sm-6 col-md-8"> <h4 class="mb-0">Bhaumik Patel</h4> <p class="mb-0">UX / UI Designer</p> <p class="fs-14 mb-0 paraColor">5 Years Experience</p> <section class='rating-widget'> <span class='rating-stars text-center'> <ul id='stars' class="d-flex list-style-none"> <li class='star ' title='Poor' data-value='1'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Fair' data-value='2'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Good' data-value='3'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='Excellent' data-value='4'> <i class='fa fa-star fa-fw'></i> </li> <li class='star' title='WOW!!!' data-value='5'> <i class='fa fa-star fa-fw'></i> </li> </ul> </span> </section> </div> </div> </div> </div> </div> --> </div> </section> <?php include('mainFooter.php') ?> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmzC6LorWBcIWA94XksFf6IrpHej_z_pI&callback=GetAddress"> </script> <script type="text/javascript" src="js/geoPosition.js"></script> <script type="text/javascript" src="js/geoPositionSimulator.js"></script> <script type="text/javascript" src="js/underscore.js"></script> <script> /*function detectlocation(){ var lat = "43.7667855" ; var long = "-79.2157321" ; var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" +lat+","+long+"&sensor=false&key=AIzaSyBmzC6LorWBcIWA94XksFf6IrpHej_z_pI"; $.get(url,function(data) { var loc1 = data.results[0]; var county, city; $.each(loc1, function(k1,v1) { if (k1 == "address_components") { for (var i = 0; i < v1.length; i++) { for (k2 in v1[i]) { if (k2 == "types") { var types = v1[i][k2]; if (types[0] =="sublocality_level_1") { county = v1[i].long_name; alert ("county: " + county); } if (types[0] =="locality") { city = v1[i].long_name; alert ("city: " + city); return false; } } } } return false; } }); $('#location').html(city); }); return false; } */ function parse_place(place) { var location = []; for (var ac = 0; ac < place.address_components.length; ac++) { var component = place.address_components[ac]; switch (component.types[0]) { case 'locality': location['city'] = component.long_name; break; case 'administrative_area_level_1': location['state'] = component.long_name; break; case 'country': location['country'] = component.long_name; break; } }; return location; } function detectlocation() { //user clicks button if ("geolocation" in navigator) { //check geolocation available //try to get user current location using getCurrentPosition() method navigator.geolocation.getCurrentPosition(function(position) { /*$.ajax('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + ',' + position.coords.longitude + '&key=AIzaSyBmzC6LorWBcIWA94XksFf6IrpHej_z_pI') $.ajax('https://maps.googleapis.com/maps/api/geocode/json?latlng=16.9891,82.2475&key=AIzaSyBmzC6LorWBcIWA94XksFf6IrpHej_z_pI') .then( function success (response) { console.log('User\'s Address Data is ', response) }, function fail (status) { console.log('Request failed. Returned status of', status) } )*/ GetAddress(position.coords.latitude, position.coords.longitude); //alert(position.coords.latitude) //$("#result").html("Found your location <br />Lat : "+position.coords.latitude+" </br>Lang :"+ position.coords.longitude); }); } else { console.log("Browser doesn't support geolocation!"); } return false; } function GetAddress(lat, lng) { /*var latlng = new google.maps.LatLng(lat, lng); var geocoder = geocoder = new google.maps.Geocoder(); var findResult = function(results, name){ var result = _.find(results, function(obj){ return obj.types[0] == name && obj.types[1] == "political"; }); return result ? result.long_name : null; }; geocoder.geocode({ 'latLng': latlng }, function (results, status) { console.log(results); if (status == google.maps.GeocoderStatus.OK) { results = results[0].address_components; console.log(results); var city = findResult(results, "locality"); var state = findResult(results, "administrative_area_level_1"); var country = findResult(results, "country"); if(city!='' && city!=undefined) { $("#location").val(city) }else if(state!='' && state!=undefined) { $("#location").val(state) } else if(country!='' && country!=undefined) { $("#location").val(country) } } });*/ var latlng = new google.maps.LatLng(lat, lng); var geocoder = geocoder = new google.maps.Geocoder(); geocoder.geocode({ latLng: latlng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { var arrAddress = results; $.each(arrAddress, function(i, address_component) { //console.log(address_component); if (address_component.types[0] == "locality") { $("#location").val(address_component.address_components[0].long_name) } /*else if(address_component.types[0] == "administrative_area_level_1"){ $("#location").val(address_component.address_components[0].long_name) } else if(address_component.types[0] == "country"){ $("#location").val(address_component.address_components[0].long_name) } */ }); } else { console.log("No results found"); } } else { console.log("Geocoder failed due to: " + status); } }); } function searchValidation() { if ($('#location').val() == '' && $('#search').val() == '') { alert("Please enter city or search"); return false; } } </script>