From 280048e594ec8e45a65c3afd56505c38db660a18 Mon Sep 17 00:00:00 2001
From: Anish Neupane <anishnep51@gmail.com>
Date: Sun, 15 Sep 2024 10:13:29 +0545
Subject: [PATCH] Navbar links fixed and added go to top arrow in home

---
 assets/hero/arrow.svg |  1 +
 css/output.css        | 28 ++++++++++++++++++++++------
 index.html            | 33 ++++++++++++++++++++++++---------
 js/navbar.js          | 17 ++++++++++++-----
 4 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 assets/hero/arrow.svg

diff --git a/assets/hero/arrow.svg b/assets/hero/arrow.svg
new file mode 100644
index 0000000..8acc992
--- /dev/null
+++ b/assets/hero/arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>
\ No newline at end of file
diff --git a/css/output.css b/css/output.css
index bbda4d0..fd144eb 100644
--- a/css/output.css
+++ b/css/output.css
@@ -691,6 +691,14 @@ video {
   top: 3.5rem;
 }
 
+.bottom-12 {
+  bottom: 3rem;
+}
+
+.right-12 {
+  right: 3rem;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -940,8 +948,8 @@ video {
   max-height: 100vh;
 }
 
-.min-h-36 {
-  min-height: 9rem;
+.min-h-48 {
+  min-height: 12rem;
 }
 
 .min-h-dvh {
@@ -953,10 +961,6 @@ video {
   min-height: fit-content;
 }
 
-.min-h-48 {
-  min-height: 12rem;
-}
-
 .w-1 {
   width: 0.25rem;
 }
@@ -1045,6 +1049,10 @@ video {
   width: 100%;
 }
 
+.min-w-20 {
+  min-width: 5rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1231,6 +1239,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1469,6 +1481,10 @@ video {
   padding-top: 1.5rem;
 }
 
+.pt-7 {
+  padding-top: 1.75rem;
+}
+
 .text-left {
   text-align: left;
 }
diff --git a/index.html b/index.html
index c97b19e..43994ea 100644
--- a/index.html
+++ b/index.html
@@ -56,6 +56,8 @@
     </div>
   </section> 
 
+<button id="scroll-to-top" class="hidden fixed bottom-12 right-12 z-50 bg-[#208820] rounded p-3" onclick="goToTop()"><img src="/assets//hero/arrow.svg" alt="Top"></button>
+
 <section
     class="flex h-[460px] overflow-hidden w-auto content-center items-center justify-around sm:justify-center p-2 sm:gap-10 md:gap-16 lg:gap-40 xl:gap-56">
     <img src="/assets/timer/timer_bg.svg" alt="Timer Background" class="absolute h-96 lg:h-fit object-cover object-left lg:object-cover w-full">
@@ -103,7 +105,7 @@
     </div>
   </section> 
 
-<section class="flex flex-col-reverse lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">
+<section id="about-sfd-section" class="flex flex-col-reverse lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">
   
     <div class="flex w-full lg:w-[52%] justify-center flex-col gap-4 lg:gap-6 xl:gap-8 items-center lg:items-start">
       <div class="flex items-center justify-between w-full flex-col gap-8 lg:flex-row">
@@ -132,8 +134,8 @@
           In 2024, NOSK is returning with an even grander edition of Software Freedom Day. This year's event promises to be the largest yet, where developers and enthusiasts can showcase their love for open source.</span>
       </div>
       <div>
-        <button class="md:w-32 w-[11.5rem] h-12 FFDD50 text-center bg-[#FFDD50] hover:bg-transparent group hover:border-solid hover:border-2 hover:border-[#FFDD50] shadow-lg">
-          <a href="#" target="_blank" class="text-center text-black text-base font-bold">LEARN MORE</a>
+        <button class="transition w-full px-4 h-12 FFDD50 text-center bg-[#FFDD50] hover:bg-transparent group hover:border-solid hover:border-2 hover:border-[#FFDD50] shadow-lg">
+          <a href="https://forms.gle/dLoKZifnSpCnUgPdA" target="_blank" class="text-center text-black text-base font-bold block min-w-20">REGISTER NOW</a>
         </button>
       </div>
     </div>
@@ -164,9 +166,7 @@
   </section> 
   
   
-  <section class="flex flex-col lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">
-  
-
+<section id="about-nosk-section" class="flex flex-col lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">
     <div class="flex w-full lg:w-[48%] justify-center flex-col items-center">
       <img
         src="../assets/shared/nosk_logo.svg"
@@ -235,7 +235,7 @@
 
   <section class="mt-7 min-h-dvh w-full px-[8%]">
     <div>
-      <div class="w-full text-center text-4xl font-bold">Event Activities</div>
+      <div class="w-full text-center text-3xl sm:text-4xl font-bold">Event Activities</div>
       <div class="mr-4 flex flex-col items-center justify-center">
         <span class="ml-1 inline-block w-28 sm:w-40 h-2 border-b-4 border-solid border-[#FFCD29]"></span>
         <span class="ml-1 inline-block w-36 sm:w-48 h-2 border-b-4 border-solid border-[#208820]"></span>
@@ -254,9 +254,9 @@
     <p class=" text-3xl sm:text-5xl md:6xl lg:text-7xl font-bold text-white">Learn - Enjoy - Discover</p>
   </section>  
 
-  <section class="mt-7 min-h-fit w-full px-[8%]">
+  <section id="sponsors-section" class="pt-7 min-h-fit w-full px-[8%]">
     <div>
-      <div class="w-full text-center text-4xl font-bold">Sponsors and Partners</div>
+      <div class="w-full text-center text-3xl sm:text-4xl font-bold">Sponsors and Partners</div>
       <div class="mr-4 flex flex-col items-center justify-center">
         <span class="ml-1 inline-block w-28 sm:w-40 h-2 border-b-4 border-solid border-[#FFCD29]"></span>
         <span class="ml-1 inline-block w-36 sm:w-48 h-2 border-b-4 border-solid border-[#208820]"></span>
@@ -277,6 +277,21 @@
   <script src="/js/sponsors.js"></script>
   <script src="/js/footer.js"></script>
   <script>
+    //For Scroll to rop
+    window.onscroll = function () { scrollFunction() };
+    function scrollFunction() {
+      const button = document.getElementById("scroll-to-top")
+      if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
+        button.style.display = "block"
+      }else{
+        button.style.display = "none"
+      }
+    }
+
+    function goToTop(){
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
 
     document.addEventListener("DOMContentLoaded", () => {
       const sfdDate = new Date("2024-09-21T10:00:00");
diff --git a/js/navbar.js b/js/navbar.js
index 725df71..536c20f 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -18,12 +18,12 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
                 class="hidden lg:absolute *:text-black lg:group-hover/about:block lg:bg-white text-base z-10 list-none divide-y divide-gray-100 lg:rounded lg:shadow w-full lg:w-44 font-normal">
                 <ul class="py-1" aria-labelledby="dropdownLargeButton">
                     <li>
-                        <a href="/pages/aboutsfd.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">About
-                            SFD</a>
+                        <span onclick="scrollNav('about-sfd-section')" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">About
+                            SFD</span>
                     </li>
                     <li>
-                        <a href="https://nosk.org.np/site/html/about.html"
-                            class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">About NOSK</a>
+                        <span onclick="scrollNav('about-nosk-section')"
+                            class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2 hover:cursor-pointer">About NOSK</span>
                     </li>
                     <li>
                         <a href="/pages/gallery.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Gallery</a>
@@ -32,7 +32,7 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
                         <a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Speakers</a>
                     </li>
                     <li>
-                        <a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</a>
+                        <span onclick="scrollNav('sponsors-section')" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</span>
                     </li>
                 </ul>
             </div>
@@ -81,6 +81,13 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
 </nav>
 `;
 
+const scrollNav = (id)=>{
+    document.getElementById(id).scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+    });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   //To Insert the Navbar in the page
   const body = document.querySelector("#body").innerHTML;