Added Login

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

@@ -7,6 +7,7 @@ import WeekSelector from "@/components/WeekSelector";
 import PopUp from "@/components/PopUp";
 import CalenderView from "@/components/CalenderView";
 import DateElement from "@/components/DateElement";
+import Login from "@/Tests/login";
 
 
 const inter = Inter({subsets: ['latin']})
@@ -19,8 +20,7 @@ export default function Home(p) {
 
         <>
             <div style={{height: 50}}></div>
-            <CalenderView/>
-
+            <Login/>
         </>
 
     )

anwendung/src/styles/globals.css

@@ -299,3 +299,53 @@ Calender View
   pointer-events: none;
 }
 
+/*
+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;
+}