AbhiDiva96 · Vipullakum007 · Jun 12, 2024 · Jun 12, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,8 @@ import Footer from "./pages/footer";
 import Home from "./components/page1/Home";
 import Notice from "./components/page2/notice";
 import LoginSignup from './components/login/LoginSignup';
+import ScrollToTopButton from './components/ScrollToTopButton';
+
 
 // import { ThemeProvider } from './components/ThemeContext';
 // const ThemeContext = createContext();
@@ -30,7 +32,7 @@ function App() {
          {/* <Timetable /> */}
          <Home />
         <Footer/>
-
+        <ScrollToTopButton />
     {/* </div> */}
     {/* </ThemeContext.Provider> */}
 

diff --git a/src/components/ScrollToTopButton.css b/src/components/ScrollToTopButton.css
@@ -0,0 +1,29 @@
+/* src/components/ScrollToTopButton.css */
+.scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.scroll-to-top-button {
+    /* background-color: #007bff; */
+    /* color: rgb(0, 0, 0); */
+    border: none;
+    border-radius: 10%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    font-size: larger;
+    /* font-weight: bolder; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.5s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.scroll-to-top-button:hover {
+    transform: scale(1.1);
+}
+
diff --git a/src/components/ScrollToTopButton.js b/src/components/ScrollToTopButton.js
@@ -0,0 +1,43 @@
+// src/components/ScrollToTopButton.js
+import React, { useState, useEffect } from 'react';
+import './ScrollToTopButton.css'; // Create a CSS file for styling
+import { FaArrowCircleUp } from 'react-icons/fa';
+
+const ScrollToTopButton = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Show button when page is scrolled down
+    const toggleVisibility = () => {
+        if (window.scrollY > 0) {
+            setIsVisible(true);
+        } else {
+            setIsVisible(false);
+        }
+    };
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', toggleVisibility);
+        return () => window.removeEventListener('scroll', toggleVisibility);
+    }, []);
+
+    return (
+        <div className="scroll-to-top">
+            {isVisible && (
+
+                < FaArrowCircleUp onClick={scrollToTop} className="scroll-to-top-button" />
+                // <button onClick={scrollToTop} className="scroll-to-top-button">
+
+                // </button>
+            )}
+        </div>
+    );
+};
+
+export default ScrollToTopButton;
diff --git a/src/components/page1/Home.js b/src/components/page1/Home.js
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 import '../page1/Home.css';
 import {Link} from 'react-router-dom';
+import ScrollToTopButton from '../ScrollToTopButton';
 import { ThemeContext } from '../../Content/context';
 
 function Home() {
@@ -68,6 +69,7 @@ function Home() {
 
 
      </div>
+     <ScrollToTopButton />
     </div>
   )
 }

diff --git a/src/components/page2/notice.js b/src/components/page2/notice.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import '../page2/notice.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 function notice() {
   return (
     <div className='notices'>
       <span>Get you syllabus notes timetable quantum and many more</span>
+      <ScrollToTopButton />
     </div>
   )
 }

diff --git a/src/components/page3/1Year.js b/src/components/page3/1Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 function fstYear() {
   return (
 <div>
@@ -68,6 +69,7 @@ function fstYear() {
 </div>
 
 </div>
+<ScrollToTopButton />
 </div>
   )
 }

diff --git a/src/components/page3/2Year.js b/src/components/page3/2Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 function sndYear() {
   return (
     <div>
@@ -67,6 +68,7 @@ function sndYear() {
 </div>
 </div>
 </div>
+<ScrollToTopButton />
 {/* <Footer /> */}
   </div>
   )

