mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 13:56:02 +01:00
Updated 2.1.0
Updated everything to new format, N1K0 is about to work on some more stuff.
This commit is contained in:
Andyyy7666
172
ND_CharacterSelection/source/ui/index.html
Normal file
172
ND_CharacterSelection/source/ui/index.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!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"></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> Do not teleport</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>
|
||||
|
||||
<!--Money hud-->
|
||||
<div id="money">
|
||||
<p id="cash" class="text"></p>
|
||||
<p id="bank" class="text"></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
267
ND_CharacterSelection/source/ui/script.js
Normal file
267
ND_CharacterSelection/source/ui/script.js
Normal file
@@ -0,0 +1,267 @@
|
||||
$(function() {
|
||||
let displayOn = true
|
||||
|
||||
// Hide/show ui function
|
||||
function display(bool) {
|
||||
if (bool) {
|
||||
displayOn = true;
|
||||
$("body").show();
|
||||
Money(false)
|
||||
} else {
|
||||
displayOn = false;
|
||||
$("body").hide();
|
||||
}
|
||||
}
|
||||
function characterCreatorMenu(bool) {
|
||||
if (bool) {
|
||||
$("#characterCreator").fadeIn("slow");
|
||||
$("#characterEditor, #exitGameMenu, #deleteCharacterMenu, #spawnLocation").hide();
|
||||
return;
|
||||
}
|
||||
$("#characterCreator").fadeOut("slow");
|
||||
}
|
||||
function characterEditorMenu(bool) {
|
||||
if (bool) {
|
||||
$("#characterEditor").fadeIn("slow");
|
||||
$("#characterCreator, #exitGameMenu, #deleteCharacterMenu, #spawnLocation").hide();
|
||||
return;
|
||||
}
|
||||
$("#characterEditor").fadeOut("slow");
|
||||
}
|
||||
function exitGameMenu(bool) {
|
||||
if (bool) {
|
||||
$("#exitGameMenu").fadeIn("slow");
|
||||
$("#characterCreator, #characterEditor, #deleteCharacterMenu, #spawnLocation").hide();
|
||||
return;
|
||||
}
|
||||
$("#exitGameMenu").fadeOut("slow");
|
||||
}
|
||||
function confirmDeleteMenu(bool) {
|
||||
if (bool) {
|
||||
$("#deleteCharacterMenu").fadeIn("slow");
|
||||
$("#characterCreator, #characterEditor, #exitGameMenu, #spawnLocation").hide();
|
||||
return;
|
||||
}
|
||||
$("#deleteCharacterMenu").fadeOut("slow");
|
||||
}
|
||||
function spawnMenu(bool) {
|
||||
if (bool) {
|
||||
$("#spawnLocation").fadeIn("slow");
|
||||
$("#characterCreator, #characterEditor, #exitGameMenu, #deleteCharacterMenu").hide();
|
||||
return;
|
||||
}
|
||||
$("#spawnLocation").fadeOut("slow");
|
||||
}
|
||||
function Money(bool) {
|
||||
if (bool) {
|
||||
$("#money").show();
|
||||
$("body").css("background-image", "none");
|
||||
$("body").show();
|
||||
if (displayOn === false) {
|
||||
$("#overlay").hide();
|
||||
}
|
||||
} else {
|
||||
$("#money").hide();
|
||||
$("#overlay").show();
|
||||
}
|
||||
}
|
||||
display(false);
|
||||
characterCreatorMenu(false);
|
||||
characterEditorMenu(false);
|
||||
exitGameMenu(false);
|
||||
confirmDeleteMenu(false);
|
||||
spawnMenu(false);
|
||||
Money(false);
|
||||
|
||||
window.addEventListener('message', function(event) {
|
||||
const item = event.data;
|
||||
if (item.type === "ui") {
|
||||
if (item.status) {
|
||||
$('#serverName').text(item.serverName);
|
||||
$("body").css("background-image", "url(" + item.background + ")");
|
||||
display(true);
|
||||
} else {
|
||||
display(false);
|
||||
}
|
||||
}
|
||||
|
||||
$('#playerAmount').text(item.characterAmount);
|
||||
|
||||
if (item.type === "character") {
|
||||
characterCreatorMenu(false);
|
||||
createCharacter(item.firstName, item.lastName, item.dateOfBirth, item.gender, item.twtName, item.department, item.startingCash, item.startingBank, item.id);
|
||||
}
|
||||
|
||||
if (item.type === "setSpawns") {
|
||||
$("#spawnMenuContainer").empty();
|
||||
setTimeout(function(){
|
||||
$("#spawnMenuContainer").append(`<button class="spawnButtons" data-x="${item.x}" data-y="${item.y}" data-z="${item.z}">${item.name}</button>`);
|
||||
$(".spawnButtons").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/tpToLocation`, JSON.stringify({
|
||||
x: $(this).data("x"),
|
||||
y: $(this).data("y"),
|
||||
z: $(this).data("z")
|
||||
}));
|
||||
spawnMenu(false);
|
||||
setTimeout(function(){
|
||||
$("#spawnMenuContainer").empty();
|
||||
}, 550);
|
||||
return;
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
|
||||
if (item.type === "givePerms") {
|
||||
$('.departments').append($('<option>', {
|
||||
text: item.deptRole
|
||||
}));
|
||||
}
|
||||
|
||||
if (item.type === "aop") {
|
||||
$("#aop").text(item.aop);
|
||||
}
|
||||
|
||||
if (item.type === "Money") {
|
||||
Money(true)
|
||||
$("#cash").text(item.cash);
|
||||
$("#bank").text(item.bank);
|
||||
}
|
||||
|
||||
if (item.type === "onStart" && item.enableMoneySystem) {
|
||||
$("#characterInfoContainerLeft").append('<label class="fourthRowText" for="startingcash">Cash</label><br><input id="startingCash" class="fourthRowInput" type="number" pattern="[0-9]+" placeholder="$2500" name="startingcash" required>');
|
||||
$("#characterInfoContainerRight").append('<label class="fourthRowText" for="startingbank">Bank</label><br><input id="startingBank" class="fourthRowInput" type="number" pattern="[0-9]+" placeholder="$8000" name="startingbank" style="width: 93%;" required>');
|
||||
$("#startingBank").attr({
|
||||
"max": item.maxStartingBank,
|
||||
});
|
||||
$("#startingCash").attr({
|
||||
"max": item.maxStartingCash,
|
||||
});
|
||||
}
|
||||
|
||||
if (item.type === "refresh") {
|
||||
$("#charactersSection").empty();
|
||||
}
|
||||
})
|
||||
|
||||
function createCharacter(firstName, lastName, dateOfBirth, gender, twtName, department, startingCash, startingBank, id) {
|
||||
$("#charactersSection").append(`<button id="characterButton${id}" class="createdButton">${firstName} ${lastName} (${department})</button><button id="characterButtonEdit${id}" class="createdButtonEdit"><a class="fas fa-edit"></a> Edit</button><button id="characterButtonDelete${id}" class="createdButtonDelete"><a class="fas fa-trash-alt"></a> Delete</button>`);
|
||||
$(`#characterButton${id}`).click(function() {
|
||||
spawnMenu(true)
|
||||
$.post(`https://${GetParentResourceName()}/setMainCharacter`, JSON.stringify({
|
||||
id: id
|
||||
}));
|
||||
return;
|
||||
});
|
||||
$(`#characterButtonEdit${id}`).click(function() {
|
||||
characterEditorMenu(true)
|
||||
$("#newFirstName").val(firstName);
|
||||
$("#newLastName").val(lastName);
|
||||
$("#newDateOfBirth").val(dateOfBirth);
|
||||
$("#newGender").val(gender);
|
||||
$("#newTwtName").val(twtName);
|
||||
$("#newDepartment").val(department);
|
||||
characterEdited = id
|
||||
return;
|
||||
});
|
||||
$(`#characterButtonDelete${id}`).click(function() {
|
||||
confirmDeleteMenu(true)
|
||||
characterDeleting = id
|
||||
return;
|
||||
});
|
||||
}
|
||||
|
||||
$("#characterCreator").submit(function() {
|
||||
$.post(`https://${GetParentResourceName()}/newCharacter`, JSON.stringify({
|
||||
firstName: $("#firstName").val(),
|
||||
lastName: $("#lastName").val(),
|
||||
dateOfBirth: $("#dateOfBirth").val(),
|
||||
gender: $("#gender").val(),
|
||||
twtName: $("#twtName").val(),
|
||||
department: $("#department").val(),
|
||||
startingCash: $("#startingCash").val(),
|
||||
startingBank: $("#startingBank").val()
|
||||
}));
|
||||
characterCreatorMenu(false)
|
||||
$("#firstName, #lastName, #dateOfBirth, #twtName, #startingCash, #startingBank").val("")
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#characterEditor").submit(function() {
|
||||
characterEditorMenu(false)
|
||||
$.post(`https://${GetParentResourceName()}/editCharacter`, JSON.stringify({
|
||||
firstName: $("#newFirstName").val(),
|
||||
lastName: $("#newLastName").val(),
|
||||
dateOfBirth: $("#newDateOfBirth").val(),
|
||||
gender: $("#newGender").val(),
|
||||
twtName: $("#newTwtName").val(),
|
||||
department: $("#newDepartment").val(),
|
||||
id: characterEdited
|
||||
}));
|
||||
$("#characterButton" + characterEdited).text($("#newFirstName").val() + " " + $("#newLastName").val() + " (" + $("#newDepartment").val() + ")");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#deleteCharacterConfirm").click(function() {
|
||||
confirmDeleteMenu(false)
|
||||
$("#characterButton" + characterDeleting).fadeOut("slow",function(){
|
||||
$("#characterButton" + characterDeleting).remove();
|
||||
})
|
||||
$("#characterButtonEdit" + characterDeleting).fadeOut("slow",function(){
|
||||
$("#characterButtonEdit" + characterDeleting).remove();
|
||||
})
|
||||
$("#characterButtonDelete" + characterDeleting).fadeOut("slow",function(){
|
||||
$("#characterButtonDelete" + characterDeleting).remove();
|
||||
})
|
||||
$.post(`https://${GetParentResourceName()}/delCharacter`, JSON.stringify({
|
||||
character: characterDeleting
|
||||
}));
|
||||
return;
|
||||
});
|
||||
|
||||
$("#newCharacterButton").click(function() {
|
||||
characterCreatorMenu(true)
|
||||
return;
|
||||
});
|
||||
|
||||
$("#deleteCharacterCancel").click(function() {
|
||||
confirmDeleteMenu(false)
|
||||
return;
|
||||
});
|
||||
$("#cancelCharacterCreation").click(function() {
|
||||
characterCreatorMenu(false)
|
||||
return;
|
||||
});
|
||||
$("#cancelCharacterEditing").click(function() {
|
||||
characterEditorMenu(false)
|
||||
return;
|
||||
});
|
||||
|
||||
$("#tpCancel").click(function() {
|
||||
spawnMenu(false)
|
||||
setTimeout(function(){
|
||||
$("#spawnMenuContainer").empty();
|
||||
}, 550);
|
||||
return;
|
||||
});
|
||||
$("#tpDoNot").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/tpDoNot`);
|
||||
spawnMenu(false)
|
||||
setTimeout(function(){
|
||||
$("#spawnMenuContainer").empty();
|
||||
}, 550);
|
||||
return;
|
||||
});
|
||||
|
||||
$("#quitGameButton").click(function() {
|
||||
exitGameMenu(true)
|
||||
return;
|
||||
});
|
||||
$("#exitGameCancel").click(function() {
|
||||
exitGameMenu(false)
|
||||
return;
|
||||
});
|
||||
$("#exitGameConfirm").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/exitGame`);
|
||||
return;
|
||||
});
|
||||
});
|
||||
287
ND_CharacterSelection/source/ui/style.css
Normal file
287
ND_CharacterSelection/source/ui/style.css
Normal file
@@ -0,0 +1,287 @@
|
||||
body {
|
||||
background-size: 105%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Main page */
|
||||
#overlay {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100vh;
|
||||
width: 30vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#charactersSection {
|
||||
height: 50%;
|
||||
margin: none;
|
||||
padding: none;
|
||||
width: 83%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(2, 2, 2, 0);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(99, 99, 99, 0.575);
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(128, 128, 128);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#logoContainer {
|
||||
margin-top: 3vh;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
#logo {
|
||||
height: 10vw;
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
#serverName {
|
||||
color: white;
|
||||
font-size: 130%;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.mainPage {
|
||||
color: white;
|
||||
font-size: 95%;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
text-align: center;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.homeScreenButton, .createdButton, .createdButtonEdit, .createdButtonDelete {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#newCharacterButton {
|
||||
margin-left: 9vw;
|
||||
margin-bottom: 0.8vh;
|
||||
height: 4.5vh;
|
||||
width: 12vw;
|
||||
background: rgb(95,141,254);
|
||||
background-image: linear-gradient(90deg, rgba(95,141,254,1) 0%, rgba(142,104,219,1) 100%);
|
||||
border-radius: 5vw;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#quitGameButton {
|
||||
margin-left: 10vw;
|
||||
margin-bottom: 5vh;
|
||||
height: 4.5vh;
|
||||
width: 10vw;
|
||||
background: rgb(255,110,100);
|
||||
background: linear-gradient(90deg, rgb(255, 100, 208) 0%, rgb(255, 60, 109) 100%);
|
||||
border-radius: 5vw;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.createdButton {
|
||||
display: inline-block;
|
||||
margin-bottom: 1vh;
|
||||
margin-left: 5.5vw;
|
||||
height: 3vh;
|
||||
width: 10vw;
|
||||
background-color: rgb(17, 113, 238);
|
||||
border: none;
|
||||
border-radius: 0.5vh;
|
||||
transition: 0.3s;
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.createdButtonEdit {
|
||||
margin-left: 0.2vw;
|
||||
height: 3vh;
|
||||
width: 4vw;
|
||||
background-color: rgb(128, 128, 128);
|
||||
border: none;
|
||||
border-radius: 0.5vh;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.createdButtonDelete {
|
||||
margin-left: 0.2vw;
|
||||
height: 3vh;
|
||||
width: 4vw;
|
||||
background-color: rgb(236, 19, 19);
|
||||
border: none;
|
||||
border-radius: 0.5vh;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Button transitions */
|
||||
#newCharacterButton:hover, #quitGameButton:hover, .characterSubmitButton:hover, .characterResetButton:hover, .confirmationScreenConfirm:hover, .confirmationScreenCancel:hover, .createdButton:hover, .createdButtonEdit:hover, .createdButtonDelete:hover, .spawnButtons:hover {
|
||||
transition: 0.3s;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#newCharacterButton:active, #quitGameButton:active, .characterSubmitButton:active, .characterResetButton:active, .confirmationScreenConfirm:active, .confirmationScreenCancel:active, .createdButton:active, .createdButtonEdit:active, .createdButtonDelete:active, .spawnButtons:active {
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Character creator and Editor menu */
|
||||
.characterMenu {
|
||||
height: 60%;
|
||||
width: 50vw;
|
||||
margin: auto 0 auto 40vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
border-radius: 3vh;
|
||||
}
|
||||
|
||||
#characterCreatorTopText {
|
||||
padding-top: 2vh;
|
||||
margin-left: 3vw;
|
||||
color: white;
|
||||
font-size: 120%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#characterCreatorTopTextLine {
|
||||
background: rgb(255, 255, 255);
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(0, 0, 0, 0.014) 100%);
|
||||
height: 0.1vh;
|
||||
width: 95%;
|
||||
border: none;
|
||||
border-radius: 2vh;
|
||||
}
|
||||
|
||||
/* character info */
|
||||
#characterInfoContainer {
|
||||
padding: 2vh 3vw;
|
||||
}
|
||||
#characterInfoContainerLeft {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
#characterInfoContainerRight {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.firstRowText, .secondRowText, .thirdRowText, .fourthRowText {
|
||||
color: white;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.firstRowInput, .secondRowInput, .thirdRowInput, .fourthRowInput {
|
||||
background: white;
|
||||
color: black;
|
||||
border: none;
|
||||
border-radius: 0.2vw;
|
||||
height: 3vh;
|
||||
width: 95%;
|
||||
margin-top: 0.5vh;
|
||||
margin-bottom: 2vh;
|
||||
padding: 0 0 0 0.5vw;
|
||||
}
|
||||
|
||||
.characterSubmitButton {
|
||||
margin-top: 1vh;
|
||||
margin-left: 33.7vw;
|
||||
margin-bottom: 2vh;
|
||||
width: 8vw;
|
||||
background-color: rgb(17, 113, 238);
|
||||
}
|
||||
|
||||
.characterResetButton {
|
||||
width: 4vw;
|
||||
background-color: rgb(231, 50, 50);
|
||||
}
|
||||
|
||||
.characterSubmitButton, .characterResetButton, .confirmationScreenConfirm, .confirmationScreenCancel, .spawnButtons {
|
||||
height: 4vh;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
border: none;
|
||||
border-radius: 1vh;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* confirmation Screen */
|
||||
.confirmationScreen {
|
||||
height: 25vh;
|
||||
width: 30vw;
|
||||
margin-top: 20vh;
|
||||
margin-left: 45vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
border-radius: 3vh;
|
||||
}
|
||||
|
||||
.confirmationScreenConfirm {
|
||||
margin-top: 5vh;
|
||||
margin-left: 19%;
|
||||
margin-right: 5%;
|
||||
width: 8vw;
|
||||
background-color: rgb(17, 113, 238);
|
||||
}
|
||||
|
||||
.confirmationScreenCancel {
|
||||
width: 8vw;
|
||||
background-color: rgb(231, 50, 50);
|
||||
}
|
||||
|
||||
.spawnMenu {
|
||||
height: 39%;
|
||||
width: 40vw;
|
||||
margin: auto 0 auto 40vw;
|
||||
background-color: rgba(2, 2, 2, 0.911);
|
||||
border-radius: 3vh;
|
||||
}
|
||||
|
||||
#spawnMenuContainer {
|
||||
margin-top: 3vh;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.spawnButtons {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 1vh;
|
||||
text-align: center;
|
||||
width: 95%;
|
||||
height: 4vh;
|
||||
background-color: rgb(17, 113, 238);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "Pricedown Bl", sans-serif;
|
||||
position: absolute;
|
||||
font-size: 1vw;
|
||||
color: rgba(255, 255, 255, 0.925);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding: 0.15% 1.1%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10vw;
|
||||
}
|
||||
|
||||
#cash {
|
||||
top: 5.5vh;
|
||||
right: 1.5vw;
|
||||
}
|
||||
|
||||
#bank {
|
||||
top: 9vh;
|
||||
right: 1.5vw;
|
||||
}
|
||||
Reference in New Issue
Block a user