From 9591131da11b9e35bcc0194120f4c216b5235c7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= Date: Thu, 14 May 2026 02:13:15 +0200 Subject: [PATCH] added review buttons --- website/src/App.jsx | 2 + website/src/Bird_CNN.css | 31 ++---------- website/src/Bird_CNN.jsx | 5 +- website/src/Menu.jsx | 1 + website/src/Reviews.css | 60 ++++++++++++++++++++++ website/src/Reviews.jsx | 107 +++++++++++++++++++++++++++++++++++++++ website/src/index.css | 30 +++++++++++ 7 files changed, 205 insertions(+), 31 deletions(-) create mode 100644 website/src/Reviews.css create mode 100644 website/src/Reviews.jsx diff --git a/website/src/App.jsx b/website/src/App.jsx index beba226..b56de3a 100644 --- a/website/src/App.jsx +++ b/website/src/App.jsx @@ -7,6 +7,7 @@ import './App.css' import Menu from './Menu' import Homepage from './Homepage'; import Bird_CNN from './Bird_CNN'; +import Reviews from './Reviews.jsx'; function App() { @@ -16,6 +17,7 @@ function App() { } /> } /> + } /> } /> diff --git a/website/src/Bird_CNN.css b/website/src/Bird_CNN.css index 97491d8..b1757ea 100644 --- a/website/src/Bird_CNN.css +++ b/website/src/Bird_CNN.css @@ -7,11 +7,11 @@ font-weight: bold; height: 40px; padding: 10px 20px; - background: rgb(47, 168, 208); + background: var(--surface); color: rgb(0, 0, 0); cursor: pointer; border-radius: 20px; - border: 2px solid rgb(47, 168, 208); + border: 2px solid var(--surface); user-select: none; } @@ -27,27 +27,7 @@ } .custom-button.inactive:hover { - border-color: rgb(47, 168, 208); -} - -#site-headline { - margin: 50px min(100px, 10vw) 50px min(100px, 10vw); - color: rgb(47, 168, 208); - font-weight: bold; - font-size: clamp(1rem, 8vw, 4rem); - position: relative; - width: fit-content; -} - -#site-headline::before { - content: ""; - position: absolute; - bottom: 0; - right: 0; - height: 4px; - width: 100%; - border-radius: 20px; - background: rgb(47, 168, 208); + border-color: var(--surface); } .species-item { @@ -174,11 +154,6 @@ a:hover { } } -.site-box { - margin-top: 150px; - width: 100%; -} - .request-box { height: fit-content; width: min(700px, 80%); diff --git a/website/src/Bird_CNN.jsx b/website/src/Bird_CNN.jsx index eda3865..84a163c 100644 --- a/website/src/Bird_CNN.jsx +++ b/website/src/Bird_CNN.jsx @@ -1,5 +1,4 @@ -import { useState } from 'react' -import { useRef } from "react"; +import { useState, useRef } from 'react'; import './Bird_CNN.css'; function Bird_CNN() { @@ -86,7 +85,7 @@ function Bird_CNN() { return ( <>
-

Bird Species Expert

+

Bird Species Expert

Explanation

diff --git a/website/src/Menu.jsx b/website/src/Menu.jsx index cf5cdd3..772f057 100644 --- a/website/src/Menu.jsx +++ b/website/src/Menu.jsx @@ -7,6 +7,7 @@ function Menu() { ); diff --git a/website/src/Reviews.css b/website/src/Reviews.css new file mode 100644 index 0000000..893b3a7 --- /dev/null +++ b/website/src/Reviews.css @@ -0,0 +1,60 @@ +.input-box { + display: flex; +} + +.review-select-dropdown { + width: 200px; + display: flex; + flex-direction: column; + justify-content: flex-start; + height: calc(50px + 40px * 2); + gap: 0px; + user-select: none; +} + +.review-select-button { + width: 100%; + height: 50px; + cursor: pointer; + background: var(--surface); + border: 1px solid var(--surface); + outline: none; + color: white; + border-radius: 16px; +} + +.review-select-button.active { + border-top-right-radius: 16px; + border-top-left-radius: 16px; + + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom: 1px solid black; +} + +.review-select-button:hover { + border-color: white; +} + +.review-select-item { + cursor: pointer; + border: 1px solid var(--surface); + background: var(--surface); + text-align: center; + height: 40px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0; +} + +.review-select-item.last { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; +} + +.review-select-item:hover { + cursor: pointer; + border-color: white; +} \ No newline at end of file diff --git a/website/src/Reviews.jsx b/website/src/Reviews.jsx new file mode 100644 index 0000000..a5109ac --- /dev/null +++ b/website/src/Reviews.jsx @@ -0,0 +1,107 @@ +import { useState, useRef, useEffect } from 'react'; +import './Reviews.css'; + +function Reviews() { + const [error, setError] = useState(null); + const [selectedWebsite, setSelectedWebsite] = useState("Not Specified"); + const [selectWebsiteVisibility, setSelectWebsiteVisibility] = useState(false); + const websiteSelectButton = useRef(); + const [text, setText] = useState(""); + + + const fetchReviews = async () => { + const response = await fetch(`api.marvinkrausser/review`, { + method: "GET", + }); + + if (!response.ok) { + setError(true); + return; + } + else { + setError(false); + } + + const result = await response.json(); + } + + const sendReview = async (review) => { + + const response = await fetch(`api.marvinkrausser/review`, { + method: "POST", + body: JSON.stringify(review), + }); + + if (!response.ok) { + setError(true); + return; + } + else { + setError(false); + } + + const result = await response.json(); + } + + const changeSelectedWebsite = (website) => { + setSelectedWebsite(website); + }; + + const websites = [ + "CNN (current)", + "Portfolio", + "Not Specified" + ]; + + useEffect(() => { + function handleClick(event) { + if (websiteSelectButton.current && !websiteSelectButton.current.contains(event.target) + ) { + setSelectWebsiteVisibility(false); + } + } + + document.addEventListener("click", handleClick); + + return () => { + document.removeEventListener("click", handleClick); + }; + }, []); + + + return (<> +
+

Reviews

+ +
+
+ + {selectWebsiteVisibility &&
+ {websites.map((site, i) => + selectedWebsite !== site && ( +
= (websites.length - (selectedWebsite == websites.at(-1) ? 2 : 1)) ? "review-select-item last" : "review-select-item"} + onClick={() => changeSelectedWebsite(site)} + > + {site} +
+ ) + )} +
} +
+ + setText(e.target.value)} + placeholder="Type something..." + /> +
+
+ ) +} + +export default Reviews; \ No newline at end of file diff --git a/website/src/index.css b/website/src/index.css index 2aff8ff..3ad6ae5 100644 --- a/website/src/index.css +++ b/website/src/index.css @@ -10,6 +10,11 @@ body { background: rgb(4, 0, 10); margin: 0; padding: 0; + --surface: rgb(47, 168, 208); +} + +button { + font-size: 1rem; } a { @@ -25,4 +30,29 @@ h4 { * { box-sizing: border-box; +} + +.site-headline { + margin: 50px min(100px, 10vw) 50px min(100px, 10vw); + color: rgb(47, 168, 208); + font-weight: bold; + font-size: clamp(1rem, min(8vw, 8vh), 4rem); + position: relative; + width: fit-content; +} + +.site-headline::before { + content: ""; + position: absolute; + bottom: 0; + right: 0; + height: 4px; + width: 100%; + border-radius: 20px; + background: rgb(47, 168, 208); +} + +.site-box { + margin-top: 150px; + width: 100%; } \ No newline at end of file