Created
December 25, 2023 12:20
-
-
Save MaheKarim/cfb1dbf526294bf2f549ff6c9f4c63db to your computer and use it in GitHub Desktop.
Full Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>★</span> | |
<span>★</span> | |
<span>★</span> | |
<span>★</span> | |
<span>★</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">×</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