mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 05:56:01 +01:00
167 lines
8.6 KiB
HTML
167 lines
8.6 KiB
HTML
<!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>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="script.js" type="text/javascript" defer></script>
|
|
</head>
|
|
<body>
|
|
<!--Main page design-->
|
|
<section id="overlay">
|
|
<div id="logoContainer">
|
|
<img src="https://i.imgur.com/02A5Cgl.png" id="logo">
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div id="charactersSection">
|
|
<!--Characters will be added here-->
|
|
</div>
|
|
</section>
|
|
|
|
<!--Create character menu design-->
|
|
<form id="characterCreator" class="characterMenu">
|
|
<p id="characterCreatorTopText"><a class="fas fa-user-edit" style="color:white;"></a> Character Creation</p>
|
|
<hr id="characterCreatorTopTextLine">
|
|
<div id="characterInfoContainer">
|
|
<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>
|
|
</div>
|
|
<hr id="characterCreatorTopTextLine">
|
|
<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>
|
|
</form>
|
|
|
|
<!--Edit character menu design-->
|
|
<form id="characterEditor" class="characterMenu">
|
|
<p id="characterCreatorTopText"><a class="fas fa-user-edit" style="color:white;"></a> Character Editor</p>
|
|
<hr id="characterCreatorTopTextLine">
|
|
<div id="characterInfoContainer">
|
|
<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>
|
|
</div>
|
|
<hr id="characterCreatorTopTextLine">
|
|
<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>
|
|
</form>
|
|
|
|
<!--Character Spawn options-->
|
|
<section id="spawnLocation" class="spawnMenu">
|
|
<p id="characterCreatorTopText"><a class="fas fa-map-marker-alt" style="color:white;"></a> Spawn Location</p>
|
|
<hr id="characterCreatorTopTextLine">
|
|
<div id="spawnMenuContainer">
|
|
<!--Spawn locations will be added here-->
|
|
</div>
|
|
<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> Last locations</button>
|
|
<button id="tpCancel" class="characterResetButton"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
|
|
</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>
|
|
</html>
|