Dark / Default + Scroll to top added

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> */}
 

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);
+}
+

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;

src/components/page1/Home.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import '../page1/Home.css';
 import {Link} from 'react-router-dom';
+import ScrollToTopButton from '../ScrollToTopButton';
+
 function Home() {
   return (
     <div>
@@ -46,6 +48,7 @@ function Home() {
 
 
      </div>
+     <ScrollToTopButton />
     </div>
   )
 }

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>
   )
 }

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>
   )
 }

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>
   )

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>
   )

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>
 
     )

src/components/page4/lecture.js

@@ -11,6 +11,7 @@ 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';
 
 function lecture() {
   return (
@@ -140,6 +141,7 @@ function lecture() {
 
 
        </div>
+       <ScrollToTopButton/>
      </div>
     // </div>
   )

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>
   )
 }

src/components/page4/pyq.js

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import './Pyq.css'; 
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function Pyq() {
   const yearFiles = [
@@ -83,6 +84,7 @@ function Pyq() {
   const [selectedSemester, setSelectedSemester] = useState(null);
 
   return (
+    <div>
     <div className="page-container">
       <Header />
       <div className="container-pyq">
@@ -135,7 +137,9 @@ function Pyq() {
           </div>
         </div>
       </div>
+  <ScrollToTopButton />
       <Footer />
+
     </div>
   );
 }

src/components/page4/syllabus.js

@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const Syllabus =() => {
@@ -174,6 +175,7 @@ const Syllabus =() => {
 
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )

src/components/page4/timetable.js

@@ -2,6 +2,7 @@ import React, {useState} from 'react'
 import Imgdata from '../imgdata';
 import '../page4/timetable.css';
 import Header from "../../pages/header.js"
+import ScrollToTopButton from '../ScrollToTopButton.js';
 function Timetable() {
 
     const [selectedSection, setSelectedSection] = useState(null);
@@ -30,6 +31,8 @@ function Timetable() {
       {/* apering section of timetable */}
       {selectedSection && <Imgdata section={selectedSection}/>}
 
+      <ScrollToTopButton />
+
     </div>
   )
 

src/components/page4/trdquantum.js

@@ -9,8 +9,13 @@ import Imgdaa from '../../assets/daa1.jpg';
 // import Imgmlt from '../../assets/mlt.jpg'
 import Imgcn from '../../assets/cn.webp';
 import Imgwt from '../../assets/wt.png';
+
 import Imgitcs from '../../assets/itcsimg.jpg'
 
+import ScrollToTopButton from '../ScrollToTopButton.js';
+
+
+
 function quantum() {
 
     const handleDownload = (quantum) =>{
@@ -135,6 +140,7 @@ function quantum() {
 
 </div>
     </div>
+    <ScrollToTopButton />
     </div>
   )
 }

src/components/page5(1st)/fstlecture.js

@@ -16,6 +16,7 @@ import pps from '../../assets/pps.jpg';
 import ai from '../../assets/ai.jpg';
 import ssi from '../../assets/ssi.jpg';
 import ssii from '../../assets/ssii.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 function lecture() {
   return (
@@ -169,6 +170,7 @@ function lecture() {
 
 
        </div>
+       <ScrollToTopButton />
      </div>
     // </div>
   )

src/components/page5(1st)/fstpyq.js

@@ -1,13 +1,15 @@
 import React from 'react'
 import ComingSoon from '../../pages/cs.js';
 import Header from '../../pages/header.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
 function fstpyq() {
   return (
     <div>
        <Header />
        <ComingSoon/>
+       <ScrollToTopButton />
     </div>
   )
 }

src/components/page5(1st)/fstquantum.js

@@ -11,6 +11,7 @@ import  Imgchem from '../../assets/chemistry.webp';
 import Imgmath2 from '../../assets/math2.jpg';
 import Imgelectronics from '../../assets/electronics.png';
 import Imgmech from '../../assets/mechanical.jpg';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function quantum() {
 
@@ -152,6 +153,7 @@ function quantum() {
 
 </div>
     </div>
+    <ScrollToTopButton />
     </div>
   )
 }

src/components/page5(1st)/fstsyllabus.js

@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const fstsyllabus =() => {
@@ -61,6 +62,7 @@ const fstsyllabus =() => {
     </div>
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )

src/components/page5(1st)/fsttimetable.js

@@ -3,6 +3,7 @@ import Imgdata from '../imgdata';
 import '../page4/timetable.css';
 import Header from "../../pages/header.js"
 import ComingSoon from '../../pages/cs.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function  Fsttimetable() {
 
@@ -37,7 +38,7 @@ function  Fsttimetable() {
 
       {/* apering section of timetable */}
       {/* {selectedSection && <Imgdata section={selectedSection}/>} */} 
-
+      <ScrollToTopButton />
     </div>
   )
 

src/components/page6(2nd)/sndlecture.js

@@ -17,6 +17,7 @@ import Imgos from '../../assets/los.jpg';
 import Imgtafl from '../../assets/ltafl.jpg';
 
 import ssii from '../../assets/ssii.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 function sndlecture() {
   return (
@@ -170,6 +171,7 @@ function sndlecture() {
 
 
        </div>
+       <ScrollToTopButton />
      </div>
     // </div>
   )