١
هذا الالتزام موجود في:
Muhammad Kadi
106
admin.html
Normal file
106
admin.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!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>
|
||||
<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">
|
||||
<style>
|
||||
body { font-family: 'IBM+Plex+Sans+Arabic', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-50 py-6 sm:py-10 px-4">
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-6 sm:space-y-8">
|
||||
|
||||
<!-- Login Section -->
|
||||
<div id="loginSection" class="bg-white p-6 sm:p-8 rounded-3xl shadow-lg text-center">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-[#ff661c] mb-6">تسجيل الدخول للإدارة</h1>
|
||||
<input type="password" id="adminPassword" placeholder="كلمة المرور..." class="w-full max-w-xs px-5 py-3 border rounded-2xl mb-4 text-center">
|
||||
<br>
|
||||
<button onclick="checkAuth()" class="bg-[#ff661c] text-white px-8 py-3 rounded-2xl font-bold hover:bg-[#ff7a3a] transition-all w-full sm:w-auto">دخول</button>
|
||||
</div>
|
||||
|
||||
<!-- Admin Content (Hidden by default) -->
|
||||
<div id="adminContent" class="hidden space-y-6 sm:space-y-8">
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-zinc-900">إدارة الموقع</h1>
|
||||
<button onclick="logout()" class="text-zinc-400 hover:text-red-500 transition-colors">تسجيل خروج</button>
|
||||
</div>
|
||||
|
||||
<!-- WhatsApp Management -->
|
||||
<div class="bg-white p-6 sm:p-8 rounded-3xl shadow-lg space-y-4">
|
||||
<h2 class="text-xl font-bold text-zinc-700">تغيير رقم الواتساب</h2>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="whatsappNumber" placeholder="963985377283" class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="updateWhatsApp()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ الرقم</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Management -->
|
||||
<div class="bg-white p-6 sm:p-8 rounded-3xl shadow-lg space-y-6">
|
||||
<h2 class="text-xl font-bold text-zinc-700">إدارة فيديوهات العمل</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="newVideoUrl" placeholder="رابط يوتيوب أو تيك توك..." class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="addVideo()" class="bg-green-500 text-white px-6 py-3 rounded-2xl font-bold hover:bg-green-600 transition-all w-full sm:w-auto">+ إضافة فيديو</button>
|
||||
</div>
|
||||
<p class="text-xs text-zinc-400">مثال: https://www.youtube.com/watch?v=XXXXX</p>
|
||||
</div>
|
||||
|
||||
<div id="videosList" class="grid md:grid-cols-2 gap-6">
|
||||
<!-- Videos will appear here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- إدارة الروابط الاجتماعية -->
|
||||
<div class="bg-white p-6 sm:p-8 rounded-3xl shadow-lg space-y-4">
|
||||
<h2 class="text-xl font-bold text-zinc-700">الروابط الاجتماعية</h2>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="facebookUrl" placeholder="رابط فيسبوك" class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="updateFacebook()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ</button>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="instagramUrl" placeholder="رابط إنستغرام" class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="updateInstagram()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- إدارة روابط التحميل -->
|
||||
<div class="bg-white p-6 sm:p-8 rounded-3xl shadow-lg space-y-4">
|
||||
<h2 class="text-xl font-bold text-zinc-700">روابط التحميل</h2>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="appStoreUrl" placeholder="رابط App Store" class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="updateAppStore()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ</button>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="googlePlayUrl" placeholder="رابط Google Play" class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="updateGooglePlay()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ</button>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="apkUrl" placeholder="رابط APK" class="flex-1 px-5 py-3 border rounded-2xl">
|
||||
<button onclick="updateApk()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- إدارة معرفات التلغرام (Chat IDs) -->
|
||||
<div class="bg-white p-6 sm:p-8 rounded-3xl shadow-lg space-y-4">
|
||||
<h2 class="text-xl font-bold text-zinc-700">معرفات الدردشات (Telegram Chat IDs)</h2>
|
||||
<p class="text-sm text-zinc-500">أدخل كل معرف في سطر منفصل</p>
|
||||
<textarea id="telegramChatIds" rows="3" placeholder="2024001342
|
||||
1927352258
|
||||
-1003849324453" class="w-full px-5 py-3 border rounded-2xl font-mono text-sm"></textarea>
|
||||
<button onclick="updateTelegramChatIds()" class="bg-[#ff661c] text-white px-6 py-3 rounded-2xl font-bold w-full sm:w-auto">حفظ المعرفات</button>
|
||||
</div>
|
||||
|
||||
<!-- توكن البوت محذوف من الواجهة لأسباب أمنية -->
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
|
||||
<script src="admin.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
240
admin.js
Normal file
240
admin.js
Normal file
@@ -0,0 +1,240 @@
|
||||
/* ============================================
|
||||
admin.js - لوحة تحكم طلباتك بلس (نسخة آمنة بدون كلمة مرور ثابتة)
|
||||
============================================ */
|
||||
|
||||
// تحديد رابط API بناءً على البيئة
|
||||
const API_BASE = (() => {
|
||||
const host = window.location.hostname;
|
||||
if (host === 'localhost' || host === '127.0.0.1' || host.startsWith('192.168.')) {
|
||||
return `http://${host}:3000/api`; // عدّل المنفذ حسب إعدادات السيرفر
|
||||
}
|
||||
return '/api';
|
||||
})();
|
||||
|
||||
// --- دالة تسجيل الدخول عبر الخادم ---
|
||||
async function checkAuth() {
|
||||
const password = document.getElementById('adminPassword').value;
|
||||
try {
|
||||
const res = await fetch(API_BASE + '/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
sessionStorage.setItem('adminPass', password);
|
||||
document.getElementById('loginSection').classList.add('hidden');
|
||||
document.getElementById('adminContent').classList.remove('hidden');
|
||||
loadSettings(); // تحميل الإعدادات بعد الدخول
|
||||
} else {
|
||||
alert('❌ ' + (data.message || 'كلمة المرور غير صحيحة'));
|
||||
}
|
||||
} catch (err) {
|
||||
alert('❌ فشل الاتصال بالخادم. تأكد من تشغيل السيرفر.');
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
document.getElementById('loginSection').classList.remove('hidden');
|
||||
document.getElementById('adminContent').classList.add('hidden');
|
||||
document.getElementById('adminPassword').value = '';
|
||||
}
|
||||
|
||||
// --- تحميل الإعدادات من الخادم ---
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const res = await fetch(API_BASE + '/settings');
|
||||
if (!res.ok) throw new Error('فشل تحميل الإعدادات');
|
||||
const data = await res.json();
|
||||
|
||||
document.getElementById('whatsappNumber').value = data.whatsappNumber || '';
|
||||
document.getElementById('facebookUrl').value = data.facebookUrl || '';
|
||||
document.getElementById('instagramUrl').value = data.instagramUrl || '';
|
||||
document.getElementById('appStoreUrl').value = data.appStoreUrl || '';
|
||||
document.getElementById('googlePlayUrl').value = data.googlePlayUrl || '';
|
||||
document.getElementById('apkUrl').value = data.apkUrl || '';
|
||||
|
||||
if (data.telegramChatIds && Array.isArray(data.telegramChatIds)) {
|
||||
document.getElementById('telegramChatIds').value = data.telegramChatIds.join('\n');
|
||||
}
|
||||
|
||||
renderVideos(data.videos || []);
|
||||
} catch (error) {
|
||||
console.error('خطأ في تحميل الإعدادات:', error);
|
||||
alert('تعذر تحميل الإعدادات. تأكد من تشغيل الخادم.');
|
||||
}
|
||||
}
|
||||
|
||||
// --- عرض الفيديوهات ---
|
||||
function renderVideos(videos) {
|
||||
const container = document.getElementById('videosList');
|
||||
container.innerHTML = '';
|
||||
|
||||
videos.forEach((url, index) => {
|
||||
const videoId = extractYouTubeVideoId(url);
|
||||
const thumbnail = videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : '';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'bg-zinc-100 p-4 rounded-2xl relative';
|
||||
card.innerHTML = `
|
||||
<img src="${thumbnail}" alt="فيديو" class="w-full h-32 object-cover rounded-xl mb-2">
|
||||
<p class="text-sm truncate" title="${url}">${url}</p>
|
||||
<button onclick="deleteVideo(${index})" class="mt-2 bg-red-500 text-white px-3 py-1 rounded-xl text-sm hover:bg-red-600 transition-colors">
|
||||
🗑️ حذف
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function extractYouTubeVideoId(url) {
|
||||
const patterns = [
|
||||
/youtube\.com\/watch\?v=([^&]+)/,
|
||||
/youtu\.be\/([^?]+)/,
|
||||
/youtube\.com\/embed\/([^?]+)/
|
||||
];
|
||||
for (let pattern of patterns) {
|
||||
const match = url.match(pattern);
|
||||
if (match && match[1]) return match[1];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// --- إضافة فيديو جديد ---
|
||||
async function addVideo() {
|
||||
const url = document.getElementById('newVideoUrl').value.trim();
|
||||
if (!url) {
|
||||
alert('الرجاء إدخال رابط الفيديو');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(API_BASE + '/settings');
|
||||
const data = await res.json();
|
||||
const videos = data.videos || [];
|
||||
videos.push(url);
|
||||
|
||||
const updateRes = await fetch(API_BASE + '/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-admin-password': sessionStorage.getItem('adminPass') || ''
|
||||
},
|
||||
body: JSON.stringify({ videos })
|
||||
});
|
||||
|
||||
if (updateRes.ok) {
|
||||
document.getElementById('newVideoUrl').value = '';
|
||||
loadSettings(); // إعادة تحميل القائمة
|
||||
alert('✅ تمت إضافة الفيديو بنجاح');
|
||||
} else {
|
||||
alert('❌ فشل إضافة الفيديو');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('❌ خطأ في الاتصال بالخادم');
|
||||
}
|
||||
}
|
||||
|
||||
// --- حذف فيديو ---
|
||||
async function deleteVideo(index) {
|
||||
if (!confirm('هل أنت متأكد من حذف هذا الفيديو؟')) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(API_BASE + '/settings');
|
||||
const data = await res.json();
|
||||
const videos = data.videos || [];
|
||||
videos.splice(index, 1);
|
||||
|
||||
const updateRes = await fetch(API_BASE + '/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-admin-password': sessionStorage.getItem('adminPass') || ''
|
||||
},
|
||||
body: JSON.stringify({ videos })
|
||||
});
|
||||
|
||||
if (updateRes.ok) {
|
||||
loadSettings();
|
||||
alert('✅ تم الحذف');
|
||||
} else {
|
||||
alert('❌ فشل الحذف');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('❌ خطأ في الاتصال');
|
||||
}
|
||||
}
|
||||
|
||||
// --- دوال تحديث الحقول الفردية ---
|
||||
async function updateWhatsApp() {
|
||||
const value = document.getElementById('whatsappNumber').value.trim();
|
||||
await updateField('whatsappNumber', value);
|
||||
}
|
||||
async function updateFacebook() {
|
||||
const value = document.getElementById('facebookUrl').value.trim();
|
||||
await updateField('facebookUrl', value);
|
||||
}
|
||||
async function updateInstagram() {
|
||||
const value = document.getElementById('instagramUrl').value.trim();
|
||||
await updateField('instagramUrl', value);
|
||||
}
|
||||
async function updateAppStore() {
|
||||
const value = document.getElementById('appStoreUrl').value.trim();
|
||||
await updateField('appStoreUrl', value);
|
||||
}
|
||||
async function updateGooglePlay() {
|
||||
const value = document.getElementById('googlePlayUrl').value.trim();
|
||||
await updateField('googlePlayUrl', value);
|
||||
}
|
||||
async function updateApk() {
|
||||
const value = document.getElementById('apkUrl').value.trim();
|
||||
await updateField('apkUrl', value);
|
||||
}
|
||||
|
||||
async function updateTelegramChatIds() {
|
||||
const text = document.getElementById('telegramChatIds').value.trim();
|
||||
const ids = text.split('\n')
|
||||
.map(line => line.trim())
|
||||
.filter(line => line !== '');
|
||||
await updateField('telegramChatIds', ids);
|
||||
}
|
||||
|
||||
// دالة عامة لتحديث حقل واحد
|
||||
async function updateField(key, value) {
|
||||
const password = document.getElementById('adminPassword').value || sessionStorage.getItem('adminPass') || '';
|
||||
try {
|
||||
const res = await fetch(API_BASE + '/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-admin-password': password
|
||||
},
|
||||
body: JSON.stringify({ [key]: value })
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
alert('✅ تم الحفظ بنجاح');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
alert('❌ فشل الحفظ: ' + (err.message || 'خطأ غير معروف'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('❌ خطأ في الاتصال بالخادم');
|
||||
}
|
||||
}
|
||||
|
||||
// ربط الدوال بالكائن window
|
||||
window.checkAuth = checkAuth;
|
||||
window.logout = logout;
|
||||
window.addVideo = addVideo;
|
||||
window.deleteVideo = deleteVideo;
|
||||
window.updateWhatsApp = updateWhatsApp;
|
||||
window.updateFacebook = updateFacebook;
|
||||
window.updateInstagram = updateInstagram;
|
||||
window.updateAppStore = updateAppStore;
|
||||
window.updateGooglePlay = updateGooglePlay;
|
||||
window.updateApk = updateApk;
|
||||
window.updateTelegramChatIds = updateTelegramChatIds;
|
||||
ثنائية
driver.webp
Normal file
ثنائية
driver.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 93 KiB |
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 164 KiB |
ثنائية
foodimg_webp/1.webp
Normal file
ثنائية
foodimg_webp/1.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 133 KiB |
ثنائية
foodimg_webp/10.webp
Normal file
ثنائية
foodimg_webp/10.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 91 KiB |
ثنائية
foodimg_webp/2.webp
Normal file
ثنائية
foodimg_webp/2.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 65 KiB |
ثنائية
foodimg_webp/3.webp
Normal file
ثنائية
foodimg_webp/3.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 81 KiB |
ثنائية
foodimg_webp/4(1).webp
Normal file
ثنائية
foodimg_webp/4(1).webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 155 KiB |
ثنائية
foodimg_webp/4.webp
Normal file
ثنائية
foodimg_webp/4.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 155 KiB |
ثنائية
foodimg_webp/5.webp
Normal file
ثنائية
foodimg_webp/5.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 111 KiB |
ثنائية
foodimg_webp/6.webp
Normal file
ثنائية
foodimg_webp/6.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 120 KiB |
ثنائية
foodimg_webp/7.webp
Normal file
ثنائية
foodimg_webp/7.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 161 KiB |
ثنائية
foodimg_webp/8.webp
Normal file
ثنائية
foodimg_webp/8.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 48 KiB |
ثنائية
foodimg_webp/9.webp
Normal file
ثنائية
foodimg_webp/9.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 104 KiB |
ثنائية
foodimg_webp/IMG_4044.jpg.webp
Normal file
ثنائية
foodimg_webp/IMG_4044.jpg.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 135 KiB |
254
index.css
Normal file
254
index.css
Normal file
@@ -0,0 +1,254 @@
|
||||
/* ============================================
|
||||
index.css - طلباتك بلس - الصفحة الرئيسية
|
||||
============================================ */
|
||||
|
||||
/* 1. استيراد الخطوط وتعريف المتغيرات */
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--primary: #ff661c;
|
||||
--secondary: #4458a8;
|
||||
}
|
||||
|
||||
/* 2. التنسيق العام للجسم */
|
||||
body {
|
||||
font-family: 'IBM Plex Sans Arabic', sans-serif;
|
||||
background-color: #f4f4f5;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 3. تنسيق قسم الـ Hero (تدرج لوني مع نقش خلفية) */
|
||||
.hero-bg {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #FFFFFF, #4458a8 35%);
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663283773943/B6VScFZzyyFsbsNTibkNXq/delivery-benefits-pattern-kLL7PjAxESmg8sQjNQs3GU.webp');
|
||||
background-repeat: repeat;
|
||||
background-size: 400px;
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-bg > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 4. تنسيق شريط الصور المتحرك (Ticker) */
|
||||
.ticker {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ticker-track {
|
||||
display: flex;
|
||||
animation: marquee 25s linear infinite;
|
||||
}
|
||||
|
||||
.ticker-track img {
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ticker-track img:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 10px 20px rgba(255, 102, 28, 0.3);
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.ticker-track-reverse {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
/* 5. بطاقات المميزات (Feature Cards) */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
max-width: 800px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: linear-gradient(135deg, #4458a8 0%, #4458a8 30%, #ff661c 100%);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
padding: 2.5rem 2rem;
|
||||
border-radius: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: right;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.feature-icon-svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 1.5rem;
|
||||
fill: white;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover .feature-icon-svg {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.feature-card h4 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 6. بطاقات الخطوات (Step Cards) */
|
||||
.step-card {
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2.5rem 2rem;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 1.5rem;
|
||||
padding: 2px;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.step-card:hover::before {
|
||||
background: linear-gradient(to bottom, #ff661c, #4458a8);
|
||||
}
|
||||
|
||||
.step-card:hover {
|
||||
transform: translateY(-12px) scale(1.05);
|
||||
box-shadow: 0 20px 40px rgba(68, 88, 168, 0.25);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
.step-card:hover + .step-number,
|
||||
.flex:hover .step-number {
|
||||
background-color: var(--secondary) !important;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-card:hover h3 {
|
||||
color: var(--secondary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.step-card h3 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.step-card p {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* زر السجل */
|
||||
.btn-step-style {
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-register-style {
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.btn-register-style:hover {
|
||||
background-color: var(--secondary) !important;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 10px 20px rgba(68, 88, 168, 0.25);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* أرقام الخطوات */
|
||||
.step-number {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: -1.75rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
/* 7. تأثيرات الظهور (Fade-in) */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
413
index.html
Normal file
413
index.html
Normal file
@@ -0,0 +1,413 @@
|
||||
<!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@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<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="توصيل طلبات, وظيفة سائق, كسب المال, عمل مرن, طلباتك بلس, سوريا">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://drivers.talabatukplus.com/">
|
||||
<meta property="og:title" content="طلباتك بلس - فرصة عمل كسائق توصيل بدخل مميز">
|
||||
<meta property="og:description" content="انضم إلى طلباتك بلس كسائق توصيل واستمتع بمرونة في ساعات العمل ودخل يومي مرتفع. سجل الآن وابدأ رحلتك معنا.">
|
||||
<meta property="og:image" content="https://drivers.talabatukplus.com/logos_webp/logo_main.webp">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="https://drivers.talabatukplus.com/">
|
||||
<meta property="twitter:title" content="طلباتك بلس - فرصة عمل كسائق توصيل بدخل مميز">
|
||||
<meta property="twitter:description" content="انضم إلى طلباتك بلس كسائق توصيل واستمتع بمرونة في ساعات العمل ودخل يومي مرتفع. سجل الآن وابدأ رحلتك معنا.">
|
||||
<meta property="twitter:image" content="https://drivers.talabatukplus.com/logos_webp/logo_main.webp">
|
||||
|
||||
<link rel="canonical" href="https://drivers.talabatukplus.com/">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body class="tail-container bg-zinc-50 text-zinc-900">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-4 flex-row-reverse">
|
||||
<div class="flex items-center">
|
||||
<img src="logos_webp/logo_main.webp" alt="Brand Name" class="h-20 w-auto object-contain">
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-[#ff661c] rounded-2xl flex-shrink-0 flex items-center justify-center overflow-hidden shadow-inner">
|
||||
<img src="talabatk.webp" alt="Icon" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center gap-8 text-lg font-medium">
|
||||
<a href="#features" class="hover:text-[#ff661c] transition-colors">المميزات</a>
|
||||
<a href="#stats" class="hover:text-[#ff661c] transition-colors">إحصائياتنا</a>
|
||||
<a href="#join" class="hover:text-[#ff661c] transition-colors">انضم الآن</a>
|
||||
</div>
|
||||
|
||||
<a href="info"
|
||||
class="btn-register-style bg-[#ff661c] text-white px-9 py-3 rounded-3xl font-bold text-lg shadow-lg inline-block">
|
||||
سجل الآن
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-bg text-white relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6 pt-20 pb-16 grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-md px-6 py-2 rounded-3xl text-sm font-medium">
|
||||
<span class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></span>
|
||||
فرصة عمل مرنة متاحة الآن
|
||||
</div>
|
||||
|
||||
<h1 class="text-6xl md:text-7xl font-bold leading-tight tracking-tighter">
|
||||
انضم إلى <span class="text-[#ff661c]">طلباتك بلس</span><br>
|
||||
<span class="text-5xl md:text-5xl block mt-4">وابدأ كسبك اليوم!</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-2xl text-white/90 max-w-lg">
|
||||
كن سائق توصيل مع أسرع تطبيق طلبات في المنطقة. دخل يومي مرتفع + جدول زمني مرن + دعم 24/7
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-5">
|
||||
<a href="info" class="btn-register-style bg-white text-[#ff661c] px-10 py-5 rounded-3xl font-bold text-xl shadow-2xl flex items-center gap-3">
|
||||
<span>سجل الآن </span>
|
||||
<span class="text-3xl">→</span>
|
||||
</a>
|
||||
<a id="heroWhatsapp" href="https://wa.me/963985377283" target="_blank" rel="noopener noreferrer"
|
||||
class="border-2 border-white hover:bg-white/10 px-8 py-5 rounded-3xl font-medium text-xl transition-all inline-flex items-center gap-2">
|
||||
<span>تواصل معنا</span>
|
||||
<svg class="w-9 h-9" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<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>
|
||||
|
||||
<div class="flex items-center gap-8 text-sm">
|
||||
<div class="flex -space-x-4">
|
||||
<div class="w-8 h-8 bg-white rounded-2xl border-2 border-white overflow-hidden">
|
||||
<img src="https://picsum.photos/id/64/64/64" alt="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="w-8 h-8 bg-white rounded-2xl border-2 border-white overflow-hidden">
|
||||
<img src="https://picsum.photos/id/65/64/64" alt="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold">+1200 سائق</div>
|
||||
<div class="text-white/70 text-xs">انضموا هذا الشهر</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Image -->
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-10 bg-gradient-to-br from-[#ff661c]/30 to-transparent rounded-[4rem] -rotate-6"></div>
|
||||
<img src="driver.webp"
|
||||
alt="سائق توصيل على دراجة نارية"
|
||||
class="rounded-3xl shadow-2xl w-full relative z-10 border-8 border-white/30">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trust bar -->
|
||||
<div class="bg-white/10 backdrop-blur-md py-5 text-center text-sm font-medium flex justify-center items-center gap-12 text-white/90">
|
||||
<div>دراجات نارية • سيارات • دراجات هوائية</div>
|
||||
<div class="h-5 w-px bg-white/30"></div>
|
||||
<div>مدعوم من أكثر من 35 مطعم</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Ticker Banner 1 (Right to Left) -->
|
||||
<div class="ticker">
|
||||
<div class="ticker bg-white py-6 border-b border-t shadow-inner">
|
||||
<div class="ticker-track flex gap-8" style="animation-duration: 35s;">
|
||||
<img loading="lazy" src="foodimg_webp/٢٠٢٥١٢٢٢_١٩٤٧٠٠.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="برجر">
|
||||
<img loading="lazy" src="foodimg_webp/IMG_4044.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="بيتزا">
|
||||
<img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?q=80&w=400&auto=format&fit=crop" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img loading="lazy" src="foodimg_webp/2.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img loading="lazy" src="foodimg_webp/3.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img loading="lazy" src="foodimg_webp/4.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img loading="lazy" src="foodimg_webp/5.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="مناقيش">
|
||||
<img loading="lazy" src="foodimg_webp/6.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="أرز">
|
||||
<img loading="lazy" src="foodimg_webp/7.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img loading="lazy" src="foodimg_webp/9.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img loading="lazy" src="foodimg_webp/8.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img loading="lazy" src="foodimg_webp/10.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img loading="lazy" src="foodimg_webp/٢٠٢٥١٢٢٢_١٩٤٧٠٠.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="برجر">
|
||||
<img loading="lazy" src="foodimg_webp/IMG_4044.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="بيتزا">
|
||||
<img loading="lazy" src="foodimg_webp/1.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img loading="lazy" src="foodimg_webp/2.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img loading="lazy" src="foodimg_webp/3.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img loading="lazy" src="foodimg_webp/4.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img loading="lazy" src="foodimg_webp/5.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="مناقيش">
|
||||
<img loading="lazy" src="foodimg_webp/6.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="أرز">
|
||||
<img loading="lazy" src="foodimg_webp/7.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img loading="lazy" src="foodimg_webp/9.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img loading="lazy" src="foodimg_webp/8.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img loading="lazy" src="foodimg_webp/10.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Download -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-20 bg-zinc-100 rounded-3xl mx-6 my-12">
|
||||
<div class="md:col-span-5 space-y-8">
|
||||
<div class="inline-block bg-orange-100 text-[#ff661c] px-5 py-2 rounded-3xl font-semibold text-sm">من نحن؟</div>
|
||||
<h2 class="text-5xl font-bold leading-tight">طلباتك بلس هي أسرع منصة توصيل طعام في المنطقة</h2>
|
||||
<p class="text-xl text-zinc-600">
|
||||
نحن نربط بين المطاعم والعملاء بأسرع وقت، ونمنح السائقين فرصة حقيقية لكسب دخل ممتاز مع مرونة كاملة في الأوقات.
|
||||
</p>
|
||||
<div class="flex items-center gap-6 text-sm font-medium">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-4xl">⭐</span>
|
||||
<div>تقييم 4.9</div>
|
||||
</div>
|
||||
<div class="h-8 w-px bg-zinc-300"></div>
|
||||
<div>أكثر من 35 مطعم شريك</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<a id="appStoreLink" href="https://apps.apple.com/us/app/talabatuk-plus/id6759189465" class="group flex items-center bg-black rounded-2xl px-5 py-3 transition-all duration-300 shadow-xl border border-zinc-800 w-fit hover:border-blue-600 hover:scale-105">
|
||||
<div class="ml-4 flex-shrink-0 text-white transition-colors duration-300 group-hover:text-[#ff661c]">
|
||||
<svg viewBox="0 0 384 512" class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-white transition-colors duration-300 group-hover:text-[#ff661c]">
|
||||
<span class="text-[10px] leading-none opacity-80 font-light">Download on the</span>
|
||||
<span class="text-xl font-bold leading-tight -mt-0.5">App Store</span>
|
||||
</div>
|
||||
</a>
|
||||
<a id="googlePlayLink" href="https://play.google.com/store/apps/details?id=com.talabatukplus.user" class="group flex items-center bg-black rounded-2xl px-5 py-3 transition-all duration-300 shadow-xl border border-zinc-800 w-fit hover:border-blue-600 hover:scale-105">
|
||||
<div class="ml-4 flex-shrink-0 text-white transition-colors duration-300 group-hover:text-[#ff661c]">
|
||||
<svg viewBox="0 0 512 512" class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-10.3 18-28.5-1.2-36.3zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-white transition-colors duration-300 group-hover:text-[#ff661c]">
|
||||
<span class="text-[10px] leading-none opacity-80 font-light uppercase tracking-wider">GET IT ON</span>
|
||||
<span class="text-xl font-bold leading-tight -mt-0.5">Google Play</span>
|
||||
</div>
|
||||
</a>
|
||||
<a id="apkLink" href="https://talabatukplus.com/downloads/talapatuk-plus-user.apk" download="Talabatuk-Plus.apk"
|
||||
class="group flex items-center bg-black rounded-2xl px-5 py-3 transition-all duration-300 shadow-xl border border-zinc-800 w-fit hover:border-[#ff661c] hover:scale-105">
|
||||
<div class="ml-4 flex-shrink-0 text-white transition-colors duration-300 group-hover:text-[#ff661c]">
|
||||
<svg viewBox="0 0 24 24" class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-white transition-colors duration-300 group-hover:text-[#ff661c] text-right">
|
||||
<span class="text-[10px] leading-none opacity-80 font-light uppercase tracking-wider">Direct Download</span>
|
||||
<span class="text-xl font-bold leading-tight -mt-0.5">تحميل مباشر APK</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Statistics Section -->
|
||||
<section id="stats" class="bg-[#4458a8] text-white py-20">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-10 text-center">
|
||||
<div class="stat-item">
|
||||
<div id="stat1" class="text-6xl font-bold mb-2">35</div>
|
||||
<div class="text-orange-300 font-medium text-xl">مطعم شريك</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div id="stat2" class="text-6xl font-bold mb-2">2800</div>
|
||||
<div class="text-orange-300 font-medium text-xl">طلب يومي</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div id="stat3" class="text-6xl font-bold mb-2">136</div>
|
||||
<div class="text-orange-300 font-medium text-xl">سائق نشط</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div id="stat4" class="text-6xl font-bold mb-2">93%</div>
|
||||
<div class="text-orange-300 font-medium text-xl">رضا السائقين</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Ticker Banner 2 (Left to Right) -->
|
||||
<div class="ticker">
|
||||
<div class="ticker bg-white py-6 border-b border-t shadow-inner bg-gradient-to-r from-orange-50 to-white">
|
||||
<div class="ticker-track ticker-track-reverse flex gap-8" style="animation-duration: 28s;">
|
||||
<img loading="lazy" src="foodimg_webp/6.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="أرز">
|
||||
<img src="logos/logos_webp/هاوس شيكن.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img src="logos/logos_webp/ذكور.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img src="logos/logos_webp/ابو كوكو.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img src="logos/logos_webp/barakat.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img src="logos/logos_webp/هاوس شيكن.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="برجر">
|
||||
<img src="logos/logos_webp/ذكور.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="بيتزا">
|
||||
<img src="logos/logos_webp/ابو كوكو.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img src="logos/logos_webp/barakat.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img src="logos/logos_webp/هاوس شيكن.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img src="logos/logos_webp/ذكور.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img src="logos/logos_webp/ابو كوكو.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="مناقيش">
|
||||
<img src="logos/logos_webp/barakat.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="برجر">
|
||||
<img src="logos/logos_webp/هاوس شيكن.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img src="logos/logos_webp/ذكور.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img src="logos/logos_webp/ابو كوكو.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img src="logos/logos_webp/barakat.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img src="logos/logos_webp/هاوس شيكن.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="برجر">
|
||||
<img src="logos/logos_webp/ذكور.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="بيتزا">
|
||||
<img src="logos/logos_webp/ابو كوكو.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="شاورما">
|
||||
<img src="logos/logos_webp/barakat.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="دجاج مقلي">
|
||||
<img src="logos/logos_webp/هاوس شيكن.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="كيك">
|
||||
<img src="logos/logos_webp/ذكور.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="فلافل">
|
||||
<img src="logos/logos_webp/ابو كوكو.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="مناقيش">
|
||||
<img src="logos/logos_webp/barakat.jpg.webp" class="h-32 object-cover rounded-3xl shadow-md" alt="برجر">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Steps Section -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 bg-zinc-50">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-5xl font-bold text-zinc-900 mb-4">أربع خطوات بسيطة للبدء</h2>
|
||||
<p class="text-xl text-zinc-500">انضم إلى فريقنا في دقائق معدودة</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-card shadow-sm">
|
||||
<h3 class="text-2xl font-bold mb-3 mt-4 text-zinc-800">اقرأ الشروط</h3>
|
||||
<p class="text-zinc-500 text-center leading-relaxed">تعرف على شروط العمل والتفاصيل الكاملة</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-card shadow-sm">
|
||||
<h3 class="text-2xl font-bold mb-3 mt-4 text-zinc-800">سجل بياناتك</h3>
|
||||
<p class="text-zinc-500 text-center leading-relaxed">أدخل معلوماتك الشخصية والبنكية</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-card shadow-sm">
|
||||
<h3 class="text-2xl font-bold mb-3 mt-4 text-zinc-800">أرسل الأوراق</h3>
|
||||
<p class="text-zinc-500 text-center leading-relaxed">أرفع الأوراق الثبوتية المطلوبة</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-card shadow-sm">
|
||||
<h3 class="text-2xl font-bold mb-3 mt-4 text-zinc-800">ابدأ العمل</h3>
|
||||
<p class="text-zinc-500 text-center leading-relaxed">استلم العدة وابدأ التوصيل فوراً</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About + Features -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-20">
|
||||
<div class="max-w-md text-right">
|
||||
<div class="text-[#ff661c] font-bold text-2xl mb-3"> انضم لعائلتنا الآن</div>
|
||||
<h2 class="text-5xl font-bold leading-none mb-6">ابدأ العمل في دقائق</h2>
|
||||
<p class="text-xl text-zinc-600">التطبيق متوفر على أندرويد وآيفون. سجل، أكمل الوثائق، وابدأ التوصيل فوراً.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="feature-card">
|
||||
<svg class="feature-icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-13h-2v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
|
||||
</svg>
|
||||
<h4>مرونة كاملة</h4>
|
||||
<p>اختر أوقات عملك بحرية تامة بما يناسبك.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<svg class="feature-icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
|
||||
</svg>
|
||||
<h4>دعم متواصل</h4>
|
||||
<p>فريقنا معك في كل خطوة وعلى مدار الساعة.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<svg class="feature-icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"/>
|
||||
</svg>
|
||||
<h4>دخل متصاعد</h4>
|
||||
<p>حقق أرباحاً ممتازة مع نظام المكافآت الجديد.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-zinc-900 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-8">
|
||||
<div class="flex items-center">
|
||||
<img src="logos_webp/logo_main.webp" alt="Brand Name" class="h-15 w-auto object-contain">
|
||||
</div>
|
||||
<div class="text-center md:text-left">
|
||||
<div class="inline-block bg-orange-100 text-[#ff661c] px-5 py-2 rounded-3xl font-semibold text-sm mb-4">تواصل معنا</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4">تابعونا على مواقع التواصل الاجتماعي</h3>
|
||||
<div class="flex justify-center gap-6">
|
||||
<!-- فيسبوك -->
|
||||
<a id="footerFacebook" href="https://www.facebook.com/profile.php?id=61585790864059&locale=ar_AR" target="_blank" rel="noopener noreferrer" class="text-white hover:text-[#ff661c] transition-colors">
|
||||
<svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-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.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- انستغرام -->
|
||||
<a id="footerInstagram" href="https://www.instagram.com/talabatuk.plus?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank" rel="noopener noreferrer" class="text-white hover:text-[#ff661c] transition-colors">
|
||||
<svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.38 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.467.398.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.467-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- واتساب -->
|
||||
<a id="footerWhatsapp" href="https://wa.me/963985377283" target="_blank" rel="noopener noreferrer" class="text-white hover:text-[#ff661c] transition-colors">
|
||||
<svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-zinc-400 border-t border-zinc-800 pt-6">
|
||||
© 2026 طلباتك بلس. جميع الحقوق محفوظة.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript خارجي -->
|
||||
<script src="index.js"></script>
|
||||
<script>
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/settings');
|
||||
const s = await res.json();
|
||||
if (s.facebookUrl) document.getElementById('footerFacebook').href = s.facebookUrl;
|
||||
if (s.instagramUrl) document.getElementById('footerInstagram').href = s.instagramUrl;
|
||||
if (s.whatsappNumber) {
|
||||
const wa = 'https://wa.me/' + s.whatsappNumber;
|
||||
document.getElementById('footerWhatsapp').href = wa;
|
||||
document.getElementById('heroWhatsapp').href = wa;
|
||||
}
|
||||
if (s.appStoreUrl) document.getElementById('appStoreLink').href = s.appStoreUrl;
|
||||
if (s.googlePlayUrl) document.getElementById('googlePlayLink').href = s.googlePlayUrl;
|
||||
if (s.apkUrl) document.getElementById('apkLink').href = s.apkUrl;
|
||||
} catch(e) {}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
index.js
Normal file
51
index.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/* ============================================
|
||||
index.js - طلباتك بلس - الصفحة الرئيسية
|
||||
============================================ */
|
||||
|
||||
// ---- تأثير العداد (Counter Animation) ----
|
||||
function animateCounter(id, target, duration = 2000, suffix = '') {
|
||||
let start = 0;
|
||||
const increment = target / (duration / 16);
|
||||
const el = document.getElementById(id);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
start += increment;
|
||||
if (start >= target) {
|
||||
clearInterval(timer);
|
||||
el.textContent = Math.floor(target) + suffix;
|
||||
} else {
|
||||
el.textContent = Math.floor(start) + suffix;
|
||||
}
|
||||
}, 16);
|
||||
}
|
||||
|
||||
// ---- مراقب التمرير للـ Fade-in والعدادات ----
|
||||
function setupScrollAnimations() {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
|
||||
if (entry.target.id === 'stats') {
|
||||
animateCounter('stat1', 35);
|
||||
animateCounter('stat2', 2800, 1800);
|
||||
animateCounter('stat3', 136);
|
||||
animateCounter('stat4', 93, 1200, '%');
|
||||
}
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
section.classList.add('fade-in');
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
observer.observe(document.getElementById('stats'));
|
||||
}
|
||||
|
||||
// ---- تهيئة كل شيء عند تحميل الصفحة ----
|
||||
window.onload = function () {
|
||||
setupScrollAnimations();
|
||||
console.log('%c✅ موقع طلباتك بلس جاهز للاستخدام!', 'color:#ff661c; font-size:13px; font-weight:bold');
|
||||
};
|
||||
123
index2.html
Normal file
123
index2.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta name="description" content="صفحة معلومات عن طلباتك بلس - تعرف على فرصة العمل كسائق توصيل، مميزات الانضمام وفيديوهات تعريفية.">
|
||||
<meta name="keywords" content="معلومات عن التوصيل, سائقين, طلباتك بلس, فرصة عمل">
|
||||
<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 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap" rel="stylesheet">
|
||||
<!-- إضافة DOMPurify للأمان -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
|
||||
<style>
|
||||
body { font-family: 'IBM Plex Sans Arabic', sans-serif; }
|
||||
.hero-transition { transition: background-image 1s ease-in-out; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-50 text-zinc-900">
|
||||
|
||||
<nav class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4 flex-row-reverse">
|
||||
<img src="logos_webp/logo_main.webp" alt="Logo" class="h-16 w-auto object-contain">
|
||||
<div class="w-12 h-12 bg-[#ff661c] rounded-2xl flex items-center justify-center overflow-hidden shadow-inner">
|
||||
<img src="talabatk.webp" alt="Icon" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 text-lg font-medium">
|
||||
<a href="#features" class="hover:text-[#ff661c] transition-colors">المميزات</a>
|
||||
<a href="#stats" class="hover:text-[#ff661c] transition-colors">إحصائياتنا</a>
|
||||
<a href="#join" class="hover:text-[#ff661c] transition-colors">انضم الآن</a>
|
||||
</div>
|
||||
<a href="join" class="bg-[#ff661c] text-white px-9 py-3 rounded-3xl font-bold text-lg shadow-lg">سجل الآن</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header Slider (سيتم التحكم به عبر info.js) -->
|
||||
<div class="relative w-full h-[300px] md:h-[500px] overflow-hidden">
|
||||
<div id="slide1" class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000 opacity-100" style="background-image: url('img1.webp');"></div>
|
||||
<div id="slide2" class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000 opacity-0" style="background-image: url('img2.webp');"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-8 mt-10 px-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold text-[#ff661c] mb-4">مرحباً بك في طلباتك بلس</h1>
|
||||
<p class="text-zinc-600 text-lg">أفضل منصة لتوصيل الطلبات بسرعة وسهولة</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-3xl shadow-lg space-y-6 border border-zinc-100">
|
||||
<h2 class="text-2xl font-bold text-zinc-800">معلومات عن العمل</h2>
|
||||
<p class="text-zinc-600 leading-relaxed">
|
||||
نحن في طلباتك بلس نقدم خدمة توصيل الطلبات بأعلى جودة وأسرع وقت.
|
||||
فريقنا مجهز بأحدث الوسائل لضمان وصول طلباتك بأمان.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-3xl shadow-lg space-y-6 border border-zinc-100">
|
||||
<h2 class="text-2xl font-bold text-zinc-800">فيديوهات تعريفية</h2>
|
||||
<div id="videosContainer" class="flex flex-col gap-6">
|
||||
<!-- سيتم تعبئة الفيديوهات عبر info.js -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pb-12">
|
||||
<a href="join" class="inline-block bg-[#ff661c] text-white px-10 py-4 rounded-2xl text-xl font-bold hover:bg-[#ff7a3a] transition-all shadow-xl">انضم الآن</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- استدعاء ملف info.js للتحكم بالسلايدر والفيديوهات -->
|
||||
<script src="info.js"></script>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-zinc-900 text-white py-12 mt-10">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-8">
|
||||
<div class="flex items-center">
|
||||
<img src="logos_webp/logo_main.webp" alt="طلباتك بلس" class="h-15 w-auto object-contain">
|
||||
</div>
|
||||
<div class="text-center md:text-left">
|
||||
<div class="inline-block bg-orange-100 text-[#ff661c] px-5 py-2 rounded-3xl font-semibold text-sm mb-4">تواصل معنا</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4">تابعونا على مواقع التواصل الاجتماعي</h3>
|
||||
<div class="flex justify-center gap-6" id="footerSocial">
|
||||
<!-- فيسبوك -->
|
||||
<a id="footerFacebook" href="#" target="_blank" rel="noopener noreferrer" class="text-white hover:text-[#ff661c] transition-colors">
|
||||
<svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-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.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- انستغرام -->
|
||||
<a id="footerInstagram" href="#" target="_blank" rel="noopener noreferrer" class="text-white hover:text-[#ff661c] transition-colors">
|
||||
<svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.38 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.467.398.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.467-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- واتساب -->
|
||||
<a id="footerWhatsapp" href="#" target="_blank" rel="noopener noreferrer" class="text-white hover:text-[#ff661c] transition-colors">
|
||||
<svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-zinc-400 border-t border-zinc-800 pt-6">
|
||||
© 2026 طلباتك بلس. جميع الحقوق محفوظة.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
try {
|
||||
const res = await fetch('/api/settings');
|
||||
const s = await res.json();
|
||||
if (s.facebookUrl) document.getElementById('footerFacebook').href = s.facebookUrl;
|
||||
if (s.instagramUrl) document.getElementById('footerInstagram').href = s.instagramUrl;
|
||||
if (s.whatsappNumber) document.getElementById('footerWhatsapp').href = 'https://wa.me/' + s.whatsappNumber;
|
||||
} catch(e) {}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
info.js
Normal file
108
info.js
Normal file
@@ -0,0 +1,108 @@
|
||||
/* ============================================
|
||||
info.js - طلباتك بلس - صفحة المعلومات (index2)
|
||||
============================================ */
|
||||
|
||||
// --- إعدادات API (تأخذ القيمة من المتغير المُعرّف في index2.html) ---
|
||||
|
||||
|
||||
// --- التحكم بالسلايدر (تبديل الصور) ---
|
||||
let currentSlide = 1;
|
||||
let slideInterval;
|
||||
|
||||
function startSlider() {
|
||||
// تبديل كل 5 ثواني
|
||||
slideInterval = setInterval(() => {
|
||||
const slide1 = document.getElementById('slide1');
|
||||
const slide2 = document.getElementById('slide2');
|
||||
if (currentSlide === 1) {
|
||||
slide1.style.opacity = '0';
|
||||
slide2.style.opacity = '1';
|
||||
currentSlide = 2;
|
||||
} else {
|
||||
slide1.style.opacity = '1';
|
||||
slide2.style.opacity = '0';
|
||||
currentSlide = 1;
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// --- تحميل وعرض الفيديوهات ---
|
||||
async function loadVideos() {
|
||||
try {
|
||||
const res = await fetch('/api/settings');
|
||||
if (!res.ok) throw new Error('فشل تحميل الإعدادات');
|
||||
const data = await res.json();
|
||||
const videos = data.videos || [];
|
||||
renderVideos(videos);
|
||||
} catch (err) {
|
||||
console.error('خطأ في تحميل الفيديوهات:', err);
|
||||
document.getElementById('videosContainer').innerHTML = '<p class="text-red-500">تعذر تحميل الفيديوهات</p>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderVideos(videoUrls) {
|
||||
const container = document.getElementById('videosContainer');
|
||||
container.innerHTML = ''; // تفريغ أي محتوى سابق
|
||||
|
||||
if (!videoUrls || videoUrls.length === 0) {
|
||||
container.innerHTML = '<p class="text-zinc-500">لا توجد فيديوهات متاحة حالياً</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
videoUrls.forEach(url => {
|
||||
const videoId = extractYouTubeVideoId(url);
|
||||
if (!videoId) return; // تجاهل الروابط غير الصالحة
|
||||
|
||||
// إنشاء بطاقة الفيديو باستخدام Tailwind
|
||||
const card = document.createElement('div');
|
||||
card.className = 'bg-zinc-50 p-4 rounded-2xl shadow-md border border-zinc-200';
|
||||
|
||||
// يمكن عرض الفيديو كصورة مصغرة مع رابط للتشغيل، أو تضمين iframe للمعاينة المباشرة.
|
||||
// هنا سنستخدم iframe لتشغيل الفيديو مباشرة (يمكن تغييرها إلى صورة مصغرة حسب الرغبة).
|
||||
card.innerHTML = `
|
||||
<div class="relative pb-9/16" style="padding-bottom: 56.25%;">
|
||||
<iframe class="absolute top-0 left-0 w-full h-full rounded-xl"
|
||||
src="https://www.youtube.com/embed/${videoId}"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
<a href="${url}" target="_blank" class="mt-3 inline-block text-[#ff661c] hover:underline">
|
||||
مشاهدة على يوتيوب
|
||||
</a>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// استخراج معرف الفيديو من رابط يوتيوب (يدعم عدة صيغ)
|
||||
function extractYouTubeVideoId(url) {
|
||||
const patterns = [
|
||||
/youtube\.com\/watch\?v=([^&]+)/,
|
||||
/youtu\.be\/([^?]+)/,
|
||||
/youtube\.com\/embed\/([^?]+)/,
|
||||
/youtube\.com\/v\/([^?]+)/,
|
||||
/youtube\.com\/shorts\/([^?]+)/
|
||||
];
|
||||
for (let pattern of patterns) {
|
||||
const match = url.match(pattern);
|
||||
if (match && match[1]) return match[1];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// --- تهيئة الصفحة ---
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
startSlider();
|
||||
loadVideos();
|
||||
});
|
||||
|
||||
// اختياري: إيقاف السلايدر عندما لا تكون الصفحة مرئية لتوفير الموارد
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) {
|
||||
clearInterval(slideInterval);
|
||||
} else {
|
||||
startSlider();
|
||||
}
|
||||
});
|
||||
28
join.css
Normal file
28
join.css
Normal file
@@ -0,0 +1,28 @@
|
||||
/* ============================================
|
||||
join.css - طلباتك بلس - صفحة تسجيل السائق
|
||||
============================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--primary: #ff661c;
|
||||
--secondary: #4458a8;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Sans Arabic', sans-serif;
|
||||
background-color: #f4f4f5;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: white;
|
||||
border-radius: 2rem;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
border-color: var(--primary) !important;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 102, 28, 0.1);
|
||||
}
|
||||
204
join.html
Normal file
204
join.html
Normal file
@@ -0,0 +1,204 @@
|
||||
<!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>
|
||||
80
join.js
Normal file
80
join.js
Normal file
@@ -0,0 +1,80 @@
|
||||
/* ============================================
|
||||
join.js - طلباتك بلس - صفحة تسجيل السائق
|
||||
============================================ */
|
||||
|
||||
// --- إعدادات الـ Backend (تعمل محلياً وعلى الاستضافة) ---
|
||||
const _host = window.location.hostname;
|
||||
const _isLocal = _host === 'localhost' || _host === '127.0.0.1' || _host.startsWith('192.168.');
|
||||
const API_URL = _isLocal ? `http://${_host}:3000/api/join` : '/api/join';
|
||||
|
||||
const form = document.getElementById('driverForm');
|
||||
const btn = document.getElementById('submitBtn');
|
||||
const photoInput = document.getElementById('photoInput');
|
||||
|
||||
// --- عرض معاينة الصورة عند اختيارها ---
|
||||
photoInput.addEventListener('change', () => {
|
||||
const preview = document.getElementById('fileNamePreview');
|
||||
const previewContainer = document.getElementById('imagePreviewContainer');
|
||||
const imagePreview = document.getElementById('imagePreview');
|
||||
|
||||
const file = photoInput.files[0];
|
||||
if (file) {
|
||||
preview.innerText = file.name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
imagePreview.src = e.target.result;
|
||||
previewContainer.classList.remove('hidden');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
preview.innerText = '';
|
||||
previewContainer.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// --- إرسال النموذج عبر Telegram Bot ---
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
btn.disabled = true;
|
||||
btn.innerText = 'جاري إرسال طلبك...';
|
||||
|
||||
const formData = new FormData(form);
|
||||
const photoFile = photoInput.files[0];
|
||||
|
||||
const message =
|
||||
`🚀 *طلب انضمام جديد (طلباتك بلس)* \n\n` +
|
||||
`👤 *الاسم:* ${formData.get('name')}\n` +
|
||||
`📱 *الجوال:* ${formData.get('phone')}\n` +
|
||||
`🆔 *الرقم الوطني:* ${formData.get('nationalId')}\n` +
|
||||
`📍 *العنوان:* ${formData.get('address')}\n` +
|
||||
`🛵 *نوع المركبة:* ${formData.get('vehicleType')}\n` +
|
||||
`🔢 *هل منمرة:* ${formData.get('isNumbered')}\n` +
|
||||
`📄 *رقم اللوحة:* ${formData.get('plateNumber') || 'لا يوجد'}\n` +
|
||||
`💡 *عمل سابقاً في التوصيل:* ${formData.get('previousExperience')}\n` +
|
||||
`🗺️ *خبرة بمناطق حلب:* ${formData.get('aleppKnowledge')}\n\n` +
|
||||
`✅ *موافق على الشروط والتأمين*`;
|
||||
|
||||
try {
|
||||
const backendFormData = new FormData();
|
||||
backendFormData.append('photo', photoFile);
|
||||
backendFormData.append('message', message);
|
||||
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
body: backendFormData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.ok) {
|
||||
window.location.href = 'success.html';
|
||||
} else {
|
||||
alert('حدث خطأ في الإرسال: ' + (result.description || 'فشل إرسال الطلب.'));
|
||||
}
|
||||
} catch (error) {
|
||||
alert('فشل الاتصال بالخادم.');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.innerText = 'إرسال طلب الانضمام';
|
||||
}
|
||||
});
|
||||
ثنائية
logos/logos_webp/barakat.jpg.webp
Normal file
ثنائية
logos/logos_webp/barakat.jpg.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 406 KiB |
ثنائية
logos/logos_webp/logo_main.webp
Normal file
ثنائية
logos/logos_webp/logo_main.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 12 KiB |
ثنائية
logos/logos_webp/ابو كوكو.webp
Normal file
ثنائية
logos/logos_webp/ابو كوكو.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 169 KiB |
ثنائية
logos/logos_webp/ذكور.webp
Normal file
ثنائية
logos/logos_webp/ذكور.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 38 KiB |
ثنائية
logos/logos_webp/هاوس شيكن.webp
Normal file
ثنائية
logos/logos_webp/هاوس شيكن.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 43 KiB |
ثنائية
logos_webp/logo_main.webp
Normal file
ثنائية
logos_webp/logo_main.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 12 KiB |
5
robots.txt
Normal file
5
robots.txt
Normal file
@@ -0,0 +1,5 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Disallow: /admin
|
||||
|
||||
Sitemap: https://drivers.talabatukplus.com/sitemap.xml
|
||||
18
sitemap.xml
Normal file
18
sitemap.xml
Normal file
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://drivers.talabatukplus.com/</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://drivers.talabatukplus.com/info</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://drivers.talabatukplus.com/join</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
25
success.html
Normal file
25
success.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
<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">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'IBM Plex Sans Arabic', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-50 flex items-center justify-center min-h-screen p-4">
|
||||
<div class="max-w-md w-full bg-white p-8 md:p-12 rounded-3xl shadow-lg text-center">
|
||||
<svg class="w-24 h-24 mx-auto text-green-500" 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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<h1 class="text-3xl font-bold text-zinc-900 mt-6 mb-2">تم إرسال طلبك بنجاح!</h1>
|
||||
<p class="text-zinc-600 text-lg mb-8">شكراً لانضمامك إلينا. سيقوم فريقنا بمراجعة طلبك والتواصل معك في أقرب وقت ممكن.</p>
|
||||
<a href="index.html" class="bg-[#ff661c] text-white px-8 py-3 rounded-2xl font-bold text-lg shadow-md hover:bg-[#ff7a3a] transition-all">
|
||||
العودة إلى الصفحة الرئيسية
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
ثنائية
talabatk.webp
Normal file
ثنائية
talabatk.webp
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 13 KiB |
المرجع في مشكلة جديدة
حظر مستخدم