Skip to content

Instantly share code, notes, and snippets.

@MaheKarim

MaheKarim/Full Page

Created December 25, 2023 12:20
Show Gist options
  • Save MaheKarim/cfb1dbf526294bf2f549ff6c9f4c63db to your computer and use it in GitHub Desktop.
Save MaheKarim/cfb1dbf526294bf2f549ff6c9f4c63db to your computer and use it in GitHub Desktop.
Download ZIP
Full Page
Raw
Full Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Feedback Landing page from user.">
<meta name="keywords" content="landing page, html css landing page, gsap">
<meta name="author" content="Masum Billah">
<title>{{ $business->business_name }}</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Poppins:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('') }}external-page/css/style.css">
<link rel="stylesheet" href="{{ asset('') }}external-page/css/popup.css">
</head>
<body>
<div id="wrapper">
<header>
<div class="container">
<nav>
<div class="logo">
<a href="#" aria-label="homepage"><img height="57" src="{{ asset($business->logo) }}" alt=""></a>
</div>
<div class="nav-right">
<div id="feedbacCta">
<a href="#" aria-label="Provide feedback">{{ $business->business_name }}</a>
</div>
<div id="mobileToggle">
<a href="" aria-label="Navigation toggle"><i class="ri-menu-3-fill"></i></a>
</div>
</div>
</nav>
</div>
</header>
<section class="hero-section">
<div class="container">
<div class="heroMain">
<div class="hLeft">
<div class="hContent">
<h1>would you</h1>
<h1>recommend us ?</h1>
<div class="animateHeading">
<h2>Empower progress, share your voice</h2>
</div>
</div>
</div>
<div class="hRight">
<div class="contentBox_back"></div>
<div class="contentBox_front">
<h3>Please select Start Amount</h3>
<div class="star_wrapper">
<div class="start">
<span>&#9733;</span>
<span>&#9733;</span>
<span>&#9733;</span>
<span>&#9733;</span>
<span>&#9733;</span>
</div>
<div class="start-number">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="ratting-count-wrapper">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div id="popup" class="popup">
<div class="popup-content">
<span class="close">&times;</span>
<form action="{{ route('feedback.store') }}" method="post">
@csrf
<input type="hidden" name="business_id" value="{{ $business->id }}">
<label for="name">First Name</label><br>
<input type="text" id="name" name="first_name"><br>
<label for="name">Last Name</label><br>
<input type="text" id="name" name="last_name"><br>
<label for="email">Phone number</label><br>
<input type="text" id="email" name="phone_number"><br>
<label for="feedback">Feedback</label><br>
<textarea id="feedback" name="feedback"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script src="{{ asset('') }}external-page/js/gsap.min.js"></script>
<script>
var tl = gsap.timeline();
tl.from("nav .logo , .main-menu a, .nav-right a, .nav-right button, nav .nav-right #feedbacCta, #mobileToggle", {
y: -100,
duration: 1,
delay: 0.5,
stagger: 0.1
})
tl.from(".hContent h1", {
x: -200,
duration: .3,
opacity: 0,
stagger: 0.2,
})
tl.from(".animateHeading", {
y: 50,
opacity: 0,
})
tl.from(".contentBox_front", {
x: 100,
opacity: 0,
})
tl.from(".contentBox_back", {
scale: 1,
opacity: 0,
duration: 5,
rotate: -7,
});
let data = [
{
'star': 5,
'count': 1001
},
{
'star': 4,
'count': 80
},
{
'star': 3,
'count': 33
},
{
'star': 2,
'count': 13
},
{
'star': 1,
'count': 0
}
]
let selectedStars = [];
let totalRatting = data.reduce((total, ratting) => total + ratting.count, 0);
const starElements = document.querySelectorAll('.star_wrapper .start span');
const rattingCountWrapper = document.querySelector('.ratting-count-wrapper');
// Initial rendering of progress bars
data.forEach(ratting => {
let ratting_progress = `
<div class="ratting_progress_value">
<p>${ratting.star} Star</p>
<div class="progress">
<div class="bar" style="width:${(ratting.count / totalRatting) * 100}%"></div>
</div>
</div>
`;
rattingCountWrapper.innerHTML += ratting_progress;
});
starElements.forEach((star, index) => {
star.addEventListener('click', () => {
const selectedIndex = index;
const isSelected = selectedStars.includes(selectedIndex);
if (isSelected) {
selectedStars = selectedStars.filter(selIndex => selIndex < selectedIndex);
} else {
selectedStars = Array.from({ length: selectedIndex + 1 }, (_, i) => i);
}
updateStarStyles(isSelected);
updateProgressBars();
// Check the selected rating and take appropriate action
const selectedRating = 5 - selectedIndex; // Reverse index for your data
if (selectedIndex < 3 && selectedIndex >= 0) {
openPopup();
console.log("Open Form");
}
else {
// new tab
window.open("<?= $business->gmb_url ?>", "_blank");
console.log("Redirect");
}
});
star.addEventListener('mouseenter', () => {
highlightStars(index);
});
star.addEventListener('mouseleave', () => {
updateStarStyles();
});
});
// popup
let popup = document.querySelector('#popup');
let popupCloseBtn = document.querySelector('#popup .close');
function openPopup() {
gsap.to(popup, { duration: 0.1, opacity: 1, scale: 1, display: 'block', ease: "power2.in" });
}
function closePopup() {
gsap.to(popup, {
duration: 0.2, opacity: 0, scale: 0, ease: "power2.out", onComplete: function () {
popup.style.display = 'none';
}
});
}
popupCloseBtn.onclick = function () {
closePopup();
}
console.log(popup);
console.log(popupCloseBtn);
// popup end
function updateStarStyles(isSelected = false) {
starElements.forEach((s, i) => {
const isSelectedStar = selectedStars.includes(i);
s.style.color = isSelectedStar ? 'gold' : isSelected ? '#808080' : 'gray';
});
}
function highlightStars(index) {
starElements.forEach((s, i) => {
s.style.color = i <= index ? 'gold' : '#808080';
});
}
function updateProgressBars() {
rattingCountWrapper.innerHTML = '';
data.forEach(ratting => {
let ratting_progress = `
<div class="ratting_progress_value">
<p>${ratting.star} Star</p>
<div class="progress">
<div class="bar" style="width:${(ratting.count / totalRatting) * 100}%"></div>
</div>
</div>
`;
rattingCountWrapper.innerHTML += ratting_progress;
});
}
</script>
</body>
</html>
<!-- Redirect To $business->gmb_url -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment