changed design, added dockerfile

cnn_website/Dockerfile

@@ -1,19 +1,29 @@
-FROM node:20-alpine AS build
+# Step 1: Build the app
+FROM node:20-alpine AS builder
 
 WORKDIR /app
 
+# Install dependencies
 COPY package*.json ./
 RUN npm install
 
+# Copy source code
 COPY . .
 
+# Build the project
 RUN npm run build
 
 
-FROM nginx:alpine
+# Step 2: Run preview server
+FROM node:20-alpine
 
-COPY --from=build /app/dist /usr/share/nginx/html
+WORKDIR /app
 
-EXPOSE 80
+# Copy built files and node_modules (for vite preview)
+COPY --from=builder /app ./
 
-CMD ["nginx", "-g", "daemon off;"]
+# Expose Vite preview port
+EXPOSE 4173
+
+# Run preview server
+CMD ["npm", "run", "preview", "--", "--host"]

cnn_website/package-lock.json

@@ -55,7 +55,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -265,6 +264,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -851,7 +873,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -898,7 +919,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -989,7 +1009,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -1138,7 +1157,6 @@
       "integrity": "sha512-wiyGaKsDgqXvF40P8mDwiUp/KQjE1FdrIEJsM8PZ3XCiniTMXS3OHWWUe5FI5agoCnr8x4xPrTDZuxsBlNHl+Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -2027,7 +2045,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2089,7 +2106,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
       "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2099,7 +2115,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
       "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2326,7 +2341,6 @@
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -2451,7 +2465,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

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>
       <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);
+    background: rgb(47, 168, 208);
-    color: rgb(255, 255, 255);
+    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: 1px solid rgb(47, 168, 208);
-    border-bottom-left-radius: 40px;
+}
-    border-bottom-right-radius: 40px;
+.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 className='navbar-item' to="/">Homepage</Link>
-                <Link to="/bird_cnn">Birds</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 {
@@ -19,3 +22,7 @@ h3,
 h4 {
     font-family: 'Times New Roman', serif;
 }
+
+* {
+  box-sizing: border-box;
+}