update: refine landing page with a more premium visual style
هذا الالتزام موجود في:
Abdul Kareem
514
index.html
514
index.html
@@ -1,112 +1,412 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tabeley</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="/assets/images/tlogoapp.png" type="image/png">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-brand">
|
||||
<img src="assets/images/tlogoapp.png" alt="Tabeley App Logo" class="brand-logo">
|
||||
<span class="brand-name">Tabeley</span>
|
||||
</div>
|
||||
|
||||
<h1>احجز طاولتك بكل سهولة واحترافية</h1>
|
||||
<p>
|
||||
منصة Tabeley هي الحل الذكي لحجز الطاولات في المطاعم والمقاهي.
|
||||
اختر المكان المناسب، حدّد الوقت الذي يناسبك، وأكّد حجزك خلال ثوانٍ
|
||||
دون الحاجة إلى الاتصال أو الانتظار.
|
||||
</p>
|
||||
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn android">تحميل تطبيق الأندرويد</a>
|
||||
<button class="btn ios" disabled>تطبيق iPhone قريباً</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="features">
|
||||
<h2>لماذا تختار Tabeley؟</h2>
|
||||
<div class="features-grid">
|
||||
<div class="card">
|
||||
<h3>حجز سريع وفوري</h3>
|
||||
<p>
|
||||
قم بتأكيد حجزك خلال لحظات معدودة عبر واجهة بسيطة وسلسة،
|
||||
دون أي إجراءات معقّدة أو تأخير.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>تنوع واسع في المطاعم</h3>
|
||||
<p>
|
||||
استكشف مجموعة مميزة من أفضل المطاعم والمقاهي،
|
||||
واختر التجربة التي تناسب ذوقك ووقتك.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>إدارة متكاملة للحجوزات</h3>
|
||||
<p>
|
||||
تابع جميع حجوزاتك وعدّلها أو ألغها بسهولة من خلال حسابك،
|
||||
مع تنظيم كامل لمواعيدك وخططك.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works -->
|
||||
<section class="how">
|
||||
<h2>كيف يعمل التطبيق؟</h2>
|
||||
<div class="steps">
|
||||
<div>١. اختر المطعم المناسب لك</div>
|
||||
<div>٢. حدّد التاريخ والوقت وعدد الأشخاص</div>
|
||||
<div>٣. أكّد الحجز واستمتع بتجربتك</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact -->
|
||||
<section class="contact">
|
||||
<h2>تواصل معنا</h2>
|
||||
<div class="contact-links">
|
||||
<a href="tel:+963983233965" class="contact-link" aria-label="اتصال هاتفي">
|
||||
<span class="contact-icon" aria-hidden="true">☎</span>
|
||||
<span class="contact-copy">
|
||||
<strong>رقم الهاتف</strong>
|
||||
<span dir="ltr">+963983233965</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="mailto:Tabeley0@gmail.com" class="contact-link" aria-label="إرسال بريد إلكتروني">
|
||||
<span class="contact-icon" aria-hidden="true">✉</span>
|
||||
<span class="contact-copy">
|
||||
<strong>البريد الإلكتروني</strong>
|
||||
<span dir="ltr">Tabeley0@gmail.com</span>
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tabeley | احجز طاولتك خلال ثوانٍ</title>
|
||||
<meta name="description" content="Tabeley تطبيق عربي حديث لحجز طاولات المطاعم والمقاهي بسرعة، دون انتظار، مع تأكيد فوري وتجربة حجز منظمة وسهلة.">
|
||||
<meta property="og:title" content="Tabeley | احجز طاولتك خلال ثوانٍ">
|
||||
<meta property="og:description" content="منصة ذكية لحجز المطاعم والمقاهي بتجربة عربية حديثة، تأكيد فوري، وخطوات واضحة من اختيار المطعم حتى تأكيد الحجز.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/images/tlogoapp.png">
|
||||
<meta property="og:locale" content="ar_AR">
|
||||
<link rel="icon" href="/assets/images/tlogoapp.png" type="image/png">
|
||||
<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=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container header-shell">
|
||||
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-menu" aria-label="فتح القائمة">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<a href="#top" class="brand" aria-label="Tabeley">
|
||||
<img src="assets/images/tlogoapp.png" alt="شعار تطبيق Tabeley" class="brand-logo">
|
||||
<span class="brand-copy">
|
||||
<strong class="brand-name">Tabeley</strong>
|
||||
<small>Dining Reservation Platform</small>
|
||||
</span>
|
||||
</a>
|
||||
<nav class="nav" id="site-menu">
|
||||
<a href="#features">المزايا</a>
|
||||
<a href="#screenshots">لقطات التطبيق</a>
|
||||
<a href="#how-it-works">كيف يعمل</a>
|
||||
<a href="#faq">الأسئلة الشائعة</a>
|
||||
<a href="#contact">تواصل معنا</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
<a href="https://www.instagram.com/tabeley_reservations?igsh=MTQ4ZzNxMzR0anExNA==" target="_blank" rel="noopener">
|
||||
حسابنا على إنستغرام
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<form id="contactForm">
|
||||
<input type="text" placeholder="الاسم الكامل" required>
|
||||
<input type="email" placeholder="البريد الإلكتروني" required>
|
||||
<textarea placeholder="اكتب رسالتك هنا" required></textarea>
|
||||
<button type="submit">إرسال الرسالة</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
جميع الحقوق محفوظة © 2026 Tabeley
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
<main id="top">
|
||||
<section class="hero section">
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-copy reveal">
|
||||
<span class="eyebrow">منصة حجز ذكية للمطاعم والمقاهي</span>
|
||||
<h1>اختصر وقتك واحجز طاولتك خلال ثوانٍ</h1>
|
||||
<p class="hero-text">
|
||||
يوفّر Tabeley نظام حجز ذكي وسريع يمنحك تجربة منظمة وواضحة من أول اختيار المطعم حتى التأكيد الفوري،
|
||||
دون انتظار أو اتصالات متكررة، لتستمتع بتجربة تناول أكثر راحة واحترافية.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#download" class="btn btn-primary">حمّل التطبيق الآن</a>
|
||||
<button class="btn btn-secondary" disabled>قريباً على iPhone</button>
|
||||
</div>
|
||||
<ul class="hero-points" aria-label="مميزات سريعة">
|
||||
<li>تأكيد فوري للحجز</li>
|
||||
<li>واجهة عربية واضحة</li>
|
||||
<li>تنظيم أسهل لتجربة الطعام</li>
|
||||
</ul>
|
||||
<div class="hero-stats" aria-label="مؤشرات المنصة">
|
||||
<div class="stat-card">
|
||||
<strong>+25</strong>
|
||||
<span>مطعمًا ومقهى في التوسع</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<strong>ثوانٍ</strong>
|
||||
<span>لإتمام الحجز بخطوات واضحة</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<strong>24/7</strong>
|
||||
<span>إمكانية طلب الحجز في أي وقت</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual reveal reveal-delay-1" aria-hidden="true">
|
||||
<div class="hero-orb hero-orb-one"></div>
|
||||
<div class="hero-orb hero-orb-two"></div>
|
||||
<div class="phone-stack">
|
||||
<article class="phone-card is-main">
|
||||
<div class="phone-notch"></div>
|
||||
<div class="screen-content app-home-screen">
|
||||
<div class="app-screen-bar">
|
||||
<strong>Nearby</strong>
|
||||
<span class="mini-pill">Tabeley</span>
|
||||
</div>
|
||||
<div class="search-shell">ابحث عن مطعم أو مقهى</div>
|
||||
<div class="offer-banner">
|
||||
<span>خصم اليوم</span>
|
||||
<strong>حتى 20% على الحجوزات المبكرة</strong>
|
||||
</div>
|
||||
<div class="venue-card-ui">
|
||||
<div class="venue-card-overlay">
|
||||
<div class="venue-card-top">
|
||||
<span class="venue-icon-ui">🍽</span>
|
||||
<span class="type-badge-ui">Restaurant</span>
|
||||
</div>
|
||||
<div class="venue-card-bottom">
|
||||
<strong>مطعم </strong>
|
||||
<span>وسط المدينة</span>
|
||||
<div class="price-chip-ui">$12.00 / person</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="floating-card floating-card-top">مختار بعناية</div>
|
||||
<div class="floating-card floating-card-bottom">تنبيه قبل الموعد بساعة</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="screens section section-soft" id="screenshots">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<span class="eyebrow">لقطات من التطبيق</span>
|
||||
<h2>ثلاث شاشات توضح رحلة الحجز</h2>
|
||||
<p>تصميم مبسّط يساعد المستخدم على الانتقال من اختيار المطعم حتى تأكيد الحجز بثقة ووضوح.</p>
|
||||
</div>
|
||||
<div class="screens-grid">
|
||||
<article class="mockup reveal">
|
||||
<div class="mockup-frame">
|
||||
<div class="mockup-notch"></div>
|
||||
<div class="mockup-screen app-screen app-screen-home">
|
||||
<div class="app-screen-bar">
|
||||
<strong>Nearby</strong>
|
||||
<span class="mini-pill">3 مطاعم</span>
|
||||
</div>
|
||||
<div class="search-shell">Search restaurants</div>
|
||||
<div class="offer-banner small">
|
||||
<span>Offers</span>
|
||||
<strong>خصم 15% بين 5 و7 مساءً</strong>
|
||||
</div>
|
||||
<div class="venue-card-ui compact">
|
||||
<div class="venue-card-overlay">
|
||||
<div class="venue-card-top">
|
||||
<span class="venue-icon-ui">🍽</span>
|
||||
<span class="type-badge-ui">Cafe</span>
|
||||
</div>
|
||||
<div class="venue-card-bottom">
|
||||
<strong> مطعم 2 </strong>
|
||||
<span>قهوة ومشاوي</span>
|
||||
<div class="price-chip-ui">$9.00 / person</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mockup reveal reveal-delay-1">
|
||||
<div class="mockup-frame">
|
||||
<div class="mockup-notch"></div>
|
||||
<div class="mockup-screen app-screen app-screen-book">
|
||||
<div class="app-screen-bar">
|
||||
<strong>Book Table</strong>
|
||||
<span class="mini-pill">Venue #12</span>
|
||||
</div>
|
||||
<div class="field-card-ui">
|
||||
<span>التاريخ</span>
|
||||
<strong>24 / 03 / 2026</strong>
|
||||
</div>
|
||||
<div class="time-slots-ui">
|
||||
<span class="slot-ui">6:00 PM</span>
|
||||
<span class="slot-ui active">8:30 PM</span>
|
||||
<span class="slot-ui">9:30 PM</span>
|
||||
</div>
|
||||
<div class="field-card-ui">
|
||||
<span>Guests</span>
|
||||
<strong>4 أشخاص</strong>
|
||||
</div>
|
||||
<div class="summary-card-ui">
|
||||
<strong>Reservation Summary</strong>
|
||||
<div><span>Date</span><span>24/03/2026</span></div>
|
||||
<div><span>Time</span><span>8:30 PM</span></div>
|
||||
<div><span>Guests</span><span>4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mockup reveal reveal-delay-2">
|
||||
<div class="mockup-frame">
|
||||
<div class="mockup-notch"></div>
|
||||
<div class="mockup-screen app-screen app-screen-bookings">
|
||||
<div class="app-screen-bar">
|
||||
<strong>My Bookings</strong>
|
||||
<span class="mini-pill">2 حجوزات</span>
|
||||
</div>
|
||||
<div class="booking-card-ui">
|
||||
<strong>مطعم </strong>
|
||||
<span>24/03/2026 • 8:30 PM</span>
|
||||
<span>Guests: 4</span>
|
||||
<span class="status-pill approved">APPROVED</span>
|
||||
<div class="timeline-ui">
|
||||
<span class="dot done"></span>
|
||||
<span class="line done"></span>
|
||||
<span class="dot done"></span>
|
||||
<span class="line"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="booking-card-ui secondary">
|
||||
<strong>قهوة المدينة</strong>
|
||||
<span>27/03/2026 • 6:00 PM</span>
|
||||
<span>Guests: 2</span>
|
||||
<span class="status-pill pending">PENDING</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features section" id="features">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<span class="eyebrow">مزايا التطبيق</span>
|
||||
<h2>كل ما تحتاجه لحجز أسرع وأكثر تنظيمًا</h2>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<article class="feature-card reveal">
|
||||
<span class="feature-icon">☎</span>
|
||||
<h3>حجز فوري بدون اتصال</h3>
|
||||
<p>أكّد حجزك مباشرة من التطبيق دون الحاجة إلى المكالمات أو الانتظار.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal reveal-delay-1">
|
||||
<span class="feature-icon">%</span>
|
||||
<h3>عروض وخصومات حسب الأوقات</h3>
|
||||
<p>اكتشف مزايا إضافية مرتبطة بأوقات محددة وتجارب حجز أكثر قيمة.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal reveal-delay-2">
|
||||
<span class="feature-icon">⌂</span>
|
||||
<h3>تنوع كبير في المطاعم والمقاهي</h3>
|
||||
<p>خيارات متعددة لتناسب الأذواق المختلفة والمناسبات اليومية والخاصة.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal">
|
||||
<span class="feature-icon">▣</span>
|
||||
<h3>إدارة حجوزاتك بسهولة</h3>
|
||||
<p>راجع مواعيدك، وعدّل تفاصيل الحجز أو ألغِه من مكان واحد منظم.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal reveal-delay-1">
|
||||
<span class="feature-icon">⏰</span>
|
||||
<h3>تنبيهات وتذكير قبل الموعد</h3>
|
||||
<p>ابقَ على اطلاع بموعدك القادم عبر تذكيرات مريحة قبل وقت الحجز.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="how section section-soft" id="how-it-works">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<span class="eyebrow">كيف يعمل</span>
|
||||
<h2>خطوات بسيطة من البحث حتى الجلوس على الطاولة</h2>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<article class="timeline-step reveal">
|
||||
<span class="timeline-icon">1</span>
|
||||
<h3>اختر المطعم</h3>
|
||||
<p>تصفّح الخيارات المتاحة واختر المكان الذي يناسب ذوقك وموقعك.</p>
|
||||
</article>
|
||||
<article class="timeline-step reveal reveal-delay-1">
|
||||
<span class="timeline-icon">2</span>
|
||||
<h3>حدّد الموعد</h3>
|
||||
<p>اختر التاريخ والوقت وعدد الأشخاص ضمن واجهة واضحة وسريعة.</p>
|
||||
</article>
|
||||
<article class="timeline-step reveal reveal-delay-2">
|
||||
<span class="timeline-icon">3</span>
|
||||
<h3>أكّد الحجز</h3>
|
||||
<p>راجع تفاصيلك واحصل على تأكيد فوري دون تعقيد.</p>
|
||||
</article>
|
||||
<article class="timeline-step reveal reveal-delay-3">
|
||||
<span class="timeline-icon">4</span>
|
||||
<h3>استمتع بتجربتك</h3>
|
||||
<p>اذهب في الموعد المحدد واستفد من تجربة أكثر تنظيمًا وراحة.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section class="partners section" id="partners">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<span class="eyebrow">قريبًا في التطبيق</span>
|
||||
<h2>مطاعم مميزة تنضم قريباً إلى Tabeley</h2>
|
||||
<p>نعمل على توسيع الشبكة لتشمل خيارات أكثر تناسب اللقاءات اليومية والتجارب الخاصة.</p>
|
||||
</div>
|
||||
|
||||
<div class="badge-cloud reveal">
|
||||
<span class="partner-badge">مطعم 1</span>
|
||||
<span class="partner-badge"></span>
|
||||
<span class="partner-badge">Luna Cafe</span>
|
||||
<span class="partner-badge">دار الياسمين</span>
|
||||
<span class="partner-badge">Urban Table</span>
|
||||
<span class="partner-badge">قهوة المدينة</span>
|
||||
</div>-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="trust section section-soft" id="trust">
|
||||
<div class="container trust-shell reveal">
|
||||
<div>
|
||||
<span class="eyebrow">عن Tabeley</span>
|
||||
<h2>شركة ناشئة سورية تبني تجربة حجز أكثر ذكاءً</h2>
|
||||
</div>
|
||||
<p>
|
||||
Tabeley مشروع تقني ناشئ من سوريا يهدف إلى تنظيم تجربة الحجز في قطاع المطاعم بشكل رقمي وآمن،
|
||||
مع التركيز على سهولة الاستخدام، حماية البيانات، وتحسين التنسيق بين العميل والمطعم لرفع جودة التجربة بالكامل.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="faq section" id="faq">
|
||||
<div class="container faq-shell">
|
||||
<div class="section-head reveal">
|
||||
<span class="eyebrow">الأسئلة الشائعة</span>
|
||||
<h2>إجابات مباشرة على أكثر الأسئلة المتكررة</h2>
|
||||
</div>
|
||||
<div class="faq-list">
|
||||
<details class="faq-item reveal" open>
|
||||
<summary>هل الحجز مجاني؟</summary>
|
||||
<p>نعم، تجربة الحجز للمستخدم مجانية، والهدف هو تسهيل الوصول إلى المطاعم وتنظيم الزيارة دون رسوم إضافية على عملية الحجز.</p>
|
||||
</details>
|
||||
<details class="faq-item reveal reveal-delay-1">
|
||||
<summary>هل يمكن تعديل أو إلغاء الحجز؟</summary>
|
||||
<p>يوفّر التطبيق إدارة سهلة للحجوزات، بحيث يمكن تعديل الموعد أو إلغاء الحجز وفق سياسة المطعم وإتاحة الوقت المحدد.</p>
|
||||
</details>
|
||||
<details class="faq-item reveal reveal-delay-2">
|
||||
<summary>هل يوفر التطبيق خصومات؟</summary>
|
||||
<p>نعم، سيعرض التطبيق عروضًا وخصومات مرتبطة ببعض الأوقات والمطاعم المشاركة عند توفرها داخل المنصة.</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="download section" id="download">
|
||||
<div class="container download-shell reveal">
|
||||
<div>
|
||||
<span class="eyebrow eyebrow-light">جاهز للتجربة؟</span>
|
||||
<h2>ابدأ تجربة حجز أسهل اليوم</h2>
|
||||
<p>نزّل التطبيق وابدأ بتنظيم حجوزاتك بطريقة أسرع وأوضح وأكثر راحة.</p>
|
||||
</div>
|
||||
<a href="#" class="play-badge" aria-label="Google Play">
|
||||
<span class="play-icon">▶</span>
|
||||
<span>
|
||||
<small>احصل عليه عبر</small>
|
||||
<strong>Google Play</strong>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact section" id="contact">
|
||||
<div class="container contact-grid">
|
||||
<div class="contact-info reveal">
|
||||
<span class="eyebrow">تواصل معنا</span>
|
||||
<h2>نرحّب باستفساراتكم وشراكاتكم</h2>
|
||||
<p>إذا كنت مطعمًا مهتمًا بالانضمام أو مستخدمًا لديه استفسار، يمكنك التواصل معنا مباشرة عبر القنوات التالية.</p>
|
||||
<div class="contact-cards">
|
||||
<a href="mailto:Tabeley0@gmail.com" class="contact-card">
|
||||
<span class="contact-card-icon">✉</span>
|
||||
<span>
|
||||
<strong>البريد الإلكتروني</strong>
|
||||
<span dir="ltr">Tabeley0@gmail.com</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="tel:+963983233965" class="contact-card">
|
||||
<span class="contact-card-icon">☎</span>
|
||||
<span>
|
||||
<strong>رقم الهاتف</strong>
|
||||
<span dir="ltr">+963983233965</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/tabeley_reservations?igsh=MTQ4ZzNxMzR0anExNA==" target="_blank" rel="noopener" class="contact-card">
|
||||
<span class="contact-card-icon">◎</span>
|
||||
<span>
|
||||
<strong>إنستغرام</strong>
|
||||
<span>@tabeley_reservations</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="contactForm" class="contact-form reveal reveal-delay-1">
|
||||
<h3>أرسل لنا رسالة</h3>
|
||||
<input type="text" placeholder="الاسم الكامل" required>
|
||||
<input type="email" placeholder="البريد الإلكتروني" required>
|
||||
<textarea placeholder="اكتب رسالتك هنا" required></textarea>
|
||||
<button type="submit">إرسال الرسالة</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-shell">
|
||||
<p>© 2026 Tabeley. جميع الحقوق محفوظة.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#">سياسة الخصوصية</a>
|
||||
<a href="#">شروط الاستخدام</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
70
script.js
70
script.js
@@ -1,9 +1,65 @@
|
||||
(function () {
|
||||
(function () {
|
||||
const reveals = document.querySelectorAll('.reveal');
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navMenu = document.querySelector('.nav');
|
||||
|
||||
if (menuToggle && navMenu) {
|
||||
menuToggle.addEventListener('click', function () {
|
||||
const isOpen = navMenu.classList.toggle('is-open');
|
||||
menuToggle.classList.toggle('is-open', isOpen);
|
||||
menuToggle.setAttribute('aria-expanded', String(isOpen));
|
||||
});
|
||||
|
||||
navMenu.querySelectorAll('a').forEach((link) => {
|
||||
link.addEventListener('click', function () {
|
||||
navMenu.classList.remove('is-open');
|
||||
menuToggle.classList.remove('is-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!navMenu.classList.contains('is-open')) return;
|
||||
if (navMenu.contains(event.target) || menuToggle.contains(event.target)) return;
|
||||
|
||||
navMenu.classList.remove('is-open');
|
||||
menuToggle.classList.remove('is-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.16 });
|
||||
|
||||
reveals.forEach((item) => observer.observe(item));
|
||||
} else {
|
||||
reveals.forEach((item) => item.classList.add('is-visible'));
|
||||
}
|
||||
|
||||
const faqItems = document.querySelectorAll('.faq-item');
|
||||
faqItems.forEach((item) => {
|
||||
item.addEventListener('toggle', function () {
|
||||
if (!item.open) return;
|
||||
faqItems.forEach((other) => {
|
||||
if (other !== item) {
|
||||
other.open = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const form = document.getElementById('contactForm');
|
||||
if (!form) return;
|
||||
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
const defaultSubmitLabel = submitButton ? submitButton.textContent : 'Send';
|
||||
const defaultSubmitLabel = submitButton ? submitButton.textContent : 'إرسال الرسالة';
|
||||
const fallbackApi = 'https://app.tabeley.com/api';
|
||||
const configuredBase = window.TABELEY_API_BASE_URL;
|
||||
const originBase = `${window.location.origin}/api`;
|
||||
@@ -37,13 +93,13 @@
|
||||
const message = getFieldValue('textarea');
|
||||
|
||||
if (message.length < 5) {
|
||||
alert('Please enter at least 5 characters.');
|
||||
alert('يرجى كتابة رسالة أوضح قبل الإرسال.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Sending...';
|
||||
submitButton.textContent = 'جارٍ الإرسال...';
|
||||
}
|
||||
|
||||
const payload = { message, name, email };
|
||||
@@ -72,11 +128,11 @@
|
||||
|
||||
if (sent) {
|
||||
form.reset();
|
||||
alert('Feedback sent successfully.');
|
||||
alert('تم إرسال رسالتك بنجاح.');
|
||||
return;
|
||||
}
|
||||
|
||||
console.error('Feedback send failed:', lastError);
|
||||
alert('Unable to send feedback now. Please try again later.');
|
||||
alert('تعذر إرسال الرسالة حالياً. حاول مرة أخرى لاحقاً.');
|
||||
});
|
||||
})();
|
||||
})();
|
||||
|
||||
1364
styles.css
1364
styles.css
تم حذف اختلاف الملف لأن الملف كبير جداً
تحميل الاختلاف
المرجع في مشكلة جديدة
حظر مستخدم