Merge pull request #26 from NabinPaudel001/sfd-2024

gallery_updates
noskofficial · Sep 12, 2024 · 0f1690a · 0f1690a
2 parents 440d7e5 + df5dc1b
commit 0f1690a
Show file tree

Hide file tree

Showing 7 changed files with 333 additions and 90 deletions.
diff --git a/css/output.css b/css/output.css
@@ -554,6 +554,40 @@ video {
   --tw-contain-style:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .bg-grid {
   background-color: #f6f6ff;
   background-image: linear-gradient(
@@ -622,14 +656,6 @@ video {
   z-index: 50;
 }
 
-.col-span-1 {
-  grid-column: span 1 / span 1;
-}
-
-.col-span-3 {
-  grid-column: span 3 / span 3;
-}
-
 .col-start-6 {
   grid-column-start: 6;
 }
@@ -855,10 +881,6 @@ video {
   height: 8.5rem;
 }
 
-.h-auto {
-  height: auto;
-}
-
 .h-full {
   height: 100%;
 }
@@ -867,6 +889,10 @@ video {
   height: 100vh;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -967,22 +993,14 @@ video {
   max-width: 48rem;
 }
 
-.max-w-7xl {
-  max-width: 80rem;
+.max-w-6xl {
+  max-width: 72rem;
 }
 
 .max-w-full {
   max-width: 100%;
 }
 
-.max-w-5xl {
-  max-width: 64rem;
-}
-
-.max-w-6xl {
-  max-width: 72rem;
-}
-
 .-rotate-180 {
   --tw-rotate: -180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -996,14 +1014,14 @@ video {
   list-style-type: none;
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1113,10 +1131,6 @@ video {
   border-radius: 9999px;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1125,6 +1139,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1250,6 +1268,11 @@ video {
   background-repeat: no-repeat;
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -1503,6 +1526,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1607,6 +1635,12 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 768px) {
   .md\:top-\[4\.75rem\] {
     top: 4.75rem;
@@ -1652,10 +1686,6 @@ video {
     width: auto;
   }
 
-  .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
   .md\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
@@ -1708,6 +1738,10 @@ video {
     width: auto;
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }

diff --git a/gallery.json b/gallery.json
@@ -0,0 +1,22 @@
+[
+    {
+        "image": "image1.png",
+        "date": "9 Sep",
+        "description": "Pre Event Meetup"
+    },
+    {
+        "image": "image2.png",
+        "date": "10 Sep",
+        "description": "Event Planning"
+    },
+    {
+        "image": "path/to/your/image3.png",
+        "date": "11 Sep",
+        "description": "Sponsor Outreach"
+    },
+    {
+        "image": "path/to/your/image3.png",
+        "date": "11 Sep",
+        "description": "Sponsor Outreach"
+    }
+]
diff --git a/js/gallery.js b/js/gallery.js
@@ -0,0 +1,27 @@
+// Fetch the gallery data from the JSON file and insert it into the HTML
+fetch("../gallery.json") // Adjusted path to gallery.json
+  .then((response) => response.json())
+  .then((data) => {
+    const galleryContainer = document.getElementById("gallery");
+    data.forEach((item) => {
+      const galleryItem = document.createElement("div");
+      galleryItem.classList.add(
+        "block",
+        "bg-white",
+        "shadow-md",
+        "rounded-lg",
+        "overflow-hidden",
+      );
+
+      galleryItem.innerHTML = `
+                <img class="w-full h-64 object-cover" src="${item.image}" alt="${item.description}">
+                <div class="p-4">
+                    <p class="font-semibold text-lg mb-2">${item.date}</p>
+                    <p class="text-gray-600">${item.description}</p>
+                </div>
+            `;
+
+      galleryContainer.appendChild(galleryItem);
+    });
+  })
+  .catch((error) => console.error("Error loading gallery data:", error));
diff --git a/js/navbar.js b/js/navbar.js
@@ -26,7 +26,7 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
                             class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">About NOSK</a>
                     </li>
                     <li>
-                        <a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Gallery</a>
+                        <a href="/pages/gallery.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Gallery</a>
                     </li>
                     <li>
                         <a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</a>
@@ -67,49 +67,52 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
 </nav>
 `;
 
-document.addEventListener('DOMContentLoaded', () => {
-    //To Insert the Navbar in the page
-    const body = document.querySelector("#body").innerHTML;
-    document.querySelector("#body").innerHTML = navCode + body
+document.addEventListener("DOMContentLoaded", () => {
+  //To Insert the Navbar in the page
+  const body = document.querySelector("#body").innerHTML;
+  document.querySelector("#body").innerHTML = navCode + body;
 
-    //For Hamburger menu
-    const hamMenu = document.getElementById("hamMenu")
-    const navList = document.getElementById("nav-list")
-    hamMenu.addEventListener("click", () => {
-        let srcNow = hamMenu.getAttribute("src")
-        if (srcNow == "../assets/navbar/hamMenu.svg") {
-            hamMenu.setAttribute("src", "../assets/navbar/closeMenu.svg")
-        } else {
-            hamMenu.setAttribute("src", "../assets/navbar/hamMenu.svg")
-        }
-        navList.classList.toggle("right-0")
-        navList.classList.toggle("-right-full")
-    })
+  //For Hamburger menu
+  const hamMenu = document.getElementById("hamMenu");
+  const navList = document.getElementById("nav-list");
+  hamMenu.addEventListener("click", () => {
+    let srcNow = hamMenu.getAttribute("src");
+    if (srcNow == "../assets/navbar/hamMenu.svg") {
+      hamMenu.setAttribute("src", "../assets/navbar/closeMenu.svg");
+    } else {
+      hamMenu.setAttribute("src", "../assets/navbar/hamMenu.svg");
+    }
+    navList.classList.toggle("right-0");
+    navList.classList.toggle("-right-full");
+  });
 
-    //For Hamburger Menu bhitra ko
-    const aboutButton = document.getElementById("about")
-    const aboutMenu = document.getElementById("about-menu")
-    const aboutDrop = document.getElementById("about-drop")
-    const activitiesButton = document.getElementById("activities")
-    const activitiesMenu = document.getElementById("activities-menu")
-    const activitiesDrop = document.getElementById("activities-drop")
-    aboutButton.addEventListener("click", () => {
-        aboutMenu.classList.toggle("hidden")
-        aboutDrop.classList.toggle("-rotate-180")
-    })
-    activitiesButton.addEventListener("click", () => {
-        activitiesMenu.classList.toggle("hidden")
-        activitiesDrop.classList.toggle("-rotate-180")
-    })
+  //For Hamburger Menu bhitra ko
+  const aboutButton = document.getElementById("about");
+  const aboutMenu = document.getElementById("about-menu");
+  const aboutDrop = document.getElementById("about-drop");
+  const activitiesButton = document.getElementById("activities");
+  const activitiesMenu = document.getElementById("activities-menu");
+  const activitiesDrop = document.getElementById("activities-drop");
+  aboutButton.addEventListener("click", () => {
+    aboutMenu.classList.toggle("hidden");
+    aboutDrop.classList.toggle("-rotate-180");
+  });
+  activitiesButton.addEventListener("click", () => {
+    activitiesMenu.classList.toggle("hidden");
+    activitiesDrop.classList.toggle("-rotate-180");
+  });
 
-    //For NavItem highlighting
-    const pathName = window.location.pathname
-    let splittedPath = pathName.split("/")
-    const currentPage = splittedPath[splittedPath.length - 1].replace(".html", "")
-    const navChildren = document.querySelector("#nav-list").children
-    for (navChild of navChildren) {
-        if (currentPage.includes(navChild.id)) {
-            navChild.style = "color: #E4554E"
-        }
+  //For NavItem highlighting
+  const pathName = window.location.pathname;
+  let splittedPath = pathName.split("/");
+  const currentPage = splittedPath[splittedPath.length - 1].replace(
+    ".html",
+    "",
+  );
+  const navChildren = document.querySelector("#nav-list").children;
+  for (navChild of navChildren) {
+    if (currentPage.includes(navChild.id)) {
+      navChild.style = "color: #E4554E";
     }
-})
+  }
+});