Merge branch 'main' into preloader

PranavBarthwal · Jun 1, 2024 · 7658252 · 7658252
2 parents 6f37112 + 975d70a
commit 7658252
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 70 deletions.
diff --git a/.env.demo b/.env.demo
@@ -6,4 +6,4 @@ VITE_PUBLIC_KEY=
 
 # Environment Variables for NASA API call.
 
-VITE_API_KEY=
+VITE_API_KEY=DEMO_KEY  # use Demo Key only for development.
diff --git a/README.md b/README.md
@@ -27,13 +27,16 @@
    npm install
    ```
 
-4. **Start the Server:** Start the server:
+4. **Add Environment Variables:** Create a `.env` file and add Environment Variables as mentioned in `.env.demo` file.
+
+
+5. **Start the Server:** Start the server:
 
    ```bash
    npm run dev
    ```
 
-5. **Local Host:** Access the project on your local host at:
+6. **Local Host:** Access the project on your local host at:
 
    ```bash
    http://localhost:5173/

diff --git a/src/App.css b/src/App.css
@@ -13,6 +13,7 @@
   -webkit-text-fill-color: transparent;
   font-size: 4rem;
   font-weight: bold;
+  border-top: 20dvh solid transparent;
 }
 
 .ip {
@@ -28,7 +29,6 @@
   justify-content: center;
   outline:none;
   border: none;
-  /* background-color: red; */
 }
 
 .date_input {
@@ -113,7 +113,7 @@
   border-style: solid;
   border-width: 1px;
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
 }
 
@@ -466,3 +466,22 @@
   color: inherit;
   cursor: pointer;
 }
+
+#close-btn{
+  position: relative;
+  bottom: 250px;
+}
+#close-btn button{
+  padding: 5px 15px;
+  font-size: 1rem;
+  border-radius: 10px;
+  font-weight: bold;
+  color: #40019a;
+  border: none;
+}
+
+#close-btn button:hover{
+  color: white;
+  background: #40019a;
+  box-shadow: 0 0 10px white;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,9 +4,11 @@ import Navbar from './components/Navbar/Navbar.jsx'
 import Footer from './components/Footer/Footer.jsx'
 import Toast from "./components/Toast/Toast.jsx"
 import BackGround from './components/BackGround/BackGround.jsx'
+import ScrollToTop from './components/ScrollToTop/ScrollToTop.jsx'
 import PreLoader from './components/PreLoader/PreLoader.jsx'
 import { useState } from 'react'
 
