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 >
< script src = "script.js" type = "text/javascript" ></ 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 >
<!--Money hud-->
< div id = "money" >
< p id = "cash" class = "text" ></ p >
< p id = "bank" class = "text" ></ p >
</ div >
</ body >
2022-07-08 23:24:04 +02:00
</ html >
