123 أسطر
9.4 KiB
HTML
123 أسطر
9.4 KiB
HTML
<!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> |