بوابة التوظيف | جمعية زارعي القوقعة (اسمعك)
#asmaok-form-wrapper {
font-family: 'Cairo', sans-serif;
background-color: #f8fafc;
direction: rtl;
text-align: right;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#asmaok-form-wrapper * {
font-family: 'Cairo', sans-serif;
box-sizing: border-box;
}
:root {
--primary-vibrant: #127166;
--primary-dark: #064e3b;
--accent-vibrant: #f97316;
--info-blue: #0ea5e9;
}
#asmaok-form-wrapper .custom-card {
background: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
margin-bottom: 1rem !important;
border: 1px solid #f1f5f9 !important;
overflow: hidden;
}
#asmaok-form-wrapper .section-header {
padding: 0.8rem 1.2rem !important;
border-bottom: 1px solid #f1f5f9 !important;
display: flex !important;
align-items: center !important;
gap: 0.8rem !important;
}
#asmaok-form-wrapper input, #asmaok-form-wrapper select, #asmaok-form-wrapper textarea {
width: 100% !important;
padding: 0.7rem 1rem !important;
background-color: #f8fafc !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 10px !important;
margin-top: 0.4rem !important;
font-size: 0.95rem !important;
transition: all 0.2s ease !important;
}
#asmaok-form-wrapper input:focus, #asmaok-form-wrapper select:focus {
border-color: var(--primary-vibrant) !important;
background-color: #ffffff !important;
box-shadow: 0 0 0 3px rgba(18, 113, 102, 0.1) !important;
outline: none !important;
}
#asmaok-form-wrapper label {
font-weight: 700 !important;
color: #334155 !important;
font-size: 0.9rem !important;
}
#asmaok-form-wrapper .btn-submit {
background: linear-gradient(135deg, #127166 0%, #064e3b 100%) !important;
color: #ffffff !important;
width: 100% !important;
padding: 1rem !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1.2rem !important;
cursor: pointer !important;
border: none !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-shadow: 0 4px 15px rgba(6, 78, 59, 0.2) !important;
}
#asmaok-form-wrapper .hero-banner {
position: relative;
height: 220px !important;
background-image: url('https://asmaok.sa/wp-content/uploads/2026/01/45654.jpg');
background-size: cover;
background-position: center;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 2rem !important;
}
#asmaok-form-wrapper .hero-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, rgba(6, 78, 59, 0.8), rgba(18, 113, 102, 0.6));
z-index: 1;
}
#asmaok-form-wrapper .hero-title {
font-size: 2.8rem !important;
font-weight: 900 !important;
z-index: 2;
color: #f97316 !important;
text-shadow: 0 4px 15px rgba(0,0,0,0.4);
border-bottom: 6px solid #f97316;
padding-bottom: 8px;
}
@media (max-width: 640px) {
#asmaok-form-wrapper .hero-banner { height: 160px !important; }
#asmaok-form-wrapper .hero-title { font-size: 1.8rem !important; }
}
function initIcons() {
if (typeof lucide !== 'undefined') {
lucide.createIcons();
} else {
setTimeout(initIcons, 100);
}
}
initIcons();
const form = document.getElementById('jobForm');
const submitBtn = document.getElementById('submitBtn');
const btnText = document.getElementById('btnText');
const successMsg = document.getElementById('success-msg');
form.addEventListener('submit', async function(e) {
e.preventDefault();
btnText.innerText = "جاري الإرسال...";
submitBtn.disabled = true;
try {
const response = await fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: { 'Accept': 'application/json' }
});
if (response.ok) {
form.style.display = 'none';
document.querySelector('.hero-banner').style.display = 'none';
successMsg.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// عرض رسالة خطأ مفصلة في الكونسول للمساعدة في الديباجينج
console.error("Formspree Error:", response);
alert("حدث خطأ في الإرسال. تأكد من تفعيل حساب Formspree أو استخدام بريد صحيح.");
resetBtn();
}
} catch (error) {
console.error("Connection Error:", error);
alert("خطأ في الاتصال. يرجى التأكد من الإنترنت.");
resetBtn();
}
});
function resetBtn() {
btnText.innerText = "إرسال الطلب الآن";
submitBtn.disabled = false;
}
