Merge branch 'main' of https://github.com/DHBWLoerrach/TIF22A_AnwProjekt_B

anwendung/src/Tests/login.jsx

@@ -0,0 +1,18 @@
+import {useState} from "react";
+import Button from "@/components/Button";
+
+export default function Login(){
+    return(
+        <div className="artboard-demo phone-1">
+            <login className={"login-container"}>
+                <p className={"font-big"}>Login</p>
+                <p className={"font-middle placement"} align={"screenLeft"}>Username</p>
+                <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" />
+                <p className={"font-middle placement"} >Password</p>
+                <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" />
+                <br/>
+                <Button text={"Login"} color={"#808080"} width={"25px"}/>
+            </login>
+        </div>
+    );
+}

anwendung/src/pages/index.js

@@ -8,6 +8,7 @@ import PopUp from "@/components/PopUp";
 import CalenderView from "@/components/CalenderView";
 import DateElement from "@/components/DateElement";
 import InputForm from "@/components/InputForm";
+import Login from "@/Tests/login";
 
 
 
@@ -19,10 +20,15 @@ export default function Home(p) {
     return (
 
         <>
+
             <div className="container">
                 <PopUp/>
                 <InputForm/>
             </div>
+
+            <div style={{height: 50}}></div>
+            <Login/>
+
         </>
 
     )

anwendung/src/styles/globals.css

@@ -367,4 +367,56 @@ input {
 
 th {
   text-align: left;
-}
+}
+
+/*
+Login
+ */
+
+.login-container
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    height: 100%;
+}
+
+.input-bordered
+{
+    border: 1px solid #000000;
+    border-radius: 5px;
+    padding: 5px;
+    width: 200px;
+}
+
+.input
+{
+    padding: 5px;
+    width: 200px;
+    background-color: aliceblue;
+    border-radius: 5px;
+    font-family: Arial, serif;
+    font-size: 16px;
+    font-color: white;
+}
+
+.phone-1{
+    width: 375px;
+    height: 350px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    border-width: 3px;
+    border-color: #1e2428;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+.placement{
+    text-align: left;
+}
+