changed design, added dockerfile

cnn_website/src/App.css

@@ -1,14 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-.menu-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 80px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}

cnn_website/src/App.jsx

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

cnn_website/src/Bird_CNN.css

@@ -1,11 +1,13 @@
 .custom-button {
+    font-size: 1rem;
+    font-weight: bold;
     height: 40px;
     padding: 10px 20px;
-    background: rgb(25, 100, 126);
-    color: rgb(255, 255, 255);
+    background: rgb(47, 168, 208);
+    color: rgb(0, 0, 0);
     cursor: pointer;
     border-radius: 20px;
-    border: 1px solid rgb(25, 100, 126);
+    border: 2px solid rgb(47, 168, 208);
     user-select: none;
 }
 
@@ -19,7 +21,7 @@
 }
 
 .custom-button.inactive:hover {
-    border-color: rgb(25, 100, 126);
+    border-color: rgb(47, 168, 208);
 }
 
 #site-headline {
@@ -43,7 +45,7 @@
     background: rgb(47, 168, 208);
 }
 
-a {
+.site-box a {
     text-decoration: none;
     border-bottom: 1px solid rgb(255, 255, 255);
     padding-bottom: 2px;
@@ -72,14 +74,14 @@ a:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
 }
 
-.image-box:hover {
+.image-box img:hover {
     border-color: white;
 }
 
 .image-box img {
+    cursor: pointer;
     border: 2px solid black;
     border-Radius: 10px;
 

cnn_website/src/Bird_CNN.jsx

@@ -92,8 +92,10 @@ function Bird_CNN() {
 
                         </div>
 
-                        <div className='image-box' onClick={handleImageDivClick} disabled={loading}>
+                        <div className='image-box'>
                             <img
+                                onClick={handleImageDivClick} 
+                                disabled={loading}
                                 src={preview}
                                 alt="preview"
                                 style={{ maxHeight: "400px", height: "auto", userSelect: "none", maxWidth: "700px" }}

cnn_website/src/Menu.css

@@ -1,11 +1,21 @@
 #navbar-main {
-    width: 90%;
+    width: 100%;
     height: 80px;
     display: flex;
     gap: 20px;
     justify-content: center;
     align-items: center;
-    background-color: rgb(25, 100, 126);
-    border-bottom-left-radius: 40px;
-    border-bottom-right-radius: 40px;
+    border-bottom: 1px solid rgb(47, 168, 208);
+}
+.navbar-item {
+    text-decoration: none;
+    height: 80px;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.navbar-item:hover {
+    background-color: rgb(47, 168, 208);
 }

cnn_website/src/Menu.jsx

@@ -5,8 +5,8 @@ function Menu() {
     return (
         <>
             <nav id="navbar-main">
-                <Link to="/">Homepage</Link>
-                <Link to="/bird_cnn">Birds</Link>
+                <Link className='navbar-item' to="/">Homepage</Link>
+                <Link className='navbar-item' to="/bird_cnn">Birds</Link>
             </nav>
         </>
     );

cnn_website/src/index.css

@@ -3,10 +3,13 @@ html {
     color: rgb(255, 255, 255);
     font-size: 1rem;
     line-height: 1.7;
+    
 }
 
 body {
     background: rgb(4, 0, 10);
+    margin: 0;
+    padding: 0;
 }
 
 a {
@@ -18,4 +21,8 @@ h2,
 h3,
 h4 {
     font-family: 'Times New Roman', serif;
+}
+
+* {
+  box-sizing: border-box;
 }