File: /home/wbwebdes/domains/review.bcs-houten.nl/public_html/index.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Review pagina</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: #f5f5f5;
text-align: center;
color: #333;
}
.container {
width: 100%;
max-width: 420px;
}
#logo {
display: block;
margin: 0 auto 20px auto;
max-width: 180px;
}
.stars {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 15px;
font-size: 2.8rem;
cursor: pointer;
}
.star {
color: #ccc;
transition: color 0.3s;
}
.star.hover,
.star.selected {
color: gold;
}
#vraag {
font-weight: 600;
margin-bottom: 10px;
font-size: 1.2rem;
}
#popupOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
padding: 10px;
}
.popup {
background: white;
max-width: 400px;
width: 90%;
border-radius: 10px;
padding: 25px 30px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
text-align: left;
position: relative;
}
.popup h2 {
margin-top: 0;
}
form textarea,
form input[type=email],
form input[type=text] {
width: 100%;
box-sizing: border-box;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
resize: vertical;
font-size: 14px;
margin-bottom: 15px;
}
form label {
font-weight: 600;
display: block;
margin-bottom: 6px;
}
button {
background: #0069d9;
color: white;
border: none;
padding: 10px 18px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #004a9c;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.nieuwenhuijsen.nl/cms/wp-content/uploads/2023/09/Autobedrijf-Nieuwenhuijsen.png" alt="Logo" id="logo" />
<div id="reviewSection">
<div id="vraag">Hoe beoordeelt u onze service?</div>
<div class="stars" id="starRating">
<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>
</div>
<div id="thankYouText" style="display:none; font-size:1.3rem; font-weight:600; margin-top:20px;">
Bedankt voor uw review.
</div>
</div>
<!-- Popup formulier -->
<div id="popupOverlay">
<div class="popup">
<h2>Laat uw feedback achter</h2>
<div>
<div><strong>Uw beoordeling:</strong> <span id="popupStars"></span></div>
<form id="feedbackForm">
<input type="hidden" name="rating" id="ratingInput" value="">
<label for="name">Naam *</label>
<input type="text" id="name" name="name" required>
<label for="comment">Opmerking *</label>
<textarea id="comment" name="comment" rows="4" required></textarea>
<label for="email">E-mail (optioneel)</label>
<input type="email" id="email" name="email" placeholder="Uw e-mail adres" />
<button type="submit">Verstuur review</button>
</form>
<div id="formMessage" style="margin-top: 15px; color: green; font-weight: 600; display:none;">
Bedankt voor uw review!
</div>
</div>
</div>
</div>
<script>
// ===== Cookie helpers =====
function setCookie(name, value, days) {
let expires = "";
if (days) {
const d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + d.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// ===== Variabelen =====
const stars = document.querySelectorAll('.star');
const reviewSection = document.getElementById('reviewSection');
const thankYouText = document.getElementById('thankYouText');
const popupOverlay = document.getElementById('popupOverlay');
const popupStars = document.getElementById('popupStars');
const feedbackForm = document.getElementById('feedbackForm');
const formMessage = document.getElementById('formMessage');
let selectedRating = 0;
// Check of iemand al heeft gereviewd
if (getCookie('review_done')) {
reviewSection.style.display = 'none';
thankYouText.style.display = 'block';
}
// Hover effect
stars.forEach(star => {
star.addEventListener('mouseover', () => {
const val = star.getAttribute('data-value');
highlightStars(val);
});
star.addEventListener('mouseout', () => {
highlightStars(selectedRating);
});
star.addEventListener('click', () => {
if (getCookie('review_done')) return; // blokkeer tweede review
selectedRating = parseInt(star.getAttribute('data-value'));
if (selectedRating >= 4) {
window.location.href = "https://www.google.com/search?q=Bosch+Car+Service+-+Nieuwenhuijsen+Reviews";
} else {
showPopup(selectedRating);
}
reviewSection.style.display = 'none';
});
});
function highlightStars(count) {
stars.forEach(star => {
star.classList.toggle('selected', star.getAttribute('data-value') <= count);
});
}
function showPopup(rating) {
popupOverlay.style.display = 'flex';
popupStars.innerHTML = '';
for (let i = 1; i <= 5; i++) {
const star = document.createElement('span');
star.textContent = '★';
star.style.color = i <= rating ? 'gold' : '#ccc';
star.style.fontSize = '1.5rem';
star.style.marginRight = '5px';
popupStars.appendChild(star);
}
}
// ===== Form versturen via Formspree zonder reload =====
feedbackForm.addEventListener('submit', e => {
e.preventDefault();
document.getElementById('ratingInput').value = selectedRating;
const formData = new FormData(feedbackForm);
fetch("https://formspree.io/f/mwpqygor", { // <-- vervang met je Formspree ID
method: 'POST',
body: formData,
headers: { 'Accept': 'application/json' }
}).then(res => {
if (res.ok) {
formMessage.style.display = 'block';
feedbackForm.style.display = 'none';
setCookie('review_done', 'true', 365);
setTimeout(() => {
popupOverlay.style.display = 'none';
thankYouText.style.display = 'block';
}, 2000);
} else {
alert('Er ging iets mis bij het versturen van uw review.');
}
}).catch(() => {
alert('Er ging iets mis bij het versturen van uw review.');
});
});
// Sluit popup als je buiten klikt
popupOverlay.addEventListener('click', e => {
if (e.target === popupOverlay) {
popupOverlay.style.display = 'none';
if (!getCookie('review_done')) {
reviewSection.style.display = 'flex';
}
}
});
</script>
</body>
</html>