public/css/index.css

@@ -0,0 +1,51 @@
+#login {
+    background: #212121;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+}
+
+#game {
+    display: none;
+}
+
+#chat {
+    display: none;
+}
+
+#login > form {
+    margin-right: auto;
+    margin-left: auto;
+    color: #ffffff;
+    width: 50%;
+}
+
+#login label {
+    font-size: 1.5em;
+}
+
+#login input, #login button {
+    font-size: 2em;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    height: 2.5em;
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
+#login input {
+    background-color: #404040;
+    color: #ffffff;
+}
+
+#login button {
+    background-color: #0062ff;
+    color: #ffffff;
+}

public/index.html

@@ -19,6 +19,17 @@
     <div class="title">Projektmanagement Game</div>
 </header>
 <main>
+    <div id="login">
+        <form>
+            <label for="username">Benutzername: </label>
+            <input type="text" name="username" id="username" placeholder="Benutzername">
+
+            <label for="room">Raumnummer: </label>
+            <input type="text" name="room" id="room" placeholder="Raumnummer">
+
+            <button id="ok" type="button">Bestätigen</button>
+        </form>
+    </div>
     <div id="game"></div>
     <div id="chat">
         <div id="messages_received"></div>