+
 function App() {
 
   const [isPreLoading, setIsPreLoading] = useState(true)
@@ -18,6 +20,7 @@ function App() {
       <Toast />
       <Navbar />
       <Outlet />
+      <ScrollToTop/>
       <Footer />
     </>
   );

diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx
@@ -39,7 +39,8 @@ function StarField({ numberOfStars = 100, setIsPreLoading }) {
 
   useEffect(addStars, []);
   return (
-    <group ref={starFieldRef} rotation={[0, 0, 0]}>
+
+    <group ref={starFieldRef} rotation={[0, 0, -1]}>
       {
         positions.map((position, index) => (
           <Star key={index} position={position} />

diff --git a/src/components/DisplayDetails/DisplayDetails.jsx b/src/components/DisplayDetails/DisplayDetails.jsx
@@ -1,15 +1,13 @@
 import React from "react";
 import img from "../../assets/feel the fear and do it anyway.png";
-import '../../App.css'
-
-function DisplayDetails({ roverInfo }) {
+import "../../App.css";
 
+function DisplayDetails({ roverInfo, fun }) {
   return (
     <>
       <div className="rover_display">
         <div className="inner_container">
           <div className="image_div">
-
             <img
               id="roverImg"
               src={roverInfo.url ? roverInfo.url : img}
@@ -23,19 +21,25 @@ function DisplayDetails({ roverInfo }) {
               <div className="row">
                 <div className="card">
                   <h4>Earth Date</h4>
-                  <p className="date">{roverInfo.earthDate ? roverInfo.earthDate : "...."}</p>
+                  <p className="date">
+                    {roverInfo.earthDate ? roverInfo.earthDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Rover Name</h4>
-                  <p className="roverName">{roverInfo.roverName ? roverInfo.roverName : "...."}</p>
+                  <p className="roverName">
+                    {roverInfo.roverName ? roverInfo.roverName : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Camera</h4>
-                  <p className="camera">{roverInfo.cameraName ? roverInfo.cameraName : "...."}</p>
+                  <p className="camera">
+                    {roverInfo.cameraName ? roverInfo.cameraName : "...."}
+                  </p>
                 </div>
               </div>
             </div>
@@ -44,26 +48,34 @@ function DisplayDetails({ roverInfo }) {
               <div className="row">
                 <div className="card">
                   <h4>Launch Date</h4>
-                  <p className="launch">{roverInfo.launchDate ? roverInfo.launchDate : "...."}</p>
+                  <p className="launch">
+                    {roverInfo.launchDate ? roverInfo.launchDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Land Date</h4>
-                  <p className="land">{roverInfo.landingDate ? roverInfo.landingDate : "...."}</p>
+                  <p className="land">
+                    {roverInfo.landingDate ? roverInfo.landingDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Status</h4>
-                  <p className="status">{roverInfo.status ? roverInfo.status : "...."}</p>
+                  <p className="status">
+                    {roverInfo.status ? roverInfo.status : "...."}
+                  </p>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-
 
+          <div id="close-btn">
+            <button onClick={() => fun(false)}>X</button>
+          </div>
+        </div>
       </div>
     </>
   );

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -3,13 +3,14 @@ import img from '../../assets/logo_white.png';
 
 
 function Footer() {
+  const currentYear = new Date().getFullYear();
   return (
     <div className="container">
       <footer className="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
         <a href="/" className="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
           <img src={img} width="150" alt="Logo" />
         </a>
-        <p className="col-md-4 mb-0 text-light">© 2024 CosmoXplore India, Inc. All Rights Reserved</p>
+        <p className="col-md-4 mb-0 text-light">©️ {currentYear} CosmoXplore India, Inc. All Rights Reserved</p>
       </footer>
     </div>
   );

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -48,7 +48,7 @@ function Navbar() {
             <ul>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#">Home</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#apod">APOD</a></li>
-              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#mars">MartianImagery</a></li>
+              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="/mars-rover">MartianImagery</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/nasa-projects">NASA's Projects</NavLink></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/about">About us</NavLink></li>
             </ul>
@@ -69,7 +69,7 @@ function Navbar() {
               <a className="nav-link text-light" href="#apod">APoD</a>
             </li>
             <li className="nav-item">
-              <a className="nav-link text-light" href="#mars">MartianImagery</a>
+              <NavLink className="nav-link text-light" to="/mars-rover">MartianImagery</NavLink>
             </li>
             <li className="nav-item">
               <NavLink className="nav-link text-light" to="/nasa-projects">NASA's Projects</NavLink>

diff --git a/src/components/ScrollToTop/ScrollToTop.jsx b/src/components/ScrollToTop/ScrollToTop.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import Styles from './ScrollToTop.module.css'
+import { TbArrowBigUpLineFilled } from "react-icons/tb";
+
+function ScrollToTop() {
+
+    const [isHover,setIsHover]=useState(false);
+
+    function handleClick(e) {
+        window.scrollTo(
+            {
+                top: 0,
+                behavior: 'smooth',
+            }
+        )
+    }
+
+    return (
+        <div className={Styles['btn']} onMouseEnter={()=>setIsHover(true)} onMouseLeave={()=>setIsHover(false)}>
+            <button className={Styles['scroll-btn']} onClick={handleClick}><TbArrowBigUpLineFilled size={25} color={isHover?'white':'#8400ff'} /></button>
+        </div>
+    )
+}
+
+export default ScrollToTop
diff --git a/src/components/ScrollToTop/ScrollToTop.module.css b/src/components/ScrollToTop/ScrollToTop.module.css
@@ -0,0 +1,25 @@
+
+.btn{
+    position: fixed;
+    right: 20px;
+    bottom: 100px;
+    border-radius: 50%;
+}
+
+.scroll-btn{
+    background-color: white;
+    border:none;
+    outline: none;
+    border-radius: 50%;
+    padding: 10px;
+    transition: all 0.5s ease-in-out;
+}
+
+.scroll-btn:hover,.btn:hover{
+    background-color: #40019a;
+    color: white;
+    transform: scale(1.1);
+    box-shadow: 0 0 15px white;
+    cursor: pointer;
+    color: white;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -6,13 +6,15 @@ import App from './App.jsx'
 import Home from "./pages/Home/Home.jsx"
 import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx"
 import About from "./pages/About/About.jsx"
+import MarsRover from './pages/MarsRover/MarsRover.jsx'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<App />}>
       <Route index element={<Home />} />
       <Route path='nasa-projects' element={<NasaProjects />} />
       <Route path='about' element={<About />} />
+      <Route path='mars-rover' element={<MarsRover/>}/>
     </Route>
   )
 )

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import Hero from '../../components/Hero/Hero.jsx'
 import Apod from '../../components/Apod/Apod.jsx'
-import MarsRover from '../../components/MarsRover/MarsRover.jsx'
+// import MarsRover from '../MarsRover/MarsRover.jsx'
 import ContactForm from '../../components/ContactForm/ContactForm.jsx'
 
 function Home() {
     return (
         <>
             <Hero />
             <Apod />
-            <MarsRover />
+            {/* <MarsRover /> */}
             <ContactForm />
         </>
     )
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@ VITE_PUBLIC_KEY=

		# Environment Variables for NASA API call.

		VITE_API_KEY=
		VITE_API_KEY=DEMO_KEY # use Demo Key only for development.