�[1;36m==> modified : Gallery.html �[0m

�[1;36m==> modified : Script/Gallery.js �[0m �[1;36m==> modified : Style/Gallery.css �[0m �[1;36m==> modified : Style/style.css �[0m �[1;36m==> modified : download.html �[0m �[1;36m==> modified : index.html �[0m �[1;36m==> modified : team.html �[0m �[1;32m==> added : Fonts/ �[0m �[1;32m==> added : Images/Logos/next.png �[0m �[1;32m==> added : Images/Logos/previous.png �[0m
Exodia-OS · Mar 31, 2024 · 18728dc · 18728dc
1 parent a9578c1
commit 18728dc
Show file tree

Hide file tree

Showing 19 changed files with 176 additions and 100 deletions.
diff --git a/Fonts/Squares Black Italic.otf b/Fonts/Squares Black Italic.otf
diff --git a/Fonts/Squares Black.otf b/Fonts/Squares Black.otf
diff --git a/Fonts/Squares Bold Italic.otf b/Fonts/Squares Bold Italic.otf
diff --git a/Fonts/Squares Bold.otf b/Fonts/Squares Bold.otf
diff --git a/Fonts/Squares Italic.otf b/Fonts/Squares Italic.otf
diff --git a/Fonts/Squares Light italic.otf b/Fonts/Squares Light italic.otf
diff --git a/Fonts/Squares Light.otf b/Fonts/Squares Light.otf
diff --git a/Fonts/Squares Regular.otf b/Fonts/Squares Regular.otf
diff --git a/Fonts/Squares Thin Italic.otf b/Fonts/Squares Thin Italic.otf
diff --git a/Fonts/Squares Thin.otf b/Fonts/Squares Thin.otf
diff --git a/Gallery.html b/Gallery.html
@@ -6,23 +6,26 @@
     <title id="pageTitle">Exodia OS 🇵🇸 Free Palestine</title>
     <link rel="icon" href="./Images/Logos/with-bg/exodia-cyan-black-bg.png" type="image/icon type">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Nova+Square&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="Style/style.css">
     <link rel="stylesheet" href="Style/animation.css">
     <link rel="stylesheet" href="Style/Gallery.css">
 </head>
 
 <body>
 
-    <header class="nav">
+    <header class="nav nova-square-regular">
         <div class="container">
             <div class="row nav-back h-100 d-flex justify-content-between align-items-center">
                 <div class="logo col-2"><div class="logo-back"><a href=""><img src="./Images/Logos/exodia-cyan.png" alt=""></a></div></div>
                 <div class="nav-list col-7 d-flex justify-content-between align-items-center  ">
                     <ul class="d-flex justify-content-between gap-5 mt-3">
+                        <li><a href="./index.html"  target="_blank">Home</a></li>
                         <li class="go-commun"><a class="go-commun" href="#">Community</a></li>
                         <li><a href="https://exodia-os.github.io/exodia-website/quickstart/install" target="_blank">Wiki</a></li>
                         <li><a href="https://exodia-os.github.io/exodia-website/Keybinding"  target="_blank">Keybinding</a></li>
-                        <li><a href="https://exodia-os.github.io/exodia-website/themes/themelist"  target="_blank">Gallary</a></li>
                         <li><a href="team.html"  target="_blank">About us</a></li>
                     </ul>
                     <div class="download"><button class="nav-btn btn">Download</button></div>
@@ -33,33 +36,65 @@
     </header>
 
      <!--Header-->
-     <section class="header-Gallery my-5">
+     <section class="header-Gallery nova-square-regular">
         <div class="container h-100 d-flex text-center justify-content-center align-items-center flex-column">
-            <h1 class="my-3 h-grad">Gallery Exodia OS</h1>
+            <h1 class="my-3 h-grad ">Gallery Exodia OS</h1>
             <p id="p-light">Discover our OS features, updates, and support resources.</p>
         </div>
        </section>
 
+
        <div class="spacer"></div>
 
-       <div class="Gallery-slider">
-        <div class="container Gallary-box ">
+
+
+
+
+
+       <div class="Gallery-slider ">
+        <div class="container Gallary-box p-4 ">
             <div class="slider-container">
                 <div class="slider">
                   <div class="slide">
-
-                    <div class="custom-slider">
-                        <div class="custom-slides">
-                          <img src="./Images/bspwm/1.png" alt="Slide 1">
-                          <img src="./Images/bspwm/2.png" alt="Slide 2">
-                          <img src="./Images/bspwm/3.png" alt="Slide 3">
+                        <h1 class="h-grad my-5">BSPWM</h1>
+                        <div class="custom-slider">
+                         <img class="custom-prev" src="./Images/Logos/previous.png" alt="">
+                            <div class="custom-slides">
+                            <img src="./Images/bspwm/13.png" alt="Slide 1">
+                            <img src="./Images/bspwm/6.png" alt="Slide 2">
+                            <img src="./Images/bspwm/7.png" alt="Slide 3">
+                            <img src="./Images/bspwm/8.png" alt="Slide 1">
+                            <img src="./Images/bspwm/10.png" alt="Slide 2">
+                            <img src="./Images/bspwm/12.png" alt="Slide 3">
+                            <img src="./Images/bspwm/3.png" alt="Slide 1">
+                            <img src="./Images/bspwm/14.png" alt="Slide 2">
+                            <img src="./Images/bspwm/17.png" alt="Slide 3">
+                            <img src="./Images/bspwm/18.png" alt="Slide 1">
+                            <img src="./Images/bspwm/29.png" alt="Slide 2">
+                            <img src="./Images/bspwm/30.png" alt="Slide 3">
                         </div>
-                        <button class="custom-prev">Prev</button>
-                        <button class="custom-next">Next</button>
+                        <img class="custom-next" src="./Images/Logos/next.png" alt="">
+
                       </div>
+                  </div>
+                  <div class="slide">
+
+                    <h1 class="h-grad my-5">I3WM</h1>
+                    <div class="custom-slider">
+                     <img class="custom-prev-2" src="./Images/Logos/previous.png" alt="">
+                        <div class="custom-slides-2">
+                        <img src="./Images/i3wm/4.png" alt="Slide 1">
+                        <img src="./Images/i3wm/2.png" alt="Slide 1">
+                        <img src="./Images/i3wm/3.png" alt="Slide 1">
+                        <img src="./Images/i3wm/1.png" alt="Slide 1">
+
+
+                    </div>
+                    <img class="custom-next-2" src="./Images/Logos/next.png" alt="">
 
                   </div>
-                  <div class="slide">Slide 2</div>
+
+                </div>
                   <div class="slide">Slide 3</div>
                   <!-- Add more slides as needed -->
                 </div>
@@ -68,9 +103,7 @@ <h1 class="my-3 h-grad">Gallery Exodia OS</h1>
                   <div class="slider-bullets"></div>
                   <div class="next-arrow">&gt;</div>
                 </div>
-              </div>
-
-
+            </div>
         </div>
        </div>
 
@@ -117,22 +150,7 @@ <h1 class="my-3 h-grad">Gallery Exodia OS</h1>
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+       <div class="spacer"></div>
 
 
 

diff --git a/Images/Logos/next.png b/Images/Logos/next.png
diff --git a/Images/Logos/previous.png b/Images/Logos/previous.png
diff --git a/Script/Gallery.js b/Script/Gallery.js
@@ -1,48 +1,43 @@
-/*
-let currentSlide = 0;
-  const slides = document.querySelectorAll('.slide');
-  const totalSlides = slides.length;
-
-  const showSlide = (index) => {
-    if (index < 0) {
-      currentSlide = totalSlides - 1;
-    } else if (index >= totalSlides) {
-      currentSlide = 0;
-    } else {
-      currentSlide = index;
-    }
 
-    const offset = -100 * currentSlide;
-    document.querySelector('.slider').style.transform = `translateX(${offset}%)`;
-    updateSliderNav();
-  };
-
-  const updateSliderNav = () => {
-    document.querySelectorAll('.slider-nav button').forEach((button, index) => {
-      if (index === currentSlide) {
-        button.classList.add('active');
-      } else {
-        button.classList.remove('active');
-      }
-    });
-  };
 
-  document.querySelector('.prev').addEventListener('click', () => showSlide(currentSlide - 1));
-  document.querySelector('.next').addEventListener('click', () => showSlide(currentSlide + 1));
 
-  // Automatic slideshow
-  setInterval(() => {
-    showSlide(currentSlide + 1);
-  }, 3000); // Change slide every 3 seconds
+
+// JavaScript to scroll to section
+document.addEventListener("DOMContentLoaded", function() {
+  const scrollLinks = document.querySelectorAll('.go-commun');
+  scrollLinks.forEach(function(scrollLink) {
+      scrollLink.addEventListener("click", function(event) {
+          event.preventDefault(); // Prevent default anchor behavior
+
+          const targetSections = document.querySelectorAll(".icon-cy");
+
+          targetSections.forEach(targetSection => {
+              targetSection.scrollIntoView({ behavior: 'smooth' });
+              targetSection.classList.add('flashing');
+
+              setTimeout(() => {
+                  targetSection.classList.remove('flashing');
+              }, 10000); 
+          }); 
+      });
+  });
+});
+
 
 
 
-*/
+/* Download button */ 
 
+document.querySelector(".nav-btn").addEventListener("click", function() {
+  window.open("download.html", "_blank");
+
+});
 
 
 
 
+  /* Div Slider */
+
   $(document).ready(function() {
     const slides = $('.slide');
     const bulletContainer = $('.slider-bullets');
@@ -93,24 +88,12 @@ let currentSlide = 0;
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-  $(document).ready(function(){
+/* Photo Slider */
+
+$(document).ready(function(){
     var currentIndex = 0;
     var slides = $('.custom-slides img');
     var totalSlides = slides.length;
-
     $('.custom-next').click(function(){
       goToSlide(currentIndex + 1);
     });
@@ -130,4 +113,30 @@ let currentSlide = 0;
       currentIndex = index;
     }
   });
+
+
+
+  $(document).ready(function(){
+    var currentIndex_2 = 0;
+    var slides = $('.custom-slides-2 img');
+    var totalSlides = slides.length;
+    $('.custom-next-2').click(function(){
+      goToSlide(currentIndex_2 + 1);
+    });
+
+    $('.custom-prev-2').click(function(){
+      goToSlide(currentIndex_2 - 1);
+    });
+
+    function goToSlide(index) {
+      if (index < 0) {
+        index = totalSlides - 1;
+      } else if (index >= totalSlides) {
+        index = 0;
+      }
+      slides.hide();
+      slides.eq(index).fadeIn();
+      currentIndex_2 = index;
+    }
+  });