added username input on title screen

css/title.css

@@ -50,3 +50,16 @@ button.play:hover {
     background-color: #20b13f;
     cursor: pointer;
 }
+
+input.username {
+    font-family: Baloo2, sans-serif;
+    font-size: 200%;
+    border: none;
+    padding: 4px 16px;
+    margin: 18px;
+    border-radius: 12px;
+}
+input.username:focus {
+    border: none;
+    outline: none;
+}

index.html

@@ -10,14 +10,22 @@
         <h1 class="name">
             RUNIC
         </h1>
+        <input id="runic_username" class="username" placeholder="Username" maxlength="16"><br>
         <button class="play" onclick="play()">
             PLAY
         </button>
     </div>
     <script>
+        var usernameinput = document.getElementById("runic_username");
         function play() {
+            var username = usernameinput.value;
+            if (username != "") {
+                window.location = "game.html" + "?name=" + username;
+            }
+            else {
                 window.location = "game.html";
             }
+        }
     </script>
 </body>
 </html>