Preview: app.blade.php
Size: 22.20 KB
/proc/thread-self/root/home/getspomw/royalsquad.us/resources/views/includes/app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ========== Meta Tags ========== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ========== Page Title ========== -->
@yield('heads')
<!-- ========== Favicon Icon ========== -->
<title>{{ $meta_title ?? 'Royalsquad' }}</title>
<meta name="description" content="{{ $meta_description ?? 'Default Description' }}">
<meta name="keywords" content="{{ $meta_keywords ?? 'Default Keywords' }}">
<link rel="canonical" href="{{ url()->current() }}" />
<link rel="preconnect" href="https://www.royalsquad.us">
<link rel="dns-prefetch" href="https://www.royalsquad.us">
<link rel="shortcut icon" href="{{ asset('public/assets/img/Royalsquad-icon.webp') }}" type="image/x-icon">
<link rel="preload" href="{{ asset('public/style.css') }}" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ asset('public/assets/css/bootstrap.min.css') }}" as="style"
onload="this.rel='stylesheet'">
<link rel="preload" href="{{ asset('public/assets/css/font-awesome.min.css') }}" as="style"
onload="this.rel='stylesheet'">
<!-- <link rel="stylesheet" href="{{ asset('public/assets/css/font-awesome.min.css') }}"> -->
<link rel="stylesheet" href="{{ asset('public/assets/css/themify-icons.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/flaticon-set.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/magnific-popup.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/animate.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/owl.theme.default.min.css') }}">
<link rel="preload" href="{{ asset('public/assets/css/helper.css') }}" as="style"
onload="this.rel='stylesheet'">
<link rel="stylesheet" href="{{ asset('public/assets/css/validnavs.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/responsive.css') }}">
<!-- <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" as="script"> -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="{{ asset('public/assets/fonts/fa-light-300.woff2') }}" as="font" type="font/woff2"
crossorigin>
<link rel="preload" href="{{ asset('public/assets/fonts/fa-regular-400.woff2') }}" as="font"
type="font/woff2" crossorigin>
<link rel="preload" href="{{ asset('public/assets/fonts/fa-solid-900.woff2') }}" as="font" type="font/woff2"
crossorigin>
<noscript>
<link rel="stylesheet" href="{{ asset('public/style.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/magnific-popup.css') }}">
<!-- <link rel="stylesheet" href="{{ asset('public/assets/css/owl.carousel.min.css') }}"> -->
<link rel="stylesheet" href="{{ asset('public/assets/css/owl.theme.default.min.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/animate.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/validnavs.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/helper.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/responsive.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/themify-icons.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/css/flaticon-set.css') }}">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> -->
</noscript>
<!-- <link rel="preload" as="image"
href="{{ asset('public/assets/img/banner-768.webp') }}"
imagesrcset="
banner-480.webp 480w,
banner-768.webp 768w,
banner-1200.webp 1200w
"
imagesizes="100vw"
fetchpriority="high"> -->
<meta name="google-site-verification" content="zzLzW8JRiqknoYO5Rx4TqUcSw8Fu2A-LTL39gCI9kr0" />
<!-- Google tag (gtag.js) -->
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-0MCNYEZPKB"></script> -->
<!-- <script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-0MCNYEZPKB');
</script> -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
function loadGA() {
var s = document.createElement('script');
s.src = 'https://www.googletagmanager.com/gtag/js?id=G-0MCNYEZPKB';
s.async = true;
document.head.appendChild(s);
gtag('js', new Date());
gtag('config', 'G-0MCNYEZPKB');
}
// load after first interaction
['scroll', 'mousemove', 'touchstart'].forEach(e => {
window.addEventListener(e, function once() {
loadGA();
}, {
once: true
});
});
</script>
<meta name="msvalidate.01" content="858205F93B7EB4C43E739357EA1C874D" />
</head>
<body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Royal Squad",
"url": "https://royalsquad.us/",
"logo": "https://royalsquad.us/public/assets/img/Royalsquad.us_head.png",
"sameAs": [
"https://www.facebook.com/royalsquadusa",
"https://www.instagram.com/royalsquadusa/",
"https://x.com/royalsquad_usa",
"https://www.youtube.com/@RoyalSquadUSA"
],
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1 888 875 2997",
"contactType": "technical support",
"email": "mailto:info@royalsquad.us",
"areaServed": "US",
"availableLanguage": "en"
}]
}
</script>
<style>
body {
line-height: 1.6;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Arial, sans-serif;
}
.banner-area {
min-height: 520px;
/* desktop */
}
.owl-item {
height: 415px;
}
.ban-roy-img {
width: 100%;
height: auto;
aspect-ratio: 1200 / 526;
object-fit: cover;
display: block;
}
.banner-area img {
width: 100%;
height: 100%;
/* min-height: 600px; */
object-fit: cover;
}
.about-area {
min-height: 400px;
}
/* .slider_banner {
min-height: 600px;
} */
.animate {
transform: translateY(0);
opacity: 1;
}
.form-control {
min-height: 52px;
}
header {
min-height: 90px;
}
.navbar {
min-height: 90px;
}
@font-face {
font-family: "Font Awesome 5 Free";
font-weight: 900;
src: url("/public/assets/fonts/fa-solid-900.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Font Awesome 5 Free";
font-weight: 400;
src: url("/public/assets/fonts/fa-regular-400.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Font Awesome 5 Light";
font-weight: 300;
src: url("/public/assets/fonts/fa-light-300.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/public/assets/fonts/fa-brands-400.woff2") format("woff2"),
url("/public/assets/fonts/fa-brands-400.woff") format("woff");
}
@font-face {
font-family: "Font Awesome 5 Brands";
font-display: swap;
ascent-override: 90%;
descent-override: 10%;
line-gap-override: 0%;
}
.thumb-services-area {
background-size: cover;
background-position: center;
}
.position_rel {
position: relative;
}
.position_abs {
position: absolute;
top: 0;
right: 0;
justify-self: anchor-center;
}
.about-area,
.faq-area {
min-height: 400px;
/* As per your layout */
}
.carousel-shadow {
min-height: 753px;
}
.item-box {
min-height: 600px;
}
.banner_slider {
overflow: hidden;
}
@media (max-width:768px) {
.banner-area {
min-height: 360px;
/* mobile */
}
.carousel-shadow {
min-height: 675px;
}
}
</style>
<div class="position-relative overflow-hidden">
@include('includes.header')
@yield('content')
@include('includes.footer')
</div>
<script src="{{ asset('public/assets/js/jquery-3.6.0.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/jquery.magnific-popup.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/main.js') }}"></script>
<script defer src="{{ asset('public/assets/js/app.js') }}"></script>
<script defer src="{{ asset('public/assets/js/bootstrap.bundle.min.js') }}"></script>
{{-- <script defer src="{{ asset('public/assets/js/jquery.nice-select.min.js') }}"></script> --}}
<script defer src="{{ asset('public/assets/js/jquery.easing.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/jquery.appear.js') }}"></script>
<script defer src="{{ asset('public/assets/js/owl.carousel.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/progress-bar.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/isotope.pkgd.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/YTPlayer.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/validnavs.js') }}"></script>
<script defer src="{{ asset('public/assets/js/wow.min.js') }}"></script>
<script defer src="{{ asset('public/assets/js/sweetalert2.js') }}"></script>
<script defer src="{{ asset('public/assets/js/count-to.js') }}"></script>
<script defer src="{{ asset('public/assets/js/imagesloaded.pkgd.min.js') }}"></script>
@yield('scripts')
@if (session('form_submitted'))
<script>
Swal.fire({
icon: 'success',
title: 'Appointment Booked!',
text: 'Thank you for contacting us. We will get back to you soon!',
confirmButtonColor: '#3085d6',
confirmButtonText: 'OK'
});
</script>
@endif
<script>
$('#newsletterForm').submit(function(e) {
e.preventDefault();
let form = $(this);
let msgBox = $('#newsletterMsg');
$.ajax({
url: "{{ route('newsletter.subscribe') }}",
type: "POST",
data: form.serialize(),
success: function(res) {
msgBox.html('<div class="alert alert-success">' + res.message + '</div>');
form.trigger("reset");
},
error: function(xhr) {
let message = 'Invalid email or server error';
if (xhr.responseJSON?.errors) {
message = Object.values(xhr.responseJSON.errors).join('<br>');
}
msgBox.html('<div class="alert alert-danger">' + message + '</div>');
}
});
});
</script>
<script>
const SEND_OTP_URLSEND = "{{ route('send.otp') }}";
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".appointment-form").forEach((form) => {
const emailField = form.querySelector(".email-field");
const otpField = form.querySelector(".otp-field");
const otpWrapper = form.querySelector(".otp-field-wrapper");
const otpStatus = form.querySelector(".otp-status");
const numberField = form.querySelector(".number-field");
const numberStatus = form.querySelector(".number-status");
const countryCode = form.querySelector(".country-code");
const submitBtn = form.querySelector(".submit-btn");
let otpVerified = false;
let numberValid = false;
const showTempMessage = (element, message, color, duration = 4000) => {
element.innerText = message;
element.style.color = color;
setTimeout(() => {
if (element.innerText === message) element.innerText = "";
}, duration);
};
// EMAIL OTP HANDLING
emailField.addEventListener("blur", function() {
const email = emailField.value.trim();
if (email) {
showTempMessage(otpStatus, "Sending OTP...", "blue");
// fetch("{{ route('send.otp') }}", {
fetch(SEND_OTP_URLSEND, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": "{{ csrf_token() }}",
},
body: JSON.stringify({
email,
}),
})
.then((res) => res.json())
.then((data) => {
if (data.status === "success") {
otpWrapper.style.display = "block";
showTempMessage(otpStatus, "OTP sent to your email.",
"green");
} else {
otpWrapper.style.display = "none";
showTempMessage(otpStatus, "Failed to send OTP.", "red");
}
})
.catch(() => {
otpWrapper.style.display = "none";
showTempMessage(otpStatus, "Error sending OTP.", "red");
});
}
});
// OTP VERIFY
otpField.addEventListener("input", function() {
const otp = otpField.value.trim();
const email = emailField.value.trim();
if (otp.length === 6 && email) {
showTempMessage(otpStatus, "Verifying OTP...", "blue");
fetch("{{ route('verify.otp') }}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": "{{ csrf_token() }}",
},
body: JSON.stringify({
email,
otp,
}),
})
.then((res) => res.json())
.then((data) => {
if (data.status === "success") {
otpVerified = true;
showTempMessage(otpStatus, "OTP Verified.", "green");
} else {
otpVerified = false;
showTempMessage(otpStatus, "Invalid OTP.", "red");
}
})
.catch(() => {
otpVerified = false;
showTempMessage(otpStatus, "Error verifying OTP.", "red");
});
}
});
// PHONE VALIDATION
numberField.addEventListener("blur", function() {
const number = numberField.value.trim();
const code = countryCode.value.trim();
numberValid = false;
if (number && code) {
const fullNumber = code + number;
showTempMessage(numberStatus, "Validating number...", "blue");
fetch(
`https://apilayer.net/api/validate?access_key=e97128ac0867c4f22657fd8607c6dd20&number=${encodeURIComponent(
fullNumber
)}&format=1`
)
.then((res) => res.json())
.then((data) => {
if (data.valid) {
numberValid = true;
showTempMessage(numberStatus, "Number is valid", "green");
} else {
numberValid = false;
showTempMessage(numberStatus, "Invalid phone number",
"red");
}
})
.catch(() => {
numberValid = false;
showTempMessage(numberStatus, "Error validating number", "red");
});
}
});
// FORM SUBMIT
form.addEventListener("submit", function(e) {
e.preventDefault();
if (!otpVerified) {
showTempMessage(otpStatus, "Please verify Email first.", "red");
return;
}
if (!numberValid) {
showTempMessage(
numberStatus,
"Please enter a valid phone number.",
"red"
);
return;
}
// remove old errors
form.querySelectorAll(".error.text-danger").forEach((el) => el.remove());
const formData = new FormData(form);
submitBtn.disabled = true;
submitBtn.innerText = "Please wait...";
fetch("{{ route('appointments') }}", {
method: "POST",
headers: {
"X-CSRF-TOKEN": "{{ csrf_token() }}",
},
body: formData,
})
.then((res) => res.json())
.then((data) => {
submitBtn.disabled = false;
submitBtn.innerText = "Submit Query";
if (data.status === "success") {
form.reset();
otpWrapper.style.display = "none";
otpVerified = false;
numberValid = false;
Swal.fire({
icon: "success",
title: "Appointment Booked!",
text: "Thank you for contacting us.",
});
} else if (data.status === "validation_error") {
const errors = data.errors;
for (const [field, messages] of Object.entries(errors)) {
const input = form.querySelector(`[name="${field}"]`);
if (input) {
const errorEl = document.createElement("div");
errorEl.classList.add("error", "text-danger");
errorEl.innerText = messages[0];
input.parentNode.appendChild(errorEl);
}
}
} else {
Swal.fire({
icon: "error",
title: "Submission Failed",
text: data.message ||
"Something went wrong. Try again.",
});
}
})
.catch(() => {
submitBtn.disabled = false;
submitBtn.innerText = "Submit Query";
Swal.fire({
icon: "error",
title: "Error",
text: "Server error. Please try again later.",
});
});
});
});
});
</script>
</body>
</html>
Directory Contents
Dirs: 1 × Files: 3