طلب الانتساب لنادي ابوظبي الزراعي

This is an HTML document that converts the Abu Dhabi Agricultural Club membership application form into a digital, interactive webpage with file upload capabilities.<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>نادي أبوظبي الزراعي | طلب انتساب إلكتروني</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(145deg, #e9f5e6 0%, #c8e0c2 100%); font-family: 'Segoe UI', 'Tahoma', 'Cairo', 'Roboto', system-ui, -apple-system, sans-serif; padding: 2rem 1rem; color: #1e2f1c; } /* main card container */ .form-container { max-width: 1100px; margin: 0 auto; background: #ffffff; border-radius: 2rem; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(104, 139, 70, 0.2); overflow: hidden; transition: all 0.2s; } /* header with club identity */ .club-header { background: #2c5e2a; padding: 1.5rem 2rem; text-align: center; border-bottom: 5px solid #f4c542; } .club-header h1 { color: #ffefcf; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .club-header h1 span { background: #f4c542; color: #2c5e2a; font-size: 1.2rem; padding: 0.2rem 1rem; border-radius: 40px; font-weight: bold; } .club-header .sub { color: #e0f0db; font-size: 1rem; font-weight: 400; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } /* inner padding */ .form-inner { padding: 2rem 2rem 2.5rem; } /* section cards */ .section-card { background: #fefef7; border-radius: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 2rem; padding: 1.5rem 1.8rem; border-right: 6px solid #6f9e3f; transition: 0.1s; } .section-title { font-size: 1.5rem; font-weight: 700; color: #2c5e2a; border-bottom: 2px solid #ddebd8; padding-bottom: 0.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px; } .section-title i { font-size: 1.6rem; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem 2rem; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 600; color: #2d4a2a; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; } .field label .required { color: #c7362b; font-size: 1rem; } input, select, textarea { background: #fff; border: 1.5px solid #d4dfce; border-radius: 1rem; padding: 0.75rem 1rem; font-size: 0.95rem; font-family: inherit; transition: all 0.2s; outline: none; color: #1e2f1c; } input:focus, select:focus, textarea:focus { border-color: #6f9e3f; box-shadow: 0 0 0 3px rgba(111, 158, 63, 0.2); } /* file upload group */ .upload-group { background: #f9faf5; border-radius: 1.2rem; padding: 1rem 1.2rem; border: 1px dashed #aac79e; transition: 0.1s; } .upload-group label { font-weight: 700; color: #2c5e2a; margin-bottom: 8px; display: block; } .file-input-wrapper { display: flex; flex-direction: column; gap: 10px; } .file-name { font-size: 0.8rem; color: #5c6e53; background: #edf3e9; padding: 0.3rem 0.8rem; border-radius: 2rem; display: inline-block; width: fit-content; } /* declaration & signature */ .declaration-box { background: #f0f7ec; border-radius: 1.2rem; padding: 1.2rem 1.8rem; margin: 1rem 0 1.5rem; border-right: 4px solid #c2b13b; } .declaration-item { margin: 0.7rem 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sign-row { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1rem; border-top: 1px solid #cfdec7; padding-top: 1rem; } /* recommendation & status */ .admin-section { background: #eef3ea; border-radius: 1rem; padding: 1.2rem 1.5rem; margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; } .status-badge { display: inline-flex; gap: 15px; background: white; padding: 0.5rem 1rem; border-radius: 60px; align-items: center; } .btn-group { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem; margin-top: 2rem; } .btn { border: none; padding: 0.85rem 1.8rem; border-radius: 3rem; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; font-family: inherit; background: #f0f0f0; color: #2c3e2b; } .btn-primary { background: #2c5e2a; color: white; box-shadow: 0 4px 8px rgba(44, 94, 42, 0.2); } .btn-primary:hover { background: #1e461c; transform: translateY(-2px); } .btn-secondary { background: #eaece8; border: 1px solid #bcd0b2; } .btn-secondary:hover { background: #dee6d8; } .preview-area { background: #fefcf0; border-radius: 1rem; padding: 1rem; margin-top: 1rem; font-size: 0.85rem; border: 1px solid #ecf0e5; } footer { background: #f3f7ef; text-align: center; padding: 1rem; font-size: 0.8rem; color: #5b6e53; border-top: 1px solid #daead2; } @media (max-width: 700px) { .form-inner { padding: 1.2rem; } .section-card { padding: 1rem; } } .error-msg { color: #c0392b; font-size: 0.75rem; margin-top: 4px; } .success-toast { position: fixed; bottom: 20px; left: 20px; background: #2c5e2a; color: white; padding: 12px 24px; border-radius: 50px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1000; opacity: 0; transition: opacity 0.2s; pointer-events: none; } </style> </head> <body> <div class="form-container"> <div class="club-header"> <h1> 🌿 نادي أبوظبي الزراعي <span>ناداب</span> </h1> <div class="sub"> <span>💧 آب و شاخه</span> <span>✨ مؤسسة أهلية رائدة</span> </div> <div style="font-size:0.85rem; margin-top: 8px;">ABU DHABI AGRICULTURAL CLUB</div> </div> <div class="form-inner"> <form id="membershipForm" enctype="multipart/form-data">  <div class="section-card"> <div class="section-title"> <span>📋</span> بيانات الانتساب </div> <div class="form-grid"> <div class="field"> <label>الاسم الثلاثي <span class="required">*</span></label> <input type="text" id="fullName" placeholder="مثال: جمعية سالم شيط الخاطري" value="جمعية سالم شيط الخاطري"> </div> <div class="field"> <label>تاريخ الميلاد</label> <input type="text" id="dob" placeholder="DD/MM/YYYY" value="01/12/1956"> </div> <div class="field"> <label>الجنسية</label> <input type="text" id="nationality" value="الإمارات"> </div> <div class="field"> <label>المذهب / الديانة</label> <input type="text" id="religion" value="الإسلامية"> </div> <div class="field"> <label>المهنة</label> <input type="text" id="occupation" value="مدير إقليمي سابقاً"> </div> <div class="field"> <label>المؤهل العلمي</label> <input type="text" id="education" value="بعد الثانوية"> </div> <div class="field"> <label>البريد الإلكتروني</label> <input type="email" id="email" value="jumaaalkhateri@gmail.com"> </div> <div class="field"> <label>رقم الجواز</label> <input type="text" id="passportNo" value="AA0996704"> </div> <div class="field"> <label>رقم الهوية الإماراتية</label> <input type="text" id="emiratesId" value="784-1990-1234567-8"> </div> </div> </div>  <div class="section-card"> <div class="section-title"> <span>📎</span> المستندات المرفقة (رفع إلكتروني) </div> <div class="form-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px,1fr));">  <div class="upload-group"> <label>🛂 صورة جواز السفر + الرقم الموحد</label> <div class="file-input-wrapper"> <input type="file" id="passportFile" accept="image/*,application/pdf,.jpg,.jpeg,.png,.pdf"> <span id="passportFileName" class="file-name">لم يتم رفع ملف</span> </div> </div>  <div class="upload-group"> <label>🆔 صورة الهوية الإماراتية</label> <div class="file-input-wrapper"> <input type="file" id="emiratesFile" accept="image/*,application/pdf,.jpg,.jpeg,.png,.pdf"> <span id="emiratesFileName" class="file-name">لم يتم رفع ملف</span> </div> </div>  <div class="upload-group"> <label>📸 صورة شخصية حديثة</label> <div class="file-input-wrapper"> <input type="file" id="photoFile" accept="image/*,.jpg,.jpeg,.png"> <span id="photoFileName" class="file-name">لم يتم رفع ملف</span> </div> </div> </div> <div class="preview-area" id="filePreviewHint"> 💡 يمكنك رفع الصور أو مستندات PDF. سيتم حفظ أسماء الملفات مؤقتاً. </div> </div>  <div class="section-card"> <div class="section-title"> <span>✍️</span> الإقرار والتعهد </div> <div class="declaration-box"> <div class="declaration-item">✅ أقر بأن جميع البيانات الواردة في هذه الاستمارة صحيحة.</div> <div class="declaration-item">✅ ألتزم بأحكام الانتساب للمؤسسات الأهلية.</div> <div class="declaration-item">✅ أتعهد بخدمة المجتمع في حدود القانون.</div> <div class="sign-row"> <div class="field" style="flex:1;"> <label>الاسم الثلاثي (التوقيع إقراراً)</label> <input type="text" id="signatureName" placeholder="الاسم ثلاثي" value="جمعية سالم شيط الخاطري"> </div> <div class="field" style="flex:1;"> <label>تاريخ التوقيع</label> <input type="text" id="signDate" placeholder="DD/MM/YYYY" value="01/12/1956"> </div> </div> </div> </div>  <div class="section-card"> <div class="section-title"> <span>🏅</span> التوصية والقبول </div> <div class="admin-section"> <div class="field" style="flex:1;"> <label>📌 توصية المدير العام</label> <select id="recommendation"> <option value="اعتماد المدير العام">✅ اعتماد المدير العام</option> <option value="موافقة مبدئية">⏳ موافقة مبدئية</option> <option value="مراجعة مستندات">📑 مراجعة مستندات</option> </select> </div> <div class="status-badge"> <span>🔄 حالة الطلب:</span> <select id="statusDecision"> <option value="تم القبول">✅ تم القبول</option> <option value="رفض الطلب">❌ رفض الطلب</option> <option value="قيد الدراسة">⏳ قيد الدراسة</option> </select> </div> <div class="field" style="width:150px;"> <label>رقم العضوية</label> <input type="text" id="membershipId" placeholder="AZ-xxxx" value="AZ-2458"> </div> </div> <div style="margin-top:10px; font-size:0.8rem; color:#5c6e53;">* يعتمد القبول النهائي من إدارة النادي</div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" id="submitBtn">📎 تقديم طلب الانتساب</button> <button type="reset" class="btn btn-secondary" id="resetBtn">🗑️ إعادة تعيين</button> <button type="button" class="btn btn-secondary" id="previewBtn">👁️ معاينة البيانات</button> </div> </form>  <div id="summaryArea" style="margin-top:1.5rem;"></div> </div> <footer> © نادي أبوظبي الزراعي · خدمة الانتساب الإلكتروني · جمعية خيرية أهلية مرخصة </footer> </div> <div id="toastMessage" class="success-toast"></div> <script> // ---- مساعد عرض الإشعارات ---- function showToast(msg, isError = false) { const toast = document.getElementById('toastMessage'); toast.textContent = msg; toast.style.backgroundColor = isError ? '#b3412e' : '#2c5e2a'; toast.style.opacity = '1'; setTimeout(() => { toast.style.opacity = '0'; }, 3000); } // تحديث أسماء الملفات المعروضة function bindFileListeners() { const passportInput = document.getElementById('passportFile'); const emiratesInput = document.getElementById('emiratesFile'); const photoInput = document.getElementById('photoFile'); if(passportInput) { passportInput.addEventListener('change', function(e) { const file = e.target.files[0]; const span = document.getElementById('passportFileName'); if(file) { span.textContent = file.name + (file.size ? ` (${(file.size/1024).toFixed(1)} KB)` : ''); } else { span.textContent = 'لم يتم رفع ملف'; } }); } if(emiratesInput) { emiratesInput.addEventListener('change', function(e) { const file = e.target.files[0]; const span = document.getElementById('emiratesFileName'); if(file) span.textContent = file.name + (file.size ? ` (${(file.size/1024).toFixed(1)} KB)` : ''); else span.textContent = 'لم يتم رفع ملف'; }); } if(photoInput) { photoInput.addEventListener('change', function(e) { const file = e.target.files[0]; const span = document.getElementById('photoFileName'); if(file) span.textContent = file.name + (file.size ? ` (${(file.size/1024).toFixed(1)} KB)` : ''); else span.textContent = 'لم يتم رفع ملف'; }); } } // تجميع بيانات النموذج (للعرض أو الإرسال) function collectFormData(includeFilesMeta = true) { const fullName = document.getElementById('fullName').value.trim(); const dob = document.getElementById('dob').value.trim(); const nationality = document.getElementById('nationality').value.trim(); const religion = document.getElementById('religion').value.trim(); const occupation = document.getElementById('occupation').value.trim(); const education = document.getElementById('education').value.trim(); const email = document.getElementById('email').value.trim(); const passportNo = document.getElementById('passportNo').value.trim(); const emiratesId = document.getElementById('emiratesId').value.trim(); const signatureName = document.getElementById('signatureName').value.trim(); const signDate = document.getElementById('signDate').value.trim(); const recommendation = document.getElementById('recommendation').value; const statusDecision = document.getElementById('statusDecision').value; const membershipId = document.getElementById('membershipId').value.trim(); // Files meta let passportFileMeta = 'لم يتم الرفع'; let emiratesFileMeta = 'لم يتم الرفع'; let photoFileMeta = 'لم يتم الرفع'; if(includeFilesMeta) { const passportFile = document.getElementById('passportFile').files[0]; const emiratesFile = document.getElementById('emiratesFile').files[0]; const photoFile = document.getElementById('photoFile').files[0]; if(passportFile) passportFileMeta = passportFile.name; if(emiratesFile) emiratesFileMeta = emiratesFile.name; if(photoFile) photoFileMeta = photoFile.name; } return { personal: { fullName, dob, nationality, religion, occupation, education, email, passportNo, emiratesId }, documents: { passportFile: passportFileMeta, emiratesFile: emiratesFileMeta, photoFile: photoFileMeta }, declaration: { signatureName, signDate }, admin: { recommendation, statusDecision, membershipId } }; } // التحقق من صحة الحد الأدنى function validateForm() { const fullName = document.getElementById('fullName').value.trim(); if(fullName === "") { showToast("الرجاء إدخال الاسم الثلاثي", true); return false; } const email = document.getElementById('email').value.trim(); if(email && !/^\S+@\S+\.\S+$/.test(email)) { showToast("البريد الإلكتروني غير صالح", true); return false; } // تحقق اختياري من الهوية const emiratesId = document.getElementById('emiratesId').value.trim(); if(emiratesId && emiratesId.length < 5) { // مجرد تذكير غير إلزامي console.log("رقم الهوية قصير"); } return true; } // عرض ملخص الطلب (معاينة) function showPreview() { const data = collectFormData(true); if(!validateForm()) return; const summaryDiv = document.getElementById('summaryArea'); const passportStatus = data.documents.passportFile !== 'لم يتم الرفع' ? `✅ ${data.documents.passportFile}` : '❌ لم يتم رفع صورة الجواز'; const emiratesStatus = data.documents.emiratesFile !== 'لم يتم الرفع' ? `✅ ${data.documents.emiratesFile}` : '❌ لم يتم رفع صورة الهوية'; const photoStatus = data.documents.photoFile !== 'لم يتم الرفع' ? `✅ ${data.documents.photoFile}` : '❌ لم يتم رفع الصورة الشخصية'; summaryDiv.innerHTML = ` <div style="background:#fefcf0; border-radius:1.2rem; padding:1.2rem; border:1px solid #cfdec7;"> <h3 style="color:#2c5e2a; margin-bottom:12px;">📄 معاينة طلب الانتساب</h3> <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.6rem;"> <div><strong>الاسم:</strong> ${escapeHtml(data.personal.fullName)}</div> <div><strong>تاريخ الميلاد:</strong> ${escapeHtml(data.personal.dob)}</div> <div><strong>الجنسية:</strong> ${escapeHtml(data.personal.nationality)}</div> <div><strong>المهنة:</strong> ${escapeHtml(data.personal.occupation)}</div> <div><strong>المؤهل:</strong> ${escapeHtml(data.personal.education)}</div> <div><strong>البريد:</strong> ${escapeHtml(data.personal.email)}</div> <div><strong>رقم الجواز:</strong> ${escapeHtml(data.personal.passportNo)}</div> <div><strong>الهوية الإماراتية:</strong> ${escapeHtml(data.personal.emiratesId)}</div> <div><strong>📎 جواز السفر:</strong> ${passportStatus}</div> <div><strong>🆔 الهوية:</strong> ${emiratesStatus}</div> <div><strong>📸 صورة شخصية:</strong> ${photoStatus}</div> <div><strong>✍️ الموقع:</strong> ${escapeHtml(data.declaration.signatureName)} - ${escapeHtml(data.declaration.signDate)}</div> <div><strong>🏅 توصية:</strong> ${escapeHtml(data.admin.recommendation)}</div> <div><strong>🔖 حالة الطلب:</strong> ${escapeHtml(data.admin.statusDecision)} | رقم العضوية: ${escapeHtml(data.admin.membershipId)}</div> </div> <p style="margin-top:12px; font-size:0.8rem;">📌 تم الالتزام بالإقرارات أعلاه. يمكنك تقديم الطلب رسمياً.</p> </div> `; summaryDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // تقديم الطلب (محاكاة إرسال وتخزين) function submitApplication() { if(!validateForm()) return; const data = collectFormData(true); // التحقق من رفع المستندات اختياري، لكن نعطي تنبيه تحفيزي const passportOk = document.getElementById('passportFile').files.length > 0; const emiratesOk = document.getElementById('emiratesFile').files.length > 0; const photoOk = document.getElementById('photoFile').files.length > 0; if(!passportOk || !emiratesOk || !photoOk) { showToast("⚠️ يُفضل رفع جميع المستندات: صورة الجواز، الهوية، والصورة الشخصية", true); // لكن لا نمنع الإرسال، فقط تنبيه } // بناء كائن كامل للعرض (محاكاة حفظ في قاعدة بيانات) const applicationRecord = { ...data, submittedAt: new Date().toLocaleString('ar-AE'), status: data.admin.statusDecision, recommendationFinal: data.admin.recommendation }; console.log("تم إرسال الطلب:", applicationRecord); // عرض رسالة نجاح مع معلومات const summaryDiv = document.getElementById('summaryArea'); summaryDiv.innerHTML = ` <div style="background:#e3f2df; border-radius:1.2rem; padding:1.2rem; border-right: 6px solid #2c5e2a;"> <h3 style="color:#155a10;">✅ تم تقديم طلب الانتساب بنجاح</h3> <p>شكراً لك ${escapeHtml(data.personal.fullName)}، تم استلام طلبك إلى نادي أبوظبي الزراعي.</p> <p><strong>رقم الطلب المؤقت:</strong> ${Math.floor(Math.random()*1000000)} | حالة الطلب: ${data.admin.statusDecision}</p> <p>📎 المستندات المرفقة: جواز السفر (${data.documents.passportFile !== 'لم يتم الرفع' ? 'مرفوع' : 'غير مرفوع'})، الهوية (${data.documents.emiratesFile !== 'لم يتم الرفع' ? 'مرفوع' : 'غير مرفوع'})، الصورة (${data.documents.photoFile !== 'لم يتم الرفع' ? 'مرفوع' : 'غير مرفوع'})</p> <p>📧 سيتم إشعارك عبر البريد الإلكتروني: ${escapeHtml(data.personal.email)}</p> <button type="button" class="btn btn-secondary" style="margin-top:10px;" onclick="window.location.reload();">➕ تقديم طلب جديد</button> </div> `; summaryDiv.scrollIntoView({ behavior: 'smooth' }); showToast("تم إرسال طلب الانتساب إلى إدارة النادي", false); // تعطيل زر الإرسال لمنع التكرار المباشر (اختياري) const submitBtn = document.getElementById('submitBtn'); if(submitBtn) submitBtn.disabled = true; setTimeout(() => { if(submitBtn) submitBtn.disabled = false; }, 3000); } function escapeHtml(str) { if(!str) return ''; return str.replace(/[&<>]/g, function(m) { if(m === '&') return '&'; if(m === '<') return '<'; if(m === '>') return '>'; return m; }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) { return c; }); } function resetForm() { document.getElementById('membershipForm').reset(); // إعادة تعيين أسماء الملفات الظاهرة document.getElementById('passportFileName').innerText = 'لم يتم رفع ملف'; document.getElementById('emiratesFileName').innerText = 'لم يتم رفع ملف'; document.getElementById('photoFileName').innerText = 'لم يتم رفع ملف'; // إعادة ضبط بعض القيم الافتراضية إن وجدت document.getElementById('fullName').value = 'جمعية سالم شيط الخاطري'; document.getElementById('dob').value = '01/12/1956'; document.getElementById('nationality').value = 'الإمارات'; document.getElementById('religion').value = 'الإسلامية'; document.getElementById('occupation').value = 'مدير إقليمي سابقاً'; document.getElementById('education').value = 'بعد الثانوية'; document.getElementById('email').value = 'jumaaalkhateri@gmail.com'; document.getElementById('passportNo').value = 'AA0996704'; document.getElementById('emiratesId').value = '784-1990-1234567-8'; document.getElementById('signatureName').value = 'جمعية سالم شيط الخاطري'; document.getElementById('signDate').value = '01/12/1956'; document.getElementById('recommendation').value = 'اعتماد المدير العام'; document.getElementById('statusDecision').value = 'تم القبول'; document.getElementById('membershipId').value = 'AZ-2458'; const summaryDiv = document.getElementById('summaryArea'); if(summaryDiv) summaryDiv.innerHTML = ''; showToast("تمت إعادة تعيين النموذج", false); } // تهيئة الأحداث window.addEventListener('DOMContentLoaded', () => { bindFileListeners(); document.getElementById('submitBtn').addEventListener('click', submitApplication); document.getElementById('resetBtn').addEventListener('click', resetForm); document.getElementById('previewBtn').addEventListener('click', showPreview); // تعبئة أولية للهوية في حال وجود قيمة من الصورة }); </script> </body> </html>

طلب الانتساب لنادي ابوظبي الزراعي

اشترك في نشرتنا الإخبارية