added automatic scrolling

cnn_website/src/Bird_CNN.css

@@ -13,11 +13,13 @@
 
 .custom-button:hover {
     border-color: white;
+    color: white;
 }
 
 .custom-button.inactive {
     opacity: 0.3;
     cursor: default;
+    color: black;
 }
 
 .custom-button.inactive:hover {

cnn_website/src/Bird_CNN.jsx

@@ -15,26 +15,41 @@ function Bird_CNN() {
     const [loading, setLoading] = useState(false);
     const fileInputRef = useRef(null);
     const uploadButton = useRef(null);
-    const scrollRef = useRef(null);
+    const scrollRefClassifiction = useRef(null);
+    const scrollRefUploadButton = useRef(null);
+
+    const isPartiallyInViewport = (el) => {
+        if (!el) return false;
+
+        const rect = el.getBoundingClientRect();
+
+        return (
+            rect.top < window.innerHeight &&
+            rect.bottom > 0
+        );
+    };
 
     const handleImageDivClick = () => {
         fileInputRef.current.click();
     }
 
     const handleImage = (e) => {
-        if (e.target.files[0]) {
+        if (!e.target.files[0]) { return; }
         setFile(e.target.files[0]);
         setPreview(URL.createObjectURL(e.target.files[0]));
         uploadButton.current.classList.remove("inactive");
-        }
+
+        scrollRefUploadButton.current.scrollIntoView({ behavior: "smooth" });
+
         setConfidence(null);
         setBirdClass(null);
+
     };
 
     const sendImage = async (e) => {
         if (!file) return;
 
-        scrollRef.current.scrollIntoView({ behavior: "smooth" });
+        scrollRefClassifiction.current.scrollIntoView({ behavior: "smooth" });
 
         const formData = new FormData();
         formData.append("file", file);
@@ -76,7 +91,7 @@ function Bird_CNN() {
                     </div>
 
                     <div className='request-box' style={{ height: "800px", width: "700px", display: "flex", flexDirection: "column", alignItems: "center", flex: "0 0 auto", margin: "100px 50px 0px 50px" }}>
-                        <div className='input-box' style={{ marginBottom: "80px", width: "500px", height: "40px", display: "flex", justifyContent: "space-evenly", alignItems: "center" }}>
+                        <div ref={scrollRefUploadButton} className='input-box' style={{ scrollMarginTop: "100px", marginBottom: "80px", width: "500px", height: "40px", display: "flex", justifyContent: "space-evenly", alignItems: "center" }}>
                             <div>
                                 <input disabled={loading} ref={fileInputRef} type="file" id='fileUpload' accept="image/jpeg" onChange={handleImage} style={{ display: "none" }} />
                                 <label htmlFor="fileUpload" className="custom-button">
@@ -102,7 +117,7 @@ function Bird_CNN() {
                             />
                         </div>
 
-                        <div ref={scrollRef} style={{ paddingTop: "10px", marginTop: "30px", width: "85px", height: "35px", display: "flex", justifyContent: "center", minHeight: "25px", minWidth: "85px" }}>
+                        <div ref={scrollRefClassifiction} style={{ scrollMarginTop: "100px", paddingTop: "10px", marginTop: "30px", width: "85px", height: "35px", display: "flex", justifyContent: "center", minHeight: "25px", minWidth: "85px" }}>
                             {loading && <div className='loader'></div>}
                         </div>
 

cnn_website/src/Homepage.jsx

@@ -1,7 +1,7 @@
 function Homepage() {
     return (
         <>
-            <p>Homepage</p>
+            <h1 style={{ margin: "120px 40px 40px 40px" }}>Ignore this page</h1>
         </>
     );
 }

cnn_website/src/Menu.css

@@ -6,7 +6,13 @@
     justify-content: center;
     align-items: center;
     border-bottom: 1px solid rgb(47, 168, 208);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background: rgb(4, 0, 10);
 }
+
 .navbar-item {
     text-decoration: none;
     height: 80px;