diff --git a/src/components/page3/3Year.js b/src/components/page3/3Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 function TrdYear() {
@@ -69,6 +70,7 @@ function TrdYear() {
 </div>
 </div>
 </div>
+<ScrollToTopButton />
 {/* <Footer /> */}
     </div>
   )

diff --git a/src/components/page3/4Year.js b/src/components/page3/4Year.js
@@ -10,6 +10,7 @@ import timetable from '../../assets/sec-3A.jpg';
 import syllabus from '../../assets/syllabuswt.jpg';
 
 import ComingSoon from '../../pages/cs.js'
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
 function fothYear() {
@@ -44,7 +45,7 @@ function fothYear() {
 
   </div>
   </div>
-
+<ScrollToTopButton />
   </div>
 
     )

diff --git a/src/components/page4/lecture.js b/src/components/page4/lecture.js
@@ -5,12 +5,13 @@ import cn from '../../assets/computerNetwork.jpg';
 import da from '../../assets/dataAnalytics.jpg';
 import dbms from '../../assets/dbms.jpg';
 import daa from '../../assets/daa.jpg';
-import mlt from '../../assets/mlt.jpg'
+import mlt from '../../assets/mlt.jpg';
 import cd from '../../assets/compilerdesign.jpg';
 import oops from '../../assets/oops.jpg';
 import wt from '../../assets/wt.jpg';
 import se from '../../assets/se.jpg';
 import bd from '../../assets/bd.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
 import {FaMagnifyingGlass } from 'react-icons/fa6'
 import NoResultsFound from '../noResultsFound/index.js'
 
@@ -21,10 +22,10 @@ function Lecture() {
   // Array of lecture items
   const lectureItems = [
     { title: 'Compiler Design', image: cd, link: 'https://www.youtube.com/watch?v=zaZU4zSdQ1U&list=PL_obO5Qb5QTEZrWlX_B19OV5nJViKGnnC' },
-    { title: 'Data analytics', image: da, link: 'https://www.youtube.com/watch?v=FyxA8JsKn90&list=PL1uhi2_UdvkDp2KlegPmEjmF70O3WUODA' },
+    { title: 'Data Analytics', image: da, link: 'https://www.youtube.com/watch?v=FyxA8JsKn90&list=PL1uhi2_UdvkDp2KlegPmEjmF70O3WUODA' },
     { title: 'Design Analysis and Algorithm', image: daa, link: 'https://www.youtube.com/watch?v=twE1eiO7gEE&list=PL-JvKqQx2Atd--1Gs3WB8nmWOWRbEM7WW' },
     { title: 'Machine Learning', image: mlt, link: 'https://www.youtube.com/watch?v=OZkYkWYNTRo&list=PL5vhyNmOQ5ORE-wzDcfhQZiRM7jESvzhD' },
-    { title: 'DataBase Management system', image: dbms, link: 'https://www.youtube.com/watch?v=Agz0dyRu2uI&list=PL_obO5Qb5QTGDsMsl16VLKAxtaTqJRjER' },
+    { title: 'DataBase Management System', image: dbms, link: 'https://www.youtube.com/watch?v=Agz0dyRu2uI&list=PL_obO5Qb5QTGDsMsl16VLKAxtaTqJRjER' },
     { title: 'Computer Network', image: cn, link: 'https://www.youtube.com/watch?v=04A4PRikkCY&list=PL-JvKqQx2AteLNR8UO4UQiDmQF-Wotu5G' },
     { title: 'OOPs', image: oops, link: 'https://www.youtube.com/watch?v=82ba_at_TkM&list=PLDt-fuLi9lO9cej3TpU6_umkt_KSM8H7b' },
     { title: 'Web Technology', image: wt, link: 'https://www.youtube.com/watch?v=M8i-1oeHaDw&list=PL-JvKqQx2Atf5w_httliQrmqPpL7oLc-W' },
@@ -45,13 +46,12 @@ function Lecture() {
         <h1>Lecture</h1>
       </div>
       {/* Input field for search */}
-      <div class='inputDiv'>
-      <FaMagnifyingGlass className='left'/>
-
+      <div className="inputDiv">
+        <FaMagnifyingGlass className="left" />
         <input
-          type='text'
-          className='inputField'
-          placeholder='Search For Lectures ...'
+          type="text"
+          className="inputField"
+          placeholder="Search For Lectures ..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
@@ -70,6 +70,7 @@ function Lecture() {
         ))}
       </div>
       : <NoResultsFound />}
+       <ScrollToTopButton />
     </div>
   );
 }

diff --git a/src/components/page4/notes.js b/src/components/page4/notes.js
@@ -4,6 +4,7 @@ import Header from '../../pages/header';
 import ComingSoon from '../../pages/cs.js';
 
 import '../page4/notes.css';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 function notes() {
   return (
     <div >
@@ -16,6 +17,7 @@ function notes() {
  </div> */}
 
   <ComingSoon/>
+  <ScrollToTopButton />
     </div>
   )
 }

diff --git a/src/components/page4/pyq.js b/src/components/page4/pyq.js
@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
-import './Pyq.css'; 
+import './Pyq.css';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function Pyq() {
   const yearFiles = [
@@ -78,64 +79,68 @@ function Pyq() {
     downloadFile(filePath);
   };
 
-  const { id } = useParams(); 
+  const { id } = useParams();
   const yearItem = yearFiles.find((item) => item.year === id);
   const [selectedSemester, setSelectedSemester] = useState(null);
 
   return (
-    <div className="page-container">
-      <Header />
-      <div className="container-pyq">
-        <h2 className='head'>Download Previous Year Questions</h2>
-        {yearItem && <h3 className='year-heading'>{yearItem.year} Year</h3>}
-        <div className="content-container">
-          <div className="pyq-box">
-            {!selectedSemester ? (
-              <div className="semester-selection">
-                <button className="semester-button" onClick={() => setSelectedSemester('odd')}>Odd Semester</button>
-                <button className="semester-button" onClick={() => setSelectedSemester('even')}>Even Semester</button>
-              </div>
-            ) : (
-              yearItem ? (
-                <div className="semester-container">
-                  <div className="subjects-container">
-                    {selectedSemester === 'odd' ? yearItem.oddSemesters.subjects.map((subject, subjIndex) => (
-                      <div key={subjIndex} className="subject-box">
-                        <h4 className="subject-title">{subject.name}</h4>
-                        <ul>
-                          {subject.files.map((file, fileIndex) => (
-                            <li key={fileIndex} className="file-item">
-                              <span>{file}</span>
-                              <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    )) : yearItem.evenSemesters.subjects.map((subject, subjIndex) => (
-                      <div key={subjIndex} className="subject-box">
-                        <h4 className="subject-title">{subject.name}</h4>
-                        <ul>
-                          {subject.files.map((file, fileIndex) => (
-                            <li key={fileIndex} className="file-item">
-                              <span>{file}</span>
-                              <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    ))}
-                  </div>
-
-                  <button className="back-button" onClick={() => setSelectedSemester(null)}>Back to Semester Selection</button>
+    <div>
+      <div className="page-container">
+        <Header />
+        <div className="container-pyq">
+          <h2 className='head'>Download Previous Year Questions</h2>
+          {yearItem && <h3 className='year-heading'>{yearItem.year} Year</h3>}
+          <div className="content-container">
+            <div className="pyq-box">
+              {!selectedSemester ? (
+                <div className="semester-selection">
+                  <button className="semester-button" onClick={() => setSelectedSemester('odd')}>Odd Semester</button>
+                  <button className="semester-button" onClick={() => setSelectedSemester('even')}>Even Semester</button>
                 </div>
               ) : (
-                <p>Year data not found.</p>
-              )
-            )}
+                yearItem ? (
+                  <div className="semester-container">
+                    <div className="subjects-container">
+                      {selectedSemester === 'odd' ? yearItem.oddSemesters.subjects.map((subject, subjIndex) => (
+                        <div key={subjIndex} className="subject-box">
+                          <h4 className="subject-title">{subject.name}</h4>
+                          <ul>
+                            {subject.files.map((file, fileIndex) => (
+                              <li key={fileIndex} className="file-item">
+                                <span>{file}</span>
+                                <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )) : yearItem.evenSemesters.subjects.map((subject, subjIndex) => (
+                        <div key={subjIndex} className="subject-box">
+                          <h4 className="subject-title">{subject.name}</h4>
+                          <ul>
+                            {subject.files.map((file, fileIndex) => (
+                              <li key={fileIndex} className="file-item">
+                                <span>{file}</span>
+                                <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ))}
+                    </div>
+
+                    <button className="back-button" onClick={() => setSelectedSemester(null)}>Back to Semester Selection</button>
+                  </div>
+                ) : (
+                  <p>Year data not found.</p>
+                )
+              )}
+            </div>
           </div>
         </div>
+        <ScrollToTopButton />
+        <Footer />
+
       </div>
-      <Footer />
     </div>
   );
 }