integrate English

index.js

@@ -3,7 +3,8 @@
   
   slidesPerView: 7,      
   spaceBetween: 30,     
-  loop: false,           
+  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

@@ -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

@@ -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

@@ -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;
     }
 
 }
@@ -1217,4 +1218,8 @@
     {
         /* font-size: 16px; */
     }
+}
+.PB
+{
+    padding-bottom: 100px;
 }
\ No newline at end of file

t.txt

-.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