-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
374 lines (327 loc) · 17.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Direct Home Components Test</title>
<script type="module">
(async () => {
try {
await import(
"https://home.devdksa.com/direct-web-components.es.js"
);
//load components
loadWebComponents("wc-direct-header");
loadWebComponents("wc-direct-footer");
} catch (error) {
document.querySelector(".main-app")?.removeAttribute("hidden");
console.error("Failed to load module:", error);
}
})();
</script>
<style>
wc-direct-header,
wc-direct-footer {
z-index: auto;
}
</style>
<link href="./output.css" rel="stylesheet">
<style>
html,
body {
font-family: 'DirectFont', 'Inter';
}
/* Hide scrollbars specifically in Firefox */
iframe::-webkit-scrollbar {
display: none;
/* Chrome, Edge, and Safari */
}
iframe {
scrollbar-width: none;
/* Firefox */
}
:focus-visible {
outline: none;
}
.flight-search-bar {
width: 100%;
/* Default height for desktop */
min-height: 430px;
opacity: 0;
/* Hidden initially */
transition: opacity 0.3s ease-in;
}
</style>
</head>
<body>
<wc-direct-header hidden></wc-direct-header>
<main id="app" class="main-app" hidden>
<div>
<!-- Header Section -->
<header class="relative w-full text-white bg-orange-700 main-header">
<div class="pt-10 pb-5 pl-10 pr-10 mb-1 main-content">
<div class="absolute inset-0 bg-center bg-cover opacity-50"
style="background-image: url('https://www.nerdwallet.com/tachyon/2021/04/THY-7378W_PR_img01_PR-0413.jpg?resize=1920%2C1152');">
</div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h1 class="font-bold text-1xl lg:text-3xl">أحجز الخطوط التركية بأقل سعر عبر دايركت</h1>
<img src="https://1000logos.net/wp-content/uploads/2020/04/Turkish_Airlines_logo.png"
alt="Turkish Airlines Logo" class="h-12 mx-4 bg-white rounded pa-1">
</div>
<p class="text-lg">تعد الخطوط الجوية التركية واحدة من أكبر شركات الطيران انتشارا على مستوى العالم.. أحجز
الان
عبر دايركت الخطوط التركية بسهولة للحصول على أفضل سعر
</p>
<!-- <p class="text-lg">
لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات
المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة
مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف.
خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد
الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي
مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر"
(Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.
</p> -->
</div>
</div>
<iframe class="relative flight-search-bar" width="100%" frameborder="0" allowfullscreen scrolling="no"></iframe>
</header>
<!-- Main Content -->
<div class="p-6 mx-auto max-w-7xl main-content">
<div class="mt-6 lg:flex lg:gap-6">
<div class="mb-6">
<!-- About Section -->
<section class="flex-1 p-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">نبذة عن الخطوط الجوية التركية</h2>
<p class="leading-loose text-gray-700">
الخطوط التركية هي شركة طيران وطنية تتخذ مطار أتاتورك الدولي مركزاً رئيسياً لانطلاق رحلاتها ويقع مقرها
الرئيسي في مدينة إسطنبول وهي واحدة من شركات الطيران الكبرى في أوروبا والعالم حيث تسيير رحلاتها إلى أكثر
من
300 وجهه داخل وخارج تركيا كما تمتلك أسطول من الطائرات الحديثة المجهزة لرفاهية وأمان المسافرين وفق أعلى
معايير السلامة الدولية وتحرص دائماً على تقديم أفضل خدمة لعملائها
تمتع بتجربة سفر ممتعة وفريدة من نوعها مع دايركت عبر الخطوط الجوية التركية
</p>
</section>
<!-- Features Section -->
<section class="p-6 mt-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">مميزات الخطوط الجوية التركية</h2>
<ul class="leading-loose text-gray-700 list-disc list-inside">
<li>صنفت ضمن أفضل 10 شركات طيران في العالم</li>
<li>حصلت على جائزة أفضل شركة طيران في أوروبا لست سنوات متتالية</li>
<li>تمتلك أسطول ضخم من الطائرات الحديثة به كافة وسائل الأمان والرفاهية</li>
<li>تقديم أفضل الخدمات على متن طائراتها مع توفير المأكولات والمشروبات المجانية</li>
</ul>
</section>
<!-- Destinations Section -->
<section class="p-6 mt-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">وجهات الخطوط الجوية التركية</h2>
<p class="leading-loose text-gray-700">
يمكنك السفر عبر الطيران التركي لأكثر من 300 وجهة موزعة على 120 دولة حول العالم ومن أكثر الوجهات طلباً
عليها:
</p>
<p class="leading-loose text-gray-700">حجز رحلات الخطوط الجوية التركية من وإلى
الرياض/جدة/القاهرة/باريس/مالطا/طرابلس/ميونخ/لندن/برشلونة/مدريد/روما/ميلانو</p>
</section>
<!-- Baggage Policy Section -->
<section class="p-6 mt-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">سياسة الأمتعة داخل الطيران التركي</h2>
<p class="leading-loose text-gray-700">
من المهم أن تكون على علم بحد الأمتعة المسموح به على متن الخطوط التركية وتختلف سياسة الأمتعة حسب نوع درجة
الحجز
والوجهة:
</p>
<h3 class="mt-4 text-xl font-bold text-gray-800">سياسة الأمتعة للدرجة السياحية</h3>
<ul class="leading-loose text-gray-700 list-disc list-inside">
<li>يحق لكل مسافر حمل أمتعة لا يتجاوز وزنها 20 كجم</li>
<li>يسمح لكل مسافر بحمل حقيبة يدوية لا يتجاوز وزنها 8 كجم</li>
</ul>
<h3 class="mt-4 text-xl font-bold text-gray-800">سياسة الأمتعة لدرجة رجال الأعمال</h3>
<ul class="leading-loose text-gray-700 list-disc list-inside">
<li>يحق لكل مسافر حمل أمتعة لا يتجاوز وزنها 30 كجم</li>
<li>يسمح لكل مسافر بحمل حقيبتي يد لا يتجاوز وزن الواحدة 8 كجم</li>
</ul>
</section>
<!-- Benefits Section -->
<section class="p-6 mt-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">مميزات حجز رحلات الخطوط التركية عبر دايركت</h2>
<ul class="leading-loose text-gray-700 list-disc list-inside">
<li>نمتلك مستشارين خبراء في مجال الطيران</li>
<li>نقدم لك خدمات احترافية مع خصومات مذهلة</li>
<li>حجز رحلات الخطوط الجوية بسهولة وفي أسرع وقت</li>
<li>متواجدين دائماً بجانبك لمساعدتك وتتبع حجزك</li>
<li>خدمة العملاء في انتظار اتصالك على مدار الساعة</li>
</ul>
</section>
<section class="p-5 mt-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">عن طيران التركية</h2>
<div class="w-full">
<table class="w-full text-sm text-right text-gray-500 border-collapse rtl:text-right">
<colgroup>
<col width="298">
<col width="298">
</colgroup>
<tbody>
<tr class="bg-white border">
<th scope="row"
class="px-4 py-2 text-xs font-medium text-gray-900 whitespace-normal border sm:text-sm">
الرمز الخاص بإتحاد النقل الجوي الدولي (IATA)
</th>
<td class="px-4 py-2 text-xs sm:text-sm">EK</td>
</tr>
<tr class="bg-white border">
<th scope="row"
class="px-4 py-2 text-xs font-medium text-gray-900 whitespace-normal border sm:text-sm">
الرمز الخاص بمنظمة الطيران المدني الدولي (ICAO)
</th>
<td class="px-4 py-2 text-xs sm:text-sm">UAE</td>
</tr>
<tr class="bg-white border">
<th scope="row"
class="px-4 py-2 text-xs font-medium text-gray-900 whitespace-normal border sm:text-sm">
مقر طيران الإمارات
</th>
<td class="px-4 py-2 text-xs sm:text-sm">دبي - الإمارات العربية المتحدة</td>
</tr>
<tr class="bg-white border">
<th scope="row"
class="px-4 py-2 text-xs font-medium text-gray-900 whitespace-normal border sm:text-sm">
المطار الرئيسي للشركة
</th>
<td class="px-4 py-2 text-xs sm:text-sm">مطار دبي الدولي</td>
</tr>
<tr class="bg-white border">
<th scope="row"
class="px-4 py-2 text-xs font-medium text-gray-900 whitespace-normal border sm:text-sm">
حجم الأسطول التي تغطيها الإماراتية
</th>
<td class="px-4 py-2 text-xs sm:text-sm">حوالي 157 وجهة (محلية ودولية)</td>
</tr>
<tr class="bg-white border">
<th scope="row"
class="px-4 py-2 text-xs font-medium text-gray-900 whitespace-normal border sm:text-sm">
أشهر الوجهات
</th>
<td class="px-4 py-2 text-xs sm:text-sm">DXB, DAC, MNL EBB</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Contact Section -->
<section class="p-6 mt-6 bg-white rounded-lg shadow">
<h2 class="mb-4 text-2xl font-semibold text-gray-800">تواصل معنا</h2>
<p class="leading-loose text-gray-700">الرياض / جدة / بريدة / الخبر</p>
<p class="leading-loose text-gray-700">راسلنا واتساب</p>
</section>
</div>
<div>
<!-- Quick Info Section -->
<aside class="w-full p-6 rounded-lg shadow lg:w-80">
<div class="mb-6 text-center">
<img src="https://1000logos.net/wp-content/uploads/2020/04/Turkish_Airlines_logo.png"
alt="Turkish Airlines Logo" class="h-16">
</div>
<div class="leading-loose text-gray-700">
<p class="mb-2">
<strong>رقم خدمة العملاء (داخل السعودية):</strong><br>
+90 212 463 63 63
</p>
<p class="mb-2">
<strong>كود أياتا:</strong><br>
TK
</p>
<p class="mb-4">
<strong>موقع إلكتروني:</strong><br>
<a href="https://www.turkishairlines.com" target="_blank" class="text-blue-600 underline">
www.turkishairlines.com
</a>
</p>
</div>
</aside>
</div>
</div>
</div>
</div>
</main>
<wc-direct-footer hidden></wc-direct-footer>
</body>
<script>
async function loadWebComponents(tag) {
try {
const component = await getComponent(tag);
if (tag === 'wc-direct-header') {
loadEventListeners();
}
updateShadowDom(component, tag, "https://home.devdksa.com/style.css");
} catch (error) {
console.error("Error:", error);
}
}
function getComponent(tag) {
return new Promise((resolve, reject) => {
const timeout = 5000; // 5 seconds timeout
const interval = 100; // Check every 100ms
let elapsedTime = 0;
const moduleLoaded = setInterval(() => {
const component = document.querySelector(tag);
if (component && component.shadowRoot) {
clearInterval(moduleLoaded);
resolve(component);
} else if ((elapsedTime += interval) >= timeout) {
clearInterval(moduleLoaded);
reject(`${tag} not found.`);
}
}, interval);
});
}
function loadEventListeners() {
window.addEventListener("wc-state-locale", (event) => {
// do something
});
window.addEventListener("wc-state-currency", (event) => {
// do something
});
}
function updateShadowDom(component, tag, url) {
// update component styles
const styleLink = document.createElement("link");
styleLink.setAttribute("rel", "stylesheet");
styleLink.setAttribute("href", url);
component.shadowRoot.appendChild(styleLink);
// update component attributes
styleLink.onload = () => {
component.removeAttribute("hidden");
document.querySelector(".main-app")?.removeAttribute("hidden");
if (tag === 'wc-direct-footer') {
adjustHeaderAndSearchBar();
}
};
}
function adjustHeaderAndSearchBar() {
const mainHeader = document.querySelector('.main-header');
const mainContent = document.querySelector('.main-content');
const flightSearchBar = document.querySelector('.flight-search-bar');
const viewportWidth = window.innerWidth;
let totalContentHeight = mainContent.offsetHeight;
let iframeHeight = flightSearchBar.offsetHeight || flightSearchBar.scrollHeight || 0;
let mainHeaderHeight = totalContentHeight + 155;
if (viewportWidth <= 768) {
mainHeaderHeight = totalContentHeight + 387.6;
}
console.log("Computed Heights:", {
totalContentHeight,
iframeHeight,
mainHeaderHeight,
viewportWidth,
});
// Apply height to the main header
mainHeader.style.height = `${mainHeaderHeight}px`;
// Fade in the header
// mainHeader.style.visibility = 'visible';
// mainHeader.style.opacity = 1;
flightSearchBar.style.opacity = 1;
flightSearchBar.setAttribute('src', 'https://staging-flights.devdksa.com/searchbar/');
}
window.addEventListener('resize', adjustHeaderAndSearchBar)
</script>
</html>