<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>משוב סדנה - מחובר!</title>
<!-- טעינת Tailwind CSS לעיצוב -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- טעינת ספריית אייקונים (עבור הכוכבים והלינקדאין) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&display=swap" rel="stylesheet">
<style>
/* הגדרות עיצוב כלליות */
body {
font-family: 'Heebo', sans-serif;
}
/* עיצוב לכוכבים */
.star-rating .fa-star {
color: #d1d5db; /* צבע אפור בהיר התחלתי */
cursor: pointer;
transition: color 0.2s ease-in-out, transform 0.1s ease-in-out;
}
.star-rating .fa-star:hover {
transform: scale(1.1);
}
.star-rating .fa-star.selected,
.star-rating .fa-star.hovered {
color: #6366f1; /* צבע סגול-אינדיגו */
}
/* עיצוב לטקסט עם גרדיאנט */
.text-gradient {
background: linear-gradient(to right, #4f46e5, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
/* עיצוב לפופ-אפ (מודאל) שיהיה תמיד מעל */
#linkedinModal {
z-index: 50;
}
</style>
</head>
<body class="bg-white">
<div class="container mx-auto max-w-2xl p-4 sm:p-8">
<!-- כותרת הטופס -->
<div class="text-center mb-10">
<h1 class="text-4xl font-extrabold text-gray-800 mb-2 text-gradient">משוב על הסדנה</h1>
<p class="text-lg text-gray-500">נשמח לדעת מה חשבתם?</p>
</div>
<!-- טופס המשוב -->
<form id="feedbackForm" class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100">
<!-- פרטים אישיים -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<label for="firstName" class="block text-gray-600 font-semibold mb-2">שם פרטי <span class="text-gray-400 font-normal">(*לא חובה)</span></label>
<input type="text" id="firstName" name="firstName" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label for="lastName" class="block text-gray-600 font-semibold mb-2">שם משפחה <span class="text-gray-400 font-normal">(*לא חובה)</span></label>
<input type="text" id="lastName" name="lastName" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label for="organization" class="block text-gray-600 font-semibold mb-2">ארגון <span class="text-gray-400 font-normal">(*לא חובה)</span></label>
<input type="text" id="organization" name="organization" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label for="workshopName" class="block text-gray-600 font-semibold mb-2">שם הסדנה</label>
<input type="text" id="workshopName" name="workshopName" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
</div>
</div>
<!-- שאלות דירוג -->
<h2 class="text-2xl font-bold text-gray-800 border-b-2 border-indigo-200 pb-2 mb-6 text-gradient">דירוג הסדנה</h2>
<div class="space-y-8 mb-8">
<!-- שאלות דירוג 1-3... -->
<div>
<label class="block text-gray-700 font-semibold mb-3">1. מהי רמת שביעות הרצון הכללית שלך מהסדנה?</label>
<div class="star-rating flex justify-start text-4xl gap-x-2" data-rating-name="satisfaction">
<i class="fas fa-star" data-value="5"></i><i class="fas fa-star" data-value="4"></i><i class="fas fa-star" data-value="3"></i><i class="fas fa-star" data-value="2"></i><i class="fas fa-star" data-value="1"></i>
</div><input type="hidden" name="satisfaction" value="0">
</div>
<div>
<label class="block text-gray-700 font-semibold mb-3">2. עד כמה התכנים שהועברו היו רלוונטיים עבורך?</label>
<div class="star-rating flex justify-start text-4xl gap-x-2" data-rating-name="relevance">
<i class="fas fa-star" data-value="5"></i><i class="fas fa-star" data-value="4"></i><i class="fas fa-star" data-value="3"></i><i class="fas fa-star" data-value="2"></i><i class="fas fa-star" data-value="1"></i>
</div><input type="hidden" name="relevance" value="0">
</div>
<div>
<label class="block text-gray-700 font-semibold mb-3">3. איך היית מדרג/ת את איכות ההנחיה של המרצה?</label>
<div class="star-rating flex justify-start text-4xl gap-x-2" data-rating-name="presentation">
<i class="fas fa-star" data-value="5"></i><i class="fas fa-star" data-value="4"></i><i class="fas fa-star" data-value="3"></i><i class="fas fa-star" data-value="2"></i><i class="fas fa-star" data-value="1"></i>
</div><input type="hidden" name="presentation" value="0">
</div>
</div>
<!-- שאלות פתוחות -->
<h2 class="text-2xl font-bold text-gray-800 border-b-2 border-indigo-200 pb-2 mb-6 text-gradient">שאלות פתוחות</h2>
<div class="space-y-6 mb-8">
<!-- שאלות פתוחות 1-4... -->
<div>
<label for="takeaway" class="block text-gray-600 font-semibold mb-2">1. מהו הדבר המשמעותי ביותר שלקחת מהסדנה?</label>
<textarea id="takeaway" name="takeaway" rows="4" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
<div>
<label for="futureTopics" class="block text-gray-600 font-semibold mb-2">2. האם יש נושאים נוספים שהיית רוצה שנעסוק בהם בעתיד?</label>
<textarea id="futureTopics" name="futureTopics" rows="4" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
<div>
<label for="improvement" class="block text-gray-600 font-semibold mb-2">3. מה לדעתך כדאי לשפר לפעמים הבאות?</label>
<textarea id="improvement" name="improvement" rows="4" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
<div>
<label for="additionalComments" class="block text-gray-600 font-semibold mb-2">4. האם יש משהו נוסף שתרצו להוסיף?</label>
<textarea id="additionalComments" name="additionalComments" rows="4" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
</div>
<!-- כפתור שליחה והודעת סטטוס -->
<div class="text-center">
<button type="submit" id="submitButton" class="bg-indigo-600 text-white font-bold py-3 px-10 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 text-lg shadow-lg shadow-indigo-500/30">
שליחת משוב
</button>
<p id="statusMessage" class="mt-4 font-semibold h-6"></p>
</div>
</form>
</div>
<!-- פופ-אפ לינקדאין (מודאל) -->
<div id="linkedinModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full text-center transform transition-all scale-95 opacity-0" id="modalContent">
<h3 class="text-2xl font-bold text-gray-800 mb-2">תודה רבה!</h3>
<p class="text-gray-600 mb-6">המשוב שלך חשוב לנו. נשמח לשמור על קשר!</p>
<a href="https://www.linkedin.com/in/shahafgolan/" target="_blank" class="inline-block mb-2 text-indigo-600 hover:text-indigo-800 transition-colors duration-300">
<i class="fab fa-linkedin text-7xl"></i>
</a>
<p class="text-sm text-gray-500 mb-6">לחץ/י על האייקון להתחברות</p>
<button id="closeModalButton" class="w-full bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-lg hover:bg-gray-300">
סגירה
</button>
</div>
</div>
<script>
// קוד הפעלת כוכבים
document.querySelectorAll('.star-rating').forEach(ratingGroup => {
const stars = Array.from(ratingGroup.querySelectorAll('.fa-star')).reverse();
const hiddenInput = ratingGroup.nextElementSibling;
stars.forEach(star => {
star.addEventListener('click', () => {
const ratingValue = star.dataset.value;
hiddenInput.value = ratingValue;
stars.forEach(s => s.classList.toggle('selected', s.dataset.value <= ratingValue));
});
star.addEventListener('mouseover', () => {
const ratingValue = star.dataset.value;
stars.forEach(s => s.classList.toggle('hovered', s.dataset.value <= ratingValue));
});
star.addEventListener('mouseout', () => {
stars.forEach(s => s.classList.remove('hovered'));
});
});
});
// --- קוד שליחה ופופ-אפ ---
const form = document.getElementById('feedbackForm');
const submitButton = document.getElementById('submitButton');
const statusMessage = document.getElementById('statusMessage');
const scriptURL = 'https://script.google.com/macros/s/AKfycbz0VDYnxHv-9844fsN-MQlfS8rz-R2B74Rblmj9CxPSxWvL5Dp2sTdlDczZzamHKg/exec';
// אלמנטים של הפופ-אפ
const linkedinModal = document.getElementById('linkedinModal');
const modalContent = document.getElementById('modalContent');
const closeModalButton = document.getElementById('closeModalButton');
function showModal() {
linkedinModal.classList.remove('hidden');
setTimeout(() => { // אפקט כניסה
modalContent.classList.remove('scale-95', 'opacity-0');
}, 10);
}
function hideModal() {
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => { // אפקט יציאה
linkedinModal.classList.add('hidden');
}, 200);
}
closeModalButton.addEventListener('click', hideModal);
linkedinModal.addEventListener('click', (e) => {
if (e.target === linkedinModal) { // סגירה בלחיצה על הרקע
hideModal();
}
});
form.addEventListener('submit', e => {
e.preventDefault();
const requiredInputs = form.querySelectorAll('[required]');
let allValid = true;
requiredInputs.forEach(input => {
if (!input.value) {
allValid = false;
input.classList.add('border-red-500');
input.focus();
} else {
input.classList.remove('border-red-500');
}
});
if (!allValid) {
statusMessage.textContent = 'אנא מלא/י את כל שדות החובה.';
statusMessage.className = 'mt-4 text-red-600 font-semibold h-6';
return;
}
submitButton.disabled = true;
submitButton.textContent = 'שולח...';
statusMessage.textContent = '';
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
if (response.ok) {
showModal(); // הצגת הפופ-אפ במקום הודעת טקסט
form.reset(); // איפוס הטופס
submitButton.disabled = false;
submitButton.textContent = 'שליחת משוב';
} else { throw new Error('Network response was not ok.'); }
})
.catch(error => {
console.error('Error!', error.message);
statusMessage.textContent = 'אופס! משהו השתבש. נסה/י שוב.';
statusMessage.className = 'mt-4 text-red-600 font-semibold h-6';
submitButton.disabled = false;
submitButton.textContent = 'שליחת משוב';
});
});
</script>
</body>
</html>