Skip to content

B
base Project
Commit a9c345c1 authored by TokaKaram's avatar TokaKaram
Browse files
Options

integrate English

parent c1669fd3
Show whitespace changes
Inline Side-by-side
Showing with 331 additions and 378 deletions
index.html
View file @ a9c345c1
......@@ -46,8 +46,8 @@
<a id="ticketing_btn1"> التذاكر</a>
<a><i class="fa-solid fa-bars"></i></a>
<!-- <a class="en_lang1 colored">EN</a> -->
<!-- <a class="ar_lang1 ">AR</a> -->
<a class="en_lang1 colored">EN</a>
<a class="ar_lang1 ">AR</a>
</div>
<p class="date">
<span id="from">from</span>
......@@ -64,16 +64,16 @@
</div>
<div class="right_side">
<a id="ticketing_bnt_en" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" class=" ticketing_ar"> التذاكر</a>
<a id="ticketing_bnt_en" onclick="gotoTic('ticketing_section')" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" onclick="gotoTic('ticketing_section_ar')" class=" ticketing_ar"> التذاكر</a>
<a class="lines">
<span></span>
<span></span>
<span></span>
</a>
<!-- <a class="en_lang colored">EN</a> -->
<!-- <a class="ar_lang ">AR</a> -->
<a class="en_lang colored">EN</a>
<a class="ar_lang ">AR</a>
</div>
</header>
......@@ -100,7 +100,7 @@
<p id="hero_desc" class="hero-sech23_en"> FOR THE ACTION.</p>
<p id="hero_desc" class="hero-sech24_en">THREE DAYS OF PURE ENERGY,</p>
<p id="hero_desc" class="hero-sech25_en">COMPETITION, AND COMMUNITY.</p>
<a id="" class="bookA1_en"> BOOK NOW</a>
<a class="bookA1_en" onclick="gotoTic('ticketing_section')"> BOOK NOW</a>
</div>
<div class="hero_desc_res_en " >
<h3 id="hero_title" class="hero_title2_en">
......@@ -110,7 +110,7 @@
<p>
A FESTIVAL BUILT FOR GAMERS, CREATORS, AND FANS WHO LIVE FOR THE ACTION. THREE DAYS OF ENERGY, COMPETITION, AND COMMUNITY.
</p>
<a id="" class="bookA1"> BOOK NOW</a>
<a onclick="gotoTic('ticketing_section')" class="bookA1"> BOOK NOW</a>
</div>
</div>
......@@ -121,19 +121,20 @@
<div class="hero_desc_ar">
<h3 id="hero_title" class="hero_title2">
<div class="wordh21">
<span>مرحبا بكم في</span>
<span>مرحبًا بكم في</span>
<span class="the">THE BASE</span>
</div>
<div class="wordh22">
<span>حيث تنبض الألعاب بالحياة</span>
<span>حيث تنبِض الألعابُ بالحياة.</span>
</div>
</h3>
<p id="hero_desc" class="hero-sech21">مهرجان ضخم لعشاق الجيمينج، وصناع</p>
<p id="hero_desc" class="hero-sech21"> مهرجان ضخم لعشّاق الجيمينج، وصنّاع</p>
<p id="hero_desc" class="hero-sech22">المحتوى، والجماهير اللي بتعيش على</p>
<p id="hero_desc" class="hero-sech23">الحماس والإثارة </p>
<p id="hero_desc" class="hero-sech24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
<p id="hero_desc" class="hero-sech25">وروح المجتمع</p>
<a id="book_now" class="bookA1">احجز الان</a>
<p id="hero_desc" class="hero-sech23">الحماس والإثارة.</p>
<p id="hero_desc" class="hero-sech24" > ثلاثة أيام من الطاقة الخالِصة ، والمنافسة ، </p>
<p id="hero_desc" class="hero-sech25">وروح المجتمع. </p>
<a id="book_now" class="bookA1" onclick="gotoTic('ticketing_section_ar')">احجز الان</a>
</div>
<div class="hero_desc_res_ar">
<h3 id="hero_title" class="hero_title2">
......@@ -152,60 +153,16 @@
ثلاثة أيام من الطاقة الخالصة، والمنافسة،
وروح المجتمع
</p>
<a id="book_now1" class="bookA1">احجز الان</a>
<a id="book_now1" onclick="gotoTic('ticketing_section_ar')" class="bookA1">احجز الان</a>
</div>
</div>
<!-- ==================== Hero_EN -->
<!-- <div class="hero_section rtl_size hidden1" id="hero_en">
<div class="mainiMg">
<img src="./images/main1.jpg">
</div>
<div class="hero_desc">
<h3 id="hero_title" class="hero_title">
<div class="word1">
<span>WELCOME TO</span>
<span class="the">THE</span>
</div>
<div class="word2">
<span class="base">BASE</span>
<span> — WHERE THE</span>
</div>
<span class="word4">GAME COMES</span>
<span class="word3">ALIVE!</span>
</h3>
<p id="hero_desc" class="hero-sec">A FESTIVAL BUILT FOR GAMERS, </p>
<p id="hero_desc" class="hero-sec2">CREATORS, AND FANS WHO LIVE</p>
<p id="hero_desc" class="hero-sec3">FOR THE ACTION.</p>
<p id="hero_desc" class="hero-sec4">THREE DAYS OF PURE ENERGY, </p>
<p id="hero_desc" class="hero-sec5">COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div>
<div class="hero_desc_res">
<h3 id="hero_title" class="hero_title">
WELCOME TO
<span class="the">THE BASE</span>
— WHERE THE
GAME COMES
ALIVE!
</h3>
<p>
A FESTIVAL BUILT FOR GAMERS,
CREATORS, AND FANS WHO LIVE
FOR THE ACTION.
THREE DAYS OF PURE ENERGY,
COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div>
</div> -->
<div class="play_games " id="play_games">
<h1 id="playable_games_title">الألعاب المتاحة</h1>
<div class="swiper_parent">
<div class="edge-overlay left"></div>
<div class="edge-overlay right"></div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/game1.webp" alt=""></div>
......@@ -220,8 +177,9 @@
<div class="swiper-slide"><img src="/images/website_landing_page-04.webp" alt=""></div>
</div>
<div class="swiper-pagination"> next</div>
<div class="swiper-pagination"> prev</div>
</div>
</div>
</div>
<div class="e_sport" id="e_sport">
......@@ -259,22 +217,22 @@
</div>
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> هنا يبدأ <span>المرح الحقيقى </span></h1>
<h1> هُنا يبدأ <span> المرح الحقيقي </span></h1>
<div class="casual_text">
<p>استمتع بأجواء اللعب الحر على أكثر </p>
<p>من 20 جهاز كمبيوتر جيمينغ و 10</p>
<p>أجهزة بلايستيشن 5 متاحة للجميع </p>
<p>شارك في بطولات قصيرة تفجّر الحماس ،</p>
<p>اربح جوائز مميزة، أو تحدّ أصدقاءك في</p>
<p> مباريات ودية - كل لحظة هنا متعة خالصة</p>
<p>منطقة تجمع بين الإثارة والراحة، حيث اللعب </p>
<p> هو جوهر التجربة !</p>
<p> استمتع بأجواءِ اللعب الحُرّ على أكثرَ </p>
<p> من ٢٠ جهازَ كمبيوتر جيمينج و١٠</p>
<p>أجهزة بلايستيشن ٥ متاحة للجميع.</p>
<p> شارك في بطولات قصيرة تُفجر الحماس،</p>
<p> واربح جوائز مميّزة، أو تحد أصدقاءك في</p>
<p> مباريات ودية – كل لحظة هنا متعة خالِصة. </p>
<p> منطقة تجمع بين الإثارة والراحة، حيثُ اللعب </p>
<p> !هو جوهر التجربة </p>
</div>
<p class="casual_text_res">استمتع بأجواء اللعب الحر على أكثر من 20 جهاز كمبيوتر جيمينغ و 10
أجهزة بلايستيشن 5 متاحة للجميع شارك في بطولات قصيرة تفجّر الحماس ، اربح جوائز مميزة، أو تحدّ أصدقاءك في مباريات
ودية - كل لحظة هنا متعة خالصة منطقة تجمع بين الإثارة والراحة، حيث اللعب
هو جوهر التجربة !</p>
<p class="casual_text_res">استمتع بأجواءِ اللعب الحُرّ على أكثرَ من ٢٠ جهازَ كمبيوتر جيمينج و١٠ أجهزة بلايستيشن ٥ متاحة للجميع.
شارك في بطولات قصيرة تُفجر الحماس، واربح جوائز مميّزة، أو تحد أصدقاءك في مباريات ودية – كل لحظة هنا متعة خالِصة.منطقة تجمع بين الإثارة والراحة، حيثُ اللعب
!هو جوهر التجربة </p>
</div>
</div>
......@@ -311,17 +269,15 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
<div class="Vr_zone" id="Vr_zone_AR">
<div class="Vr_zone_cont">
<div class="text">
<h1> ادخل إلى
<span> ٍ عالم جديد لا يشبه
أي شيء آخر</span>
<h1> اُدخل إلى
<span>
عالَمٍ جديد لا يُشبه أيَّ شيءٍ آخر</span>
</h1>
<p>تجربة تجمع بين الواقع الافتراضي وألعاب
الآركيد الكلاسيكية لتمنحك مزيجا من الحنين
<p>تجربة تجمع بين الواقعِ الافتراضيِّ وألعاب الأركيد الكلاسيكيّة، لتمنحَك مزيجًا من الحنينِ والمستقبلِ في آنٍ واحد.
والمستقبل
<p> متطورة، استعد لمغامرات VR مع 6 محطات ستعيشها بكل حواسك — تجربة تنقلك من المشاهدة إلى قلب الحدث</p>
<p> استعد لمغامرات VR متطوّرة، مع ٦ محطّات ستَعيشُها بكل حواسِّك —
تجربة تنقلك من المُشاهدة إلى قلب الحدث.
</p>
</p>
</div>
......@@ -365,18 +321,8 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
<a>CARD / BOARD GAMES</a>
</div>
<div class="text">
<h1><span>لعبة</span> العقل، الصبر، والاستراتيجية</h1>
<p>استمتع بمجموعة متنوعة من ألعاب
الطاولة الكلاسيكية وبطولات ألعاب
البطاقات التي تجمع بين التحدي والمرح
سواء كنت محترفا
ً أو مبتدئا ً، هذه
المنطقة هي مكانك للتفاعل والتسلية
وجها لوجه مع الآخرين</p>
<h1><span>لعبة</span> العَقل، الصَّبر، والاستراتيجيّة</h1>
<p> استمتع بمجموعة متنوّعة من ألعاب الطاولة الكلاسيكيّة، وبطولات ألعاب البطاقات التي تجمع بين التحدّي والمَرح، سواءٌ كنت مُحترفًا أو مُبتدئًا، فهٰذه المنطقة هي مكانك للتفاعُل والتسلية وجها لوجه مع الآخرين.</p>
</div>
</div>
</div>
......@@ -409,12 +355,9 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
<div class="mobile" id="mobile_Ar">
<div class="mobile_cont">
<div class="text">
<h1>لأن الجيمينغ <span>لا يتوقف عند
الشاشات الكبيرة</span></h1>
<p>اليومية، PUBG MOBILE انضم إلى بطولات
سواء كنت تلعب بمفردك أو مع فريقك
المنافسة هنا سريعة، مليئة بالإثارة، والمركز
الأول ينتظر الأفضل فقط</p>
<h1>لأنّ الجيمينغ<span>
لا يتوقف عند الشاشات الكبيرة</span></h1>
<p> انضم إلى بطولات PUBG MOBILE اليومية، سواءٌ كنت تلعب بمفردك أو مع فريقك، المنافسةُ هنا سريعةٌ، مليئةٌ بالإثارة، والمركزُ الأوّل ينتظر الأفضل فقط.</p>
<div class="a_parent">
<a>MOBILE AREA</a>
</div>
......@@ -449,13 +392,14 @@ AND ONLY THE BEST REACH THE TOP.</p>
<div class="cosplay" id="cosplay_Ar">
<div class="cosplay_cont">
<div class="text">
<h1>عش شخصيتك المفضلة <span>وكن
<h1> عش شخصيّتَك المفضَّلة، <span>
وكن جُزءًا من عالمها
</span></h1>
<p>في منطقة الكوسبلاي، يتحوَّل الإبداع
<span> إلى عرض حيّ من الأزياء، الألوان، والخيالِ.</span>
جزءا من عالمها</span></h1>
<p>في منطقة الكوسبلاي، يتحوّل الإبداع
<span>الى عرض حي ّ من الأزياء، الألوان، والخيال</span>
شارك، التقط الصور، وكن أنت البطل
الذي يعشقه الجميع</p>
شارك، التقط الصُّور، وكن أنت البطل الذي يعشقه الجميع.</p>
</div>
<div class="main_img">
<div class="img_parent">
......@@ -502,13 +446,14 @@ AND ONLY THE BEST REACH THE TOP.</p>
<div class="vr-con">
<h2 class="vr-title1 arbt">
تجربة جديدة <span class="neon">في كل زاوية</span>
تجربةٌ جديدة <span class="neon">في كل زاوية </span>
</h2>
<div class="vr-p arb">
من سباقات السيارات إلى المغامرات الغامرة, ستجد هنا ألعاب الواقع الافتراضي التي تختبر مهارتك وتلهب حماسك كل
لحظة في هذه المنطقة مغامرة تستحق أن تعيشها
من سباقات السيّارات إلى المغامرات الغامرة، ستجدُ هنا ألعاب الواقعِ الافتراضيِّ التي تختبر مهاراتك وتلهبُ حماسَك.
كلُّ لحظة في هذه المنطقة مغامرةٌ تستحق أن تعيشها.
</div>
......@@ -545,31 +490,6 @@ AND ONLY THE BEST REACH THE TOP.</p>
<img src="./images/ticketing.png" />
</div>
<!-- <div class="days_grid">
<div class="days">
<div>
<h1 id="pass1_title">1 DAY PASS _ REGULAR</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p class="pass1_p1 perfect">PERFECT FOR GAMERS WHO
WANT TO EXPERIENCE THE
EVENT IN ONE HIT!
SPEND A FULL DAY EXPLORING
EVERY PART OF THE BASE:
TOURNAMENTS,VR,Card
ZONES,COSPLAY SHOWS,
AND MORE- ALL IN ONE PASS
.</p>
<a id="book_pass1_btn">BOOK YOUR PASS</a>
</div>
</div>
</div>
</div> -->
<div class="ticket_types">
<div class="days_t">
<div class="ticket_type">
......@@ -640,26 +560,7 @@ AND ONLY THE BEST REACH THE TOP.</p>
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- <div class="days last">
<div>
<h1 id="vip_title">VIP TICKET</h1>
<h1>$$.$$</h1>
</div>
<div class="text">
<div>
<p class="vip_p1 vipp">FOR THOOSE WHO WANT THE FULL EXPERIENCE - AND MORE. ENJOY EXCLUSIVE VIP
ACCESS WITH PRIORITY ENTRY,
RESERVED MAIN STAGE SEATING,BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH
PACK.THREE DAYS OF
GAMING ,LUXORY,AND NEXT-LEVEL ACCESS TO THE BASE.
</p>
</div>
<div>
<a id="book_vip_btn">BOOK YOUR PASS</a>
</div>
</div>
</div> -->
</div>
<div class="ticketing_section ticketing_section_ar " id="ticketing_section_ar">
......@@ -676,10 +577,12 @@ AND ONLY THE BEST REACH THE TOP.</p>
</div>
<div class="text">
<p class="first-p">
على مدار الأيام الثلاثة — البطولات، <span class="span_base">THE BASE </span> احصل على دخول كامل إلى
والعروض، والكوسبلاي، ومنطقة الواقع الافتراضي، والآركيد، وجميع مناطق
الألعاب. استمتع بدخول غير محدود إلى جميع المناطق الترفيهية والتنافسية
وأنشطة المسرح الرئيسي وفعاليات المجتمع طوال المهرجان </p>
على مدار الأيّام الثلاثة — البطولات، احصل على دخولٍ كامل إلى <span class="span_base">THE BASE</span>
، والعُروض، والكوسبلاي، ومنطقة الواقعِ الافتراضيِّ، والأركيد، وجميعِ مناطق الألعاب.
استمتع بدخول غيرِ محدود إلى جميعِ المناطقِ الترفيهيّة والتنافسيّة وأنشطة المسرحِ الرئيسيّ وفعّاليّات المجتمعِ طوال المهرجان.
</p>
</div>
......@@ -695,19 +598,9 @@ AND ONLY THE BEST REACH THE TOP.</p>
<span>10 KD</span>
</div>
<div class="text">
<p class="first-p">مثالي لعشاق الألعاب الذين يرغبون
في خوض التجربة بيوم واحد مكثف.
ّ
يوما ً كاملا تستكشف فيه جميع
ً
ِ اقض
البطولات، والواقع :<span class="span_base">THE BASE </span> أركان
الافتراضي، وألعاب الطاولة، وعروض
الكوسبلاي، والمزيد — كل ذلك
بتذكرة واحدة </p>
<p class="first-p"> مثالي لعُشّاقِ الألعاب الذين يرغبون في خوضِ التجربة بيوم واحد مُكثَّف.
يوما كاملا تَستَكشفُ فيه جميعَ أركانِ <span class="span_base">: THE BASE</span>
البطولات، والواقعَ الافتراضيَّ، وألعاب الطاولة، وعروض الكوسبلاي، والمزيد — كل ذلك بتذكرة واحدة.</p>
</div>
......@@ -726,10 +619,10 @@ AND ONLY THE BEST REACH THE TOP.</p>
</div>
<div class="text">
<p class="arab-p">
حصري يتضمن أولوية VIP لمن يبحث عن تجربة استثنائية وشاملة. استمتع بدخول
الدخول، ومقاعد محجوزة في المسرح الرئيسي، وفرص لقاء خلف الكواليس، وباقة
منتجات مميزة. ثلاثة أيام من الألعاب، والرفاهية، والوصول إلى أعلى مستويات
التجربة في <span class="span_base">THE BASE</span>
حصري يتضمَّن أولوِيةَ VIP لِمن يبحث عن تجربة استثنائيّة وشاملة.
استمتِعْ بدخول غيرِ محدود، ومقاعد مَحجوزة في المسرحِ الرئيسيّ، وفُرص لقاء خلف الكواليس، وباقة منتجات مميّزة.
ثلاثةُ أيّام من الألعاب، والرَّفاهية، والوصول إلى أعلى مستويات التجربة في  <span class="span_base">THE BASE</span>.
</p>
......
index.js
View file @ a9c345c1
......@@ -4,6 +4,7 @@
slidesPerView: 7,
spaceBetween: 30,
loop: false,
speed:550,
pagination: {
el: ".swiper-pagination",
clickable: true,
......@@ -37,6 +38,16 @@
spaceBetween: 20
}
}
,
on: {
slideChangeTransitionStart() {
document.querySelector(".swiper_parent").classList.add("show_b");
},
// لما يخلص الحركة
slideChangeTransitionEnd() {
document.querySelector(".swiper_parent").classList.remove("show_b"); }
}
});
const swiper_organize = new Swiper(".organize_slider", {
slidesPerView: 1,
......@@ -77,6 +88,7 @@ let Vr_zone_AR=document.getElementById("Vr_zone_AR")
let playable_games_title=document.getElementById("playable_games_title")
let esports_title=document.getElementById("esports_title")
let e_sport_btn=document.getElementById("e_sport_btn")
let header=document.getElementById("header")
let Ar_flag=true
let user_email=document.getElementById("email")
let user_phone=document.getElementById("phone")
......@@ -107,17 +119,16 @@ function changeLanguage(lang) {
Vr_zone_AR.classList.remove("hidden1")
Vr_zone_en.classList.add("hidden1")
ticketing_btn1.innerHTML=" ticketing"
esports_title.classList.add("En_font")
e_sport_btn.classList.add("En_font")
esports_title.classList.remove("En_font")
ticketing_btn1.classList.remove("En_font")
e_sport_btn.classList.remove("En_font")
playable_games_title.classList.remove("En_font")
playable_games_title.innerHTML="الألعاب المتاحه"
esports_title.innerHTML=" بطولات الرياضات الالكترونية"
e_sport_btn.innerHTML="احجز الان"
ticketing_btn1.innerHTML="احجز الان"
ticketing_btn1.innerHTML=" التذاكر"
e_sport_btn.onclick=function()
{
location.href = "#ticketing_section_ar"
}
document.querySelector(".en_lang").classList.add("colored")
document.querySelector(".en_lang1").classList.add("colored")
document.querySelector(".ar_lang").classList.remove("colored")
......@@ -148,7 +159,8 @@ function changeLanguage(lang) {
playable_games_title.classList.add("En_font")
esports_title.classList.add("En_font")
e_sport_btn.classList.add("En_font")
e_sport_btn.classList.remove("En_font")
ticketing_btn1.classList.add("En_font")
// e_sport_btn.classList.remove("En_font")
ticketing_btn1.innerHTML="Ticketing"
playable_games_title.innerHTML=" PLAYABLE GAMES"
esports_title.innerHTML="E-SPORTS TOURNAMENTS"
......@@ -162,14 +174,15 @@ function changeLanguage(lang) {
}
}
window.onload=function()
{
changeLanguage("en")
}
// document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en"));
// document.querySelector(".en_lang1").addEventListener("click", () => changeLanguage("en"));
// document.querySelector(".ar_lang").addEventListener("click", () => changeLanguage("ar"));
// document.querySelector(".ar_lang1").addEventListener("click", () => changeLanguage("ar"));
// window.onload=function()
// {
// changeLanguage("en")
// }
document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en"));
document.querySelector(".en_lang1").addEventListener("click", () => changeLanguage("en"));
document.querySelector(".ar_lang").addEventListener("click", () => changeLanguage("ar"));
document.querySelector(".ar_lang1").addEventListener("click", () => changeLanguage("ar"));
// =========================
// ==========List Logic===============
let list_btn=document.getElementById("open_list")
......@@ -179,12 +192,21 @@ let buttons = document.querySelectorAll(".right_side_h a");
buttons.forEach(button => {
button.addEventListener("click", () => {
list.classList.add("hidden")
header.classList.remove("PB")
});
});
list_btn.onclick=function()
{
list.classList.toggle("hidden")
if (!list.classList.contains("hidden"))
{
header.classList.add("PB")
}
else
{
header.classList.remove("PB")
}
}
let lastScrollTop = 0;
......@@ -193,6 +215,7 @@ let lastScrollTop = 0;
if (scrollTop > lastScrollTop) {
list.classList.add("hidden")
header.classList.remove("PB")
}
......@@ -226,20 +249,9 @@ window.addEventListener("resize", function() {
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
book_now.onclick = function() {
const targetId = "ticketing_section_ar"
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
book_now1.onclick = function() {
console.log("id")
const targetId = "ticketing_section_ar"
function gotoTic(targetId)
{
// const targetId = "ticketing_section_ar"
const target = document.getElementById(targetId);
if (target) {
......@@ -247,25 +259,9 @@ window.addEventListener("resize", function() {
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
ticketing_ar.onclick = function() {
const targetId = "ticketing_section_ar"
const target = document.getElementById(targetId);
}
if (target) {
target.scrollIntoView({ behavior: "smooth" });
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
// e_sport_btn.onclick=function ()
// {
// if(Ar_flag)
// location.href = "#ticketing_section_ar"
// else
// location.href = "#ticketing_section"
// }
ticketing_btn1.onclick = function() {
const targetId = Ar_flag ? "ticketing_section_ar" : "ticketing_section";
......@@ -281,7 +277,6 @@ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function sendEmail(event)
{
event.preventDefault();
console.log("sendmail")
if(!user_email.value||!user_phone.value)
notify()
else if(!emailPattern.test(user_email.value))
......
style.css
View file @ a9c345c1
......@@ -15,6 +15,9 @@
--font_noor_light: "Noor Light";
--font_noor_bold: "Noor-Bold";
--futura_extrablack_font: "Futura XBLK BT";
--overlay-width: 140px;
--green: rgba(0, 255, 0, 1);
--black: rgba(0, 0, 0, 1);
}
html {
......@@ -430,18 +433,65 @@ header .right_side a:nth-child(4) {
}
.swiper_parent {
background:
position: relative;
/* background:
linear-gradient(to left,
#00ff00 0%,
#00ff00 1%,
#00ff00 6.6%,
var(--bck_color) 7%,
var(--bck_color) 9%,
var(--bck_color) 94%,
var(--bck_color) 97.6%,
#00ff00 98%,
#00ff00 100%);
isolation: isolate; */
}
/* .show_b
{
background: linear-gradient(to left,
#00ff00 0%,
#00ff00 1%,
rgba(0, 0, 0, 0.2) 6.6%,
var(--bck_color) 7%,
var(--bck_color) 9%,
var(--bck_color) 94%,
rgba(0, 0, 0, 0.2) 97.6%,
#00ff00 98%,
#00ff00 100%)
} */
.edge-overlay {
position: absolute;
top: 0;
width: 120px; /* عرض التدرّج */
height: 100%;
pointer-events: none; /* عشان ما تمنع الكليك */
z-index: 10;
}
.edge-overlay.left {
left: 0;
background: linear-gradient(
to right,
#00ff00 0%, /* أخضر ناعم */
rgba(0, 255, 0, 0.2) 60%, /* أفتح */
transparent 100% /* شفاف في الآخر */
);
}
.edge-overlay.right {
right: 0;
background: linear-gradient(
to left,
#00ff00 0%, /* أخضر ناعم */
rgba(0, 255, 0, 0.2) 60%, /* أفتح */
transparent 100% /* شفاف في الآخر */
);
}
.play_games h1 {
text-align: center;
font-family: var(--font_noor_bold);
......@@ -463,6 +513,7 @@ header .right_side a:nth-child(4) {
box-sizing: border-box;
padding: 40px 0 50px 0;
/* z-index: -3; */
/* direction: ltr; */
}
......@@ -489,6 +540,7 @@ header .right_side a:nth-child(4) {
border-radius: 10px;
z-index: -3;
opacity: .8;
transition: transform 0.3s ease;
}
/* Pagination circles */
......@@ -792,6 +844,10 @@ header .right_side a:nth-child(4) {
width: fit-content;
}
.social_accounts .buttonc_parent button
{
font-size: 16px;
}
/* ============================ */
/* ============ Hidden Header== */
......@@ -823,6 +879,15 @@ header .right_side a:nth-child(4) {
cursor: pointer;
text-align: center;
}
.right_side_h a:nth-child(1)
{
font-family: var(--font_noor_bold);
}
.right_side_h a:nth-child(2),
.right_side_h a:nth-child(3)
{
font-family: var(--sora_extrabold);
}
.hidden {
opacity: 0;
......@@ -944,6 +1009,10 @@ header .right_side a:nth-child(4) {
font-size: 31.5px;
margin-top: 80px;
}
.social_accounts .buttonc_parent button
{
font-size: 29.5px;
}
.letters div img {
width: 55%;
height: 50%;
......@@ -1141,6 +1210,10 @@ header .right_side a:nth-child(4) {
{
font-size: 25px;
margin-top: 40px;
}
.social_accounts .buttonc_parent button
{
font-size: 23px;
}
.letters div img
{
......@@ -1238,6 +1311,10 @@ header .right_side a:nth-child(4) {
font-size: 25px;
margin-top: 40px;
}
.social_accounts .buttonc_parent button
{
font-size: 23px;
}
.letters div img
{
width: 48%;
......@@ -1367,6 +1444,10 @@ header .right_side a:nth-child(4) {
font-size: 18px;
margin-top: 40px;
}
.social_accounts .buttonc_parent button
{
font-size: 16px;
}
.letters div img
{
width: 52%;
......@@ -1481,7 +1562,10 @@ header .right_side a:nth-child(4) {
}
@media(max-width:950px) {
.edge-overlay
{
width: 80px;
}
.e_sport > div div .valorant_img, .e_sport > div div .bellingham_img {
transform: translateY(-75px);
}
......@@ -1720,6 +1804,10 @@ header .right_side a:nth-child(4) {
width: 100%;
}
.edge-overlay
{
width: 50px;
}
.hero_section2
{
position: relative;
......@@ -1786,11 +1874,15 @@ header .right_side a:nth-child(4) {
}
.swiper-slide img {
width: 90%;
margin-left: 5%;
width: 80%;
margin-left: 10%;
}
.swiper-pagination-bullet
{
width: 16px;
height: 16px;
}
......@@ -1829,6 +1921,15 @@ header .right_side a:nth-child(4) {
left: 20px;
top: 95px;
}
.letters>div {
width: 90%;
margin-left: 5%;
/* margin-right: 5%; */
}
.letters>div div:nth-child(2)
{
margin-right: 0;
}
}
......@@ -3819,13 +3920,18 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
.casual_av .casual_av_cont .main_img{
height: 620px;
}
.casual_ar .casual_av_cont a
{
font-size: 31.5px;
}
/* ================== */
}
@media(max-width:2000px) {
.casual_av .casual_av_cont a
.casual_av .casual_av_cont a,
.casual_ar .casual_av_cont a
{
font-size: 30px;
}
......@@ -4008,6 +4114,11 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
@media(max-width:1800px) {
.casual_ar .casual_av_cont a
{
font-size: 27px;
}
.casual_av .casual_av_cont .text h1 {
padding-right: 160px;
......@@ -4142,7 +4253,8 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
height: 97%;
}
.casual_av .casual_av_cont a
.casual_av .casual_av_cont a,
.casual_ar .casual_av_cont a
{
font-size: 20px;
}
......@@ -4320,7 +4432,8 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
{
height: 420px;
}
.casual_av .casual_av_cont a
.casual_av .casual_av_cont a,
.casual_ar .casual_av_cont a
{
font-size: 18px;
}
......@@ -4711,6 +4824,31 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
right: 50px;
text-transform: uppercase;
color: var(--text_color);
}
@media(min-width:2200px)
{
.casual_ar .casual_av_cont .text h1:nth-child(1) {
font-size: 60px;
}
.casual_ar .casual_av_cont .text h1 {
font-size: 55px;
line-height: 65px;
width: 90%;
margin-bottom: 10px;
}
.casual_ar .casual_av_cont .text p {
font-size: 30px;
line-height: 45px;
/* color: blue; */
}
.casual_ar .casual_av_cont .img_parent,
.casual_ar .casual_av_cont .main_img{
height: 580px;
margin-top: 26px;
}
}
@media(max-width:2200px)
......@@ -4814,7 +4952,6 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
}
.casual_ar .casual_av_cont a
{
font-size: 24px;
bottom: 40px;
padding: 10px 35px;
}
......@@ -4921,7 +5058,6 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
}
.casual_ar .casual_av_cont a
{
font-size: 20px;
bottom: 40px;
padding: 10px 35px;
}
......@@ -4970,9 +5106,9 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
@media(max-width:800px) {
.casual_ar .casual_av_cont .img_parent, .casual_ar .casual_av_cont .main_img
{
height: 380px;
height: 400px;
margin-top: 0px;
margin-bottom: 20px;
margin-bottom: 0px;
}
.casual_ar .casual_av_cont .img_parent::after {
......@@ -5000,10 +5136,26 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
}
.casual_ar .casual_av_cont a {
font-size: 18px;
bottom: 57px;
padding: 7px 35px;
}
.casual_ar .casual_av_cont .text h1
{
font-size: 25px;
}
.casual_ar .casual_av_cont .text p
{
font-size: 18px;
}
.casual_ar .casual_av_cont .text h1
{
margin-bottom: 30px;
}
.casual_ar .casual_av_cont .text h1:nth-child(1)
{
margin-top: 30px;
margin-bottom: 30px;
}
}
@media(max-width:500px) {
......@@ -5049,7 +5201,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
.casual_ar .casual_av_cont a {
font-size: 14px;
font-size: 16px;
right: 30px;
padding: 5px 15px;
bottom: 55px;
......@@ -5709,8 +5861,9 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
}
.cosplay_ar .cosplay_cont .text h1 {
font-size: 30px;
line-height: 38px;
font-size: 40px;
line-height: 48px;
width: 100%;
}
......@@ -5825,7 +5978,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
.cosplay_ar .cosplay_cont .text h1 {
font-size: 25px;
width: 100%;
line-height: 27px;
line-height: 30px;
}
.cosplay_ar .cosplay_cont .img_parent,
.cosplay_ar .cosplay_cont .main_img {
......@@ -6905,18 +7058,5 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
justify-content: start;
}
}
.fade-black::after {
content: "";
position: absolute;
inset: 0;
background: black;
opacity: 0;
transition: opacity 0.4s;
z-index: 2;
}
/* Fade to black during transition */
.swiper-slide.swiper-slide-prev.fade-black::after,
.swiper-slide.swiper-slide-next.fade-black::after {
opacity: 1;
}
\ No newline at end of file
style2.css
View file @ a9c345c1
......@@ -1195,6 +1195,11 @@
{
font-size: 25px;
}
.btn2_type_s,
.btnn2
{
transform: translateX(46px);
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
......@@ -1206,7 +1211,11 @@
}
@media(max-width:1880px) {
.btn2_type_s,
.btnn2
{
transform: translateX(40px);
}
.ticketing_section .title img
{
width: 500px;
......@@ -1309,9 +1318,21 @@
font-size: 50px;
}
}
@media(max-width:1600px)
{
.btn2_type_s,
.btnn2
{
transform: translateX(37px);
}
}
@media(max-width:1500px) {
.btn2_type_s,
.btnn2
{
transform: translateX(32px);
}
.ticketing_section .ticket_type
{
font-size: 20px;
......@@ -1442,9 +1463,11 @@
.btn2_type,
.btn2_type_s
{
padding: 3px 0px 3px 20px;
padding: 7px 0px 7px 20px;
font-size: 14px;
text-align: start;
/* text-align: start; */
display: flex;
align-items: baseline;
}
.btn2_type_s
{
......@@ -1861,8 +1884,8 @@
.btn2_type_s, .btn2_type, .ticketing_section .btnn2
{
width: 50%;
margin-left: 50%;
width: 60%;
margin-left: 40%;
}
.ticketing_section .days>div:nth-child(1) h1 {
......@@ -2511,7 +2534,7 @@
.vr-image
{
height: 430px;
height: 390px;
/* background: black; */
}
.arb
......@@ -2560,6 +2583,10 @@
line-height: 28px;
}
.vr-image, .vr-con
{
height: 420px;
}
}
@media(max-width:1100px)
......
style3.css
View file @ a9c345c1
......@@ -24,7 +24,7 @@
.hero_sectionh2 {
display: grid;
align-items: start;
padding: 10px 50px 0 50px;
padding: 70px 50px 0 50px;
background-color: #0d0d41;
font-family: "Lalezar", sans-serif;
direction: rtl;
......@@ -458,6 +458,7 @@
.hero-sech25 {
font-size: 25px;
transform: translate(-5px, -70px);
}
......@@ -859,7 +860,7 @@
}
.hero_sectionh2_en .mainiMg1h_en
{
height: 500px;
height: 540px;
}
}
@media(max-width:1600px)
......@@ -917,7 +918,7 @@
}
.hero_desc_en
{
transform: translateX(-40px);
transform: translateX(-60px);
}
.hero_sectionh2_en a
{
......@@ -991,7 +992,7 @@
}
.hero_sectionh2_en a
{
transform: translate(16.5%, 30px);
transform: translate(18.5%, 30px);
font-size: 20px;
}
.hero_sectionh2_en .mainiMg1h_en
......@@ -1063,7 +1064,7 @@
}
.hero_desc_en
{
transform: translateX(-40px);
transform: translate(-40px,-20px);
}
.hero_sectionh2_en a
{
......@@ -1072,7 +1073,7 @@
}
.hero_sectionh2_en .mainiMg1h_en
{
height: 490px;
height: 470px;
}
}
......@@ -1218,3 +1219,7 @@
/* font-size: 16px; */
}
}
.PB
{
padding-bottom: 100px;
}
\ No newline at end of file
t.txt deleted 100644 → 0
View file @ c1669fd3
.hero_sectionh2_en .span_base
{
font-family: var(--sora_font)
}
.hero_sectionh2_en .wordh21 .the {
color: #aa09b4;
margin-right: 15px;
font-family: var(--sora_extrabold);
}
.hero_sectionh2_en .wordh22 {
display: flex;
font-size: 35px;
/* width: 40%; */
transform: translate(56px,0px);
font-weight: 600;
margin-left: 40px;
font-family: var(--noor_font);
}
.hero_sectionh2_en .hero-sech21 {
display: flex;
transform: translate(20px, 10px);
font-size: 25px;
font-weight: 400;
/* width: 35% !important; */
font-family: var(--font_noor_light);
}
.hero_sectionh2_en .hero-sech22 {
display: flex;
transform: translate(20px, -10px);
right: -20px;
/* top: 148px; */
font-size: 40px;
font-weight: 400;
font-family: var(--font_noor_light);
/* width: 35% !important; */
}
.hero_sectionh2_en .hero-sech23 {
display: flex;
font-size: 40px;
font-weight: 400;
/* width: 35% !important; */
font-family: var(--font_noor_light);
transform: translate(10px, -30px);
}
.hero_sectionh2_en .hero-sech24 {
display: flex;
font-size: 40px;
font-weight: 400;
/* width: 35% !important; */
font-family: var(--font_noor_light);
transform: translate(1px, -50px);
right: -8px;
top: 214px;
}
.hero_sectionh2_en .hero-sech25 {
display: flex;
transform: translate(-5px, -80px);
font-size: 40px;
font-weight: 400;
/* width: 35% !important; */
font-family: var(--font_noor_light);
}
.hero_sectionh2_en a {
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 0 50px 50px 0;
background: linear-gradient(90deg, #2f0c5a, #690b84, #a709b2);
padding: 15px 20px;
display: flex;
width: 100%;
height: 8%;
cursor: pointer;
outline: none;
text-align: start;
box-sizing: border-box;
font-size: 20px;
font-family: var(--font_noor_bold);
/* flex-direction: row-reverse; */
transform: translate(-20%, -80px);
}
.hero_sectionh2_en .hero_desc_res_ar a
{
position: relative;
transform: translate(0,0);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment