From 344e9798f564d03b17b7be5c74558aa72b9438c6 Mon Sep 17 00:00:00 2001 From: Abdul Kareem Date: Fri, 20 Feb 2026 21:07:17 +0300 Subject: [PATCH] Initial landing page --- index.html | 79 +++++++++++++++++ script.js | 82 ++++++++++++++++++ styles.css | 246 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 407 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f94cff4 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + Tabeley + + + + + + +
+ + +

احجز طاولتك بسهولة

+

منصة ذكية لحجز أفضل المطاعم بدون انتظار

+ +
+ تحميل للأندرويد + +
+
+ + +
+

ليش تختار Tabeley؟

+
+
+

حجز فوري

+

أكد حجزك بثواني بدون اتصال أو انتظار.

+
+
+

أفضل المطاعم

+

اختر من بين مجموعة مطاعم مختارة بعناية.

+
+
+

إدارة حجوزاتك

+

تحكم بجميع حجوزاتك من مكان واحد.

+
+
+
+ + +
+

كيف بيشتغل؟

+
+
1️⃣ اختر المطعم
+
2️⃣ حدّد الوقت
+
3️⃣ استمتع بتجربتك
+
+
+ + +
+

تواصل معنا

+

📧 Tabeley0@gmail.com

+

📞 +963983233965

+

+ + Instagram + +

+ +
+ + + + +
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9327059 --- /dev/null +++ b/script.js @@ -0,0 +1,82 @@ +(function () { + const form = document.getElementById('contactForm'); + if (!form) return; + + const submitButton = form.querySelector('button[type="submit"]'); + const defaultSubmitLabel = submitButton ? submitButton.textContent : 'Send'; + const fallbackApi = 'https://tabeleymvp2-8b111c91640a.hosted.ghaymah.systems/api'; + const configuredBase = window.TABELEY_API_BASE_URL; + const originBase = `${window.location.origin}/api`; + + const candidates = [configuredBase, originBase, fallbackApi] + .filter(Boolean) + .map((url) => String(url).replace(/\/+$/, '')) + .filter((url, idx, arr) => arr.indexOf(url) === idx); + + function getFieldValue(selector) { + const field = form.querySelector(selector); + return field ? field.value.trim() : ''; + } + + async function postFeedback(baseUrl, payload) { + return fetch(`${baseUrl}/public/feedback`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json' + }, + body: JSON.stringify(payload) + }); + } + + form.addEventListener('submit', async function (e) { + e.preventDefault(); + + const name = getFieldValue('input[type="text"]'); + const email = getFieldValue('input[type="email"]'); + const message = getFieldValue('textarea'); + + if (message.length < 5) { + alert('Please enter at least 5 characters.'); + return; + } + + if (submitButton) { + submitButton.disabled = true; + submitButton.textContent = 'Sending...'; + } + + const payload = { message, name, email }; + let sent = false; + let lastError = null; + + for (const base of candidates) { + try { + const response = await postFeedback(base, payload); + if (response.ok) { + sent = true; + break; + } + + const body = await response.text(); + lastError = body || `HTTP ${response.status}`; + } catch (err) { + lastError = err; + } + } + + if (submitButton) { + submitButton.disabled = false; + submitButton.textContent = defaultSubmitLabel; + } + + if (sent) { + form.reset(); + alert('Feedback sent successfully.'); + return; + } + + console.error('Feedback send failed:', lastError); + alert('Unable to send feedback now. Please try again later.'); + }); +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..eea229c --- /dev/null +++ b/styles.css @@ -0,0 +1,246 @@ +:root { + --primary: #d32f2f; + --secondary: #e53935; + --bg: #fffbf7; + --surface: #ffffff; + --card: #ffebee; + --text-main: #2d1515; + --text-muted: #7a4a4a; + --border: #f2c6c6; + --shadow: rgba(211, 47, 47, 0.12); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Cairo', sans-serif; +} + +body { + background: var(--bg); + color: var(--text-main); + line-height: 1.6; +} + +.hero, +.features, +.how, +.contact { + max-width: 1100px; + margin: 0 auto; + padding: 24px 16px; +} + +.hero { + min-height: 78vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background: transparent; +} + +.logo { + width: 108px; + height: 108px; + border-radius: 999px; + object-fit: cover; + box-shadow: 0 8px 24px var(--shadow); + margin-bottom: 18px; +} + +.hero h1 { + font-size: clamp(30px, 4vw, 44px); + margin-bottom: 8px; + font-weight: 700; +} + +.hero p { + font-size: 22px; + color: var(--text-muted); + margin-bottom: 22px; +} + +.buttons { + width: min(720px, 100%); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.btn { + display: inline-flex; + justify-content: center; + align-items: center; + min-height: 52px; + border-radius: 14px; + border: 1px solid var(--border); + font-size: 20px; + font-weight: 700; + text-decoration: none; + transition: .2s ease; +} + +.android { + background: var(--primary); + color: #fff; +} + +.android:hover { + background: #be2a2a; + transform: translateY(-1px); +} + +.ios { + background: var(--surface); + color: var(--text-muted); +} + +.features h2, +.how h2, +.contact h2 { + text-align: center; + margin-bottom: 18px; + color: var(--text-main); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 14px; + padding: 18px; + box-shadow: 0 6px 18px var(--shadow); +} + +.card h3 { + color: var(--primary); + margin-bottom: 6px; +} + +.card p { + color: var(--text-muted); +} + +.how { + background: var(--card); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.steps { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; + margin-top: 10px; +} + +.steps div { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 12px; + padding: 12px; + text-align: center; + font-weight: 600; +} + +.contact { + text-align: center; +} + +.contact p { + color: var(--text-muted); + margin-bottom: 8px; +} + +.contact a { + color: var(--primary); + font-weight: 700; +} + +.contact form { + margin: 26px auto 0; + width: min(1000px, 100%); + display: grid; + gap: 12px; +} + +.contact input, +.contact textarea { + width: 100%; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 14px; + padding: 14px 16px; + font-size: 18px; + color: var(--text-main); + outline: none; +} + +.contact input:focus, +.contact textarea:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12); +} + +.contact textarea { + min-height: 120px; + resize: vertical; +} + +.contact button { + min-height: 54px; + border: 1px solid var(--border); + border-radius: 14px; + background: var(--primary); + color: #fff; + font-size: 30px; + font-weight: 700; + cursor: pointer; + transition: .2s ease; +} + +.contact button:hover { + background: #be2a2a; +} + +footer { + margin-top: 24px; + background: #2b1b1b; + color: #fff; + text-align: center; + padding: 16px; +} + +@media (max-width: 900px) { + .features-grid, + .steps, + .buttons { + grid-template-columns: 1fr; + } + + .hero { + min-height: 62vh; + } + + .hero p { + font-size: 18px; + } + + .btn, + .contact input, + .contact textarea { + font-size: 16px; + } + + .contact button { + font-size: 24px; + } +}