diff --git a/growbros-frontend/index.html b/growbros-frontend/index.html
index f69a4c46028bc8fa213e098940539af544f6d46a..6364cfa99010e6b17f2b461d2acf11a6b6c2baba 100644
--- a/growbros-frontend/index.html
+++ b/growbros-frontend/index.html
@@ -1,10 +1,10 @@
<!doctype html>
-<html lang="en">
+<html lang="de">
<head>
<meta charset="UTF-8"/>
- <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
+ <link rel="icon" type="image/png" href="/recources/growbros_logo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <title>Vite + React + TS</title>
+ <title>GrowBros - Manage your garden</title>
</head>
<body>
<div id="root"></div>
diff --git a/growbros-frontend/public/recources/growbros_logo.png b/growbros-frontend/public/recources/growbros_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3417b187bb50fe699e0bfda202c842feae906f7
Binary files /dev/null and b/growbros-frontend/public/recources/growbros_logo.png differ
diff --git a/growbros-frontend/src/pages/BackendConnectorTestInterface.tsx b/growbros-frontend/src/pages/BackendConnectorTestInterface.tsx
index b28b5617d910a39409a8daca7b2e009cdff462b4..1c58620a166b5671fe1689dd70db414c21856b31 100644
--- a/growbros-frontend/src/pages/BackendConnectorTestInterface.tsx
+++ b/growbros-frontend/src/pages/BackendConnectorTestInterface.tsx
@@ -5,8 +5,10 @@ const bc = new BackendConnectorImpl("http://localhost:8080/api/v1");
export function BackendConnectorTestInterface() {
return <div style={{padding: "1rem"}}>
<h2>Backend connector test</h2>
- <p>Achtung: das ist / war ausschließlich zum Testen von meinen geschriebenen fetch-methoden. Benutzt das auf
- keinen Fall in euren components... lg lukas</p>
+ <p><b>Achtung:</b> das ist / war ausschließlich zum Testen von meinen geschriebenen fetch-methoden. Benutzt das
+ auf
+ keinen Fall in euren components... lg lukas
+ </p>
<h3>Plants controller</h3>
<ul style={{display: "block", listStyleType: "initial"}}>
<li onClick={async () => console.log(await bc.getSinglePlant(1101))}>Get single plant</li>
@@ -19,7 +21,7 @@ export function BackendConnectorTestInterface() {
<li onClick={async () => console.log(await bc.getGardenEntries())}>Get garden</li>
<li onClick={async () => console.log(await bc.addToGarden(1000))}>Add plant to garden</li>
<li onClick={async () => console.log(await bc.getGardenSize())}>garden size</li>
- <li onClick={async () => console.log(await bc.removeEntryFromGarden(3))}>remove entry</li>
+ <li onClick={async () => console.log(await bc.removeFromGarden(3))}>remove entry</li>
<li onClick={async () => console.log(await bc.clearGarden())}>clear garden</li>
</ul>
<h3>Wishlist controller</h3>
diff --git a/growbros-frontend/src/pages/Home.tsx b/growbros-frontend/src/pages/Home.tsx
index 0bef8da1af0b2c1f059103a24e910516cffd2f93..d6bc10e78662f693c6a08b7a3e5aaf66c089b638 100644
--- a/growbros-frontend/src/pages/Home.tsx
+++ b/growbros-frontend/src/pages/Home.tsx
@@ -1,89 +1,89 @@
-import { useState } from "react";
+import {useState} from "react";
import "../stylesheets/Home.css";
-import { NavLink } from "react-router-dom";
-import { checkJwtStatus } from "../jwt/Cookies";
+import {NavLink} from "react-router-dom";
+import {checkJwtStatus} from "../jwt/Cookies";
function Home() {
- return (
- <main>
- <div className="hero">
- <img
- src="../../public/recources/images/Vegetables.jpeg"
- className="mainPicture"
- ></img>
- <div className="descriptionAside">
- <h1 className="header1">GrowBros</h1>
- <h2 className="header2">Keep your plants alive</h2>
- <p className="text">
- "Mit GrowBros wird Gärtnern zum Kinderspiel! Finde die perfekten
- Pflanzen für deinen Garten, erhalte nützliche Informationen und
- verwalte sie mühelos. Starte noch heute und lass deinen Garten in
- voller Blüte erstrahlen!"
- </p>
- <StartNowLink></StartNowLink>
- </div>
- </div>
- <div className="secondDiv">
- Fange noch heute an dir deinen Traumgarten zusammenzustellen und ernte
- bald die Früchte deiner Arbeit.
- </div>
- <div style={{ display: "flex" }}>
- <div className="smallDiv" style={{ width: "60%" }}>
- <h2>Unsere Vorteile...</h2>
- <p>
- Entdecke neue Pflanzen und erhalte wertvolle Informationen für
- deinen Garten. Erfasse sie mühelos und erhalte Erinnerungen für
- Pflege und Ernte.
- </p>
- </div>
- <img
- className="smallPicture"
- src="../../public/recources/images/Broccoli.webp"
- ></img>
- </div>
- <div style={{ display: "flex" }}>
- <img
- className="smallPicture"
- src="../../public/recources/images/Red_Vegetable.webp"
- ></img>
- <div className="smallDiv">
- <p>
- Organisiere deinen Garten besser. Verfolge den Fortschritt deiner
- Pflanzen und erhalte Anleitungen, um sie gesund und glücklich zu
- halten.
- </p>
- </div>
- </div>
- <div style={{ display: "flex" }}>
- <div className="smallDiv">
- <p>
- Maximiere deine Ernte. Unsere App hilft dir, den optimalen Zeitpunkt
- für die Ernte deiner Pflanzen zu finden und sorgt so für eine reiche
- Belohnung.
- </p>
- </div>
- <img
- className="smallPicture"
- src="../../public/recources/images/Cucumber.webp"
- ></img>
- </div>
- </main>
- );
+ return (
+ <main>
+ <div className="hero">
+ <img
+ src="../../public/recources/images/Vegetables.jpeg"
+ className="mainPicture"
+ alt="fresh plants"/>
+ <div className="descriptionAside">
+ <h1 className="header1">GrowBros</h1>
+ <h2 className="header2">Keep your plants alive</h2>
+ <p>
+ "Mit GrowBros wird Gärtnern zum Kinderspiel! Finde die perfekten
+ Pflanzen für deinen Garten, erhalte nützliche Informationen und
+ verwalte sie mühelos. Starte noch heute und lass deinen Garten in
+ voller Blüte erstrahlen!"
+ </p>
+ <StartNowLink/>
+ </div>
+ </div>
+ <div className="secondDiv">
+ Fange noch heute an, dir deinen Traumgarten zusammenzustellen und ernte
+ bald die Früchte deiner Arbeit.
+ </div>
+ <div style={{display: "flex"}}>
+ <div className="smallDiv" style={{width: "60%"}}>
+ <h2>Unsere Vorteile...</h2>
+ <p>
+ Entdecke neue Pflanzen und erhalte wertvolle Informationen für
+ Deinen Garten. Erfasse sie mühelos und erhalte Erinnerungen für
+ Pflege und Ernte.
+ </p>
+ </div>
+ <img
+ className="smallPicture"
+ src="../../public/recources/images/Broccoli.webp"
+ alt="broccoli"></img>
+ </div>
+ <div style={{display: "flex"}}>
+ <img
+ className="smallPicture"
+ src="../../public/recources/images/Red_Vegetable.webp"
+ alt="red vegetables"></img>
+ <div className="smallDiv">
+ <p>
+ Organisiere deinen Garten besser. Verfolge den Fortschritt deiner
+ Pflanzen und erhalte Anleitungen, um sie gesund und glücklich zu
+ halten.
+ </p>
+ </div>
+ </div>
+ <div style={{display: "flex"}}>
+ <div className="smallDiv">
+ <p>
+ Maximiere Deine Ernte. Unsere App hilft dir, den optimalen Zeitpunkt
+ für die Ernte deiner Pflanzen zu finden und sorgt so für eine reiche
+ Belohnung.
+ </p>
+ </div>
+ <img
+ className="smallPicture"
+ src="../../public/recources/images/Cucumber.webp"
+ alt="cucumber"></img>
+ </div>
+ </main>
+ );
}
function StartNowLink() {
- const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+ const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
- checkJwtStatus(setIsLoggedIn);
+ checkJwtStatus(setIsLoggedIn);
- return (
- <div className="link">
- <NavLink to={isLoggedIn ? "/suchen" : "/login"}>
- <h3> Starte hier</h3>
- <p>und füge Pflanzen zu deinem Garten hinzu</p>
- </NavLink>
- </div>
- );
+ return (
+ <div className="link">
+ <NavLink to={isLoggedIn ? "/suchen" : "/login"}>
+ <h3>Starte hier</h3>
+ <p>und füge Pflanzen zu deinem Garten hinzu</p>
+ </NavLink>
+ </div>
+ );
}
export default Home;
diff --git a/growbros-frontend/src/stylesheets/Home.css b/growbros-frontend/src/stylesheets/Home.css
index 8f651d1f643f32249636914180ac3feb9647c4e2..0112386a64837c66de2ba49a2ff082a870c4bf75 100644
--- a/growbros-frontend/src/stylesheets/Home.css
+++ b/growbros-frontend/src/stylesheets/Home.css
@@ -22,6 +22,7 @@
}
.descriptionAside p {
+ font-size: 1.25rem;
padding-top: 20px;
font-family: Century Gothic, sans-serif;
}
@@ -37,6 +38,8 @@
font-size: 1.5rem;
font-weight: 500;
font-family: Century Gothic, sans-serif;
+ text-align: center;
+ text-wrap: pretty; /*ja, das funktioniert, auch wenns rot unterstrichen ist (keine einzelnen wörter in der letzten zeile)*/
}
.smallDiv {
@@ -57,20 +60,18 @@
.link a {
color: #4d5927;
- font-size: 1.3rem;
-
}
.link p {
- font-size: 1rem;
padding-top: 5px;
}
-.link{
+.link {
margin-top: 30px;
- transition: transform 0.25s ease-in-out;
+ font-size: 1.25rem;
+ transition: transform 0.15s ease-in-out;
}
-.link:hover{
+.link:hover {
transform: scale(1.025);
-}
\ No newline at end of file
+}