MaheKarim/Full Page

## 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/remixicon@3.6.0/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 -->
	<!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/remixicon@3.6.0/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 -->