Added static Input-Form Prototype

anwendung/src/components/CourseNameInput.jsx

@@ -0,0 +1,8 @@
+export default function CourseNameInput(){
+    return(
+        <>
+            <h3>Kursname</h3>
+            <input className="courseNameInput"/>
+        </>
+    )
+}

anwendung/src/components/DozentSelector.jsx

@@ -0,0 +1,27 @@
+export default function DozentSelector(){
+    return(
+        <>
+            <div className="round-border dozentSelector">
+                <table>
+                    <tbody>
+                        <tr>
+                            <th></th>
+                            <th>Dozent</th>
+                            <th>Modul</th>
+                        </tr>
+                        <tr>
+                            <td><input type="checkbox"/></td>
+                            <td>Behrends</td>
+                            <td>Anwendungsprojekt</td>
+                        </tr>
+                        <tr>
+                            <td><input type="checkbox"/></td>
+                            <td>Bima</td>
+                            <td>Web-E</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    )
+}

anwendung/src/components/InputForm.jsx

@@ -0,0 +1,17 @@
+import CourseNameInput from "@/components/CourseNameInput";
+import SemesterRangeInput from "@/components/SemesterRangeInput";
+import InputFormButtons from "@/components/InputFormButtons";
+import DozentSelector from "@/components/DozentSelector";
+
+export default function InputForm() {
+    return (
+        <>
+            <div className="inputForm round-border">
+                <CourseNameInput/>
+                <SemesterRangeInput/>
+                <DozentSelector/>
+                <InputFormButtons/>
+            </div>
+        </>
+    )
+}

anwendung/src/components/InputFormButtons.jsx

@@ -0,0 +1,12 @@
+import Button from './Button';
+
+export default function InputFormButtons() {
+    return (
+        <>
+            <div id="buttons">
+                <Button color="red" width="100px" height="30px" text="Abbrechen"/>
+                <Button color="green" width="100px" height="30px" text="Erstellen"/>
+            </div>
+        </>
+    );
+}

anwendung/src/components/SemesterRangeInput.jsx

@@ -0,0 +1,17 @@
+export default function SemesterRangeInput(){
+    return(
+        <>
+            <div className="semesterRangeInput">
+                <div className="semesterDateLables">
+                    <p className="semesterDateLable">Semesterstart</p>
+                    <p className="semesterDateLable">Semesterende</p>
+                </div>
+                <div className="semesterDateInputPair">
+                    <input className="semesterDateInput"/>
+                    <p className="inputFieldSeperator">-</p>
+                    <input className="semesterDateInput"/>
+                </div>
+            </div>
+        </>
+    )
+}

anwendung/src/pages/index.js

@@ -7,6 +7,8 @@ import WeekSelector from "@/components/WeekSelector";
 import PopUp from "@/components/PopUp";
 import CalenderView from "@/components/CalenderView";
 import DateElement from "@/components/DateElement";
+import InputForm from "@/components/InputForm";
+
 
 
 const inter = Inter({subsets: ['latin']})
@@ -14,13 +16,13 @@ const inter = Inter({subsets: ['latin']})
 export default function Home(p) {
 
 
-
     return (
 
         <>
-            <div style={{height: 50}}></div>
-            <CalenderView/>
-
+            <div className="container">
+                <PopUp/>
+                <InputForm/>
+            </div>
         </>
 
     )

anwendung/src/styles/globals.css

@@ -62,6 +62,7 @@ Button
 /*
 Step Progress Bar
  */
+
 .step-container
 {
   display: flex;
@@ -121,6 +122,9 @@ Step Progress Bar
   z-index: -1;
 }
 
+/*
+weekSelector
+*/
 
 .dateElement{
   display: flex;
@@ -291,11 +295,76 @@ Calender View
 }
 
 
-.entry p
-{
+.entry p {
   color: white;
   font-size: 16px;
   cursor: default;
   pointer-events: none;
 }
 
+/*
+inputForm
+ */
+
+input {
+  border-width: 2px;
+  border-radius: 5px;
+}
+
+.courseNameInput {
+  width: 300px;
+}
+
+.semesterDateInput {
+  width:  150px;
+}
+
+.semesterDateLables, .semesterDateInputPair {
+  display:flex;
+  flex-direction: row;
+  justify-content: left;
+}
+
+.inputFieldSeperator {
+  width: 40px;
+  text-align: center;
+}
+
+.semesterDateLable{
+  width: 150px;
+  margin-right: 40px;
+}
+
+.semesterRangeInput {
+  margin-top: 50px;
+}
+
+.inputForm {
+  width: 600px;
+  height: 600px;
+  padding: 20px;
+  border: solid;
+  display: flex;
+  flex-direction: column;
+
+}
+
+#buttons {
+  align-self: flex-end;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.dozentSelector {
+  height: 350px;
+  border: solid;
+  margin-top: 20px;
+  width: 300px;
+  padding: 10px;
+  margin-bottom: 20px;
+}
+
+th {
+  text-align: left;
+}