add banner and fix lang btn

Author: zaidalyafeai

assets/css/custom.css

@@ -27,8 +27,14 @@ td {
   margin-left: 5px;
 }
 
+.btn-danger {
+  color: #fff;
+  background-color: #f95858;
+  border-color: #f95858;
+}
+
 .arbml-color {
-  background-color: #f95959;
+  background-image: linear-gradient(to right, #ff6b6b , #efeb5940);
 }
 
 .arbml-color-2 {

assets/js/index_translate.js

@@ -16,7 +16,7 @@ let fetchLang = async () => {
   news_body_four_link.innerHTML = "post";
 
   ar.addEventListener("click", () => {
-    translate_btn.innerHTML = "Arabic";
+    // translate_btn.innerHTML = "Arabic";
 
     publications.innerHTML = data.ar.publications;
     talks.innerHTML = data.ar.talks;
@@ -62,7 +62,7 @@ let fetchLang = async () => {
   });
 
   en.addEventListener("click", () => {
-    translate_btn.innerHTML = "English",
+    // translate_btn.innerHTML = "English"
 
     publications.innerHTML = data.en.publications;
     talks.innerHTML = data.en.talks;

assets/js/publication_translate.js

@@ -10,7 +10,7 @@ let fetchLang = async () => {
     // let ar_style = document.getElementById("ar_style");
 
     ar.addEventListener("click", () => {
-      translate_btn.innerHTML = "Arabic";
+      // translate_btn.innerHTML = "Arabic";
 
       publications.innerHTML = data.ar.publications;
       publications_title.innerHTML = data.ar.publications_title;
@@ -20,7 +20,7 @@ let fetchLang = async () => {
     });
 
     en.addEventListener("click", () => {
-      translate_btn.innerHTML = "English",
+      // translate_btn.innerHTML = "English",
 
       publications.innerHTML = data.en.publications;
       publications_title.innerHTML= data.en.publications_title;

assets/js/talks_translate.js

@@ -10,7 +10,7 @@ let fetchLang = async () => {
     let ar_style = document.getElementById("ar_style");
 
     ar.addEventListener("click", () => {
-      translate_btn.innerHTML = "Arabic";
+      // translate_btn.innerHTML = "Arabic";
 
       publications.innerHTML = data.ar.publications;
       talks.innerHTML = data.ar.talks;
@@ -20,7 +20,7 @@ let fetchLang = async () => {
     });
 
     en.addEventListener("click", () => {
-      translate_btn.innerHTML = "English",
+      // translate_btn.innerHTML = "English",
 
       publications.innerHTML = data.en.publications;
       talks.innerHTML = data.en.talks;

index.html

@@ -42,17 +42,16 @@
                      <a class="nav-item nav-link" href="talks.html" id="talks">Talks</a>
                   </li>
 
-                  <div class="dropdown nav-item translate-btn">
-                     <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="translate_btn">
-                       Translate website
+                  <div class="btn-group">
+                     <button type="button" class="btn btn-danger">Language</button>
+                     <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                       <span class="visually-hidden">Toggle Dropdown</span>
                      </button>
                      <ul class="dropdown-menu">
-                       <li><a class="dropdown-item" href="#ar" id="ar" reload>Arabic</a></li>
-                       <li><a class="dropdown-item" href="#en" id="en" reload>English</a></li>
+                       <li><a class="dropdown-item" id="ar" href ="#">Arabic</a></li>
+                       <li><a class="dropdown-item" id="en" href ="#">English</a></li>
                      </ul>
                    </div>
-                </ul>
-               </div>
 
               </div>
             </div>