From ba1af8204b5da558da241e7ed513ba3b5fec3027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= <koro.no.omo@gmail.com>
Date: Thu, 4 Jun 2026 15:40:56 +0200
Subject: [PATCH] added face detection introduction text

---
 website/src/Object_Detection.jsx        | 10 +++++++++-
 website/src/Object_Detection.module.css | 18 ++++++++++++++++--
 website/src/index.css                   |  4 ++--
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/website/src/Object_Detection.jsx b/website/src/Object_Detection.jsx
index 1ee322c..0edf5e6 100644
--- a/website/src/Object_Detection.jsx
+++ b/website/src/Object_Detection.jsx
@@ -180,6 +180,14 @@ function Object_Detection() {
     return (
         <div className='site-box'>
             <h1 className='site-headline'>Face Detection</h1>
+            <div id={styles["text-container-introduction"]}>
+                <p>
+                    The model’s performance has been limited to 2 FPS due to low-end server hardware constraints.
+                </p>
+                <p>
+                    The webcam video is transmitted to a server for processing. The server does not store, train on, or use the data for any purpose other than face detection.
+                </p>
+            </div>
             <div className={styles["button-div"]}>
                 <button
                     id="button-send"
@@ -200,7 +208,7 @@ function Object_Detection() {
                 <canvas ref={canvasRefSending} style={{ width: "100%", height: "100%", display: "none" }} />
             </div>
 
-            <div id={styles["text-container"]}>
+            <div id={styles["text-container-explanation"]}>
                 <p>
                     This Project is an implementation of the YOLO (You Only Look Once) algorithm. It was implemented with Pytorch and trained on a Dataset from Roboflow.
                 </p>
diff --git a/website/src/Object_Detection.module.css b/website/src/Object_Detection.module.css
index ce0d60b..7dd390a 100644
--- a/website/src/Object_Detection.module.css
+++ b/website/src/Object_Detection.module.css
@@ -13,10 +13,24 @@
 	margin: 50px;
 }
 
-#text-container {
+#text-container-explanation {
 	margin: 70px 0 0 0;
 	width: 80vw;
-	height: 70vh;
+	height: 300px;
 	align-self: center;
 	position: relative;
+}
+
+#text-container-introduction {
+	margin: 50px 0 20px 0;
+	width: 70vw;
+	height: fit-content;
+	align-self: center;
+	position: relative;
+	left: -10vw;
+}
+
+#text-container-introduction p {
+	margin: 40px 0 40px 0;
+	font-size: 1.1rem;
 }
\ No newline at end of file
diff --git a/website/src/index.css b/website/src/index.css
index 3c20a81..14bc47d 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -35,7 +35,7 @@ h4 {
 
 .site-headline {
     margin: 50px min(100px, 10vw) 50px min(100px, 10vw);
-    color: rgb(47, 168, 208);
+    color: var(--surface);
     font-weight: bold;
     font-size: clamp(1rem, min(8vw, 8vh), 4rem);
     position: relative;
@@ -50,7 +50,7 @@ h4 {
     height: 4px;
     width: 100%;
     border-radius: 20px;
-    background: rgb(47, 168, 208);
+    background: var(--surface);
 }
 
 .site-box {