2021-12-23 22:40:54 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< link rel = "stylesheet" href = "style.css" >
< script src = "https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y = "true" > < / script >
2022-07-08 23:24:04 +02:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < / script >
2022-07-21 22:49:29 +02:00
< script src = "script.js" type = "text/javascript" defer > < / script >
2021-12-23 22:40:54 +01:00
< / head >
< body >
<!-- Main page design -->
< section id = "overlay" >
< div id = "logoContainer" >
2022-07-08 23:24:04 +02:00
< img src = "https://i.imgur.com/02A5Cgl.png" id = "logo" >
2021-12-23 22:40:54 +01:00
< / div >
2021-12-24 22:29:08 +01:00
< h1 id = "serverName" > < / h1 >
< p id = "aop" class = "mainPage" style = "margin-bottom: -1vh;" > < / p >
< p class = "mainPage" > Select or create a character:< / p >
< button class = "homeScreenButton" id = "newCharacterButton" > < a class = "fas fa-plus-circle" style = "color:white;" > < / a > Create New Character < a id = "playerAmount" > < / a > < / button >
< br >
< button class = "homeScreenButton" id = "quitGameButton" > < a class = "fas fa-sign-out-alt" style = "color:white;" > < / a > Quit Game< / button >
2021-12-23 22:40:54 +01:00
< div id = "charactersSection" >
2021-12-24 22:29:08 +01:00
<!-- Characters will be added here -->
2021-12-23 22:40:54 +01:00
< / div >
< / section >
<!-- Create character menu design -->
< form id = "characterCreator" class = "characterMenu" >
2021-12-24 22:29:08 +01:00
< p id = "characterCreatorTopText" > < a class = "fas fa-user-edit" style = "color:white;" > < / a > Character Creation< / p >
< hr id = "characterCreatorTopTextLine" >
2021-12-23 22:40:54 +01:00
< div id = "characterInfoContainer" >
2022-02-26 01:48:22 +01:00
< div id = "characterInfoContainerLeft" >
<!-- First name -->
< label class = "firstRowText" for = "firstname" > First Name< / label >
< br >
< input id = "firstName" class = "firstRowInput" type = "text" placeholder = "First Name" name = "firstname" required >
< br >
<!-- Dob -->
< label class = "secondRowText" for = "dob" > Date of Birth< / label >
< br >
< input id = "dateOfBirth" class = "secondRowInput" type = "date" name = "dob" required >
< br >
<!-- Twotter name -->
< label class = "thirdRowText" for = "twotter" > Twotter Name< / label >
< br >
< input id = "twtName" class = "thirdRowInput" type = "text" placeholder = "Twotter Name" name = "twotter" required >
< / div >
< div id = "characterInfoContainerRight" >
<!-- Last name -->
< label class = "firstRowText" for = "lastname" > Last Name< / label >
< br >
< input id = "lastName" style = "width: 93%;" class = "firstRowInput" type = "text" placeholder = "Last Name" name = "lastname" required >
< br >
<!-- gender -->
< label class = "secondRowText" for = "gender" > Gender< / label >
< br >
< select id = "gender" class = "secondRowInput" name = "gender" required >
< option class = "secondRowInput" > Male< / option >
< option class = "secondRowInput" > Female< / option >
< / select >
< br >
<!-- Department -->
< label class = "thirdRowText" for = "department" > Department< / label >
< br >
< select id = "department" class = "thirdRowInput departments" name = "department" required > < / select >
< / div >
2021-12-23 22:40:54 +01:00
< / div >
2022-02-26 01:48:22 +01:00
< hr id = "characterCreatorTopTextLine" >
2021-12-24 22:29:08 +01:00
< button id = "submitCharacterCreation" class = "characterSubmitButton" type = "submit" form = "characterCreator" > < a class = "fas fa-plus-circle" style = "color:white;" > < / a > Create Character< / button >
< button id = "cancelCharacterCreation" class = "characterResetButton" type = "reset" > < a class = "fas fa-times-circle" style = "color:white;" > < / a > Cancel< / button >
2021-12-23 22:40:54 +01:00
< / form >
<!-- Edit character menu design -->
< form id = "characterEditor" class = "characterMenu" >
2021-12-24 22:29:08 +01:00
< p id = "characterCreatorTopText" > < a class = "fas fa-user-edit" style = "color:white;" > < / a > Character Editor< / p >
< hr id = "characterCreatorTopTextLine" >
2021-12-23 22:40:54 +01:00
< div id = "characterInfoContainer" >
2022-02-26 01:48:22 +01:00
< div id = "characterInfoContainerLeft" >
<!-- First name -->
< label class = "firstRowText" for = "firstname" > First Name< / label >
< br >
< input id = "newFirstName" class = "firstRowInput" type = "text" placeholder = "First Name" name = "firstname" required >
< br >
<!-- Dob -->
< label class = "secondRowText" for = "dob" > Date of Birth< / label >
< br >
< input id = "newDateOfBirth" class = "secondRowInput" type = "date" name = "dob" required >
< br >
<!-- Twotter name -->
< label class = "thirdRowText" for = "twotter" > Twotter Name< / label >
< br >
< input id = "newTwtName" class = "thirdRowInput" type = "text" placeholder = "Twotter Name" name = "twotter" required >
< / div >
< div id = "characterInfoContainerRight" >
<!-- Last name -->
< label class = "firstRowText" for = "lastname" > Last Name< / label >
< br >
< input id = "newLastName" style = "width: 93%;" class = "firstRowInput" type = "text" placeholder = "Last Name" name = "lastname" required >
< br >
<!-- gender -->
< label class = "secondRowText" for = "gender" > Gender< / label >
< br >
< select id = "newGender" class = "secondRowInput" name = "gender" required >
< option class = "secondRowInput" > Male< / option >
< option class = "secondRowInput" > Female< / option >
< / select >
< br >
<!-- Department -->
< label class = "thirdRowText" for = "department" > Department< / label >
< br >
< select id = "newDepartment" class = "thirdRowInput departments" name = "department" required > < / select >
< / div >
2021-12-23 22:40:54 +01:00
< / div >
2022-02-26 01:48:22 +01:00
< hr id = "characterCreatorTopTextLine" >
2021-12-24 22:29:08 +01:00
< button id = "submitCharacterEditing" class = "characterSubmitButton" type = "submit" form = "characterEditor" > < a class = "fas fa-plus-circle" style = "color:white;" > < / a > Save Changes< / button >
< button id = "cancelCharacterEditing" class = "characterResetButton" type = "reset" > < a class = "fas fa-times-circle" style = "color:white;" > < / a > Cancel< / button >
2021-12-23 22:40:54 +01:00
< / form >
<!-- Character Spawn options -->
< section id = "spawnLocation" class = "spawnMenu" >
2021-12-24 22:29:08 +01:00
< p id = "characterCreatorTopText" > < a class = "fas fa-map-marker-alt" style = "color:white;" > < / a > Spawn Location< / p >
< hr id = "characterCreatorTopTextLine" >
2021-12-23 22:40:54 +01:00
< div id = "spawnMenuContainer" >
2021-12-24 22:29:08 +01:00
<!-- Spawn locations will be added here -->
2021-12-23 22:40:54 +01:00
< / div >
2021-12-24 22:29:08 +01:00
< hr id = "characterCreatorTopTextLine" style = "margin-top: 3vh;" >
< button id = "tpDoNot" class = "characterSubmitButton" style = "margin-left: 26vw; margin-bottom: 2vh;" > < a class = "fas fa-compass" style = "color:white;" > < / a > Do not teleport< / button >
< button id = "tpCancel" class = "characterResetButton" > < a class = "fas fa-times-circle" style = "color:white;" > < / a > Cancel< / button >
2021-12-23 22:40:54 +01:00
< / section >
<!-- Confirm exit game menu design -->
< section id = "exitGameMenu" class = "confirmationScreen" >
< p id = "characterCreatorTopText" > Are you sure you'd like to quit the game?< / p >
< hr id = "characterCreatorTopTextLine" >
< button id = "exitGameConfirm" class = "confirmationScreenConfirm" > < a class = "fas fa-check-circle" style = "color:white;" > < / a > Confirm< / button >
< button id = "exitGameCancel" class = "confirmationScreenCancel" > < a class = "fas fa-times-circle" style = "color:white;" > < / a > Cancel< / button >
< / section >
<!-- Confirm delete character button -->
< section id = "deleteCharacterMenu" class = "confirmationScreen" >
< p id = "characterCreatorTopText" > Are you sure you'd like to delete this character?< / p >
< hr id = "characterCreatorTopTextLine" >
< button id = "deleteCharacterConfirm" class = "confirmationScreenConfirm" > < a class = "fas fa-check-circle" style = "color:white;" > < / a > Confirm< / button >
< button id = "deleteCharacterCancel" class = "confirmationScreenCancel" > < a class = "fas fa-times-circle" style = "color:white;" > < / a > Cancel< / button >
< / section >
< / body >
2022-07-21 22:49:29 +02:00
< / html >
