Merge branch 'PranavBarthwal:main' into main

Tejashri-Taral · Jun 26, 2024 · 7dda883 · 7dda883
2 parents efca4b2 + 8b366e9
commit 7dda883
Show file tree

Hide file tree

Showing 29 changed files with 313 additions and 55 deletions.
diff --git a/.github/workflows/autocomment-iss-close.yml b/.github/workflows/autocomment-iss-close.yml
@@ -0,0 +1,27 @@
+name: Notify on Issue Close
+
+on:
+  issues:
+    types: [closed]
+
+jobs:
+  notify-on-close:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Notify Issue Creator
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { issue } = context.payload.issue;
+            const { login } = issue.user.login;
+            const { number } = issue.number;
+            const message = `Hello @${login}! Your issue #${number} has been closed. Thank you for your contribution!`;
+
+            github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: number,
+              body: message
+            });
diff --git a/index.html b/index.html
@@ -12,6 +12,8 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMTnhhFUM4JT6FG0HkqS2f5nQpAI8PwvE4j1cAJ" crossorigin="anonymous">
+
 </head>
 
 <body>

diff --git a/public/Earth_1_12756.glb b/public/Earth_1_12756.glb
diff --git a/public/Mars_1_6792.glb b/public/Mars_1_6792.glb
diff --git a/public/Neptune_1_49528.glb b/public/Neptune_1_49528.glb
diff --git a/src/App.jsx b/src/App.jsx
@@ -20,8 +20,8 @@ function App() {
       <BackGround setIsPreLoading={setIsPreLoading} />
       <Toast />
       <Navbar />
-      <Outlet />
-      <ScrollToTop/>
+      <Outlet setIsPreLoading={setIsPreLoading} />
+      <ScrollToTop />
       <Footer />
       <Chatbot />
     </>

diff --git a/src/assets/Rocket-rafiki (1).gif b/src/assets/Rocket-rafiki (1).gif
diff --git a/src/components/3D_Rovers/Curiosity.jsx → src/components/3D_Models/Curiosity.jsx b/src/components/3D_Rovers/Curiosity.jsx → src/components/3D_Models/Curiosity.jsx
diff --git a/src/components/3D_Models/Earth/Earth.jsx b/src/components/3D_Models/Earth/Earth.jsx
@@ -0,0 +1,51 @@
+
+import React, { useRef, memo, useState, useEffect } from 'react'
+import { OrbitControls, useGLTF } from '@react-three/drei'
+import { Canvas, useFrame } from '@react-three/fiber'
+import Styles from './Earth.module.css'
+
+
+function Scene(props) {
+    const { nodes, materials } = useGLTF('/Earth_1_12756.glb')
+
+    const ref = useRef()
+
+
+    useFrame(() => {
+        ref.current.rotation.y -= 0.001
+        ref.current.rotation.z -= 0.001
+    })
+
+
+
+    return (
+        <group {...props} dispose={null} ref={ref}>
+            <mesh
+                castShadow
+                receiveShadow
+                geometry={nodes.Cube001.geometry}
+                material={materials['Default OBJ']}
+            />
+        </group>
+    )
+}
+
+const Earth = memo(function Earth(props) {
+
+    return (
+        <Canvas id={Styles.canvas} >
+            <OrbitControls enableZoom={false} enablePan={false} />
+            <ambientLight intensity={7} />
+            <pointLight position={[0, 10, 0]} intensity={100} />
+            <pointLight position={[0, -10, 0]} intensity={100} />
+            <pointLight position={[10, -7, 0]} intensity={100} />
+            <pointLight position={[-10, -7, 0]} intensity={100} />
+            <Scene props={props} scale={0.006} />
+        </Canvas>
+    )
+
+})
+
+useGLTF.preload('/Earth_1_12756.glb')
+
+export default Earth
diff --git a/src/components/3D_Models/Earth/Earth.module.css b/src/components/3D_Models/Earth/Earth.module.css
@@ -0,0 +1,17 @@
+#canvas {
+    filter: drop-shadow(0 0 100px rgba(40, 102, 110, 0.589));
+    width: 500px;
+}
+
+#canvas canvas {
+    height: 500px;
+    width: 500px;
+}
+
+
+@media (max-width:500px) {
+    #canvas canvas {
+        height: 400px;
+        width: 400px;
+    }
+}
diff --git a/src/components/3D_Models/Mars/Mars.jsx b/src/components/3D_Models/Mars/Mars.jsx
@@ -0,0 +1,43 @@
+import React, { memo, useMemo, useRef } from 'react'
+import { OrbitControls, useGLTF } from '@react-three/drei'
+import { Canvas, useFrame } from '@react-three/fiber'
+import Styles from './Mars.module.css'
+
+function Scene(props) {
+    const { nodes, materials } = useGLTF('/Mars_1_6792.glb')
+
+    const ref = useRef()
+
+    useFrame(() => {
+        ref.current.rotation.y -= 0.001
+        ref.current.rotation.z -= 0.001
+    })
+
+    return (
+        <group {...props} dispose={null} ref={ref}>
+
+            <mesh
+                castShadow
+                receiveShadow
+                geometry={nodes.Cube008.geometry}
+                material={materials['Default OBJ.005']}
+            />
+        </group>
+    )
+}
+
+const Mars = memo(function Mars(props) {
+    return (
+        <Canvas style={{ height: '400px', width: '400px' }} id={Styles.canvas} >
+            <OrbitControls enableZoom={false} enablePan={false} maxPolarAngle={1} minPolarAngle={1} />
+            <ambientLight intensity={1} />
+            <pointLight position={[10, 10, 10]} />
+            <Scene props={props} scale={0.006} />
+        </Canvas>
+    )
+
+})
+
+useGLTF.preload('/Mars_1_6792.glb')
+
+export default Mars
diff --git a/src/components/3D_Models/Mars/Mars.module.css b/src/components/3D_Models/Mars/Mars.module.css
@@ -0,0 +1,3 @@
+#canvas {
+    filter: drop-shadow(0 0 50px rgba(255, 72, 0, 0.349));
+}
diff --git a/src/components/3D_Models/Neptune/Neptune.jsx b/src/components/3D_Models/Neptune/Neptune.jsx
@@ -0,0 +1,44 @@
+
+import React, { useRef, memo, useState, useEffect } from 'react'
+import { OrbitControls, useGLTF } from '@react-three/drei'
+import { Canvas, useFrame } from '@react-three/fiber'
+import Styles from './Neptune.module.css'
+
+function Scene(props) {
+    const { nodes, materials } = useGLTF('/Neptune_1_49528.glb')
+
+    const ref = useRef()
+
+    useFrame(() => {
+        ref.current.rotation.y -= 0.001
+        ref.current.rotation.z -= 0.001
+    })
+
+    return (
+        <group {...props} dispose={null} ref={ref}>
+            <mesh
+                castShadow
+                receiveShadow
+                geometry={nodes.Neptune.geometry}
+                material={materials['Default OBJ.001']}
+                rotation={[Math.PI / 2, 0, 0]}
+            />
+        </group>
+    )
+}
+
+const Earth = memo(function Earth(props) {
+
+    return (
+        <Canvas id={Styles.canvas} >
+            <OrbitControls enableZoom={false} enablePan={false} />
+            <ambientLight intensity={5} color={'rgb(0, 153, 255)'} />
+            <Scene props={props} scale={0.006} />
+        </Canvas>
+    )
+
+})
+
+useGLTF.preload('/Neptune_1_49528.glb')
+
+export default Earth
diff --git a/src/components/3D_Models/Neptune/Neptune.module.css b/src/components/3D_Models/Neptune/Neptune.module.css
@@ -0,0 +1,4 @@
+#canvas canvas {
+    height: 300px;
+    width: 300px;
+}
diff --git a/src/components/3D_Rovers/Perseverance.jsx → src/components/3D_Models/Perseverance.jsx b/src/components/3D_Rovers/Perseverance.jsx → src/components/3D_Models/Perseverance.jsx
diff --git a/src/components/3D_Rovers/SpritOpp.jsx → src/components/3D_Models/SpritOpp.jsx b/src/components/3D_Rovers/SpritOpp.jsx → src/components/3D_Models/SpritOpp.jsx
diff --git a/src/components/Chatbot/chatbot.css b/src/components/Chatbot/chatbot.css
@@ -102,6 +102,7 @@ filter: drop-shadow(0 0 6px currentColor);
 transform: translate3d(104em, 0, 0);
 animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
 
