| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>التسجيل الإستثنائي في النادي C.C.A</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700;900&family=Playfair+Display:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Kufi Arabic', sans-serif; |
| background-color: #1a1a1a; |
| color: #ffffff; |
| } |
| |
| |
| .card-bg { |
| background-color: #ffffff; |
| color: #1a1a1a; |
| box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); |
| border: 3px solid #ffcc00; |
| transition: transform 0.3s ease; |
| } |
| |
| .input-style { |
| background-color: #f5f5f5; |
| border: 1px solid #cccccc; |
| color: #1a1a1a; |
| transition: all 0.3s ease; |
| } |
| |
| .input-style:focus { |
| border-color: #ffcc00; |
| outline: none; |
| box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.5); |
| } |
| |
| .input-disabled { |
| background-color: #e0e0e0; |
| cursor: not-allowed; |
| color: #555555; |
| font-style: italic; |
| } |
| |
| .button-primary { |
| background-color: #ffcc00; |
| color: #1a1a1a; |
| font-weight: bold; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3); |
| } |
| |
| .button-primary:hover { |
| background-color: #e6b800; |
| transform: translateY(-2px); |
| box-shadow: 0 8px 20px rgba(255, 204, 0, 0.6); |
| } |
| |
| .header-title { |
| font-family: 'Playfair Display', serif; |
| letter-spacing: 1.5px; |
| } |
| |
| .loader { |
| border: 4px solid #f3f3f3; |
| border-top: 4px solid #ffcc00; |
| border-radius: 50%; |
| width: 20px; |
| height: 20px; |
| animation: spin 1s linear infinite; |
| margin-right: 8px; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| #hidden-iframe { |
| display: none; |
| } |
| </style> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'primary-yellow': '#ffcc00', |
| 'dark-black': '#1a1a1a', |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
|
|
| |
| |
| <iframe id="hidden-iframe" name="hidden_iframe" onload="iframeLoaded()" style="display: none;"></iframe> |
|
|
| <div class="w-full max-w-lg card-bg rounded-2xl p-10 space-y-8 shadow-2xl"> |
| |
| |
| <header class="text-center"> |
| <h1 class="header-title text-3xl md:text-4xl font-extrabold text-dark-black mb-1"> |
| التسجيل الإستثنائي |
| </h1> |
| <p class="text-xl md:text-2xl font-bold text-primary-yellow border-b-2 border-dark-black/10 pb-4"> |
| في النادي <span class="tracking-widest">C.C.A</span> |
| </p> |
| </header> |
| |
| |
| <div id="messageArea" class="h-auto min-h-[60px] flex items-center justify-center transition-all duration-300"> |
| |
| <div id="successMessage" class="hidden w-full bg-primary-yellow/20 border-r-4 border-primary-yellow text-dark-black p-4 rounded-lg shadow-md" role="alert"> |
| <strong class="block mb-1 text-lg font-bold">تهانينا!</strong> |
| <span class="text-sm">تم إكمال تسجيلك في النادي C.C.A وإرسال بياناتك تلقائياً بنجاح.</span> |
| </div> |
| |
| <div id="errorMessage" class="hidden w-full bg-red-100 border-r-4 border-red-500 text-red-700 p-4 rounded-lg shadow-md" role="alert"> |
| <strong class="block mb-1 text-lg font-bold">حدث خطأ!</strong> |
| <span class="text-sm">يرجى التأكد من اتصالك بالإنترنت وأن جميع الحقول مملوءة بشكل صحيح.</span> |
| </div> |
| |
| <div id="loadingMessage" class="hidden flex items-center justify-center w-full bg-gray-100 border-r-4 border-gray-500 text-gray-700 p-4 rounded-lg shadow-md" role="status"> |
| <div class="loader"></div> |
| <span class="text-sm font-medium mr-3">جارٍ إرسال البيانات بشكل آمن...</span> |
| </div> |
| </div> |
|
|
| |
| <form id="infoForm" class="space-y-6" |
| action="https://docs.google.com/forms/d/e/1FAIpQLSdgu-mgqJT5yGWHdRr5VLbGM82xaJAh2vTnD5-3h0Dvo_bOMA/formResponse" |
| method="POST" |
| target="hidden_iframe" |
| onsubmit="submitFormHandler(event)"> |
| |
| |
| <div> |
| <label for="entry.1938954121" class="block text-sm font-semibold text-dark-black mb-1">الاسم الشخصي</label> |
| |
| <input type="text" id="entry.1938954121" name="entry.1938954121" required placeholder="أدخل اسمك الأول" |
| class="mt-1 block w-full px-4 py-3 rounded-lg shadow-inner input-style focus:ring-primary-yellow" |
| minlength="2"> |
| </div> |
|
|
| |
| <div> |
| <label for="entry.21668304" class="block text-sm font-semibold text-dark-black mb-1">الاسم العائلي</label> |
| |
| <input type="text" id="entry.21668304" name="entry.21668304" required placeholder="أدخل اسم عائلتك" |
| class="mt-1 block w-full px-4 py-3 rounded-lg shadow-inner input-style focus:ring-primary-yellow" |
| minlength="2"> |
| </div> |
|
|
| |
| <div> |
| <label for="entry.1776021190" class="block text-sm font-semibold text-dark-black mb-1">رقم الهاتف</label> |
| |
| <input type="tel" id="entry.1776021190" name="entry.1776021190" required placeholder="مثال: 05xxxxxx (مطلوب)" |
| class="mt-1 block w-full px-4 py-3 rounded-lg shadow-inner input-style focus:ring-primary-yellow" |
| pattern="[0-9]{9,15}"> |
| </div> |
|
|
| |
| <div> |
| <label for="entry.1726485437" class="block text-sm font-semibold text-gray-600 mb-1">البريد الإلكتروني للنادي</label> |
| |
| <input type="email" id="entry.1726485437" name="entry.1726485437" value="Club2026@gmail.com" readonly |
| class="mt-1 block w-full px-4 py-3 rounded-lg input-disabled input-style" |
| title="هذا الحقل مملوء تلقائياً ولا يمكن تعديله"> |
| </div> |
|
|
| |
| <div> |
| <button type="submit" id="submitButton" |
| class="w-full flex items-center justify-center py-3 px-4 rounded-lg shadow-lg text-lg button-primary focus:outline-none focus:ring-4 focus:ring-primary-yellow focus:ring-offset-2 focus:ring-offset-white transition duration-300"> |
| <svg class="w-6 h-6 ml-2" id="submitIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944c6.264 0 10.93 4.29 11.955 9.056-.98 4.698-5.65 9.056-11.955 9.056C5.65 21.056.98 16.698 0 12c1.025-4.766 5.69-9.056 11.955-9.056zM12 15a3 3 0 100-6 3 3 0 000 6z"></path></svg> |
| <span id="buttonText">تأكيد التسجيل في C.C.A</span> |
| </button> |
| </div> |
| </form> |
| |
| <p class="text-sm text-center text-gray-500 mt-6"> |
| نتطلع إلى انضمامك إلينا! |
| </p> |
|
|
| </div> |
|
|
| <script> |
| |
| let isFirstLoad = true; |
| |
| |
| function showMessage(type) { |
| const messages = { |
| success: document.getElementById('successMessage'), |
| error: document.getElementById('errorMessage'), |
| loading: document.getElementById('loadingMessage') |
| }; |
| |
| |
| Object.values(messages).forEach(msg => msg.classList.add('hidden')); |
| |
| |
| if (messages[type]) { |
| messages[type].classList.remove('hidden'); |
| } |
| } |
| |
| |
| function setButtonState(isLoading) { |
| const button = document.getElementById('submitButton'); |
| const icon = document.getElementById('submitIcon'); |
| const text = document.getElementById('buttonText'); |
| |
| button.disabled = isLoading; |
| const loader = button.querySelector('.loader'); |
| |
| if (isLoading) { |
| |
| button.classList.add('cursor-not-allowed', 'opacity-75'); |
| icon.style.display = 'none'; |
| text.innerHTML = 'جارٍ الإرسال...'; |
| |
| |
| if (!loader) { |
| const newLoader = document.createElement('div'); |
| newLoader.classList.add('loader'); |
| button.prepend(newLoader); |
| } |
| } else { |
| |
| button.classList.remove('cursor-not-allowed', 'opacity-75'); |
| if (loader) { |
| loader.remove(); |
| } |
| icon.style.display = 'block'; |
| text.innerHTML = 'تأكيد التسجيل في C.C.A'; |
| } |
| } |
| |
| |
| function submitFormHandler(event) { |
| const form = event.target; |
| |
| |
| if (!form.checkValidity()) { |
| showMessage('error'); |
| form.reportValidity(); |
| return; |
| } |
| |
| |
| setButtonState(true); |
| showMessage('loading'); |
| |
| |
| |
| } |
| |
| |
| function iframeLoaded() { |
| |
| if (isFirstLoad) { |
| isFirstLoad = false; |
| return; |
| } |
| |
| |
| |
| |
| setButtonState(false); |
| |
| |
| showMessage('success'); |
| |
| |
| document.getElementById('entry.1938954121').value = ''; |
| document.getElementById('entry.21668304').value = ''; |
| document.getElementById('entry.1776021190').value = ''; |
| |
| |
| setTimeout(() => { |
| showMessage('none'); |
| }, 5000); |
| } |
| |
| |
| document.getElementById('infoForm').addEventListener('submit', submitFormHandler); |
| |
| |
| setTimeout(() => { |
| if (isFirstLoad) isFirstLoad = false; |
| }, 500); |
| </script> |
| </body> |
| </html> |
