mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 05:56:01 +01:00
Delete ND_CharacterSelection directory
This commit is contained in:
Andyyy7666
GitHub
@@ -1,66 +0,0 @@
|
||||
-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
|
||||
|
||||
config = {
|
||||
changeCharacterCommand = "changecharacter", -- this is the command to open the ui again and change your character.
|
||||
enableAppearance = true, -- you need to install fivem-appearance
|
||||
characterSelectionAopDisplay = true,
|
||||
aopExport = function()
|
||||
return exports["SimpleHUD"]:getAOP() -- exports["ModernHUD"]:getAOP()
|
||||
end,
|
||||
|
||||
-- set your backgrounds, if you have more than 1 then it will randomly change everytime you open the ui.
|
||||
backgrounds = {
|
||||
"https://i.imgur.com/E51ckFx.png", -- Credits: Fuzzman270#0270
|
||||
"https://i.imgur.com/SeZD7TP.png", -- Credits: Fuzzman270#0270
|
||||
"https://i.imgur.com/ZWKfYD9.png" -- Credits: 2XRondo#6374
|
||||
},
|
||||
|
||||
departments = { -- these are the required discord role ids to be able to access these departments (enable developer mode in discord's advanced settings and right click the role)
|
||||
["CIV"] = {"0"},
|
||||
["SAHP"] = {"0"},
|
||||
["LSPD"] = {"0"},
|
||||
["BCSO"] = {"872921520719142932"},
|
||||
["LSFD"] = {"872921520719142932"}
|
||||
},
|
||||
|
||||
departmentPaychecks = false, -- if you would like salaries to be paid out to the departments, set this to true
|
||||
paycheckInterval = 24, -- this is how often (in minutes) paychecks are to be paid out if departmentPaychecks is set to true
|
||||
departmentSalaries = { -- the amount given to the character per interval of time set via paycheckInterval
|
||||
["CIV"] = 300,
|
||||
["SAHP"] = 700,
|
||||
["LSPD"] = 600,
|
||||
["BCSO"] = 500,
|
||||
["LSFD"] = 650
|
||||
},
|
||||
|
||||
-- DEFAULT is the spawns that every character with any job will have but you can also add a job and spawns for them.
|
||||
spawns = {
|
||||
["DEFAULT"] = {
|
||||
{x = -102.78, y = 6336.28, z = 31.49, name = "Dream View Motel (Paleto Bay)"},
|
||||
{x = 343.53, y = 2636.94, z = 43.94, name = "Eastern Motel (Sandy Shores)"},
|
||||
{x = 196.96, y = -934.54, z = 29.69, name = "Legion Square"},
|
||||
{x = -1616.69, y = -1073.81, z = 12.15, name = "Del Perro Pier"},
|
||||
{x = -1039.65, y = -2741.02, z = 12.89, name = "LSIA"}
|
||||
},
|
||||
["SAHP"] = {
|
||||
{x = -447.2, y = 6009.4, z = 30.72, name = "Paleto Bay Sheriff"},
|
||||
{x = 1849.4, y = 3688.6, z = 33.27, name = "Sandy Shores Sheriff"},
|
||||
{x = 437.6, y = -986.6, z = 29.69, name = "Mission Row PD"}
|
||||
},
|
||||
["LSPD"] = {
|
||||
{x = -447.2, y = 6009.4, z = 30.72, name = "Paleto Bay Sheriff"},
|
||||
{x = 1849.4, y = 3688.6, z = 33.27, name = "Sandy Shores Sheriff"},
|
||||
{x = 437.6, y = -986.6, z = 29.69, name = "Mission Row PD"}
|
||||
},
|
||||
["BCSO"] = {
|
||||
{x = -447.2, y = 6009.4, z = 30.72, name = "Paleto Bay Sheriff"},
|
||||
{x = 1849.4, y = 3688.6, z = 33.27, name = "Sandy Shores Sheriff"},
|
||||
{x = 437.6, y = -986.6, z = 29.69, name = "Mission Row Police "}
|
||||
},
|
||||
["LSFD"] = {
|
||||
{x = -384.07, y = 6117.9, z = 30.48, name = "Fire Station No1 (Paleto Bay)"},
|
||||
{x = 1691.5, y = 3597.95, z = 34.56, name = "Fire Station No2 (Sandy Shores)"},
|
||||
{x = 1194.71, y = -1474.14, z = 33.86, name = "Fire Station No7 (Los Santos)"}
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
|
||||
|
||||
author "Andyyy#7666, N1K0#0001"
|
||||
description "ND Character Selection (DOJ Based)"
|
||||
version "2.3.0"
|
||||
|
||||
fx_version "cerulean"
|
||||
game "gta5"
|
||||
lua54 "yes"
|
||||
|
||||
files {
|
||||
"source/ui/index.html",
|
||||
"source/ui/script.js",
|
||||
"source/ui/style.css"
|
||||
}
|
||||
ui_page "source/ui/index.html"
|
||||
|
||||
shared_script "config.lua"
|
||||
server_script "source/server.lua"
|
||||
client_script "source/client.lua"
|
||||
|
||||
dependencies {
|
||||
"ND_Core",
|
||||
-- "fivem-appearance" [TODO] to be implemented properly later
|
||||
}
|
||||
@@ -1,262 +0,0 @@
|
||||
-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
|
||||
|
||||
NDCore = exports["ND_Core"]:GetCoreObject()
|
||||
local changeAppearence = false
|
||||
local started = false
|
||||
local firstSpawn = true
|
||||
|
||||
function startChangeAppearence()
|
||||
local config = {
|
||||
ped = true,
|
||||
headBlend = true,
|
||||
faceFeatures = true,
|
||||
headOverlays = true,
|
||||
components = true,
|
||||
props = true,
|
||||
tattoos = false
|
||||
}
|
||||
|
||||
exports["fivem-appearance"]:startPlayerCustomization(function(appearance)
|
||||
if appearance then
|
||||
local ped = PlayerPedId()
|
||||
local clothing = {
|
||||
model = GetEntityModel(ped),
|
||||
tattoos = exports["fivem-appearance"]:getPedTattoos(ped),
|
||||
appearance = exports["fivem-appearance"]:getPedAppearance(ped)
|
||||
}
|
||||
Wait(4000)
|
||||
TriggerServerEvent("ND:updateClothes", clothing)
|
||||
else
|
||||
start(true)
|
||||
end
|
||||
changeAppearence = false
|
||||
end, config)
|
||||
end
|
||||
|
||||
-- Set the player to creating the ped if they haven't already.
|
||||
function setCharacterClothes(character)
|
||||
if config.enableAppearance then
|
||||
if not character.clothing or next(character.clothing) == nil then
|
||||
changeAppearence = true
|
||||
else
|
||||
changeAppearence = false
|
||||
exports["fivem-appearance"]:setPlayerModel(character.clothing.model)
|
||||
local ped = PlayerPedId()
|
||||
exports["fivem-appearance"]:setPedTattoos(ped, character.clothing.tattoos)
|
||||
exports["fivem-appearance"]:setPedAppearance(ped, character.clothing.appearance)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
function tablelength(table)
|
||||
local count = 0
|
||||
for _ in pairs(table) do
|
||||
count = count + 1
|
||||
end
|
||||
return count
|
||||
end
|
||||
|
||||
function SetDisplay(bool, typeName, bg, characters)
|
||||
local characterAmount = characters
|
||||
if not characterAmount then
|
||||
characterAmount = NDCore.Functions.GetCharacters()
|
||||
end
|
||||
if not bg then
|
||||
background = config.backgrounds[math.random(1, #config.backgrounds)]
|
||||
end
|
||||
SetNuiFocus(bool, bool)
|
||||
SendNUIMessage({
|
||||
type = typeName,
|
||||
background = background,
|
||||
status = bool,
|
||||
serverName = NDCore.Config.serverName,
|
||||
characterAmount = tablelength(characterAmount) .. "/" .. NDCore.Config.characterLimit
|
||||
})
|
||||
Wait(500)
|
||||
if config.characterSelectionAopDisplay then
|
||||
SendNUIMessage({
|
||||
type = "aop",
|
||||
aop = config.aopExport()
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
function start(switch)
|
||||
TriggerServerEvent("ND:GetCharacters")
|
||||
if not started then
|
||||
TriggerServerEvent("ND_CharacterSelection:checkPerms")
|
||||
started = true
|
||||
end
|
||||
if switch then
|
||||
local ped = PlayerPedId()
|
||||
SwitchOutPlayer(ped, 0, 1)
|
||||
FreezeEntityPosition(ped, true)
|
||||
SetEntityVisible(ped, false, 0)
|
||||
end
|
||||
if config.characterSelectionAopDisplay then
|
||||
SendNUIMessage({
|
||||
type = "aop",
|
||||
aop = config.aopExport()
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
AddEventHandler("onResourceStart", function(resourceName)
|
||||
if (GetCurrentResourceName() ~= resourceName) then
|
||||
return
|
||||
end
|
||||
Wait(2000)
|
||||
start(false)
|
||||
end)
|
||||
|
||||
AddEventHandler("playerSpawned", function()
|
||||
start(true)
|
||||
end)
|
||||
|
||||
-- This is used to add department drop down on the ui.
|
||||
RegisterNetEvent("ND_CharacterSelection:permsChecked", function(allowedRoles)
|
||||
SendNUIMessage({
|
||||
type = "givePerms",
|
||||
deptRoles = json.encode(allowedRoles)
|
||||
})
|
||||
end)
|
||||
|
||||
-- Gets all the characters and displays them on the ui.
|
||||
RegisterNetEvent("ND:returnCharacters", function(characters)
|
||||
local playerCharacters = {}
|
||||
for id, characterInfo in pairs(characters) do
|
||||
playerCharacters[tostring(id)] = characterInfo
|
||||
end
|
||||
SendNUIMessage({
|
||||
type = "refresh",
|
||||
characters = json.encode(playerCharacters)
|
||||
})
|
||||
SetDisplay(true, "ui", background, characters)
|
||||
end)
|
||||
|
||||
-- Selecting a player from the iu.
|
||||
RegisterNUICallback("setMainCharacter", function(data)
|
||||
local characters = NDCore.Functions.GetCharacters()
|
||||
local defaultSpawns = config.spawns["DEFAULT"]
|
||||
local jobSpawns = config.spawns[characters[data.id].job]
|
||||
local spawns = {}
|
||||
for _, spawn in pairs(defaultSpawns) do
|
||||
spawns[#spawns + 1] = spawn
|
||||
end
|
||||
if jobSpawns then
|
||||
for _, newSpawn in pairs(jobSpawns) do
|
||||
spawns[#spawns + 1] = newSpawn
|
||||
end
|
||||
end
|
||||
SendNUIMessage({
|
||||
type = "setSpawns",
|
||||
spawns = json.encode(spawns),
|
||||
id = characters[data.id].id
|
||||
})
|
||||
Wait(1000)
|
||||
TriggerServerEvent("ND:setCharacterOnline", data.id)
|
||||
end)
|
||||
|
||||
-- Creating a character from the ui.
|
||||
RegisterNUICallback("newCharacter", function(data)
|
||||
if tablelength(NDCore.Characters) < NDCore.Config.characterLimit then
|
||||
TriggerServerEvent("ND_CharacterSelection:newCharacter", {
|
||||
firstName = data.firstName,
|
||||
lastName = data.lastName,
|
||||
dob = data.dateOfBirth,
|
||||
gender = data.gender,
|
||||
twt = data.twtName,
|
||||
job = data.department,
|
||||
cash = data.startingCash,
|
||||
bank = data.startingBank
|
||||
})
|
||||
end
|
||||
end)
|
||||
|
||||
-- editing a character from the ui.
|
||||
RegisterNUICallback("editCharacter", function(data)
|
||||
TriggerServerEvent("ND_CharacterSelection:editCharacter", {
|
||||
id = data.id,
|
||||
firstName = data.firstName,
|
||||
lastName = data.lastName,
|
||||
dob = data.dateOfBirth,
|
||||
gender = data.gender,
|
||||
twt = data.twtName,
|
||||
job = data.department
|
||||
})
|
||||
end)
|
||||
|
||||
-- deleting a character from the ui.
|
||||
RegisterNUICallback("delCharacter", function(data)
|
||||
TriggerServerEvent("ND:deleteCharacter", data.character)
|
||||
end)
|
||||
|
||||
-- Quit button from ui.
|
||||
RegisterNUICallback("exitGame", function()
|
||||
TriggerServerEvent("ND:exitGame")
|
||||
end)
|
||||
|
||||
-- Teleporting using ui.
|
||||
RegisterNUICallback("tpToLocation", function(data)
|
||||
local ped = PlayerPedId()
|
||||
SetEntityCoords(ped, tonumber(data.x), tonumber(data.y), tonumber(data.z), false, false, false, false)
|
||||
FreezeEntityPosition(ped, true)
|
||||
SwitchInPlayer(ped)
|
||||
Wait(500)
|
||||
SetDisplay(false, "ui")
|
||||
Wait(500)
|
||||
FreezeEntityPosition(ped, false)
|
||||
SetEntityVisible(ped, true, 0)
|
||||
setCharacterClothes(NDCore.Functions.GetSelectedCharacter())
|
||||
if config.enableAppearance and changeAppearence then
|
||||
startChangeAppearence()
|
||||
end
|
||||
if firstSpawn then
|
||||
firstSpawn = false
|
||||
SendNUIMessage({
|
||||
type = "firstSpawn"
|
||||
})
|
||||
end
|
||||
end)
|
||||
|
||||
-- Choosing the do not tp button.
|
||||
RegisterNUICallback("tpDoNot", function(data)
|
||||
local ped = PlayerPedId()
|
||||
if firstSpawn then
|
||||
local character = NDCore.Functions.GetCharacters()[data.id]
|
||||
if character.lastLocation and next(character.lastLocation) ~= nil then
|
||||
SetEntityCoords(ped, character.lastLocation.x, character.lastLocation.y, character.lastLocation.z, false, false, false, false)
|
||||
FreezeEntityPosition(ped, true)
|
||||
end
|
||||
firstSpawn = false
|
||||
SendNUIMessage({
|
||||
type = "firstSpawn"
|
||||
})
|
||||
else
|
||||
FreezeEntityPosition(ped, true)
|
||||
end
|
||||
SwitchInPlayer(ped)
|
||||
Wait(500)
|
||||
SetDisplay(false, "ui")
|
||||
Wait(500)
|
||||
SetEntityVisible(ped, true, 0)
|
||||
FreezeEntityPosition(ped, false)
|
||||
Wait(100)
|
||||
setCharacterClothes(NDCore.Functions.GetSelectedCharacter())
|
||||
if config.enableAppearance and changeAppearence then
|
||||
startChangeAppearence()
|
||||
end
|
||||
end)
|
||||
|
||||
-- Change character command
|
||||
RegisterCommand(config.changeCharacterCommand, function()
|
||||
local ped = PlayerPedId()
|
||||
SwitchOutPlayer(ped, 0, 1)
|
||||
Wait(2000)
|
||||
FreezeEntityPosition(ped, true)
|
||||
SetEntityVisible(ped, false, 0)
|
||||
SetDisplay(true, "ui")
|
||||
end, false)
|
||||
|
||||
-- chat suggestions
|
||||
TriggerEvent("chat:addSuggestion", "/" .. config.changeCharacterCommand, "Switch your framework character.")
|
||||
@@ -1,83 +0,0 @@
|
||||
-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
|
||||
|
||||
NDCore = exports["ND_Core"]:GetCoreObject()
|
||||
|
||||
function validateDepartment(player, department)
|
||||
local departmentExists = config.departments[department]
|
||||
if departmentExists then
|
||||
local discordUserId = NDCore.Functions.GetPlayerIdentifierFromType("discord", player):gsub("discord:", "")
|
||||
local discordInfo = NDCore.Functions.GetUserDiscordInfo(discordUserId)
|
||||
|
||||
-- validate that the player actually has the role that they selected on the client.
|
||||
for _, roleId in pairs(departmentExists) do
|
||||
if roleId == 0 or roleId == "0" or (discordInfo and discordInfo.roles[roleId]) then
|
||||
return true
|
||||
end
|
||||
end
|
||||
end
|
||||
return false
|
||||
end
|
||||
|
||||
-- Creating a new character.
|
||||
RegisterNetEvent("ND_CharacterSelection:newCharacter", function(newCharacter)
|
||||
local player = source
|
||||
|
||||
-- validate that the person has permission to use the department.
|
||||
local departmentCheck = validateDepartment(player, newCharacter.job)
|
||||
if not departmentCheck then return end
|
||||
|
||||
-- Create the character if the player has permission to the department.
|
||||
NDCore.Functions.CreateCharacter(player, newCharacter.firstName, newCharacter.lastName, newCharacter.dob, newCharacter.gender, newCharacter.twt, newCharacter.job, newCharacter.cash, newCharacter.bank)
|
||||
end)
|
||||
|
||||
-- Update the character info when edited.
|
||||
RegisterNetEvent("ND_CharacterSelection:editCharacter", function(newCharacter)
|
||||
local player = source
|
||||
|
||||
-- check if player owns the character.
|
||||
local characters = NDCore.Functions.GetPlayerCharacters(player)
|
||||
if not characters[newCharacter.id] then return end
|
||||
|
||||
-- validate that the person has permission to use the department.
|
||||
local departmentCheck = validateDepartment(player, newCharacter.job)
|
||||
if not departmentCheck then return end
|
||||
|
||||
-- Updating the character information in the database.
|
||||
NDCore.Functions.UpdateCharacterData(newCharacter.id, newCharacter.firstName, newCharacter.lastName, newCharacter.dob, newCharacter.gender, newCharacter.twt, newCharacter.job)
|
||||
|
||||
-- Updating characters on the client.
|
||||
TriggerClientEvent("ND:returnCharacters", player, NDCore.Functions.GetPlayerCharacters(player))
|
||||
end)
|
||||
|
||||
RegisterNetEvent("ND_CharacterSelection:checkPerms", function()
|
||||
local player = source
|
||||
local discordUserId = NDCore.Functions.GetPlayerIdentifierFromType("discord", player):gsub("discord:", "")
|
||||
local allowedRoles = {}
|
||||
local discordInfo = NDCore.Functions.GetUserDiscordInfo(discordUserId)
|
||||
|
||||
-- Check if the players discord roles will grant them permission to the department.
|
||||
for dept, roleTable in pairs(config.departments) do
|
||||
for _, roleId in pairs(roleTable) do
|
||||
if roleId == 0 or roleId == "0" or (discordInfo and discordInfo.roles[roleId]) then
|
||||
table.insert(allowedRoles, dept)
|
||||
end
|
||||
end
|
||||
end
|
||||
TriggerClientEvent("ND_CharacterSelection:permsChecked", player, allowedRoles)
|
||||
end)
|
||||
|
||||
if config.departmentPaychecks then
|
||||
CreateThread(function()
|
||||
while true do
|
||||
Wait(config.paycheckInterval * 60000)
|
||||
for player, playerInfo in pairs(NDCore.Functions.GetPlayers()) do
|
||||
local salary = config.departmentSalaries[playerInfo.job]
|
||||
NDCore.Functions.AddMoney(salary, player, "bank")
|
||||
TriggerClientEvent("chat:addMessage", player, {
|
||||
color = {0, 255, 0},
|
||||
args = {"Salary", "Received $" .. salary .. "."}
|
||||
})
|
||||
end
|
||||
end
|
||||
end)
|
||||
end
|
||||
@@ -1,166 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,238 +0,0 @@
|
||||
$(function() {
|
||||
function display(bool) {
|
||||
if (bool) {
|
||||
$("body").show();
|
||||
} else {
|
||||
$("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");
|
||||
}
|
||||
|
||||
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 === "setSpawns") {
|
||||
$("#spawnMenuContainer").empty();
|
||||
setTimeout(function(){
|
||||
$("#tpDoNot").data("id", item.id);
|
||||
JSON.parse(item.spawns).forEach((location) => {
|
||||
$("#spawnMenuContainer").append(`<button class="spawnButtons" data-x="${location.x}" data-y="${location.y}" data-z="${location.z}">${location.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;
|
||||
});
|
||||
$("#tpDoNot").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/tpDoNot`, JSON.stringify({
|
||||
id: $("#tpDoNot").data("id")
|
||||
}));
|
||||
spawnMenu(false)
|
||||
setTimeout(function(){
|
||||
$("#spawnMenuContainer").empty();
|
||||
}, 550);
|
||||
return;
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
|
||||
if (item.type === "firstSpawn") {
|
||||
$("#tpDoNot").text("Do not teleport")
|
||||
}
|
||||
|
||||
if (item.type === "givePerms") {
|
||||
JSON.parse(item.deptRoles).forEach((dept) => {
|
||||
$(".departments").append($("<option>", {
|
||||
text: dept
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
if (item.type === "aop") {
|
||||
$("#aop").text(`AOP: ${item.aop}`);
|
||||
}
|
||||
|
||||
if (item.type === "refresh") {
|
||||
$("#charactersSection").empty();
|
||||
characterCreatorMenu(false);
|
||||
let characters = JSON.parse(item.characters)
|
||||
Object.keys(characters).forEach((id) => {
|
||||
createCharacter(characters[id].firstName, characters[id].lastName, characters[id].dob, characters[id].gender, characters[id].twt, characters[id].job, characters[id].cash, characters[id].bank, characters[id].id);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
function createCharacter(firstName, lastName, dateOfBirth, gender, twtName, department, startingCash, startingBank, id) {
|
||||
if ((firstName.length + lastName.length + department.length) > 24) {
|
||||
$("#charactersSection").append(`<button id="characterButton${id}" class="createdButton animated"><span>${firstName} ${lastName} (${department})</span></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>`);
|
||||
} else {
|
||||
$("#charactersSection").append(`<button id="characterButton${id}" class="createdButton"><span>${firstName} ${lastName} (${department})</span></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
|
||||
}));
|
||||
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;
|
||||
});
|
||||
|
||||
$("#quitGameButton").click(function() {
|
||||
exitGameMenu(true)
|
||||
return;
|
||||
});
|
||||
$("#exitGameCancel").click(function() {
|
||||
exitGameMenu(false)
|
||||
return;
|
||||
});
|
||||
$("#exitGameConfirm").click(function() {
|
||||
$.post(`https://${GetParentResourceName()}/exitGame`);
|
||||
return;
|
||||
});
|
||||
});
|
||||
@@ -1,300 +0,0 @@
|
||||
body {
|
||||
display: none;
|
||||
background-size: 105%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
}
|
||||
#exitGameMenu, #characterCreator, #characterEditor, #deleteCharacterMenu, #spawnLocation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.animated {
|
||||
overflow: hidden;
|
||||
}
|
||||
.animated > * {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
animation: 3s linear 0s infinite alternate move;
|
||||
}
|
||||
@keyframes move {
|
||||
0%, 25% {
|
||||
transform: translateX(0%);
|
||||
left: 0%;
|
||||
}
|
||||
75%, 100% {
|
||||
transform: translateX(-100%);
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user