added review buttons

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() {
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/bird_cnn" element={<Bird_CNN />} />
+        <Route path="/reviews" element={<Reviews />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </>

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);
+    border-color: var(--surface);
-}
-
-#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);
 }
 
 .species-item {
@@ -174,11 +154,6 @@ a:hover {
     }
 }
 
-.site-box {
-    margin-top: 150px;
-    width: 100%;
-}
-
 .request-box {
     height: fit-content;
     width: min(700px, 80%);

website/src/Bird_CNN.jsx

@@ -1,5 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react';
-import { useRef } from "react";
 import './Bird_CNN.css';
 
 function Bird_CNN() {
@@ -86,7 +85,7 @@ function Bird_CNN() {
     return (
         <>
             <div className='site-box'>
-                <h1 id='site-headline'>Bird Species Expert</h1>
+                <h1 className='site-headline'>Bird Species Expert</h1>
                 <div className='content-box' style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
                     <div className='explanation-box left'>
                         <h2 style={{ color: "rgb(47, 168, 208)" }}>Explanation</h2>

website/src/Menu.jsx

@@ -7,6 +7,7 @@ function Menu() {
             <nav id="navbar-main">
                 <Link className='navbar-item' to="/">Homepage</Link>
                 <Link className='navbar-item' to="/bird_cnn">Birds</Link>
+                <Link className='navbar-item' to="/reviews">Reviews</Link>
             </nav>
         </>
     );

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;
+}

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 (<>
+        <div className='site-box'>
+            <h1 className='site-headline'>Reviews</h1>
+
+            <div className='input-box'>
+                <div className='review-select-dropdown'>
+                    <button ref={websiteSelectButton} className={selectWebsiteVisibility ? "review-select-button active" : "review-select-button"} onClick={() => { setSelectWebsiteVisibility(!selectWebsiteVisibility) }}>
+                        {selectedWebsite}
+                    </button>
+                    {selectWebsiteVisibility && <div className='review-select-menu'>
+                        {websites.map((site, i) =>
+                            selectedWebsite !== site && (
+                                <div
+                                    key={site}
+                                    className={i >= (websites.length - (selectedWebsite == websites.at(-1) ? 2 : 1)) ? "review-select-item last" : "review-select-item"}
+                                    onClick={() => changeSelectedWebsite(site)}
+                                >
+                                    {site}
+                                </div>
+                            )
+                        )}
+                    </div>}
+                </div>
+
+                <input
+                    type="text"
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    placeholder="Type something..."
+                />
+            </div>
+        </div>
+    </>)
+}
+
+export default Reviews;

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%;
 }