<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Rate Your Experience</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
.star { font-size: 2rem; cursor: pointer; color: #ccc; }
.star.selected { color: #f5a623; }
#submit { margin-top: 20px; padding: 10px 20px; font-size: 1rem; }
</style>
</head>
<body>
<h2>Please rate your experience</h2>
<div id="stars">
<span class="star" data-value="1">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</span>
</div>
<button id="submit" disabled>Submit Rating</button>
<script>
const stars = Array.from(document.querySelectorAll('.star'));
let selected = 0;
stars.forEach(s => s.addEventListener('click', () => {
selected = +s.getAttribute('data-value');
stars.forEach(star => {
star.classList.toggle('selected', +star.getAttribute('data-value') <= selected);
});
document.getElementById('submit').disabled = !selected;
}));
document.getElementById('submit').addEventListener('click', () => {
if (selected <= 3) {
window.location.href = '/feedback-form.html';
} else {
window.location.href = 'https://search.google.com/local/writereview?placeid=YOUR_PLACE_ID';
}
});
</script>
</body>
</html>
]]>
