الملفات
talabatuk_plus_1/join.html
Muhammad Kadi 9708ac6a37 compressImage
2026-03-30 19:08:18 +04:00

323 أسطر
21 KiB
HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<!-- Favicon -->
<link rel="icon" type="image/webp" href="/logos/logos_webp/logo_main.webp">
<link rel="apple-touch-icon" href="/logos/logos_webp/logo_main.webp">
<!-- للوغو في نتائج غوغل -->
<link rel="shortcut icon" href="/logos/logos_webp/logo_main.webp">
<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>
<input type="number" name="age" placeholder="مثال: 25"
min="18" max="60" required
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
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>
<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>
<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="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 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>
<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 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>
<!-- صور الهوية -->
<div class="space-y-3">
<label class="text-sm font-bold text-zinc-700 mr-2">صور الهوية الشخصية</label>
<div class="grid md:grid-cols-2 gap-4">
<!-- الوجه الأمامي -->
<div class="space-y-2">
<p class="text-xs text-zinc-500 font-medium mr-1">الوجه الأمامي</p>
<div class="relative group">
<input type="file" name="idFront" id="idFrontInput" accept="image/*" required
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
<div class="w-full px-4 py-6 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-8 w-8 text-zinc-400 mb-2 group-hover:text-[#ff661c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2" />
</svg>
<p class="text-zinc-500 text-sm">الوجه الأمامي للهوية</p>
<div id="idFrontPreviewContainer" class="mt-3 hidden">
<img id="idFrontPreview" src="" alt="معاينة" class="mx-auto h-24 w-full object-cover rounded-xl border-2 border-[#ff661c] shadow-sm">
<p id="idFrontFileName" class="text-[#ff661c] mt-1 font-bold text-xs truncate"></p>
</div>
</div>
</div>
</div>
<!-- الوجه الخلفي -->
<div class="space-y-2">
<p class="text-xs text-zinc-500 font-medium mr-1">الوجه الخلفي</p>
<div class="relative group">
<input type="file" name="idBack" id="idBackInput" accept="image/*" required
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
<div class="w-full px-4 py-6 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-8 w-8 text-zinc-400 mb-2 group-hover:text-[#ff661c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2" />
</svg>
<p class="text-zinc-500 text-sm">الوجه الخلفي للهوية</p>
<div id="idBackPreviewContainer" class="mt-3 hidden">
<img id="idBackPreview" src="" alt="معاينة" class="mx-auto h-24 w-full object-cover rounded-xl border-2 border-[#ff661c] shadow-sm">
<p id="idBackFileName" class="text-[#ff661c] mt-1 font-bold text-xs truncate"></p>
</div>
</div>
</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>
// معاينة صورة الهوية الأمامية
document.getElementById('idFrontInput').addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('idFrontPreview').src = e.target.result;
document.getElementById('idFrontPreviewContainer').classList.remove('hidden');
document.getElementById('idFrontFileName').textContent = file.name;
};
reader.readAsDataURL(file);
}
});
// معاينة صورة الهوية الخلفية
document.getElementById('idBackInput').addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('idBackPreview').src = e.target.result;
document.getElementById('idBackPreviewContainer').classList.remove('hidden');
document.getElementById('idBackFileName').textContent = file.name;
};
reader.readAsDataURL(file);
}
});
(async () => {
try {
const res = await fetch('/api/settings');
const s = await res.json();
if (s.whatsappGroupUrl) document.getElementById('whatsappGroupBtn').href = s.whatsappGroupUrl;
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>
<!-- زر مجموعة واتساب -->
<a id="whatsappGroupBtn" href="#" target="_blank" rel="noopener noreferrer"
style="position:fixed; bottom:24px; left:24px; z-index:9999;
background:#25D366; color:white; border-radius:50px;
padding:14px 22px; font-weight:bold; font-size:16px;
box-shadow:0 4px 15px rgba(0,0,0,0.3); text-decoration:none;
display:flex; align-items:center; gap:8px;">
<svg width="22" height="22" fill="white" viewBox="0 0 24 24">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15
-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075
-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059
-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52
.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52
-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51
-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372
-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074
.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625
.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413
.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
<path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.553 4.116 1.522 5.847L.057 23.882
a.75.75 0 00.921.921l6.035-1.465A11.945 11.945 0 0012 24c6.627 0 12-5.373
12-12S18.627 0 12 0zm0 21.9a9.877 9.877 0 01-5.031-1.378l-.36-.214
-3.733.906.922-3.595-.235-.372A9.9 9.9 0 012.1 12C2.1 6.533 6.533 2.1
12 2.1c5.467 0 9.9 4.433 9.9 9.9 0 5.467-4.433 9.9-9.9 9.9z"/>
</svg>
انضم لقناتنا
</a>
</body>
</html>