changed design

cnn_website/src/App.css

@@ -1,184 +1,14 @@
-.counter {
+* {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
   box-sizing: border-box;
 }
-  }
-}
 
-#spacer {
+.menu-bar {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
   position: absolute;
-    top: -4.5px;
+  top: 0;
-    border: 5px solid transparent;
-  }
-
-  &::before {
   left: 0;
-    border-left-color: var(--border);
+  height: 80px;
-  }
+  display: flex;
-  &::after {
+  justify-content: center;
-    right: 0;
+  align-items: center;
-    border-right-color: var(--border);
+  width: 100%;
-  }
 }

cnn_website/src/App.jsx

@@ -12,7 +12,9 @@ function App() {
 
   return (
     <>
+      <div className='menu-bar'>
         <Menu />
+      </div>
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/bird_cnn" element={<Bird_CNN />} />

cnn_website/src/Bird_CNN.css

@@ -1,5 +1,75 @@
+#background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-image: url('/cherry_bird.jpeg');
+    background-size: cover;
+    background-position: center;
+    height: 100vh;
+    width: 100%;
+    z-index: 0;
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+.site-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+    margin-top: 120px;
+    height: 600px;
+}
+
 .content-block {
     display: flex;
     align-items: baseline;
     gap: 20px;
 }
+
+.input-box {
+    display: flex;
+    gap: 20px;
+}
+
+.custom-button {
+    padding: 10px 20px;
+    background: #333;
+    color: rgb(225, 225, 225);
+    cursor: pointer;
+    border-radius: 6px;
+    border: 1px solid black;
+}
+
+.custom-button:hover {
+    border-color: white;
+    color: white;
+}
+
+.response-block {
+    margin-top: auto;
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+
+.image-box {
+    border: 1px solid black;
+    background: rgb(69, 69, 69);
+    height: 300px;
+    width: 500px;
+    margin-top: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    opacity: 0.5;
+}
+
+.image-box.active {
+    opacity: 1;
+    background: none;
+    border: none;
+}

cnn_website/src/Bird_CNN.jsx

@@ -1,18 +1,29 @@
 import { useState } from 'react'
+import { useRef } from "react";
 import './Bird_CNN.css'
 
 function Bird_CNN() {
     const apiUrl = process.env.NODE_ENV === "development"
-        ? "http://127.0.0.1:8000"
+        ? "http://134.60.154.7:8000"
         : "http://134.60.154.7:8000";
 
+    const boxRef = useRef(null);
+
     const [file, setFile] = useState(null);
     const [birdClass, setBirdClass] = useState(null);
     const [confidence, setConfidence] = useState(null);
     const [error, setError] = useState(false);
+    const [preview, setPreview] = useState(null);
 
     const handleImage = (e) => {
         setFile(e.target.files[0]);
+
+        if (e.target.files[0]) {
+            setPreview(URL.createObjectURL(e.target.files[0]));
+            boxRef.current.classList.add("active");
+        }
+        setConfidence(null);
+        setBirdClass(null);
     };
 
     const sendImage = async (e) => {
@@ -46,10 +57,30 @@ function Bird_CNN() {
 
     return (
         <>
-            <h1>bird-cnn</h1>
+            <div id='background'></div>
-            <div>
+            <div className='site-content'>
-                <input type="file" accept="image/jpeg" onChange={handleImage} />
+                <h1 id='site-headline'>Bird Species Expert</h1>
-                <button onClick={sendImage}>Upload</button>
+                <div className='input-box'>
+                    <input type="file" id='fileUpload' accept="image/jpeg" onChange={handleImage} style={{ display: "none" }} />
+                    <label htmlFor="fileUpload" className="custom-button">
+                        Choose an image
+                    </label>
+                    <button id='button-send' onClick={sendImage} style={{ display: "none" }} />
+                    <label htmlFor="button-send" className="custom-button">
+                        Ask Expert
+                    </label>
+
+                </div>
+
+                <div ref={boxRef} className='image-box'>
+                    {preview && (
+                        <img
+                            src={preview}
+                            alt="preview"
+                            style={{ height: "300px", border: "1px solid black" }}
+                        />
+                    )}
+                </div>
 
 
                 <div className='response-block'>

cnn_website/src/Menu.css

@@ -1,4 +1,12 @@
 #navbar-main {
+    width: 90%;
+    height: 80px;
     display: flex;
     gap: 20px;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(33, 122, 194);
+    border: 1px solid black;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 }

cnn_website/src/index.css

@@ -0,0 +1,3 @@
+body {
+    background: rgb(130, 170, 205);
+}