Twoja Opinia Się Liczy
Podziel się opinią i zgarnij bonus
Wkrótce paczka (HTML/CSS/JS) będzie dostępna do pobrania z instrukcją video jak to wdrożyć na swojej stronie
Poniżej kod do wklejenia na swojej stronie
Zbieranie Opini
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twoja Opinia Się Liczy!</title>
<style>
.styleForm {
word-wrap: break-word;
}
.rating-container {
display: flex;
justify-content:center;
gap: 10px;
margin-bottom: 15px;
}
.star {
font-size: 40px;
cursor: pointer;
color: transparent;
-webkit-text-stroke: 1px #000;
transition: color 0.2s, -webkit-text-stroke-color 0.2s;
}
.star.selected {
color: gold;
-webkit-text-stroke-color: gold;
}
.star:hover,
.star.hover {
color: gold;
-webkit-text-stroke-color: gold;
transform: scale(1.2);
}
h2 {
text-align: center;
}
.form-group {
text-align: center;
margin-bottom: 15px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
textarea, input, button {
width: 100%;
padding: 10px;
font-size: 16px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.reviewsBtn {
background: #d00900;
width: 30%;
margin: 15px 0;
}
#message {
border-top: 1px solid #eee;
padding: 10px;
}
#message h2 {
margin: 15px 0 10px;
}
.msgDescription {
display: flex;
flex-direction: column;
font-size: 16px;
font-weight: 400;
}
.bonusTitle {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.copyRev {
font-weight: 700;
color: #d00900;
margin: 5px 0;
}
.btnPos {
display: flex;
justify-content: flex-end;
}
@media (max-width: 768px) {
.reviewsBtn {
width: 100%;
margin: 15px 0;
}
.bonusTitle {
font-size: 17px;
margin-bottom: 10px;
}
}
</style>
</head>
<body data-rsssl=1 data-rsssl=1>
<div class="styleForm">
<form id="opinionForm">
<div class="form-group">
<label for="rating">Oceń naszą stronę (1-5 gwiazdek):</label>
<div class="rating-container" id="rating">
<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 class="form-group">
<label for="name">Imię:</label>
<input type="text" id="name" placeholder="Podaj swoje Imię" required>
</div>
<div class="form-group">
<label for="opinion">Twoja opinia:</label>
<textarea id="opinion" rows="5" placeholder="Napisz swoją opinię..." required></textarea>
</div>
<button type="button" onclick="submitOpinion()">Prześlij opinię</button>
</form>
<div id="message" style="margin-top: 20px;"></div>
</div>
<script>
let selectedRating = 0;
function setupStarRating() {
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
// Podświetlenie gwiazdek przy najechaniu
star.addEventListener('mouseover', () => {
highlightStars(star.dataset.value);
});
// Przywrócenie zaznaczenia po usunięciu najechania
star.addEventListener('mouseout', () => {
clearStars();
if (selectedRating > 0) highlightStars(selectedRating);
});
// Kliknięcie gwiazdki
star.addEventListener('click', () => {
selectedRating = star.dataset.value;
highlightStars(selectedRating);
});
});
}
function highlightStars(value) {
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
if (star.dataset.value <= value) {
star.classList.add('selected');
} else {
star.classList.remove('selected');
}
});
}
function clearStars() {
const stars = document.querySelectorAll('.star');
stars.forEach(star => star.classList.remove('hover'));
}
function submitOpinion() {
const opinion = document.getElementById('opinion').value;
const name = document.getElementById('name').value.trim();
if (!selectedRating || !opinion || !name) {
alert('Proszę wypełnić wszystkie pola!');
return;
}
// Jeśli ocena to od 1 do 4, zapisujemy opinię na podstronę admina
if (selectedRating >= 1 && selectedRating <= 4) {
saveOpinionToAdminPage(selectedRating, opinion, name);
}
const messageDiv = document.getElementById('message');
//Pole gdzie zmieniamy informacje po zaznaczeniu 5 gwiazdek
if (selectedRating == 5) {
messageDiv.innerHTML = `
<h2><strong>🙏 Dziękujemy za Twoją opinię, ${name}!</strong></h2>
<div class="msgDescription">
<span class="bonusTitle">🎁 Aby odebrać prezenty, skopiuj swoją opinię i wklej ją na:</span>
<span class="copyRev"> Trust: <a href="https://tutaj.link.do social.pl" target="_blank">https://tutaj.link.do social.pl</a></span>
</div><div class="btnPos">
<button class="reviewsBtn" onclick="copyToClipboard('${opinion}')">Kopiuj opinię</button></div>
`;
} else {
messageDiv.innerHTML = `
<p><strong>Dziękujemy za Twoją opinię, ${name}!</strong></p>
`;
}
}
function saveOpinionToAdminPage(rating, opinion, name) {
const existingOpinions = JSON.parse(localStorage.getItem('opinions')) || [];
existingOpinions.push({
rating: rating,
opinion: opinion,
name: name,
timestamp: new Date().toISOString()
});
localStorage.setItem('opinions', JSON.stringify(existingOpinions));
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert('Opinia została skopiowana do schowka!');
}).catch(err => {
console.error('Nie udało się skopiować opinii: ', err);
});
}
// Inicjalizacja systemu gwiazdek
setupStarRating();
</script>
</body>
</html>
Zapisane opinie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zapisane Opinie</title>
<style>
h1 {
text-align: center;
}
.opinion {
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
position: relative;
}
.opinion p {
margin: 5px 0;
}
.delete-btn {
position: absolute;
top: 10px;
right: 10px;
background: #d00900;
color: #fff;
border: none;
padding: 5px 8px;
cursor: pointer;
}
.delete-btn:hover {
background: #a00700;
}
</style>
</head>
<body data-rsssl=1>
<h1>Zapisane Opinie</h1>
<div id="opinionsContainer"></div>
<script>
function loadOpinions() {
const opinions = JSON.parse(localStorage.getItem('opinions')) || [];
const container = document.getElementById('opinionsContainer');
container.innerHTML = ''; // Wyczyść zawartość przed ponownym załadowaniem
if (opinions.length === 0) {
container.innerHTML = '<p>Brak zapisanych opinii.</p>';
return;
}
opinions.forEach((opinion, index) => {
const opinionDiv = document.createElement('div');
opinionDiv.classList.add('opinion');
opinionDiv.innerHTML = `
<button class="delete-btn" onclick="deleteOpinion(${index})">Usuń ten komentarz</button>
<p><strong>Name:</strong> ${opinion.name}</p>
<p><strong>Ocena:</strong> ${opinion.rating}</p>
<p><strong>Opinia:</strong> ${opinion.opinion}</p>
<p><small><strong>Dodano:</strong> ${new Date(opinion.timestamp).toLocaleString()}</small></p>
`;
container.appendChild(opinionDiv);
});
}
function deleteOpinion(index) {
const opinions = JSON.parse(localStorage.getItem('opinions')) || [];
opinions.splice(index, 1);
localStorage.setItem('opinions', JSON.stringify(opinions));
loadOpinions(); // Odśwież listę opinii po usunięciu
}
loadOpinions();
</script>
</body>
</html>