<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avaliações de Clientes - celaremode</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
min-height: 100vh;
padding: 20px;
}
.language-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
.language-toggle button {
background: white;
border: 2px solid #333;
padding: 10px 15px;
margin: 0 5px;
cursor: pointer;
font-weight: bold;
border-radius: 5px;
transition: all 0.3s ease;
}
.language-toggle button.active {
background: #333;
color: white;
}
.language-toggle button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 50px;
padding-top: 40px;
}
.header h1 {
font-size: 3em;
color: #333;
margin-bottom: 10px;
font-weight: 700;
letter-spacing: -1px;
}
.header p {
font-size: 1.2em;
color: #666;
margin-bottom: 20px;
}
.reward-banner {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
transform: scale(1);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.reward-banner h2 {
font-size: 2.5em;
margin-bottom: 10px;
font-weight: 700;
}
.reward-banner p {
font-size: 1.1em;
margin-bottom: 15px;
}
.discount-badge {
display: inline-block;
background: white;
color: #ff6b6b;
padding: 15px 30px;
border-radius: 50px;
font-size: 1.5em;
font-weight: bold;
margin-top: 15px;
}
.content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
.review-form {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.review-form h2 {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
border-bottom: 3px solid #ff6b6b;
padding-bottom: 15px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 10px;
color: #333;
font-weight: 600;
font-size: 1.05em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1em;
font-family: inherit;
transition: border-color 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
outline: none;
border-color: #ff6b6b;
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.star-rating {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.star {
font-size: 2.5em;
cursor: pointer;
color: #ddd;
transition: all 0.2s ease;
}
.star:hover,
.star.active {
color: #ff6b6b;
transform: scale(1.2);
}
.file-upload {
position: relative;
display: inline-block;
width: 100%;
}
.file-upload input[type="file"] {
display: none;
}
.file-upload-label {
display: block;
padding: 20px;
background: #f9f9f9;
border: 2px dashed #ff6b6b;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.file-upload-label:hover {
background: #fff5f5;
border-color: #ff8787;
}
.file-upload-label p {
color: #666;
margin: 0;
}
.submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}
.submit-btn:active {
transform: translateY(-1px);
}
.reviews-showcase {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.reviews-showcase h2 {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
border-bottom: 3px solid #ff6b6b;
padding-bottom: 15px;
}
.review-card {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
border-left: 4px solid #ff6b6b;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.review-name {
font-weight: bold;
color: #333;
font-size: 1.05em;
}
.review-stars {
color: #ff6b6b;
font-size: 1.2em;
}
.review-text {
color: #666;
line-height: 1.6;
margin-bottom: 10px;
}
.review-date {
font-size: 0.9em;
color: #999;
}
.success-message {
display: none;
background: #4caf50;
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.coupon-code {
background: #fff3cd;
border: 2px solid #ffc107;
padding: 15px;
border-radius: 8px;
text-align: center;
margin-top: 15px;
display: none;
}
.coupon-code p {
color: #333;
margin-bottom: 10px;
}
.coupon-code .code {
font-size: 1.5em;
font-weight: bold;
color: #ff6b6b;
letter-spacing: 2px;
font-family: 'Courier New', monospace;
}
.copy-btn {
background: #ffc107;
color: #333;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: #ffb300;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.content-wrapper {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2em;
}
.reward-banner h2 {
font-size: 1.8em;
}
.language-toggle {
position: static;
margin-bottom: 20px;
text-align: center;
}
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="language-toggle">
<button class="active" onclick="switchLanguage('pt')">PT</button>
<button onclick="switchLanguage('en')">EN</button>
</div>
<div class="container">
<!-- Header -->
<div class="header">
<h1 id="title">Avaliações de Clientes</h1>
<p id="subtitle">Sua opinião é muito importante para nós!</p>
</div>
<!-- Reward Banner -->
<div class="reward-banner">
<h2 id="reward-title">🎁 Ganhe 15% de Desconto!</h2>
<p id="reward-text">Deixe uma avaliação positiva e receba um cupom exclusivo para suas próximas compras</p>
<div class="discount-badge" id="discount-badge">15% OFF</div>
</div>
<!-- Content Wrapper -->
<div class="content-wrapper">
<!-- Review Form -->
<div class="review-form">
<div class="success-message" id="successMessage">
<p id="success-text">Obrigado pela sua avaliação! 🎉</p>
</div>
<h2 id="form-title">Deixe sua Avaliação</h2>
<form id="reviewForm">
<div class="form-group">
<label for="name" id="label-name">Nome:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email" id="label-email">E-mail:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label id="label-rating">Classificação:</label>
<div class="star-rating" 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>
<input type="hidden" id="rating" name="rating" value="0">
</div>
<div class="form-group">
<label for="review" id="label-review">Sua Avaliação:</label>
<textarea id="review" name="review" required placeholder="Conte-nos sobre sua experiência com nossos produtos..."></textarea>
</div>
<div class="form-group">
<label id="label-photo">Adicione uma Foto (Opcional):</label>
<div class="file-upload">
<input type="file" id="photo" name="photo" accept="image/*">
<label for="photo" class="file-upload-label">
<p id="upload-text">📸 Clique para adicionar uma foto do seu produto</p>
</label>
</div>
</div>
<button type="submit" class="submit-btn" id="submit-btn">Enviar Avaliação</button>
<div class="coupon-code" id="couponCode">
<p id="coupon-text">Seu Cupom de Desconto:</p>
<div class="code" id="coupon-value">CELAREMODE15</div>
<button type="button" class="copy-btn" onclick="copyCoupon()" id="copy-btn">Copiar Código</button>
</div>
</form>
</div>
<!-- Reviews Showcase -->
<div class="reviews-showcase">
<h2 id="showcase-title">Avaliações Recentes</h2>
<div id="reviewsList">
<div class="review-card">
<div class="review-header">
<span class="review-name" id="review-name-1">Maria Silva</span>
<span class="review-stars">★★★★★</span>
</div>
<p class="review-text" id="review-text-1">Adorei a qualidade dos produtos! Entrega rápida e bem embalado. Recomendo muito!</p>
<p class="review-date" id="review-date-1">Há 2 dias</p>
</div>
<div class="review-card">
<div class="review-header">
<span class="review-name" id="review-name-2">João Santos</span>
<span class="review-stars">★★★★☆</span>
</div>
<p class="review-text" id="review-text-2">Muito bom! Produto de excelente qualidade. Apenas demorou um pouco mais que o esperado.</p>
<p class="review-date" id="review-date-2">Há 5 dias</p>
</div>
<div class="review-card">
<div class="review-header">
<span class="review-name" id="review-name-3">Ana Costa</span>
<span class="review-stars">★★★★★</span>
</div>
<p class="review-text" id="review-text-3">Perfeito! Exatamente como descrito no site. Voltarei a comprar com certeza!</p>
<p class="review-date" id="review-date-3">Há 1 semana</p>
</div>
</div>
</div>
</div>
</div>
<script>
// Textos em diferentes idiomas
const texts = {
pt: {
title: 'Avaliações de Clientes',
subtitle: 'Sua opinião é muito importante para nós!',
'reward-title': '🎁 Ganhe 15% de Desconto!',
'reward-text': 'Deixe uma avaliação positiva e receba um cupom exclusivo para suas próximas compras',
'form-title': 'Deixe sua Avaliação',
'label-name': 'Nome:',
'label-email': 'E-mail:',
'label-rating': 'Classificação:',
'label-review': 'Sua Avaliação:',
'label-photo': 'Adicione uma Foto (Opcional):',
'upload-text': '📸 Clique para adicionar uma foto do seu produto',
'submit-btn': 'Enviar Avaliação',
'success-text': 'Obrigado pela sua avaliação! 🎉',
'showcase-title': 'Avaliações Recentes',
'coupon-text': 'Seu Cupom de Desconto:',
'copy-btn': 'Copiar Código',
'review-name-1': 'Maria Silva',
'review-text-1': 'Adorei a qualidade dos produtos! Entrega rápida e bem embalado. Recomendo muito!',
'review-date-1': 'Há 2 dias',
'review-name-2': 'João Santos',
'review-text-2': 'Muito bom! Produto de excelente qualidade. Apenas demorou um pouco mais que o esperado.',
'review-date-2': 'Há 5 dias',
'review-name-3': 'Ana Costa',
'review-text-3': 'Perfeito! Exatamente como descrito no site. Voltarei a comprar com certeza!',
'review-date-3': 'Há 1 semana'
},
en: {
title: 'Customer Reviews',
subtitle: 'Your opinion is very important to us!',
'reward-title': '🎁 Get 15% Off!',
'reward-text': 'Leave a positive review and receive an exclusive coupon for your next purchases',
'form-title': 'Leave Your Review',
'label-name': 'Name:',
'label-email': 'Email:',
'label-rating': 'Rating:',
'label-review': 'Your Review:',
'label-photo': 'Add a Photo (Optional):',
'upload-text': '📸 Click to add a photo of your product',
'submit-btn': 'Submit Review',
'success-text': 'Thank you for your review! 🎉',
'showcase-title': 'Recent Reviews',
'coupon-text': 'Your Discount Coupon:',
'copy-btn': 'Copy Code',
'review-name-1': 'Maria Silva',
'review-text-1': 'I loved the quality of the products! Fast delivery and well packaged. Highly recommend!',
'review-date-1': '2 days ago',
'review-name-2': 'João Santos',
'review-text-2': 'Very good! Excellent quality product. It just took a little longer than expected.',
'review-date-2': '5 days ago',
'review-name-3': 'Ana Costa',
'review-text-3': 'Perfect! Exactly as described on the website. I will definitely buy again!',
'review-date-3': '1 week ago'
}
};
let currentLanguage = 'pt';
let selectedRating = 0;
// Função para trocar idioma
function switchLanguage(lang) {
currentLanguage = lang;
document.documentElement.lang = lang;
// Atualizar botões de idioma
document.querySelectorAll('.language-toggle button').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Atualizar todos os textos
Object.keys(texts[lang]).forEach(key => {
const element = document.getElementById(key);
if (element) {
element.textContent = texts[lang][key];
}
});
// Atualizar placeholder
document.getElementById('review').placeholder = lang === 'pt'
? 'Conte-nos sobre sua experiência com nossos produtos...'
: 'Tell us about your experience with our products...';
}
// Sistema de avaliação por estrelas
document.querySelectorAll('.star').forEach(star => {
star.addEventListener('click', function() {
selectedRating = this.dataset.value;
document.getElementById('rating').value = selectedRating;
document.querySelectorAll('.star').forEach(s => {
s.classList.remove('active');
});
for (let i = 0; i < selectedRating; i++) {
document.querySelectorAll('.star')[i].classList.add('active');
}
});
star.addEventListener('mouseover', function() {
const value = this.dataset.value;
document.querySelectorAll('.star').forEach((s, index) => {
if (index < value) {
s.style.color = '#ff6b6b';
} else {
s.style.color = '#ddd';
}
});
});
});
document.getElementById('starRating').addEventListener('mouseleave', function() {
document.querySelectorAll('.star').forEach((s, index) => {
if (index < selectedRating) {
s.style.color = '#ff6b6b';
} else {
s.style.color = '#ddd';
}
});
});
// Submissão do formulário
document.getElementById('reviewForm').addEventListener('submit', function(e) {
e.preventDefault();
if (selectedRating === 0) {
alert(currentLanguage === 'pt' ? 'Por favor, selecione uma classificação!' : 'Please select a rating!');
return;
}
// Mostrar mensagem de sucesso
document.getElementById('successMessage').style.display = 'block';
document.getElementById('couponCode').style.display = 'block';
// Limpar formulário após 2 segundos
setTimeout(() => {
document.getElementById('reviewForm').reset();
document.querySelectorAll('.star').forEach(s => s.classList.remove('active'));
selectedRating = 0;
document.getElementById('rating').value = 0;
document.getElementById('successMessage').style.display = 'none';
}, 3000);
});
// Função para copiar cupom
function copyCoupon() {
const couponCode = document.getElementById('coupon-value').textContent;
navigator.clipboard.writeText(couponCode).then(() => {
alert(currentLanguage === 'pt' ? 'Cupom copiado!' : 'Coupon copied!');
});
}
// Inicializar página
switchLanguage('pt');
</script>
</body>
</html>
