added face detection introduction text

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>

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

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 {