هذه برمجة الواجهة. خدمة الطلبات ولوحة الإدارة تعملان عبر خادم محمي، ولا تتضمن هذه الصفحة أسرار الإدارة.
تشغيل الصفحةتنزيل الكود<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منصة بدية السياحية - حجز رحلات وتجارب صحراوية</title>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #d97706;
--primary-dark: #b45309;
--accent: #10b981;
--sand: #fef3c7;
--dark: #1e1b4b;
--text-main: #334155;
--bg-light: #fffbeb;
--white: #ffffff;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Tajawal', sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--bg-light);
color: var(--text-main);
line-height: 1.7;
}
/* شريط التنقل */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.08);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo {
font-size: 1.6rem;
font-weight: 900;
color: var(--primary-dark);
display: flex;
align-items: center;
gap: 10px;
}
.logo i { color: var(--primary); }
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 600;
transition: var(--transition);
}
.nav-links a:hover { color: var(--primary); }
.cta-btn {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
padding: 0.6rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);
transition: var(--transition);
display: inline-block;
border: none;
cursor: pointer;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
}
/* واجهة البداية */
.hero {
height: 90vh;
background: linear-gradient(rgba(30, 27, 75, 0.5), rgba(180, 83, 9, 0.6)), url('assets/camp-aerial.jpg') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
padding: 0 1rem;
}
.hero h1 {
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
/* الأقسام العامة */
section {
padding: 5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title span {
color: var(--primary);
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
display: block;
}
.section-title h2 {
font-size: 2.3rem;
color: var(--dark);
font-weight: 900;
}
/* شبكة الكروت والأسعار */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition);
border: 1px solid rgba(217, 119, 6, 0.1);
position: relative;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(217, 119, 6, 0.15);
}
.card-img {
height: 200px;
width: 100%;
object-fit: cover;
}
.card-body {
padding: 1.5rem;
}
.price-tag {
position: absolute;
top: 15px;
left: 15px;
background: var(--primary-dark);
color: var(--white);
padding: 0.4rem 1rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.9rem;
}
/* قسم نموذج الحجز */
.booking-section {
background: var(--white);
border-radius: 25px;
padding: 3rem;
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
border: 2px solid var(--sand);
}
.booking-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 700;
color: var(--dark);
}
.form-group input, .form-group select {
padding: 0.8rem 1rem;
border: 1px solid #cbd5e1;
border-radius: 12px;
font-size: 1rem;
outline: none;
}
.form-group input:focus, .form-group select:focus {
border-color: var(--primary);
}
/* زر واتساب عائم */
.whatsapp-float {
position: fixed;
bottom: 25px;
right: 25px;
background-color: #25d366;
color: white;
width: 60px;
height: 60px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
z-index: 1000;
text-decoration: none;
transition: var(--transition);
}
.whatsapp-float:hover {
transform: scale(1.1);
}
/* تذييل الصفحة */
footer {
background: var(--dark);
color: var(--white);
text-align: center;
padding: 2.5rem;
margin-top: 4rem;
}
@media (max-width: 768px) {
.hero h1 { font-size: 2.2rem; }
.nav-links { display: none; }
}
#tour-chat-toggle{position:fixed;bottom:25px;left:20px;z-index:1001;border:0;border-radius:30px;background:#b45309;color:white;padding:16px;font-weight:700;cursor:pointer}#tour-chat{position:fixed;left:15px;bottom:85px;width:340px;max-width:calc(100vw - 30px);background:white;border:1px solid #ead9bb;box-shadow:0 20px 40px #34231230;border-radius:16px;padding:20px;z-index:1001}#tour-chat>div:first-child{display:flex;justify-content:space-between}#tour-chat-close{border:0;background:transparent;font-size:24px}#tour-chat p{font-size:14px;margin:10px 0;line-height:1.8}#tour-chat-log{max-height:210px;overflow:auto}#tour-chat-log p{background:#fff4dc;padding:10px;border-radius:10px}#tour-chat-log p.tour-user{background:#e9f1e3}#tour-chat-form input{width:100%;padding:10px;border:1px solid #ddd;border-radius:9px}#tour-chat-form button{border:0;background:#b45309;color:white;padding:9px 15px;border-radius:8px;margin-top:8px}.cta-btn.pressed{transform:scale(.96)}.card-img{transition:transform .5s}.card:hover .card-img{transform:scale(1.04)}.hero{min-height:550px}.hero h1{animation:tourRise .8s both}.hero p{animation:tourRise 1s both}.booking-section>p{font-size:14px;color:#8b713f}footer{padding-bottom:90px}@keyframes tourRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style>
</head>
<body>
<!-- شريط التنقل -->
<header>
<div class="nav-container">
<div class="logo">
<i class="fa-solid fa-tent"></i> منصة بدية
</div>
<ul class="nav-links"><li><a href="/admin" target="_top">إدارة الموقع</a></li>
<li><a href="#home">الرئيسية</a></li>
<li><a href="#services">الخدمات والأسعار</a></li>
<li><a href="#booking">حجز رحلة</a></li>
<li><a href="#tourism-photos">صور المخيم</a></li>
</ul>
<a href="#booking" class="cta-btn">جهّز طلبك</a>
</div>
</header>
<!-- الواجهة الرئيسية -->
<section id="home" class="hero" style="max-width: none;">
<div>
<h1>استمتع بأقوى مغامرات شتاء بدية</h1>
<p>احجز رحلتك الصحراوية، تأجير الدراجات والمخيمات بأسعار تنافسية مباشرة عبر المنصة.</p>
<a href="#services" class="cta-btn" style="padding: 1rem 2.5rem; font-size: 1.1rem;">استعرض العروض والتجارة</a>
</div>
</section>
<!-- خدمات وسوق بدية -->
<section id="services">
<div class="section-title">
<span>تجارب وباقات من المحتوى المرفق</span>
<h2>باقات وتأجير الخدمات السياحية</h2>
</div>
<div class="grid">
<div class="card">
<span class="price-tag">25 ر.ع / ساعة</span>
<img src="assets/camp-quads.jpg" alt="تأجير دراجات" class="card-img">
<div class="card-body">
<h3>جولة دراجات رملية (Buggy)</h3>
<p>مغامرة قيادة الدراجات الجبلية والصحراوية على الكثبان الرملية العالية مع معدات السلامة.</p>
<a href="#booking" class="cta-btn" style="width: 100%; text-align: center;">احجز الدراجة</a>
</div>
</div>
<div class="card">
<span class="price-tag">45 ر.ع / ليلة</span>
<img src="assets/camp-room.jpg" alt="تخييم فندقي" class="card-img">
<div class="card-body">
<h3>حجز مخيم صحراوي VIP</h3>
<p>إقامة كاملة تتضمن خيمة مفروشة ومكيفة مع جلسة سمر وعشاء بدوي تقليدي تحت النجوم.</p>
<a href="#booking" class="cta-btn" style="width: 100%; text-align: center;">احجز الخيمة</a>
</div>
</div>
<div class="card">
<span class="price-tag">30 ر.ع / جولة</span>
<img src="assets/camp-aerial.jpg" alt="سفاري سيارات" class="card-img">
<div class="card-body">
<h3>رحلة سفاري وتطعيس (4x4)</h3>
<p>جولة سفاري مثيرة بسيارات الدفع الرباعي مع سائق محترف لاستكشاف عمق الصحراء وشاهد الغروب.</p>
<a href="#booking" class="cta-btn" style="width: 100%; text-align: center;">احجز الجولة</a>
</div>
</div>
</div>
</section>
<section id="tourism-photos"><div class="section-title"><span>المصدر: Sand Camp Oman</span><h2>صور الإقامة والمخيم في بدية</h2></div><div class="grid"><img class="card-img" src="assets/camp-aerial.jpg" alt="إطلالة جوية للمخيم" loading="lazy"><img class="card-img" src="assets/camp-room.jpg" alt="غرفة بالمخيم" loading="lazy"><img class="card-img" src="assets/camp-majlis.jpg" alt="جلسة عربية" loading="lazy"></div><p>صور من <a href="https://sandcampoman.com/" target="_blank" rel="noopener noreferrer">الموقع الرسمي لـSand Camp Oman</a>. لا توجد شراكة أو باقات مؤكدة مرتبطة به.</p></section><!-- نظام الحجز المباشر -->
<section id="booking">
<div class="booking-section">
<div class="section-title" style="margin-bottom: 1.5rem;">
<span>تجهيز الطلب قبل تأكيده</span>
<h2>نموذج حجز خدمة سياحية</h2>
</div>
<p>أرسل الطلب إلى إدارة Serv للمراجعة عبر النموذج. لا تتم معالجة دفعة أو تأكيد حجز تلقائيًا.</p><form class="booking-form" id="tourism-form">
<div class="form-group">
<label>الاسم الكامل</label>
<input type="text" placeholder="أدخل اسمك" required>
</div>
<div class="form-group">
<label>رقم الهاتف (الواتساب)</label>
<input type="tel" placeholder="968xxxx+" required>
</div>
<div class="form-group">
<label>اختر الخدمة</label>
<select required>
<option value="">-- اختر من القائمة --</option>
<option>جولة دراجات رملية</option>
<option>حجز مخيم صحراوي</option>
<option>رحلة سفاري وتطعيس</option>
</select>
</div>
<div class="form-group">
<label>تاريخ الزيارة</label>
<input type="date" required>
</div>
<div class="form-group"><label>التحويل برقم الهاتف · بنك مسقط</label><p dir="ltr">+968 9579 8399</p><p>الرقم مقدم من صاحب المتجر. لم يُتحقق من ارتباطه بالحساب أو اسم المستفيد. تحقق قبل التحويل.</p></div><div class="form-group" style="grid-column: 1 / -1;">
<button type="submit" class="cta-btn" style="padding: 1rem; font-size: 1.1rem; width: 100%;">تنزيل طلب الرحلة</button>
</div>
</form>
</div>
</section>
<!-- زر الواتساب -->
<a href="https://wa.me/?text=استفسار%20عن%20رحلة%20في%20بدية" class="whatsapp-float" target="_blank" title="مشاركة استفسار عبر واتساب" rel="noopener noreferrer">
<i class="fa-brands fa-whatsapp"></i>
</a>
<!-- تذييل الصفحة -->
<footer>
<p>جميع الحقوق محفوظة © 2026 - منصة بدية السياحية والتجارية</p>
</footer>
<button id="tour-chat-toggle" type="button">✦ مساعد بدية</button><aside id="tour-chat" hidden><div><b>مساعد بدية الإرشادي</b><button id="tour-chat-close" aria-label="إغلاق">×</button></div><p>أساعدك في معرفة أسعار الباقات وتجهيز طلبك. لا أؤكد التوفر.</p><div id="tour-chat-log" role="log" aria-live="polite"></div><form id="tour-chat-form"><label for="tour-chat-input">سؤالك</label><input id="tour-chat-input" required placeholder="اسأل عن المخيم أو السعر…"><button type="submit">إرسال</button></form></aside><script>
const tf=document.querySelector('#tourism-form');const td=tf.querySelector('input[type=date]');td.min=new Date().toLocaleDateString('en-CA');tf.addEventListener('submit',e=>{e.preventDefault();const vals=[...tf.querySelectorAll('input,select')].map(x=>x.value);const text=['طلب سياحة في بدية','الاسم: '+vals[0],'الهاتف: '+vals[1],'الخدمة: '+vals[2],'التاريخ: '+vals[3],'التحويل المقترح: بنك مسقط / +968 9579 8399 — غير متحقق','طلب محلي فقط. لم يتم تأكيد حجز أو دفع.'].join('\n');const url=URL.createObjectURL(new Blob([text],{type:'text/plain;charset=utf-8'}));const a=document.createElement('a');a.href=url;a.download='bidiya-request.txt';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)});
const panel=document.querySelector('#tour-chat');document.querySelector('#tour-chat-toggle').onclick=()=>{panel.hidden=!panel.hidden};document.querySelector('#tour-chat-close').onclick=()=>{panel.hidden=true};document.querySelector('#tour-chat-form').onsubmit=e=>{e.preventDefault();const input=document.querySelector('#tour-chat-input'),q=input.value.trim();if(!q)return;input.value='';const user=document.createElement('p');user.textContent=q;user.className='tour-user';document.querySelector('#tour-chat-log').appendChild(user);let reply=/مخيم|خيم/.test(q)?'المخيم: ٤٥ ر.ع لليلة حسب الباقة المرفقة. السعة والتوفر والمرافق تحتاج تأكيد مقدم الخدمة.':/دراج/.test(q)?'الدراجات الرملية: ٢٥ ر.ع للساعة حسب المحتوى المرفق. راجع شروط العمر والسلامة مع مقدم الخدمة.':/سفاري|تطعيس/.test(q)?'السفاري: ٣٠ ر.ع للجولة حسب المحتوى المرفق. لا تتوفر حجوزات مباشرة.':/دفع|تحويل/.test(q)?'رقم التحويل المقدم +968 9579 8399، والبنك المذكور بنك مسقط. لم يتم التحقق من ربط الرقم بالحساب. الموقع لا يعالج الدفع.':'اختر الدراجة أو المخيم أو السفاري، ثم املأ نموذج الطلب لتنزيله. لا يُرسل الطلب ولا يؤكد حجزًا. أسعار الباقات: ٢٥ ر.ع للساعة للدراجات، ٤٥ ر.ع لليلة للمخيم، ٣٠ ر.ع للجولة للسفاري.';const bot=document.createElement('p');bot.textContent=reply;document.querySelector('#tour-chat-log').appendChild(bot);bot.scrollIntoView({block:'nearest'})};document.querySelectorAll('.cta-btn').forEach(b=>b.addEventListener('click',()=>{b.classList.add('pressed');setTimeout(()=>b.classList.remove('pressed'),250)}));
</script><script src="/orders-client.js?v=cloudflare-1"></script></body>
</html>