Como você avalia a VIP ONLINE?
Seu feedback é muito importante para continuarmos melhorando!
★
★
★
★
★
Ruim
Excelente
Obrigado pela sua avaliação!
Sua opinião é muito importante para nós.
Você será redirecionado para nos avaliar no Google em 3 segundos...
Feedback enviado com sucesso!
Obrigado por dedicar seu tempo para nos ajudar a melhorar.
Sua opinião é muito valiosa e será analisada pela nossa equipe.
/* Estilos básicos para o corpo da página */
.container {
background: white;
padding: 30px;
border-radius: 10px;
max-width: 500px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
/* Container de estrelas com espaçamento entre elas */
.stars {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
/* Estilo padrão das estrelas */
.star {
font-size: 50px;
color: #dddddd;
cursor: pointer;
transition: all 0.3s;
}
/* Estilo quando passa o mouse ou seleciona */
.star.hover,
.star.selected {
color: gold;
transform: scale(1.1);
}
/* Rótulos das estrelas */
.rating-labels {
display: flex;
justify-content: space-between;
margin: 10px 0;
color: #666;
font-size: 14px;
}
/* Estilo dos botões */
.container button {
padding: 12px 24px;
background-color: #004AAD;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 15px;
}
.container button:hover {
background-color: #003980;
}
.container button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
/* Classe para esconder elementos */
.hidden {
display: none;
}
/* Estilo para os campos de input e textarea */
.container input,
.container textarea {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
.container textarea {
min-height: 120px;
resize: vertical;
}
/* Spinner de carregamento */
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #004AAD;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Mensagem de erro */
.error-msg {
color: #d32f2f;
font-size: 14px;
margin: 10px 0;
text-align: left;
}
/* Animações de transição */
.fade-in {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.form-field {
margin-bottom: 15px;
}
.container label {
display: block;
text-align: left;
margin-bottom: 5px;
font-weight: bold;
}
/* Responsividade para mobile */
@media (max-width: 600px) {
.container {
padding: 20px;
}
.star {
font-size: 40px;
}
}
// Variável GLOBAL para armazenar a nota selecionada
var notaSelecionada = 0;
// Espera o DOM carregar completamente
document.addEventListener('DOMContentLoaded', function() {
const stars = document.querySelectorAll('.star');
const btnConfirmar = document.getElementById('btnConfirmar');
// Adiciona os efeitos de hover e clique nas estrelas
stars.forEach((star, index) => {
// Ao passar o mouse: destacar as estrelas até a atual
star.addEventListener('mouseover', () => {
stars.forEach((s, i) => {
s.classList.toggle('hover', i {
stars.forEach(s => s.classList.remove('hover'));
});
// Ao clicar: definir nota selecionada e destacar estrelas fixamente
star.addEventListener('click', () => {
// Aqui usamos a variável global
notaSelecionada = index + 1;
console.log("Nota selecionada: " + notaSelecionada); // Para debug
stars.forEach((s, i) => {
s.classList.toggle('selected', i = 4) {
// Mostra mensagem e redireciona para o Google se nota for 4 ou 5
document.getElementById("mensagemAgradecimento").classList.remove("hidden");
// Contador regressivo
let contador = 3;
const countdownElement = document.getElementById('countdown');
const interval = setInterval(() => {
contador--;
countdownElement.textContent = contador;
if (contador <= 0) {
clearInterval(interval);
window.location.href = "https://g.page/r/CYNN1_5HPTOAEBM/review";
}
}, 1000);
} else {
// Mostra formulário de feedback se nota for até 3
document.getElementById("formFeedback").classList.remove("hidden");
}
}
// Validação de campos
function validarCampos() {
let valido = true;
const nome = document.getElementById("nome").value.trim();
const comentario = document.getElementById("comentario").value.trim();
// Validar nome
if (nome.length < 3 || !nome.includes(" ")) {
document.getElementById("nomeError").classList.remove("hidden");
valido = false;
} else {
document.getElementById("nomeError").classList.add("hidden");
}
// Validar comentário
if (comentario.length {
document.getElementById("loadingFeedback").classList.add("hidden");
document.getElementById("mensagemFinal").classList.remove("hidden");
}, 2000);
// Quando tiver o URL do script, descomente este bloco e remova a simulação acima
fetch(scriptUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(dados)
})
.then(response => {
if (!response.ok) {
throw new Error('Erro na resposta da rede');
}
return response.json();
})
.then(data => {
// Sucesso no envio
document.getElementById("loadingFeedback").classList.add("hidden");
document.getElementById("mensagemFinal").classList.remove("hidden");
})
.catch(error => {
// Erro no envio
document.getElementById("loadingFeedback").classList.add("hidden");
document.getElementById("formFeedback").classList.remove("hidden");
alert("Ocorreu um erro ao enviar seu feedback: " + error.message);
console.error("Erro ao enviar feedback:", error);
});
}
