205 أسطر
14 KiB
HTML
205 أسطر
14 KiB
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>
|
|
<meta name="description" content="سجل الآن لتصبح سائق توصيل في طلباتك بلس. ابدأ بجني الأرباح اليوم من خلال نموذج التسجيل السريع والسهل.">
|
|
<meta name="keywords" content="تسجيل سائق, طلباتك بلس, عمل توصيل, سوريا">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="join.css">
|
|
</head>
|
|
<body class="py-10 px-4">
|
|
|
|
<div class="max-w-2xl mx-auto form-container p-8 md:p-12">
|
|
|
|
<!-- الرأس -->
|
|
<div class="flex justify-between items-center mb-10">
|
|
<div class="flex items-center gap-2">
|
|
<div>
|
|
<span class="text-3xl font-bold text-[#ff661c]">طلباتك</span>
|
|
<span class="text-3xl font-bold text-[#4458a8]">بلس</span>
|
|
</div>
|
|
</div>
|
|
<a href="index.html" class="text-zinc-400 hover:text-[#ff661c] transition-colors flex items-center gap-2">
|
|
<span>العودة للرئيسية</span>
|
|
<span class="text-xl">←</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- العنوان -->
|
|
<div class="mb-10">
|
|
<h1 class="text-4xl font-bold text-zinc-900 mb-2">انضم لأسرة طلباتك</h1>
|
|
<p class="text-zinc-500 text-lg">كن شريكاً في النجاح وابدأ بجني الأرباح معنا</p>
|
|
</div>
|
|
|
|
<!-- النموذج -->
|
|
<form id="driverForm" class="space-y-6">
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">الاسم الكامل</label>
|
|
<input type="text" name="name" placeholder="محمد أحمد..." required
|
|
class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl transition-all">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">رقم الجوال</label>
|
|
<input type="tel" name="phone" placeholder="09xxxxxxxx"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
|
|
maxlength="10" required
|
|
class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl transition-all text-left" dir="ltr">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">الرقم الوطني</label>
|
|
<input type="text" name="nationalId" placeholder="11 رقم"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
|
|
maxlength="11" required
|
|
class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl transition-all text-left" dir="ltr">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">عنوان السكن</label>
|
|
<input type="text" name="address" placeholder="المدينة - المنطقة" required
|
|
class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl transition-all">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">نوع المركبة</label>
|
|
<select name="vehicleType" required class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl appearance-none transition-all cursor-pointer">
|
|
<option value="سيارة">سيارة</option>
|
|
<option value="دراجة نارية">دراجة نارية</option>
|
|
<option value="دراجة هوائية">دراجة هوائية</option>
|
|
<option value="دراجة كهربائية">دراجة كهربائية</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">هل المركبة منمرة؟</label>
|
|
<select name="isNumbered" required class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl appearance-none transition-all cursor-pointer">
|
|
<option value="نعم">نعم</option>
|
|
<option value="لا">لا</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">رقم اللوحة (إن وجد)</label>
|
|
<input type="text" name="plateNumber" placeholder="رقم اللوحة..."
|
|
class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl transition-all">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">هل عملت سابقاً في التوصيل؟</label>
|
|
<select name="previousExperience" required class="w-full px-5 py-4 bg-zinc-50 border border-zinc-200 rounded-2xl appearance-none transition-all cursor-pointer">
|
|
<option value="نعم">نعم</option>
|
|
<option value="لا">لا</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- هل لديك خبرة بمناطق حلب؟ -->
|
|
<div class="space-y-2">
|
|
<label class="block text-zinc-700 font-medium">هل لديك خبرة بمناطق حلب؟</label>
|
|
<div class="flex gap-6">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="aleppKnowledge" value="نعم" required class="accent-[#ff661c] w-4 h-4">
|
|
<span>نعم</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="aleppKnowledge" value="لا" required class="accent-[#ff661c] w-4 h-4">
|
|
<span>لا</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- رفع الصورة -->
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-700 mr-2">الصورة الشخصية</label>
|
|
<div class="relative group">
|
|
<input type="file" name="profilePhoto" id="photoInput" accept="image/*" required
|
|
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
|
|
<div class="w-full px-5 py-8 border-2 border-dashed border-zinc-200 rounded-2xl bg-zinc-50 text-center group-hover:border-[#ff661c] transition-all">
|
|
<svg class="mx-auto h-12 w-12 text-zinc-400 mb-3 group-hover:text-[#ff661c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<p class="text-zinc-500">اضغط هنا لرفع الصورة</p>
|
|
<div id="imagePreviewContainer" class="mt-4 hidden">
|
|
<img id="imagePreview" src="" alt="معاينة الصورة" class="mx-auto h-32 w-32 object-cover rounded-2xl border-2 border-[#ff661c] shadow-md">
|
|
<p id="fileNamePreview" class="text-[#ff661c] mt-2 font-bold"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- تأكيد التأمين -->
|
|
<label class="flex items-start gap-3 cursor-pointer group">
|
|
<div class="relative mt-1">
|
|
<input type="checkbox" name="fundConfirm" required class="peer appearance-none w-6 h-6 border-2 border-zinc-200 rounded-lg checked:bg-[#ff661c] checked:border-[#ff661c] transition-all">
|
|
<svg class="absolute top-1 right-1 w-4 h-4 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-zinc-600 text-sm leading-relaxed group-hover:text-zinc-900 transition-colors">
|
|
أؤكد قدرتي على تأمين مبلغ ٣٥٠ ألف ليرة للبوكس واللباس
|
|
</span>
|
|
</label>
|
|
|
|
<!-- زر الإرسال -->
|
|
<button type="submit" id="submitBtn"
|
|
class="w-full bg-[#ff661c] hover:bg-[#ff7a3a] text-white py-5 rounded-2xl text-xl font-bold transition-all shadow-lg hover:shadow-[#ff661c44] flex items-center justify-center gap-3 active:scale-[0.98]">
|
|
إرسال طلب الانضمام
|
|
</button>
|
|
</form>
|
|
|
|
<!-- التواصل الاجتماعي -->
|
|
<div class="mt-10 pt-6 border-t border-zinc-200">
|
|
<p class="text-center text-zinc-500 mb-4">تابعونا على مواقع التواصل الاجتماعي</p>
|
|
<div class="flex justify-center gap-4">
|
|
<!-- فيسبوك -->
|
|
<a id="joinFacebook" href="https://www.facebook.com/profile.php?id=61585790864059&locale=ar_AR" target="_blank" rel="noopener noreferrer"
|
|
class="w-12 h-12 bg-zinc-100 rounded-full flex items-center justify-center hover:bg-[#ff661c] group transition-colors">
|
|
<svg class="w-6 h-6 text-zinc-600 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879v-6.99h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.99C18.343 21.128 22 16.991 22 12z"/>
|
|
</svg>
|
|
</a>
|
|
<!-- إنستغرام -->
|
|
<a id="joinInstagram" href="https://www.instagram.com/talabatuk.plus?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank" rel="noopener noreferrer"
|
|
class="w-12 h-12 bg-zinc-100 rounded-full flex items-center justify-center hover:bg-[#ff661c] group transition-colors">
|
|
<svg class="w-6 h-6 text-zinc-600 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153.509.5.902 1.105 1.153 1.772.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 01-1.153 1.772c-.5.508-1.105.902-1.772 1.153-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 01-1.772-1.153 4.904 4.904 0 01-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 011.153-1.772A4.897 4.897 0 015.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm6.5-.25a1.25 1.25 0 10-2.5 0 1.25 1.25 0 002.5 0zM12 9a3 3 0 110 6 3 3 0 010-6z"/>
|
|
</svg>
|
|
</a>
|
|
<!-- واتساب -->
|
|
<a id="joinWhatsapp" href="https://wa.me/963985377283" target="_blank" rel="noopener noreferrer"
|
|
class="w-12 h-12 bg-zinc-100 rounded-full flex items-center justify-center hover:bg-[#ff661c] group transition-colors">
|
|
<svg class="w-6 h-6 text-zinc-600 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.96.57 3.88 1.64 5.55L2 22l4.7-1.45c1.64.97 3.5 1.5 5.34 1.5 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm.05 18.23c-1.46 0-2.89-.4-4.13-1.15l-.3-.18-3.1.96.96-3.02-.2-.33a8.28 8.28 0 01-1.33-4.5c0-4.59 3.74-8.33 8.33-8.33s8.33 3.74 8.33 8.33-3.74 8.33-8.33 8.33zm4.48-6.24c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.63.78-.77.94-.14.16-.29.18-.53.06-.24-.12-1.01-.37-1.92-1.18-.71-.63-1.19-1.4-1.33-1.64-.14-.24-.02-.37.1-.49.1-.1.24-.27.36-.4.12-.13.16-.22.24-.37.08-.15.04-.28-.02-.4-.06-.12-.54-1.3-.74-1.78-.19-.48-.39-.41-.54-.42h-.46c-.16 0-.41.06-.63.3-.22.24-.84.82-.84 2 .01 1.18.86 2.32.98 2.48.12.16 1.66 2.54 4.02 3.56.56.24 1 .38 1.34.49.56.18 1.07.15 1.48.09.45-.06 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<p class="text-center text-zinc-400 text-sm mt-3">أو واتساب: 0985377283</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- JavaScript خارجي -->
|
|
<script src="join.js"></script>
|
|
<script>
|
|
(async () => {
|
|
try {
|
|
const res = await fetch('/api/settings');
|
|
const s = await res.json();
|
|
if (s.facebookUrl) document.getElementById('joinFacebook').href = s.facebookUrl;
|
|
if (s.instagramUrl) document.getElementById('joinInstagram').href = s.instagramUrl;
|
|
if (s.whatsappNumber) document.getElementById('joinWhatsapp').href = 'https://wa.me/' + s.whatsappNumber;
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|