diff --git a/css/title.css b/css/title.css index 5dbe1cc..5385802 100644 --- a/css/title.css +++ b/css/title.css @@ -49,4 +49,17 @@ button.play { 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; } \ No newline at end of file diff --git a/index.html b/index.html index 597bae6..c00cfac 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,21 @@ <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() { - window.location = "game.html"; + var username = usernameinput.value; + if (username != "") { + window.location = "game.html" + "?name=" + username; + } + else { + window.location = "game.html"; + } } </script> </body>