From fe7d6221e949f66e1f07a72f7d699f5c99d21ddb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= Date: Wed, 29 Apr 2026 23:05:44 +0200 Subject: [PATCH] changed design --- cnn_website/public/cherry_bird.jpeg | Bin 0 -> 17648 bytes cnn_website/src/App.css | 190 ++-------------------------- cnn_website/src/App.jsx | 4 +- cnn_website/src/Bird_CNN.css | 70 ++++++++++ cnn_website/src/Bird_CNN.jsx | 41 +++++- cnn_website/src/Menu.css | 8 ++ cnn_website/src/index.css | 3 + 7 files changed, 130 insertions(+), 186 deletions(-) create mode 100644 cnn_website/public/cherry_bird.jpeg diff --git a/cnn_website/public/cherry_bird.jpeg b/cnn_website/public/cherry_bird.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..c8756ae4c6605e173ab0955e34cb5fe2780ab5c7 GIT binary patch literal 17648 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 literal 0 HcmV?d00001 diff --git a/cnn_website/src/App.css b/cnn_website/src/App.css index f90339d..373e7b0 100644 --- a/cnn_website/src/App.css +++ b/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; - } +* { + box-sizing: border-box; } -.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 { +.menu-bar { + position: absolute; + top: 0; + left: 0; + height: 80px; 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 { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; + justify-content: center; + align-items: center; width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} +} \ No newline at end of file diff --git a/cnn_website/src/App.jsx b/cnn_website/src/App.jsx index 0c144e7..a59f7a1 100644 --- a/cnn_website/src/App.jsx +++ b/cnn_website/src/App.jsx @@ -12,7 +12,9 @@ function App() { return ( <> - +
+ +
} /> } /> diff --git a/cnn_website/src/Bird_CNN.css b/cnn_website/src/Bird_CNN.css index bd17af2..e7c8b23 100644 --- a/cnn_website/src/Bird_CNN.css +++ b/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; } \ No newline at end of file diff --git a/cnn_website/src/Bird_CNN.jsx b/cnn_website/src/Bird_CNN.jsx index d5b9d49..d536fc3 100644 --- a/cnn_website/src/Bird_CNN.jsx +++ b/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 ( <> -

bird-cnn

-
- - +
+
+

Bird Species Expert

+
+ + +
+ +
+ {preview && ( + preview + )} +
diff --git a/cnn_website/src/Menu.css b/cnn_website/src/Menu.css index 7e3611a..a4fdcda 100644 --- a/cnn_website/src/Menu.css +++ b/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; } \ No newline at end of file diff --git a/cnn_website/src/index.css b/cnn_website/src/index.css index e69de29..8a472dc 100644 --- a/cnn_website/src/index.css +++ b/cnn_website/src/index.css @@ -0,0 +1,3 @@ +body { + background: rgb(130, 170, 205); +} \ No newline at end of file