| Server IP : 51.89.169.208 / Your IP : 216.73.216.9 Web Server : Apache System : Linux ns3209505.ip-198-244-202.eu 4.18.0-553.27.1.el8_10.x86_64 #1 SMP Tue Nov 5 04:50:16 EST 2024 x86_64 User : yellowleaf ( 1019) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/yellowleaf/public_html/search/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<title>YellowLeaf - Search</title>
<meta name="description" content="{cat}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/header-footer/global.css">
<link rel="stylesheet" href="result.css">
<style>
.search-box {
/* max-width: 658px; */
max-width: 700px;
width: 100%;
box-shadow: 10px 10px 30px rgba(0, 0, 0, .1);
margin: 0 auto;
}
.search-content {
display: flex;
}
.search-content> :first-child input {
border-radius: 6px 0 0 6px;
}
.search-content> :first-child input:focus {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.search-content> :last-child {
border-radius: 0 6px 6px 0;
}
.search-content> :not(button) {
width: 100%;
}
.search-content input {
width: 100%;
padding: 22px;
border: none;
outline: none;
height: 58px;
font-size: 16px;
}
.search-content input {
border-right: 1px solid #ccc;
}
.search-content button {
min-width: min-content;
border: none;
background: #FFCC22;
font-weight: 600;
cursor: pointer;
padding: 12px 24px;
font-size: 14px;
}
.search-content button:hover {
background-color: var(--black);
color: white;
}
.search-group {
position: relative;
}
.search-box-title {
display: none;
}
.floating-icons {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 90;
display: none;
}
.floating-icons button {
width: 48px;
height: 48px;
border: 1px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
border-radius: 50%;
background-color: var(--gray);
}
.floating-icons button svg {
width: 20px;
max-height: 20px;
}
.search-box-business {
display: none;
}
.section-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 24px;
text-align: center;
}
.listing-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}
.listing-item {
border: 1px solid #eee;
border-radius: 6px;
overflow: hidden;
}
.listing-header {
position: relative;
}
.listing-image {
padding: 4px;
display: block;
}
.listing-image img {
display: block;
width: 100%;
height: 160px;
object-fit: contain;
border-radius: 6px;
padding: 0 32px;
}
.listing-favourite {
position: absolute;
top: 8px;
left: 8px;
}
.listing-favourite {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: white;
}
.listing-favourite svg {
fill: yellow;
width: 18px;
}
.listing-info {
padding: 12px;
}
.listing-location {
font-size: 14px;
display: flex;
align-items: center;
color: green;
}
.listing-location svg {
margin-right: 4px;
fill: var(--gray-200);
width: 14px;
max-height: 14px;
}
.listing-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
display: inline-block;
text-decoration: none;
color: var(--black);
}
.listing-rating-star {
display: flex;
margin-bottom: 12px;
}
.listing-rating-star svg {
fill: yellow;
width: 14px;
max-height: 14px;
margin-right: 4px;
}
.listing-action {
display: flex;
}
.listing-action a {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
background-color: var(--black);
border-radius: 50%;
margin-right: 4px;
}
.listing-action a svg {
fill: white;
width: 14px;
max-height: 14px;
}
.listing-action a:hover {
background-color: yellow;
}
.listing-action a:hover svg {
fill: var(--black);
}
@media screen and (max-width: 991px) {
.listing-wrapper {
grid-template-columns: unset;
grid-auto-flow: column;
grid-auto-columns: 250px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.listing-wrapper::-webkit-scrollbar {
display: none;
}
.listing-item {
scroll-snap-align: start;
}
}
/* start: Popup Review Submitted */
.popup-review .popup-dialog {
max-width: 940px;
}
.popup-review-top {
text-align: right;
}
.popup-review-top .popup-close {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: yellow;
font-size: 24px;
font-weight: 500;
text-align: center;
line-height: 32px;
cursor: pointer;
border: none;
}
.popup-review-image {
text-align: center;
}
.popup-review-image svg {
width: 130px;
max-height: 130px;
margin-bottom: 16px;
}
.popup-review-message {
text-align: center;
font-weight: 600;
margin-bottom: 48px;
font-size: 28px
}
.popup-review-business-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 16px;
text-align: center;
}
.popup-review-business-wrapper {
display: grid;
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
gap: 16px;
}
.popup-review-business-wrapper>* {
box-shadow: 0 4px 8px rgba(0, 0, 0, .07);
border-radius: 6px;
padding: 8px;
}
.popup-review-business-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
display: block;
}
.popup-review-business-info {
padding: 16px 8px;
}
.popup-review-business-location {
display: flex;
align-items: center;
font-size: 14px;
color: green;
margin-bottom: 8px;
}
.popup-review-business-location svg {
margin-right: 8px;
width: 16px;
max-height: 16px;
fill: green;
}
.popup-review-business-link {
font-size: 18px;
font-weight: 500;
display: inline-block;
margin-bottom: 16px;
color: var(--black);
text-decoration: none;
}
.popup-review-business-rating {
display: flex;
align-items: center;
}
.popup-review-business-rating>* {
margin-right: 4px;
width: 18px;
max-height: 18px;
fill: yellow;
}
.popup-review-bottom {
text-align: center;
margin: 32px 0 16px;
}
/* end: Popup Review Submitted */
@media screen and (max-width: 767px) {
.search-box-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--gray-200);
}
.query-count{
font-size: 15px;
color: var(--gray-500);
}
.search-box-title h2 {
font-size: 20px;
font-weight: 600;
}
.search-box-close {
font-size: 18px;
color: var(--red);
font-weight: 500;
cursor: pointer;
outline: none;
background-color: transparent;
border: none;
width: auto !important;
}
.search-content {
border-radius: 6px;
flex-direction: column;
margin: 16px;
}
.search-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 100;
display: none;
}
.search-box-business {
position: static;
display: block;
box-shadow: none;
margin-bottom: 32px;
z-index: unset;
}
.search-box-business .search-content {
margin: 0;
}
.search-box.show {
display: block;
}
.search-content input {
border-radius: 0;
border: none;
border-bottom: 1px solid #ccc;
padding: 12px 0 !important;
height: auto;
}
.search-content> :last-child {
border-radius: 4px;
}
.search-content>* {
margin-bottom: 16px;
}
.search-content button {
min-width: 100%;
width: 100%;
}
.search-content input {
padding: 16px 20px;
}
.floating-icons {
display: block;
}
.business-item-description{
text-overflow: ellipsis;
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal;
}
}
</style>
</head>
{header}
<!-- start: Title -->
<div class="floating-icons">
<button type="button" class="search-box-open">
<svg>
<use xlink:href="index.svg#search-line"></use>
</svg>
</button>
</div>
<section class="businesses-title">
<div class="container">
<h1 class="business-title">{result_head}</h1>
<div style="margin-bottom: 15px; color: var(--gray-500);" class="business-title-content">
<p class="query-count" >{search_query_count} businesses found matching your search query</p>
</div>
<form action="" class="business-form">
<div class="search-box">
<div class="search-box-title">
<h2>Search</h2>
<button type="button" class="search-box-close">×</button>
</div>
<div class="search-content">
<div class="search-group">
<input type="text" name="q" id="business" placeholder="Taxi, Restaurant or Company Name" autocomplete="off">
</div>
<div class="search-group">
<input type="text" name="a" id="location" placeholder="Town e.g London or E14" autocomplete="off">
<input type="hidden" id="a_id" name="a_id" value="">
</div>
<button type="submit" id="ga4_business_search_search_button">Search</button>
</div>
</div>
</form>
</div>
</section>
<!-- end: Title -->
<!-- start: Businesses -->
<section>
<div class="container">
<div class="business-wrapper" style="display: inline;">
<div>
<div class="businesses">
{result}
</div>
<p style="text-align: center; margin-bottom: 16px; margin-top: 10px;">{page_info}</p>
<div class="business-pagination">
<!-- <a href="#" class="business-pagination-item">
<svg>
<use xlink:href="index.svg#arrow-left-s-line"></use>
</svg>
</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#" class="business-pagination-item">
<svg>
<use xlink:href="index.svg#arrow-right-s-line"></use>
</svg>
</a> -->
{pagin_html}
</div>
<div class="box for-tablet" style="display:none">
<div class="box-header">
<div>
<svg>
<use xlink:href="index.svg#folder-2-line"></use>
</svg>
</div>
Suggestions
</div>
<div class="box-body">
<ul class="local-directories">
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
</ul>
</div>
</div>
</div>
<!-- message popup -->
<div class="popup popup-review" id="popup-review">
<div class="popup-dialog">
<div class="popup-content">
<div class="popup-review-top">
<button class="popup-close">×</button>
</div>
<div>
<h3 class="popup-review-business-title">Message to the business owner</h3>
<form action="" class="review-form" id="review">
<div class="form-box">
<div class="form-group">
<label for="name">
<svg>
<use xlink:href="index.svg#user-smile-line"></use>
</svg>
</label>
<input required type="text" name="name" id="name" placeholder="Enter your name">
</div>
</div>
<div class="form-box">
<div class="form-group">
<label for="telephone">
<svg>
<use xlink:href="index.svg#user-smile-line"></use>
</svg>
</label>
<input required type="text" name="telephone" id="telephone" placeholder="Enter contact number">
</div>
</div>
<div class="form-box">
<div class="form-group">
<label for="email">
<svg>
<use xlink:href="index.svg#mail-line"></use>
</svg>
</label>
<input required type="email" name="email" id="email" placeholder="Enter your email">
</div>
</div>
<div class="form-box">
<div class="form-group">
<label for="message">
<svg>
<use xlink:href="index.svg#chat-1-line"></use>
</svg>
</label>
<textarea cols="30" rows="5" name="message" id="message" placeholder="Your message"></textarea>
</div>
</div>
<button type="submit" id="submit-button" class="button button-yellow" name="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- end message popup -->
<!-- <div>
<div class="box for-desktop">
<div class="box-header">
<div>
<svg>
<use xlink:href="index.svg#folder-2-line"></use>
</svg>
</div>
Suggestions
</div>
<div class="box-body">
<ul class="local-directories">
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
<li>
<svg>
<use xlink:href="index.svg#arrow-drop-right-line"></use>
</svg>
<a href="#">KG Personnel Ltd</a>
</li>
</ul>
</div>
</div>
</div> -->
</div>
</div>
</section>
<!-- end: Businesses -->
{footer}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="index.js"></script>
<script>
$(document).ready(function(){
if($( window ).width() < 575){
$("#a_id").after('<input type="hidden" id="v" name="v" value="m">');
}
});
$(".send-message").click(function (e) {
e.preventDefault();
let adid = $(this).data("adid");
$('.popup-review').addClass('active');
$('html').addClass('overflow-hidden');
});
$('.popup-close').click(function (e) {
e.preventDefault();
$('.popup-review').removeClass('active');
$('html').removeClass('overflow-hidden');
});
$('.search-box-open').click(function() {
$('.search-box').addClass('active')
});
$('.search-box-close').click(function() {
$('.search-box').removeClass('active')
});
</script>
</body>
</html>