marvin/CNN_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed design, added dockerfile

Browse Source
This commit is contained in:
marvin
2026-05-02 22:45:03 +02:00
parent d801d6d59d
commit 8c49ac0066
9 changed files with 74 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cnn_website/Dockerfile
+15 -5
View File
@@ -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
Generated
+23 -10
View File
@@ -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
-14
View File
@@ -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
+1 -3
View File
@@ -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
+9 -7
View File
@@ -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
+3 -1
View File
@@ -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
+14 -4
View File
@@ -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
+2 -2
View File
@@ -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
+7
View File
@@ -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;
}