+
 @include sp-layout {
   // For mobile performance, tail-fade animation will be removed QAQ
   animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
@@ -269,3 +270,20 @@ to {
     font-size: 20px; 
   }
 
+  @media screen and ( max-width: 429px ) {
+    .chat-popup-container{
+      width: 80%;
+    }
+    .chat-popup-footer{
+      width: 77%;
+    }
+    .chat-popup-input{
+      width: 80%;
+    }
+    .chat-popup-send{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 25%;
+    }
+  }
diff --git a/src/components/Chatbot/chatbot.jsx b/src/components/Chatbot/chatbot.jsx
@@ -65,8 +65,8 @@ const Chatbot = () => {
         <div className="chat-popup-container">
           <div className="chat-popup-header">
             <h5>SpaceBot</h5>
-            <i className="fas fa-sync refresh-icon" onClick={handleRefresh}></i>
-            <i className="fas fa-times close-icon" onClick={toggleChatbot}></i>
+            <i style={{marginTop:'1.5%'}} className="fas fa-sync refresh-icon" onClick={handleRefresh}></i>
+            <i style={{marginTop:'5%'}} className="fas fa-times close-icon" onClick={toggleChatbot}></i>
           </div>
           <div className="chat-popup-body">
             <div className="chat-messages">

diff --git a/src/components/ContactForm/ContactForm.jsx b/src/components/ContactForm/ContactForm.jsx
@@ -3,6 +3,7 @@ import img from '../../assets/original-5fcdc62f8266e353ea97ca56731ad804.png';
 import Styles from "./ContactForm.module.css"
 import emailjs from '@emailjs/browser';
 import { toastify } from "../Toast/Toast.jsx"
+import Neptune from "../3D_Models/Neptune/Neptune.jsx"
 
 
 function ContactForm() {
@@ -74,7 +75,7 @@ function ContactForm() {
       <h1 align="center" className={Styles["section_title"]} id="contact">Contact Us</h1>
       <div className={Styles["contact-form"]}>
         <div className={Styles["left"]}>
-          <img src={img} className={Styles["contact_img"]} alt="Contact Image" style={{ maxWidth: "100%" }} />
+          <Neptune />
         </div>
         <div className={Styles["right"]}>
           <form className={Styles["form"]}>

diff --git a/src/components/ContactForm/ContactForm.module.css b/src/components/ContactForm/ContactForm.module.css
@@ -17,6 +17,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 500px;
 }
 
 .contact-form .right {
@@ -45,72 +46,77 @@
     animation: leviate 2s ease-in-out infinite;
     animation-delay: 2ms;
 }
+
 @keyframes leviate {
     50% {
         transform: translateY(-20px);
     }
 }
 
-.right form{
+.right form {
     width: 30vw;
     padding: 30px;
-    background-color:transparent;
+    background-color: transparent;
     backdrop-filter: blur(25px);
     border: 2px solid #40019a;
     box-sizing: content-box;
-    border-radius:10px;
+    border-radius: 10px;
     animation: circle 4s ease-in-out infinite;
 }
 
 @keyframes circle {
-    0%{
+    0% {
         box-shadow: 10px 10px 10px #8400ff;
     }
-    25%{
+
+    25% {
         box-shadow: -10px 10px 10px #8400ff;
     }
-    50%{
+
+    50% {
         box-shadow: -10px -10px 10px #8400ff;
     }
-    75%{
+
+    75% {
         box-shadow: 10px -10px 10px #8400ff;
     }
-    100%{
+
+    100% {
         box-shadow: 10px 10px 10px #8400ff;
     }
 }
 
-.right .form-control{
+.right .form-control {
     outline: none;
     border: 2px solid #9000ff;
-    border-radius:40px;
+    border-radius: 40px;
     background: transparent;
-    border-radius:10px;
+    border-radius: 10px;
     color: white;
     resize: none;
 }
 
-.right .form-control::placeholder{
+.right .form-control::placeholder {
     color: white;
 }
 
 
-.right .form-control:focus{
+.right .form-control:focus {
     outline: none;
     border: none;
-    background-color:#7805e39d;
+    background-color: #7805e39d;
     box-shadow: none;
-    color:white ;
+    color: white;
 }
 
-.right button{
+.right button {
     outline: none;
-    border:none;
+    border: none;
     border-radius: 30px;
-    background-color:#8400ff;
+    background-color: #8400ff;
 }
 
-.right button:hover{
+.right button:hover {
     background: #40019a;
     color: white;
     transform: scale(1.1);
@@ -133,7 +139,8 @@
         justify-content: center;
         align-items: center;
     }
-    .contact-form .form{
-        width:60%;
+
+    .contact-form .form {
+        width: 60%;
     }
 }