إنشاء موقع مسابقة برمجة Hi Thought for less than a second Hello! How can I assist you today? امر توليدي لإنشاء موقع مسابقة برمجة لاطفال القرية برعاية مدرسة 🏫 كود سكول لتعلم الذكاء الاصطناعي والبرمجة وتصميم الألعاب وتعليم التصميم Thought for 6 seconds 🎉 إنشاء موقع مسابقة برمجة لأطفال القرية تحت رعاية مدرسة كود سكول سأقدِّم لك أمر توليدي (أوامر سطر الأوامر) مع قالب مبدئي جاهز يُمكنك تعديله وتخصيصه بسهولة. النتيجة: موقع ثابت متجاوب (Responsive) يدعم اللغة العربية من اليمين إلى اليسار (RTL) ويستخدم Tailwind CSS لتصميم جذاب وصديق للأطفال. 1️⃣ اختيار التقنية (بدون خادم خلفي) المميزات لماذا نختارها HTML + Tailwind CSS + Vite إنشاء موقع ثابت سريع، لا تحتاج خادم؛ يمكنك رفعه على GitHub Pages أو Netlify أو أي استضافة ثابتة. RTL مدمجة عبر Tailwind → يدعم اللغة العربية بصورة صحيحة. نموذج التسجيل يمكن ربطه بخدمات مثل Netlify Forms أو Formspree دون كتابة كود خلفي. قابل للتوسيع → إذا احتجت مستقبلًا React/Next.js يمكنك التحويل بسهولة. 2️⃣ أمر توليدي لإنشاء المشروع ⚠️ متطلبات سابقة تثبيت Node.js (إصدار ≥ 18) و npm أو pnpm. سطر أوامر (Terminal/PowerShell/Command Prompt). # 1️⃣ إنشاء مشروع Vite (قالب vanilla) باسم competition-site npm create vite@latest competition-site -- --template vanilla # 2️⃣ الانتقال إلى المجلد cd competition-site # 3️⃣ تثبيت Tailwind CSS وملحقاته كـ dev‑dependency npm i -D tailwindcss postcss autoprefixer # 4️⃣ إنشاء ملفات الإعداد (tailwind.config.js + postcss.config.js) npx tailwindcss init -p 📂 هيكلية المجلد بعد تنفيذ الأوامر competition-site/ ├─ index.html ├─ src/ │ └─ main.js # مجرد نقطة دخول JS (يمكن تركه فارغًا) ├─ public/ │ └─ logo.png # شعار مدرسة كود سكول (استبدله بشعارك) ├─ tailwind.config.js ├─ postcss.config.js ├─ package.json └─ vite.config.js 3️⃣ ضبط إعدادات Tailwind لدعم RTL افتح tailwind.config.js وقم بإضافة الـ plugins اللازمة: /**
@type
{import('tailwindcss').Config} */ module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { fontFamily: { // خط عربي جميل (يمكنك تحميله من Google Fonts أو استبداله) arabic: ["'Cairo'", "sans-serif"], }, }, }, plugins: [ // إضافة plugin RTL لجعل Tailwind يدعم الاتجاه من اليمين إلى اليسار require("tailwindcss-rtl"), ], } ملحوظة: تحتاج لتثبيت الـ plugin: npm i -D tailwindcss-rtl ثم عدّل index.html لتمكين الـ RTL: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>مسابقة البرمجة لأطفال القرية | كود سكول</title> <link href="/dist/output.css" rel="stylesheet" /> </head> <body class="font-arabic bg-gray-50 text-gray-900"> <!-- المحتوى سيأتي هنا --> </body> </html> 4️⃣ قالب صفحة رئيسية (index.html) إليك ملف index.html جاهزًا، كل قسم (section) مُعَلَّم بوسوم HTML لتسهيل التعديل: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>مسابقة البرمجة لأطفال القرية | كود سكول</title> <!-- Tailwind CSS --> <link href="/dist/output.css" rel="stylesheet" /> </head> <body class="font-arabic bg-gray-50 text-gray-900"> <!-- ====== Header (قائمة تنقل) ====== --> <header class="bg-white shadow"> <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between"> <a href="#" class="flex items-center space-x-2 rtl:space-x-reverse"> <img src="/public/logo.png" alt="شعار كود سكول" class="h-10 w-10" /> <span class="text-xl font-bold text-indigo-600">كود سكول</span> </a> <nav class="space-x-6 rtl:space-x-reverse text-sm font-medium"> <a href="#about" class="hover:text-indigo-600">عن المسابقة</a> <a href="#schedule" class="hover:text-indigo-600">المواعيد</a> <a href="#prizes" class="hover:text-indigo-600">الجوائز</a> <a href="#register" class="hover:text-indigo-600">التسجيل</a> <a href="#contact" class="hover:text-indigo-600">اتصل بنا</a> </nav> </div> </header> <!-- ====== Hero Section (المشهد الرئيسي) ====== --> <section class="bg-indigo-600 text-white py-20"> <div class="max-w-4xl mx-auto px-4 text-center"> <h1 class="text-4xl md:text-5xl font-bold mb-4"> مسابقة برمجة للأطفال <br /> <span class="text-yellow-300">القرية 2025</span> </h1> <p class="text-lg md:text-xl mb-8"> تحت رعاية <strong>مدرسة كود سكول</strong> لتعليم الذكاء الاصطناعي، البرمجة، تصميم الألعاب، وتعلم التصميم. </p> <a href="#register" class="inline-block bg-yellow-400 hover:bg-yellow-500 text-indigo-800 font-semibold py-3 px-6 rounded-lg transition"> سجِّل الآن </a> </div> </section> <!-- ====== About Section (عن المسابقة) ====== --> <section id="about" class="py-16"> <div class="max-w-5xl mx-auto px-4 grid md:grid-cols-2 gap-8 items-center"> <img src="/public/about-illustration.svg" alt="إبداع الأطفال" class="w-full h-auto" /> <div> <h2 class="text-3xl font-bold text-indigo-700 mb-4">عن المسابقة</h2> <p class="text-gray-700 leading-relaxed mb-4"> تهدف مسابقة البرمجة إلى إلهام أطفال القرى لاكتشاف عوالم الذكاء الاصطناعي، البرمجة، وتصميم الألعاب. سنوفر ورش عمل، تحديات برمجية، وجوائز تشجيعية ترفع من مهارات التفكير النقدي والإبداع. </p> <ul class="list-disc list-inside text-gray-600 space-y-2"> <li>فئات عمرية: 8‑12 سنة</li> <li>مدة المسابقة: أسبوعين من التدريب ثم أسبوع التحديات</li> <li>مستوى صعوبة: مبتدئ – متوسط</li> </ul> </div> </div> </section> <!-- ====== Schedule Section (الجدول الزمني) ====== --> <section id="schedule" class="bg-gray-100 py-16"> <div class="max-w-5xl mx-auto px-4 text-center"> <h2 class="text-3xl font-bold text-indigo-700 mb-8">الجدول الزمني</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="p-6 bg-white rounded-lg shadow"> <h3 class="text-xl font-semibold mb-2">الأسبوع 1</h3> <p class="text-gray-600">ورش عمل تمهيدية عن البرمجة وتصميم الألعاب.</p> </div> <div class="p-6 bg-white rounded-lg shadow"> <h3 class="text-xl font-semibold mb-2">الأسبوع 2</h3> <p class="text-gray-600">تدريب عملي على الذكاء الاصطناعي البسيط.</p> </div> <div class="p-6 bg-white rounded-lg shadow"> <h3 class="text-xl font-semibold mb-2">الأسبوع 3</h3> <p class="text-gray-600">تحديات برمجة وتقييم المشاركات.</p> </div> </div> </div> </section> <!-- ====== Prizes Section (الجوائز) ====== --> <section id="prizes" class="py-16"> <div class="max-w-5xl mx-auto px-4 text-center"> <h2 class="text-3xl font-bold text-indigo-700 mb-8">الجوائز</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="p-6 bg-indigo-50 rounded-lg"> <h3 class="text-2xl font-bold text-indigo-800 mb-2">المركز الأول</h3> <p class="text-indigo-700">جهاز حاسوب محمول + منحة دراسية في كود سكول.</p> </div> <div class="p-6 bg-indigo-50 rounded-lg"> <h3 class="text-2xl font-bold text-indigo-800 mb-2">المركز الثاني</h3> <p class="text-indigo-700">جهاز لوحي + أدوات برمجة.</p> </div> <div class="p-6 bg-indigo-50 rounded-lg"> <h3 class="text-2xl font-bold text-indigo-800 mb-2">المركز الثالث</h3> <p class="text-indigo-700">حزمة تعليمية رقمية + شهادة تقدير.</p> </div> </div> </div> </section> <!-- ====== Registration Section (نموذج التسجيل) ====== --> <section id="register" class="bg-indigo-600 text-white py-20"> <div class="max-w-4xl mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-6">سجِّل طفلك الآن</h2> <p class="mb-8">املأ النموذج التالي وسيتم التواصل معك لتأكيد التسجيل.</p> <!-- ==== نموذج بسيط يعتمد على Netlify Forms (بدون خادم) ==== --> <form name="registration" netlify netlify-honeypot="bot-field" method="POST" class="grid md:grid-cols-2 gap-6 bg-white text-gray-900 p-8 rounded-lg shadow-lg max-w-2xl mx-auto"> <!-- حقل مضاد بوت --> <input type="hidden" name="form-name" value="registration" /> <p class="hidden"> <label>Don’t fill this out if you're human: <input name="bot-field" /></label> </p> <div class="col-span-2"> <label class="block text-sm font-medium mb-1" for="parentName">اسم ولي الأمر</label> <input type="text" id="parentName" name="parentName" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" /> </div> <div> <label class="block text-sm font-medium mb-1" for="childName">اسم الطفل</label> <input type="text" id="childName" name="childName" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" /> </div> <div> <label class="block text-sm font-medium mb-1" for="age">العمر</label> <select id="age" name="age" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option value="">اختر العمر</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> </div> <div class="col-span-2"> <label class="block text-sm font-medium mb-1" for="email">البريد الإلكتروني</label> <input type="email" id="email" name="email" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" /> </div> <div class="col-span-2"> <label class="block text-sm font-medium mb-1" for="phone">رقم الهاتف</label> <input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" /> </div> <div class="col-span-2"> <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded transition"> إرسـال التسجيل </button> </div> </form> </div> </section> <!-- ====== Sponsors (الكفيل) ====== --> <section class="py-12 bg-gray-100"> <div class="max-w-5xl mx-auto px-4 text-center"> <h3 class="text-xl font-semibold text-gray-700 mb-4">برعاية</h3> <img src="/public/logo.png" alt="شعار كود سكول" class="mx-auto h-16" /> </div> </section> <!-- ====== Contact Section (اتصل بنا) ====== --> <section id="contact" class="py-16"> <div class="max-w-4xl mx-auto px-4 text-center"> <h2 class="text-3xl font-bold text-indigo-700 mb-6">تواصل معنا</h2> <p class="mb-8"> 📞 <a href="tel:+1234567890" class="text-indigo-600 hover:underline">+123 456 7890</a> | 📧 <a href="mailto:info@codeschool.com" class="text-indigo-600 hover:underline">info@codeschool.com</a> </p> <p class="text-gray-600"> العنوان: شارع التعليم، قرية الابتكار، بلدنا الحبيب </p> </div> </section> <!-- ====== Footer ====== --> <footer class="bg-indigo-800 text-white py-6"> <div class="max-w-5xl mx-auto px-4 text-center"> <p class="text-sm">© 2025 كود سكول – جميع الحقوق محفوظة.</p> </div> </footer> </body> </html> ملاحظة تقنية بعد تعديل index.html احفظه داخل جذر المشروع. شغّل الخادم المحلي لتعاين الموقع: npm run dev # أو npm run serve حسب سكريبت الـ Vite سيفتح المتصفح على http://localhost:5173. 5️⃣ بناء ملفات CSS النهائية (Tailwind → output.css) إضافة script لبناء الـ CSS في package.json (إن لم يكن موجودًا): { "scripts": { "dev": "vite", "build": "vite build && npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify", "serve": "vite preview" } } ثم أنشئ ملف src/input.css يحتوي على توجيهات Tailwind: @tailwind base; @tailwind components; @tailwind utilities; بعد ذلك، لتوليد CSS النهائي: npm run build # سيُنتج ملف ./dist/output.css المطلوب في <link> داخل index.html يمكنك تعديل ألوان Tailwind في tailwind.config.js لتتناسب مع هوية مدرسة كود سكول (مثلاً primary: "#4F46E5" للون نيلي). 6️⃣ نشر الموقع (اختياري) 📦 GitHub Pages ادفع المشروع إلى مستودع GitHub. في إعدادات المستودع → Pages → اختر الفرع gh-pages أو main مع مجلد /dist. استخدم GitHub Action بسيط لنشر تلقائيًا بعد كل push: # .github/workflows/deploy.yml name: Deploy to GitHub Pages on: push: branches: [ main ] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: '20' - run: npm ci - run: npm run build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist ☁️ Netlify اربط المستودع مع Netlify. حدد أوامر البناء: npm run build. مجلد النشر: dist. Netlify سيعرف نمط Form (netlify forms) تلقائيًا وسيتلقى إيميلات التسجيل. 🪄 Vercel يدعم مشاريع Vite/Next.js بشكل افتراضي. فقط اضغط “Import Project” من لوحة التحكم، وابدأ. 7️⃣ نقاط أمان وخصوصية (مهم جدًا مع الأطفال) تجنّب جمع بيانات حساسة: احتفظ فقط بالاسم، عمر الطفل، اسم ولي الأمر، البريد أو الهاتف. إشعار الوالدين: أضف نصًا يوضح أن البيانات ستُستعمل فقط لتسجيل الأطفال وتواصل المدرسة. <p class="text-sm text-gray-500 mt-2"> 📌 يتم معالجة البيانات وفقًا لسياسة الخصوصية الخاصة بـ كود سكول ولا تُشارك مع أي طرف ثالث. </p> استخدام خدمات موثوقة لتخزين النماذج (Netlify Forms، Formspree) أو بناء قاعدة بيانات بسيطة على Google Sheets مع حماية الوصول. التحقق من البريد: إذا استخدمت البريد لتأكيد التسجيل، أرسل رسالة تحمل رابطًا مؤكدًا (بدون تحميل ملفات). الامتثال للقوانين: إذا كان موقعك في دولة تتطلب COPPA أو قوانين حماية الطفل، تأكد من الحصول على موافقة الوالدين قبل أي معالجات إضافية للبيانات. 8️⃣ ملخص الأوامر (مرة واحدة لتستنسخ المشروع) # 1️⃣ إنشاء المشروع npm create vite@latest competition-site -- --template vanilla cd competition-site # 2️⃣ تثبيت Tailwind + RTL plugin npm i -D tailwindcss postcss autoprefixer tailwindcss-rtl # 3️⃣ إعداد Tailwind npx tailwindcss init -p # 4️⃣ تعديل tailwind.config.js (أدخل الكود من الفقرة 3) # 5️⃣ إنشاء ملف CSS المدخل mkdir -p src && echo "@tailwind base; @tailwind components; @tailwind utilities;" > src/input.css # 6️⃣ إضافة سكريبتات build إلى package.json (انظر الفقرة 5) # 7️⃣ استبدل index.html بالمحتوى في الفقرة 4 # 8️⃣ بناء CSS النهائي npm run build # ينتج ./dist/output.css ويُبني الموقع في ./dist # 9️⃣ تشغيل الخادم المحلي للتأكد npm run dev بعد التأكد من كل شيء، يمكنك رفع dist/ إلى أي منصة استضافة ثابتة (GitHub Pages، Netlify، Vercel، إلخ). 🎨 لمسات إضافية لتجميل الموقع (اختياري) الفكرة كيف تنفذها خطوط عربية جذابة استورد خط Google Cairo أو Amiri عبر <link> في <head> ثم عيّن font-family: 'Cairo', sans-serif; في tailwind.config.js. رسوم متحركة خفيفة استخدم animate-bounce أو hover:scale-105 على أزرار الدعوة إلى التسجيل لجذب انتباه الأطفال. قائمة ألعاب صغيرة أضف قسم “ألعاب تعليمية” مع روابط إلى ألعاب برمجة بسيطة (مثل Scratch أو Code.org) داخل <section id="games">. قالب لبطاقة فوز في صفحة “الجوائز”، أدرج صورًا لبطاقات فوز مع ألوان مبتهجة (أصفر، أزرق فاتح). دعم الوضع المظلم أضف dark: classes من Tailwind لتوفير نسخة Dark Mode إذا أردت. 📧 مساعدة إضافية؟ إذا كنت تفضّل React أو Next.js بدلاً من القالب الثابت، أخبرني وسأزودك بأمر توليدي لتلك التقنية. إذا احتجت دليلًا لتوصيل النموذج بـ Google Sheets أو Zapier لتخزين بيانات التسجيل، فأنا جاهز لتوفير الخطوات. أتمنى لك التوفيق في تنظيم المسابقة وجعلها تجربة تعليمية ممتعة! 🚀✨ ّلم يتمّ اختيار أيّ ملفّ Ask anything - Initial Deployment
0240d07
verified
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>مسابقة برمجة لأطفال القرية | كود سكول</title> | |
| <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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .hero-pattern { | |
| background-image: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 90%); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4f46e5', | |
| secondary: '#f59e0b', | |
| }, | |
| fontFamily: { | |
| arabic: ['Tajawal', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-arabic bg-gray-50 text-gray-900"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <a href="#" class="flex items-center space-x-2 rtl:space-x-reverse"> | |
| <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-code text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold text-primary">كود سكول</span> | |
| </a> | |
| <nav class="hidden md:flex space-x-6 rtl:space-x-reverse"> | |
| <a href="#about" class="text-gray-700 hover:text-primary transition">عن المسابقة</a> | |
| <a href="#features" class="text-gray-700 hover:text-primary transition">المميزات</a> | |
| <a href="#schedule" class="text-gray-700 hover:text-primary transition">الجدول</a> | |
| <a href="#prizes" class="text-gray-700 hover:text-primary transition">الجوائز</a> | |
| <a href="#register" class="text-gray-700 hover:text-primary transition">التسجيل</a> | |
| </nav> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#about" class="text-gray-700 hover:text-primary transition">عن المسابقة</a> | |
| <a href="#features" class="text-gray-700 hover:text-primary transition">المميزات</a> | |
| <a href="#schedule" class="text-gray-700 hover:text-primary transition">الجدول</a> | |
| <a href="#prizes" class="text-gray-700 hover:text-primary transition">الجوائز</a> | |
| <a href="#register" class="text-gray-700 hover:text-primary transition">التسجيل</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-pattern py-20 md:py-32"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4"> | |
| مسابقة برمجة <span class="text-primary">إبداعية</span><br> | |
| لأطفال <span class="text-secondary">القرية</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| تحت رعاية مدرسة كود سكول لتعليم الذكاء الاصطناعي والبرمجة وتصميم الألعاب | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 rtl:space-x-reverse"> | |
| <a href="#register" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg text-center"> | |
| سجل الآن <i class="fas fa-arrow-left mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| </a> | |
| <a href="#about" class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-6 rounded-lg transition shadow text-center"> | |
| تعرف أكثر <i class="fas fa-info-circle mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <img src="https://img.freepik.com/free-vector/kids-learning-concept-illustration_114360-1834.jpg" alt="أطفال يتعلمون البرمجة" class="rounded-lg shadow-xl floating"> | |
| <div class="absolute -bottom-5 -left-5 bg-yellow-100 p-4 rounded-lg shadow-lg hidden md:block"> | |
| <div class="text-yellow-800 font-bold">مسابقة مجانية بالكامل!</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">عن المسابقة</h2> | |
| <div class="w-20 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <img src="https://img.freepik.com/free-vector/happy-kids-learning-coding-computer_74855-5292.jpg" alt="أطفال يتعلمون البرمجة" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pr-8 rtl:pr-0 rtl:pl-8"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">اكتشف موهبة طفلك في البرمجة</h3> | |
| <p class="text-gray-600 mb-6"> | |
| مسابقة برمجة ممتعة ومفيدة لأطفال القرية من سن 8 إلى 12 سنة، تهدف إلى اكتشاف المواهب وتنمية مهارات التفكير المنطقي والإبداعي لدى الأطفال. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-child text-primary text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">فئات عمرية</h4> | |
| <p class="text-gray-600">من 8 إلى 12 سنة</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-calendar-alt text-primary text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">المدة</h4> | |
| <p class="text-gray-600">3 أسابيع (تدريب + مسابقة)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-laptop-code text-primary text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">المستوى</h4> | |
| <p class="text-gray-600">مبتدئ - لا يحتاج خبرة سابقة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">ماذا سيتعلم طفلك؟</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">مهارات برمجية وإبداعية تفتح له آفاق المستقبل</p> | |
| <div class="w-20 h-1 bg-secondary mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">مقدمة في الذكاء الاصطناعي</h3> | |
| <p class="text-gray-600">تعلم أساسيات الذكاء الاصطناعي وكيفية تطبيقه في الحياة اليومية بأسلوب مبسط يناسب الأطفال.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="bg-yellow-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-gamepad text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">تصميم الألعاب الإلكترونية</h3> | |
| <p class="text-gray-600">تعلم كيفية تصميم ألعاب بسيطة باستخدام أدوات برمجية سهلة وممتعة.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-paint-brush text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">أساسيات التصميم الرقمي</h3> | |
| <p class="text-gray-600">تنمية الحس الفني والإبداعي لدى الطفل من خلال تعلم أساسيات التصميم.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-code text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">البرمجة باستخدام سكراتش</h3> | |
| <p class="text-gray-600">تعلم البرمجة بطريقة مرئية ممتعة باستخدام لغة سكراتش المناسبة للأطفال.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="bg-red-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lightbulb text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">حل المشكلات</h3> | |
| <p class="text-gray-600">تنمية مهارات التفكير المنطقي وحل المشكلات بطريقة إبداعية.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="bg-purple-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-users text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">العمل الجماعي</h3> | |
| <p class="text-gray-600">تعلم أهمية العمل ضمن فريق وتنمية مهارات التواصل مع الآخرين.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Schedule Section --> | |
| <section id="schedule" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">الجدول الزمني</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">رحلة تعلم ممتعة على مدار 3 أسابيع</p> | |
| <div class="w-20 h-1 bg-secondary mx-auto mt-4"></div> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-primary/20 transform -translate-x-1/2 rtl:translate-x-1/2"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-8 md:space-y-16"> | |
| <!-- Week 1 --> | |
| <div class="relative flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-8 rtl:pr-0 rtl:pl-8 md:text-right rtl:text-left mb-4 md:mb-0"> | |
| <div class="bg-primary/10 p-4 rounded-lg shadow-sm inline-block"> | |
| <h3 class="text-xl font-bold text-primary">الأسبوع الأول</h3> | |
| <p class="text-gray-600">ورش عمل تمهيدية</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white z-10"> | |
| <i class="fas fa-calendar-week text-xl"></i> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8 rtl:pl-0 rtl:pr-8 md:text-left rtl:text-right mt-4 md:mt-0"> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>تعلم أساسيات البرمجة باستخدام سكراتش</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>مقدمة في الذكاء الاصطناعي للأطفال</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>ورشة تصميم ألعاب بسيطة</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Week 2 --> | |
| <div class="relative flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-8 rtl:pr-0 rtl:pl-8 md:text-right rtl:text-left mb-4 md:mb-0 order-1 md:order-none"> | |
| <div class="bg-primary/10 p-4 rounded-lg shadow-sm inline-block"> | |
| <h3 class="text-xl font-bold text-primary">الأسبوع الثاني</h3> | |
| <p class="text-gray-600">تدريب عملي</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white z-10"> | |
| <i class="fas fa-laptop-code text-xl"></i> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8 rtl:pl-0 rtl:pr-8 md:text-left rtl:text-right mt-4 md:mt-0 order-2 md:order-none"> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>تطبيق عملي على ما تم تعلمه</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>حل مشكلات برمجية بسيطة</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>بدء العمل على مشاريع المسابقة</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Week 3 --> | |
| <div class="relative flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-8 rtl:pr-0 rtl:pl-8 md:text-right rtl:text-left mb-4 md:mb-0"> | |
| <div class="bg-primary/10 p-4 rounded-lg shadow-sm inline-block"> | |
| <h3 class="text-xl font-bold text-primary">الأسبوع الثالث</h3> | |
| <p class="text-gray-600">تحديات المسابقة</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white z-10"> | |
| <i class="fas fa-trophy text-xl"></i> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8 rtl:pl-0 rtl:pr-8 md:text-left rtl:text-right mt-4 md:mt-0"> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>تسليم المشاريع النهائية</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>عرض المشاريع أمام لجنة التحكيم</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>حفل الختام وتوزيع الجوائز</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Prizes Section --> | |
| <section id="prizes" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">جوائز المسابقة</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">جوائز قيمة لتشجيع المواهب الصغيرة</p> | |
| <div class="w-20 h-1 bg-secondary mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- First Prize --> | |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition duration-300"> | |
| <div class="bg-yellow-100 py-4 text-center"> | |
| <div class="text-4xl font-bold text-yellow-600">1</div> | |
| <div class="text-xl font-bold text-yellow-700">المركز الأول</div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-laptop text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>جهاز حاسوب محمول</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-graduation-cap text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>منحة دراسية في كود سكول</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-trophy text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>كأس المسابقة</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-certificate text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>شهادة تقدير</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Second Prize --> | |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition duration-300"> | |
| <div class="bg-gray-200 py-4 text-center"> | |
| <div class="text-4xl font-bold text-gray-600">2</div> | |
| <div class="text-xl font-bold text-gray-700">المركز الثاني</div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-tablet-alt text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>جهاز لوحي</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-book text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>مجموعة كتب برمجة للأطفال</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-certificate text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>شهادة تقدير</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Third Prize --> | |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition duration-300"> | |
| <div class="bg-amber-100 py-4 text-center"> | |
| <div class="text-4xl font-bold text-amber-600">3</div> | |
| <div class="text-xl font-bold text-amber-700">المركز الثالث</div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-gamepad text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>جهاز ألعاب تعليمي</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-book-open text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>حزمة تعليمية رقمية</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-certificate text-primary mt-1 mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| <span>شهادة تقدير</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600 mb-4">جميع المشاركين سيحصلون على:</p> | |
| <div class="inline-flex flex-wrap justify-center gap-3"> | |
| <span class="bg-white px-4 py-2 rounded-full shadow-sm text-sm font-medium">شهادة مشاركة</span> | |
| <span class="bg-white px-4 py-2 rounded-full shadow-sm text-sm font-medium">حقيبة تعليمية</span> | |
| <span class="bg-white px-4 py-2 rounded-full shadow-sm text-sm font-medium">هدايا رمزية</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Registration Section --> | |
| <section id="register" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto bg-gradient-to-r from-primary to-indigo-600 rounded-xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-white p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">سجل طفلك الآن</h2> | |
| <p class="text-gray-600 mb-6">املأ النموذج وسنتواصل معك لتأكيد التسجيل</p> | |
| <form id="registration-form" class="space-y-4"> | |
| <div> | |
| <label for="parent-name" class="block text-sm font-medium text-gray-700 mb-1">اسم ولي الأمر</label> | |
| <input type="text" id="parent-name" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="child-name" class="block text-sm font-medium text-gray-700 mb-1">اسم الطفل</label> | |
| <input type="text" id="child-name" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="child-age" class="block text-sm font-medium text-gray-700 mb-1">عمر الطفل</label> | |
| <select id="child-age" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">اختر العمر</option> | |
| <option value="8">8 سنوات</option> | |
| <option value="9">9 سنوات</option> | |
| <option value="10">10 سنوات</option> | |
| <option value="11">11 سنوات</option> | |
| <option value="12">12 سنوات</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">رقم الهاتف</label> | |
| <input type="tel" id="phone" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني (اختياري)</label> | |
| <input type="email" id="email" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" | |
| class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 px-4 rounded-lg transition shadow-lg"> | |
| إرسال التسجيل <i class="fas fa-paper-plane mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500"> | |
| 📌 سيتم استخدام بياناتك فقط لأغراض التسجيل في المسابقة ولن يتم مشاركتها مع أي طرف ثالث. | |
| </p> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2 bg-indigo-600 p-8 text-white"> | |
| <h3 class="text-xl font-bold mb-4">معلومات التسجيل</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-700 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">موعد التسجيل</h4> | |
| <p class="text-indigo-100 text-sm">حتى 15 نوفمبر 2023</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-700 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">عدد المقاعد</h4> | |
| <p class="text-indigo-100 text-sm">50 مقعد فقط (سيتم المفاضلة)</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-700 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">مكان المسابقة</h4> | |
| <p class="text-indigo-100 text-sm">مدرسة كود سكول - القرية</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-700 p-2 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-question-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">استفسارات</h4> | |
| <p class="text-indigo-100 text-sm">info@codeschool.com<br>+123 456 7890</p> | |
| </div> | |
| </li> | |
| </ul> | |
| <div class="mt-8 bg-indigo-700/50 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">ملاحظات مهمة:</h4> | |
| <ul class="list-disc list-inside text-sm space-y-1 text-indigo-100"> | |
| <li>المسابقة مجانية بالكامل</li> | |
| <li>يجب حضور جميع أيام التدريب</li> | |
| <li>سيتم توفير الأجهزة اللازمة</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sponsors Section --> | |
| <section class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-xl font-semibold text-gray-700">برعاية</h3> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-24 h-24 bg-white rounded-full shadow-lg flex items-center justify-center mb-4"> | |
| <div class="text-3xl text-primary font-bold">كود</div> | |
| </div> | |
| <h4 class="text-xl font-bold text-primary">مدرسة كود سكول</h4> | |
| <p class="text-gray-600">لتعليم الذكاء الاصطناعي والبرمجة وتصميم الألعاب</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">أسئلة متكررة</h2> | |
| <div class="w-20 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full px-6 py-4 text-right font-medium text-gray-700 hover:bg-gray-50 flex items-center justify-between"> | |
| <span>ما هي متطلبات المشاركة في المسابقة؟</span> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-4 text-gray-600 hidden"> | |
| المسابقة مخصصة للأطفال من سن 8 إلى 12 سنة ولا تتطلب أي خبرة سابقة في البرمجة. كل ما يحتاجه الطفل هو الرغبة في التعلم والإبداع. سيتم توفير جميع الأجهزة والمواد التعليمية اللازمة خلال فترة المسابقة. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full px-6 py-4 text-right font-medium text-gray-700 hover:bg-gray-50 flex items-center justify-between"> | |
| <span>كم تبلغ رسوم المشاركة في المسابقة؟</span> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-4 text-gray-600 hidden"> | |
| المسابقة مجانية بالكامل ولا توجد أي رسوم للمشاركة. يتم تمويل المسابقة بالكامل من قبل مدرسة كود سكول بهدف تشجيع الأطفال على تعلم البرمجة وتطوير مهاراتهم الإبداعية. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full px-6 py-4 text-right font-medium text-gray-700 hover:bg-gray-50 flex items-center justify-between"> | |
| <span>ما هي لغة البرمجة التي سيتم تعليمها للأطفال؟</span> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-4 text-gray-600 hidden"> | |
| سيتعلم الأطفال أساسيات البرمجة باستخدام لغة سكراتش (Scratch) وهي لغة برمجة مرئية صممت خصيصًا للأطفال. كما سيتعرفون على مفاهيم الذكاء الاصطناعي البسيطة وأساسيات تصميم الألعاب بطريقة ممتعة وسهلة الفهم. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full px-6 py-4 text-right font-medium text-gray-700 hover:bg-gray-50 flex items-center justify-between"> | |
| <span>هل يمكن لولي الأمر حضور فترات التدريب مع الطفل؟</span> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-4 text-gray-600 hidden"> | |
| نرحب بوجود أولياء الأمور في اليوم الأول للتعرف على البرنامج، ولكن خلال أيام التدريب نفضل أن يكون الأطفال بمفردهم لتعزيز استقلاليتهم وقدرتهم على التفاعل مع المدربين وزملائهم. مع ذلك، يمكن لولي الأمر الانتظار في منطقة مخصصة بالمدرسة إذا رغب في ذلك. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">تواصل معنا</h2> | |
| <div class="w-20 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">معلومات الاتصال</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-map-marker-alt text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">العنوان</h4> | |
| <p class="text-gray-600">شارع التعليم، قرية الابتكار، بجوار مدرسة كود سكول</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-phone-alt text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">الهاتف</h4> | |
| <p class="text-gray-600"> | |
| <a href="tel:+1234567890" class="hover:text-primary transition">+123 456 7890</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-envelope text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">البريد الإلكتروني</h4> | |
| <p class="text-gray-600"> | |
| <a href="mailto:info@codeschool.com" class="hover:text-primary transition">info@codeschool.com</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4 rtl:mr-0 rtl:ml-4"> | |
| <i class="fas fa-clock text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">ساعات العمل</h4> | |
| <p class="text-gray-600">من الأحد إلى الخميس، 8 صباحًا - 3 مساءً</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-bold text-gray-800 mb-2">تابعنا على</h4> | |
| <div class="flex space-x-3 rtl:space-x-reverse"> | |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600 hover:bg-red-200 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center text-white hover:bg-blue-500 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-600 hover:bg-pink-200 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">أرسل رسالة</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">اسمك</label> | |
| <input type="text" id="name" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> | |
| <input type="email" id="email" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">الموضوع</label> | |
| <input type="text" id="subject" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">الرسالة</label> | |
| <textarea id="message" rows="4" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" | |
| class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg"> | |
| إرسال الرسالة <i class="fas fa-paper-plane mr-2 rtl:mr-0 rtl:ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-2 rtl:mr-0 rtl:ml-2"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| كود سكول | |
| </h3> | |
| <p class="text-gray-400"> | |
| مدرسة متخصصة في تعليم البرمجة والذكاء الاصطناعي وتصميم الألعاب للأطفال والناشئين. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#about" class="hover:text-white transition">عن المسابقة</a></li> | |
| <li><a href="#features" class="hover:text-white transition">المميزات</a></li> | |
| <li><a href="#schedule" class="hover:text-white transition">الجدول</a></li> | |
| <li><a href="#prizes" class="hover:text-white transition">الجوائز</a></li> | |
| <li><a href="#register" class="hover:text-white transition">التسجيل</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">تواصل معنا</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2 rtl:mr-0 rtl:ml-2 text-primary"></i> | |
| <span>قرية الابتكار، شارع التعليم</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-2 rtl:mr-0 rtl:ml-2 text-primary"></i> | |
| <span>+123 456 7890</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-2 rtl:mr-0 rtl:ml-2 text-primary"></i> | |
| <span>info@codeschool.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4> | |
| <p class="text-gray-400 mb-4">اشترك ليصلك كل جديد عن مسابقاتنا ودوراتنا</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="بريدك الإلكتروني" | |
| class="px-4 py-2 rounded-r-lg rtl:rounded-r-none rtl:rounded-l-lg focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" | |
| class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-l-lg rtl:rounded-l-none rtl:rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2023 مدرسة كود سكول. جميع الحقوق محفوظة. | |
| </p> | |
| <div class="flex space-x-6 rtl:space-x-reverse"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 rtl:right-auto rtl:left-6 w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <!-- JavaScript --> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // FAQ Accordion | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', () => { | |
| const answer = question.nextElementSibling; | |
| const icon = question.querySelector('i'); | |
| // Toggle answer | |
| answer.classList.toggle('hidden'); | |
| // Rotate icon | |
| icon.classList.toggle('transform'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Registration Form Submission | |
| const registrationForm = document.getElementById('registration-form'); | |
| registrationForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| const parentName = document.getElementById('parent-name').value; | |
| const childName = document.getElementById('child-name').value; | |
| const childAge = document.getElementById('child-age').value; | |
| const phone = document.getElementById('phone').value; | |
| const email = document.getElementById('email').value; | |
| // Here you would normally send the data to a server | |
| // For this example, we'll just show an alert | |
| alert(`تم استلام تسجيل طفلك ${childName} بنجاح!\nسيتم التواصل معك على الرقم ${phone} لتأكيد المشاركة.`); | |
| // Reset form | |
| registrationForm.reset(); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hossammogalal999/qudschool-challenge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |