├── html
    ├── click.wav
    ├── musica.mp3
    ├── reset.css
    ├── profanity.js
    ├── index.html
    ├── script.js
    └── style.css
├── fxmanifest.lua
├── README.md
├── config.lua
├── server
    └── main.lua
├── client
    └── main.lua
└── LICENSE


/html/click.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OwenT1/qb-multicharacter/HEAD/html/click.wav


--------------------------------------------------------------------------------
/html/musica.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OwenT1/qb-multicharacter/HEAD/html/musica.mp3


--------------------------------------------------------------------------------
/fxmanifest.lua:
--------------------------------------------------------------------------------
 1 | fx_version 'cerulean'
 2 | game 'gta5'
 3 | 
 4 | description 'QB-Multicharacter OwenT'
 5 | version '1.1.0'
 6 | 
 7 | shared_script 'config.lua'
 8 | client_script 'client/main.lua'
 9 | server_scripts  {
10 |     '@oxmysql/lib/MySQL.lua',
11 |     'server/main.lua'
12 | }
13 | 
14 | ui_page 'html/index.html'
15 | 
16 | files {
17 |     'html/index.html',
18 |     'html/style.css',
19 |     'html/reset.css',
20 |     'html/profanity.js',
21 |     'html/script.js',
22 |     'html/musica.mp3',
23 |     'html/click.wav',
24 |     'html/qb-pixel.png',
25 | }
26 | 
27 | dependencies {
28 |     'qb-core',
29 |     'qb-spawn'
30 | }
31 | 
32 | lua54 'yes'
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Redesign of Multi Character QBCore
 2 | 
 3 | This is my official edit of the original script QB-Multicharacter
 4 | 
 5 | I have spent a while editing this script and making it look fire for you all to use in your city
 6 | 
 7 | https://discord.gg/MnHRK2DBtU
 8 | 
 9 | 
10 | For this to work you must have QB-Spawn
11 | 
12 | Credits:
13 | 
14 | QBCore - Original Script 
15 | Marcostom32 - Original Script
16 | Owen T - Edited Script
17 | 
18 | Preview 1: https://streamable.com/9a2eg4
19 | 
20 | Preview 2: https://streamable.com/z2pxnr
21 | 
22 | This is my second script I have edited if you enjoy these edits please join the Discord!
23 | 
24 | Steps to install:
25 | 
26 | Drag and drop the resource to your resources folder Ensure you have started the resource in your server.cfg Restart your server and enjoy
27 | 
28 | You can edit the LOGO By going into Index.html and opening it edit the src image link If you need help join the discord and I will help you do this!
29 | 


--------------------------------------------------------------------------------
/config.lua:
--------------------------------------------------------------------------------
 1 | Config = {}
 2 | Config.StartingApartment = true -- Enable/disable starting apartments (make sure to set default spawn coords)
 3 | Config.Interior = vector3(-8.88, 512.91, 174.63) -- Interior to load where characters are previewed
 4 | Config.DefaultSpawn = vector3(-1035.71, -2731.87, 12.86) -- Default spawn coords if you have start apartments disabled
 5 | Config.PedCoords = vector4(-8.55, 508.84, 174.63, 19.81) -- Create preview ped at these coordinates
 6 | Config.HiddenCoords = vector4(3.3, 523.88, 170.62, 70.87) -- Hides your actual ped Ma-cro guapo while you are in selection
 7 | Config.CamCoords = vector4(-8.88, 512.91, 174.63, 185.5) -- Camera coordinates for character preview screen 
 8 | Config.EnableDeleteButton = true -- Define if the player can delete the character or not
 9 | 
10 | Config.DefaultNumberOfCharacters = 2 -- Define maximum amount of default characters (maximum 5 characters defined by default)
11 | Config.PlayersNumberOfCharacters = { -- Define maximum amount of player characters by rockstar license (you can find this license in your server's database in the player table)
12 |     { license = "license:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", numberOfChars = 2 },
13 | }
14 | 


--------------------------------------------------------------------------------
/html/reset.css:
--------------------------------------------------------------------------------
 1 | html, body, div, span, applet, object, iframe,
 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 3 | a, abbr, acronym, address, big, cite, code,
 4 | del, dfn, em, img, ins, kbd, q, s, samp,
 5 | small, strike, strong, sub, sup, tt, var,
 6 | b, u, i, center,
 7 | dl, dt, dd, ol, ul, li,
 8 | fieldset, form, label, legend,
 9 | table, caption, tbody, tfoot, thead, tr, th, td,
10 | article, aside, canvas, details, embed, 
11 | figure, figcaption, footer, header, hgroup, 
12 | menu, nav, output, ruby, section, summary,
13 | time, mark, audio, video {
14 | 	margin: 0;
15 | 	padding: 0;
16 | 	border: 0;
17 | 	font-size: 100%;
18 | 	font: inherit;
19 |     vertical-align: baseline;
20 | 	font-family: 'Roboto';
21 | 	overflow: hidden !important;
22 | }
23 | /* HTML5 display-role reset for older browsers */
24 | article, aside, details, figcaption, figure, 
25 | footer, header, hgroup, menu, nav, section {
26 | 	display: block;
27 | }
28 | body {
29 | 	line-height: 1;
30 | }
31 | ol, ul {
32 | 	list-style: none;
33 | }
34 | blockquote, q {
35 | 	quotes: none;
36 | }
37 | blockquote:before, blockquote:after,
38 | q:before, q:after {
39 | 	content: '';
40 | 	content: none;
41 | }
42 | table {
43 | 	border-collapse: collapse;
44 | 	border-spacing: 0;
45 | }


--------------------------------------------------------------------------------
/server/main.lua:
--------------------------------------------------------------------------------
  1 | local QBCore = exports['qb-core']:GetCoreObject()
  2 | 
  3 | -- Functions
  4 | 
  5 | local function GiveStarterItems(source)
  6 |     local src = source
  7 |     local Player = QBCore.Functions.GetPlayer(src)
  8 | 
  9 |     for k, v in pairs(QBCore.Shared.StarterItems) do
 10 |         local info = {}
 11 |         if v.item == "id_card" then
 12 |             info.citizenid = Player.PlayerData.citizenid
 13 |             info.firstname = Player.PlayerData.charinfo.firstname
 14 |             info.lastname = Player.PlayerData.charinfo.lastname
 15 |             info.birthdate = Player.PlayerData.charinfo.birthdate
 16 |             info.gender = Player.PlayerData.charinfo.gender
 17 |             info.nationality = Player.PlayerData.charinfo.nationality
 18 |         elseif v.item == "driver_license" then
 19 |             info.firstname = Player.PlayerData.charinfo.firstname
 20 |             info.lastname = Player.PlayerData.charinfo.lastname
 21 |             info.birthdate = Player.PlayerData.charinfo.birthdate
 22 |             info.type = "Class C Driver License"
 23 |         end
 24 |         Player.Functions.AddItem(v.item, v.amount, false, info)
 25 |     end
 26 | end
 27 | 
 28 | local function loadHouseData()
 29 |     local HouseGarages = {}
 30 |     local Houses = {}
 31 |     local result = MySQL.Sync.fetchAll('SELECT * FROM houselocations', {})
 32 |     if result[1] ~= nil then
 33 |         for k, v in pairs(result) do
 34 |             local owned = false
 35 |             if tonumber(v.owned) == 1 then
 36 |                 owned = true
 37 |             end
 38 |             local garage = v.garage ~= nil and json.decode(v.garage) or {}
 39 |             Houses[v.name] = {
 40 |                 coords = json.decode(v.coords),
 41 |                 owned = v.owned,
 42 |                 price = v.price,
 43 |                 locked = true,
 44 |                 adress = v.label,
 45 |                 tier = v.tier,
 46 |                 garage = garage,
 47 |                 decorations = {},
 48 |             }
 49 |             HouseGarages[v.name] = {
 50 |                 label = v.label,
 51 |                 takeVehicle = garage,
 52 |             }
 53 |         end
 54 |     end
 55 |     TriggerClientEvent("qb-garages:client:houseGarageConfig", -1, HouseGarages)
 56 |     TriggerClientEvent("qb-houses:client:setHouseConfig", -1, Houses)
 57 | end
 58 | 
 59 | -- Commands
 60 | 
 61 | QBCore.Commands.Add("logout", "Logout of Character (Admin Only)", {}, false, function(source)
 62 |     local src = source
 63 |     QBCore.Player.Logout(src)
 64 |     TriggerClientEvent('qb-multicharacter:client:chooseChar', src)
 65 | end, "admin")
 66 | 
 67 | QBCore.Commands.Add("closeNUI", "Close Multi NUI", {}, false, function(source)
 68 |     local src = source
 69 |     TriggerClientEvent('qb-multicharacter:client:closeNUI', src)
 70 | end)
 71 | 
 72 | -- Events
 73 | 
 74 | RegisterNetEvent('qb-multicharacter:server:disconnect', function()
 75 |     local src = source
 76 |     DropPlayer(src, "You have disconnected from QBCore")
 77 | end)
 78 | 
 79 | RegisterNetEvent('qb-multicharacter:server:loadUserData', function(cData)
 80 |     local src = source
 81 |     if QBCore.Player.Login(src, cData.citizenid) then
 82 |         print('^2[qb-core]^7 '..GetPlayerName(src)..' (Citizen ID: '..cData.citizenid..') has succesfully loaded!')
 83 |         QBCore.Commands.Refresh(src)
 84 |         loadHouseData()
 85 |         TriggerClientEvent('apartments:client:setupSpawnUI', src, cData)
 86 |         TriggerEvent("qb-log:server:CreateLog", "joinleave", "Loaded", "green", "**".. GetPlayerName(src) .. "** ("..(QBCore.Functions.GetIdentifier(src, 'discord') or 'undefined') .." |  ||"  ..(QBCore.Functions.GetIdentifier(src, 'ip') or 'undefined') ..  "|| | " ..(QBCore.Functions.GetIdentifier(src, 'license') or 'undefined') .." | " ..cData.citizenid.." | "..src..") loaded..")
 87 | 	end
 88 | end)
 89 | 
 90 | RegisterNetEvent('qb-multicharacter:server:createCharacter', function(data)
 91 |     local src = source
 92 |     local newData = {}
 93 |     newData.cid = data.cid
 94 |     newData.charinfo = data
 95 |     if QBCore.Player.Login(src, false, newData) then
 96 |         if Config.StartingApartment then
 97 |             local randbucket = (GetPlayerPed(src) .. math.random(1,999))
 98 |             SetPlayerRoutingBucket(src, randbucket)
 99 |             print('^2[qb-core]^7 '..GetPlayerName(src)..' has succesfully loaded!')
100 |             QBCore.Commands.Refresh(src)
101 |             loadHouseData()
102 |             TriggerClientEvent("qb-multicharacter:client:closeNUI", src)
103 |             TriggerClientEvent('apartments:client:setupSpawnUI', src, newData)
104 |             GiveStarterItems(src)
105 |         else
106 |             print('^2[qb-core]^7 '..GetPlayerName(src)..' has succesfully loaded!')
107 |             QBCore.Commands.Refresh(src)
108 |             loadHouseData()
109 |             TriggerClientEvent("qb-multicharacter:client:closeNUIdefault", src)
110 |             GiveStarterItems(src)
111 |         end
112 | 	end
113 | end)
114 | 
115 | RegisterNetEvent('qb-multicharacter:server:deleteCharacter', function(citizenid)
116 |     local src = source
117 |     print(src, citizenid)
118 |     QBCore.Player.DeleteCharacter(src, citizenid)
119 | 
120 | end)
121 | 
122 | -- Callbacks
123 | 
124 | QBCore.Functions.CreateCallback('qb-multi:server:GetCurrentPlayers', function(source, cb)
125 |     local TotalPlayers = 0
126 |     for k, v in pairs(QBCore.Functions.GetPlayers()) do
127 |         TotalPlayers = TotalPlayers + 1
128 |     end
129 |     cb(TotalPlayers)
130 | end)
131 | 
132 | QBCore.Functions.CreateCallback("qb-multicharacter:server:GetUserCharacters", function(source, cb)
133 |     local src = source
134 |     local license = QBCore.Functions.GetIdentifier(src, 'license')
135 | 
136 |     MySQL.Async.execute('SELECT * FROM players WHERE license = ?', {license}, function(result)
137 |         cb(result)
138 |     end)
139 | end)
140 | 
141 | QBCore.Functions.CreateCallback("qb-multicharacter:server:GetServerLogs", function(source, cb)
142 |     MySQL.Async.execute('SELECT * FROM server_logs', {}, function(result)
143 |         cb(result)
144 |     end)
145 | end)
146 | 
147 | QBCore.Functions.CreateCallback("qb-multicharacter:server:GetNumberOfCharacters", function(source, cb)
148 |     local src = source
149 |     local license = QBCore.Functions.GetIdentifier(src, 'license')
150 |     local numOfChars = 0
151 | 
152 |     if next(Config.PlayersNumberOfCharacters) then
153 |         for i, v in pairs(Config.PlayersNumberOfCharacters) do
154 |             if v.license == license then
155 |                 numOfChars = v.numberOfChars
156 |                 break
157 |             else 
158 |                 numOfChars = Config.DefaultNumberOfCharacters
159 |             end
160 |         end
161 |     else
162 |         numOfChars = Config.DefaultNumberOfCharacters
163 |     end
164 |     cb(numOfChars)
165 | end)
166 | 
167 | QBCore.Functions.CreateCallback("qb-multicharacter:server:setupCharacters", function(source, cb)
168 |     local license = QBCore.Functions.GetIdentifier(source, 'license')
169 |     local plyChars = {}
170 |     MySQL.Async.fetchAll('SELECT * FROM players WHERE license = ?', {license}, function(result)
171 |         for i = 1, (#result), 1 do
172 |             result[i].charinfo = json.decode(result[i].charinfo)
173 |             result[i].money = json.decode(result[i].money)
174 |             result[i].job = json.decode(result[i].job)
175 |             plyChars[#plyChars+1] = result[i]
176 |         end
177 |         cb(plyChars)
178 |     end)
179 | end)
180 | 
181 | QBCore.Functions.CreateCallback("qb-multicharacter:server:getSkin", function(source, cb, cid)
182 |     local result = MySQL.Sync.fetchAll('SELECT * FROM playerskins WHERE citizenid = ? AND active = ?', {cid, 1})
183 |     if result[1] ~= nil then
184 |         cb(result[1].model, result[1].skin)
185 |     else
186 |         cb(nil)
187 |     end
188 | end)
189 | 


--------------------------------------------------------------------------------
/html/profanity.js:
--------------------------------------------------------------------------------
  1 | // Bad word list found from: https://github.com/MauriceButler/badwords/blob/master/array.js
  2 | const profList = [
  3 |     "4r5e",
  4 |     "5h1t",
  5 |     "5hit",
  6 |     "a55",
  7 |     "anal",
  8 |     "anus",
  9 |     "ar5e",
 10 |     "arrse",
 11 |     "arse",
 12 |     "ass",
 13 |     "ass-fucker",
 14 |     "asses",
 15 |     "assfucker",
 16 |     "assfukka",
 17 |     "asshole",
 18 |     "assholes",
 19 |     "asswhole",
 20 |     "a_s_s",
 21 |     "b!tch",
 22 |     "b00bs",
 23 |     "b17ch",
 24 |     "b1tch",
 25 |     "ballbag",
 26 |     "balls",
 27 |     "ballsack",
 28 |     "bastard",
 29 |     "beastial",
 30 |     "beastiality",
 31 |     "bellend",
 32 |     "bestial",
 33 |     "bestiality",
 34 |     "bi+ch",
 35 |     "biatch",
 36 |     "bitch",
 37 |     "bitcher",
 38 |     "bitchers",
 39 |     "bitches",
 40 |     "bitchin",
 41 |     "bitching",
 42 |     "bloody",
 43 |     "blow job",
 44 |     "blowjob",
 45 |     "blowjobs",
 46 |     "boiolas",
 47 |     "bollock",
 48 |     "bollok",
 49 |     "boner",
 50 |     "boob",
 51 |     "boobs",
 52 |     "booobs",
 53 |     "boooobs",
 54 |     "booooobs",
 55 |     "booooooobs",
 56 |     "breasts",
 57 |     "buceta",
 58 |     "bugger",
 59 |     "bum",
 60 |     "bunny fucker",
 61 |     "butt",
 62 |     "butthole",
 63 |     "buttmuch",
 64 |     "buttplug",
 65 |     "c0ck",
 66 |     "c0cksucker",
 67 |     "carpet muncher",
 68 |     "cawk",
 69 |     "chink",
 70 |     "cipa",
 71 |     "cl1t",
 72 |     "clit",
 73 |     "clitoris",
 74 |     "clits",
 75 |     "cnut",
 76 |     "cock",
 77 |     "cock-sucker",
 78 |     "cockface",
 79 |     "cockhead",
 80 |     "cockmunch",
 81 |     "cockmuncher",
 82 |     "cocks",
 83 |     "cocksuck",
 84 |     "cocksucked",
 85 |     "cocksucker",
 86 |     "cocksucking",
 87 |     "cocksucks",
 88 |     "cocksuka",
 89 |     "cocksukka",
 90 |     "cok",
 91 |     "cokmuncher",
 92 |     "coksucka",
 93 |     "coon",
 94 |     "cox",
 95 |     "crap",
 96 |     "cum",
 97 |     "cummer",
 98 |     "cumming",
 99 |     "cums",
100 |     "cumshot",
101 |     "cunilingus",
102 |     "cunillingus",
103 |     "cunnilingus",
104 |     "cunt",
105 |     "cuntlick",
106 |     "cuntlicker",
107 |     "cuntlicking",
108 |     "cunts",
109 |     "cyalis",
110 |     "cyberfuc",
111 |     "cyberfuck",
112 |     "cyberfucked",
113 |     "cyberfucker",
114 |     "cyberfuckers",
115 |     "cyberfucking",
116 |     "d1ck",
117 |     "damn",
118 |     "dick",
119 |     "dickhead",
120 |     "dildo",
121 |     "dildos",
122 |     "dink",
123 |     "dinks",
124 |     "dirsa",
125 |     "dlck",
126 |     "dog-fucker",
127 |     "doggin",
128 |     "dogging",
129 |     "donkeyribber",
130 |     "doosh",
131 |     "duche",
132 |     "dyke",
133 |     "ejaculate",
134 |     "ejaculated",
135 |     "ejaculates",
136 |     "ejaculating",
137 |     "ejaculatings",
138 |     "ejaculation",
139 |     "ejakulate",
140 |     "f u c k",
141 |     "f u c k e r",
142 |     "f4nny",
143 |     "fag",
144 |     "fagging",
145 |     "faggitt",
146 |     "faggot",
147 |     "faggs",
148 |     "fagot",
149 |     "fagots",
150 |     "fags",
151 |     "fanny",
152 |     "fannyflaps",
153 |     "fannyfucker",
154 |     "fanyy",
155 |     "fatass",
156 |     "fcuk",
157 |     "fcuker",
158 |     "fcuking",
159 |     "feck",
160 |     "fecker",
161 |     "felching",
162 |     "fellate",
163 |     "fellatio",
164 |     "fingerfuck",
165 |     "fingerfucked",
166 |     "fingerfucker",
167 |     "fingerfuckers",
168 |     "fingerfucking",
169 |     "fingerfucks",
170 |     "fistfuck",
171 |     "fistfucked",
172 |     "fistfucker",
173 |     "fistfuckers",
174 |     "fistfucking",
175 |     "fistfuckings",
176 |     "fistfucks",
177 |     "flange",
178 |     "fook",
179 |     "fooker",
180 |     "fuck",
181 |     "fucka",
182 |     "fucked",
183 |     "fucker",
184 |     "fuckers",
185 |     "fuckhead",
186 |     "fuckheads",
187 |     "fuckin",
188 |     "fucking",
189 |     "fuckings",
190 |     "fuckingshitmotherfucker",
191 |     "fuckme",
192 |     "fucks",
193 |     "fuckwhit",
194 |     "fuckwit",
195 |     "fudge packer",
196 |     "fudgepacker",
197 |     "fuk",
198 |     "fuker",
199 |     "fukker",
200 |     "fukkin",
201 |     "fuks",
202 |     "fukwhit",
203 |     "fukwit",
204 |     "fux",
205 |     "fux0r",
206 |     "f_u_c_k",
207 |     "gangbang",
208 |     "gangbanged",
209 |     "gangbangs",
210 |     "gaylord",
211 |     "gaysex",
212 |     "goatse",
213 |     "God",
214 |     "god-dam",
215 |     "god-damned",
216 |     "goddamn",
217 |     "goddamned",
218 |     "hardcoresex",
219 |     "hell",
220 |     "heshe",
221 |     "hoar",
222 |     "hoare",
223 |     "hoer",
224 |     "homo",
225 |     "hore",
226 |     "horniest",
227 |     "horny",
228 |     "hotsex",
229 |     "jack-off",
230 |     "jackoff",
231 |     "jap",
232 |     "jerk-off",
233 |     "jism",
234 |     "jiz",
235 |     "jizm",
236 |     "jizz",
237 |     "kawk",
238 |     "knob",
239 |     "knobead",
240 |     "knobed",
241 |     "knobend",
242 |     "knobhead",
243 |     "knobjocky",
244 |     "knobjokey",
245 |     "kock",
246 |     "kondum",
247 |     "kondums",
248 |     "kum",
249 |     "kummer",
250 |     "kumming",
251 |     "kums",
252 |     "kunilingus",
253 |     "l3i+ch",
254 |     "l3itch",
255 |     "labia",
256 |     "lust",
257 |     "lusting",
258 |     "m0f0",
259 |     "m0fo",
260 |     "m45terbate",
261 |     "ma5terb8",
262 |     "ma5terbate",
263 |     "masochist",
264 |     "master-bate",
265 |     "masterb8",
266 |     "masterbat*",
267 |     "masterbat3",
268 |     "masterbate",
269 |     "masterbation",
270 |     "masterbations",
271 |     "masturbate",
272 |     "mo-fo",
273 |     "mof0",
274 |     "mofo",
275 |     "mothafuck",
276 |     "mothafucka",
277 |     "mothafuckas",
278 |     "mothafuckaz",
279 |     "mothafucked",
280 |     "mothafucker",
281 |     "mothafuckers",
282 |     "mothafuckin",
283 |     "mothafucking",
284 |     "mothafuckings",
285 |     "mothafucks",
286 |     "mother fucker",
287 |     "motherfuck",
288 |     "motherfucked",
289 |     "motherfucker",
290 |     "motherfuckers",
291 |     "motherfuckin",
292 |     "motherfucking",
293 |     "motherfuckings",
294 |     "motherfuckka",
295 |     "motherfucks",
296 |     "muff",
297 |     "mutha",
298 |     "muthafecker",
299 |     "muthafuckker",
300 |     "muther",
301 |     "mutherfucker",
302 |     "n1gga",
303 |     "n1gger",
304 |     "nazi",
305 |     "nigg3r",
306 |     "nigg4h",
307 |     "nigga",
308 |     "niggah",
309 |     "niggas",
310 |     "niggaz",
311 |     "nigger",
312 |     "niggers",
313 |     "nob",
314 |     "nob jokey",
315 |     "nobhead",
316 |     "nobjocky",
317 |     "nobjokey",
318 |     "numbnuts",
319 |     "nutsack",
320 |     "orgasim",
321 |     "orgasims",
322 |     "orgasm",
323 |     "orgasms",
324 |     "p0rn",
325 |     "pawn",
326 |     "pecker",
327 |     "penis",
328 |     "penisfucker",
329 |     "phonesex",
330 |     "phuck",
331 |     "phuk",
332 |     "phuked",
333 |     "phuking",
334 |     "phukked",
335 |     "phukking",
336 |     "phuks",
337 |     "phuq",
338 |     "pigfucker",
339 |     "pimpis",
340 |     "piss",
341 |     "pissed",
342 |     "pisser",
343 |     "pissers",
344 |     "pisses",
345 |     "pissflaps",
346 |     "pissin",
347 |     "pissing",
348 |     "pissoff",
349 |     "poop",
350 |     "porn",
351 |     "porno",
352 |     "pornography",
353 |     "pornos",
354 |     "prick",
355 |     "pricks",
356 |     "pron",
357 |     "pube",
358 |     "pusse",
359 |     "pussi",
360 |     "pussies",
361 |     "pussy",
362 |     "pussys",
363 |     "rectum",
364 |     "retard",
365 |     "rimjaw",
366 |     "rimming",
367 |     "s hit",
368 |     "s.o.b.",
369 |     "sadist",
370 |     "schlong",
371 |     "screwing",
372 |     "scroat",
373 |     "scrote",
374 |     "scrotum",
375 |     "semen",
376 |     "sex",
377 |     "sh!+",
378 |     "sh!t",
379 |     "sh1t",
380 |     "shag",
381 |     "shagger",
382 |     "shaggin",
383 |     "shagging",
384 |     "shemale",
385 |     "shi+",
386 |     "shit",
387 |     "shitdick",
388 |     "shite",
389 |     "shited",
390 |     "shitey",
391 |     "shitfuck",
392 |     "shitfull",
393 |     "shithead",
394 |     "shiting",
395 |     "shitings",
396 |     "shits",
397 |     "shitted",
398 |     "shitter",
399 |     "shitters",
400 |     "shitting",
401 |     "shittings",
402 |     "shitty",
403 |     "skank",
404 |     "slut",
405 |     "sluts",
406 |     "smegma",
407 |     "smut",
408 |     "snatch",
409 |     "son-of-a-bitch",
410 |     "spac",
411 |     "spunk",
412 |     "s_h_i_t",
413 |     "t1tt1e5",
414 |     "t1tties",
415 |     "teets",
416 |     "teez",
417 |     "testical",
418 |     "testicle",
419 |     "tit",
420 |     "titfuck",
421 |     "tits",
422 |     "titt",
423 |     "tittie5",
424 |     "tittiefucker",
425 |     "titties",
426 |     "tittyfuck",
427 |     "tittywank",
428 |     "titwank",
429 |     "tosser",
430 |     "turd",
431 |     "tw4t",
432 |     "twat",
433 |     "twathead",
434 |     "twatty",
435 |     "twunt",
436 |     "twunter",
437 |     "v14gra",
438 |     "v1gra",
439 |     "vagina",
440 |     "viagra",
441 |     "vulva",
442 |     "w00se",
443 |     "wang",
444 |     "wank",
445 |     "wanker",
446 |     "wanky",
447 |     "whoar",
448 |     "whore",
449 |     "willies",
450 |     "willy",
451 |     "xrated",
452 |     "xxx",
453 | ];
454 | 


--------------------------------------------------------------------------------
/client/main.lua:
--------------------------------------------------------------------------------
  1 | local cam = nil
  2 | local charPed = nil
  3 | local QBCore = exports['qb-core']:GetCoreObject()
  4 | 
  5 | -- Main Thread
  6 | 
  7 | CreateThread(function()
  8 | 	while true do
  9 | 		Wait(0)
 10 | 		if NetworkIsSessionStarted() then
 11 | 			TriggerEvent('qb-multicharacter:client:chooseChar')
 12 | 			return
 13 | 		end
 14 | 	end
 15 | end)
 16 | 
 17 | -- Functions
 18 | 
 19 | local function skyCam(bool)
 20 |     TriggerEvent('qb-weathersync:client:DisableSync')
 21 |     if bool then
 22 |         DoScreenFadeIn(1000)
 23 |         SetTimecycleModifier('hud_def_blur')
 24 |         SetTimecycleModifierStrength(1.0)
 25 |         FreezeEntityPosition(PlayerPedId(), false)
 26 |         cam = CreateCamWithParams("DEFAULT_SCRIPTED_CAMERA", Config.CamCoords.x, Config.CamCoords.y, Config.CamCoords.z, 0.0 ,0.0, Config.CamCoords.w, 60.00, false, 0)
 27 |         SetCamActive(cam, true)
 28 |         RenderScriptCams(true, false, 1, true, true)
 29 |     else
 30 |         SetTimecycleModifier('default')
 31 |         SetCamActive(cam, false)
 32 |         DestroyCam(cam, true)
 33 |         RenderScriptCams(false, false, 1, true, true)
 34 |         FreezeEntityPosition(PlayerPedId(), false)
 35 |     end
 36 | end
 37 | 
 38 | local function openCharMenu(bool)
 39 |         QBCore.Functions.TriggerCallback("qb-multicharacter:server:GetNumberOfCharacters", function(result)
 40 |             QBCore.Functions.TriggerCallback("qb-multi:server:GetCurrentPlayers", function(Players)
 41 |             SetNuiFocus(bool, bool)
 42 |             SendNUIMessage({
 43 |                 action = "ui",
 44 |                 toggle = bool,
 45 |                 nChar = result,
 46 |                 enableDeleteButton = Config.EnableDeleteButton,
 47 |                 players = Players,
 48 |             })
 49 |             skyCam(bool)
 50 |         end)
 51 |     end)
 52 | end
 53 | 
 54 | -- Events
 55 | 
 56 | AddEventHandler('QBCore:Client:OnPlayerLoaded', function()
 57 |     SendNUIMessage({
 58 |         action = "stopMusic"
 59 |     })
 60 | end)
 61 | 
 62 | RegisterNetEvent('qb-multicharacter:client:closeNUIdefault', function() -- This event is only for no starting apartments
 63 |     DeleteEntity(charPed)
 64 |     SetNuiFocus(false, false)
 65 |     DoScreenFadeOut(500)
 66 |     Wait(2000)
 67 |     SetEntityCoords(PlayerPedId(), Config.DefaultSpawn.x, Config.DefaultSpawn.y, Config.DefaultSpawn.z)
 68 |     TriggerServerEvent('QBCore:Server:OnPlayerLoaded')
 69 |     TriggerEvent('QBCore:Client:OnPlayerLoaded')
 70 |     TriggerServerEvent('qb-houses:server:SetInsideMeta', 0, false)
 71 |     TriggerServerEvent('qb-apartments:server:SetInsideMeta', 0, 0, false)
 72 |     Wait(500)
 73 |     openCharMenu()
 74 |     SetEntityVisible(PlayerPedId(), true)
 75 |     Wait(500)
 76 |     DoScreenFadeIn(250)
 77 |     TriggerEvent('qb-weathersync:client:EnableSync')
 78 |     TriggerEvent('qb-clothes:client:CreateFirstCharacter')
 79 | end)
 80 | 
 81 | RegisterNetEvent('qb-multicharacter:client:closeNUI', function()
 82 |     DeleteEntity(charPed)
 83 |     SetNuiFocus(false, false)
 84 | end)
 85 | 
 86 | RegisterNetEvent('qb-multicharacter:client:chooseChar', function()
 87 |     SetNuiFocus(false, false)
 88 |     DoScreenFadeOut(10)
 89 |     Wait(1000)
 90 |     local interior = GetInteriorAtCoords(Config.Interior.x, Config.Interior.y, Config.Interior.z - 18.9)
 91 |     LoadInterior(interior)
 92 |     while not IsInteriorReady(interior) do
 93 |         Wait(1000)
 94 |     end
 95 |     FreezeEntityPosition(PlayerPedId(), true)
 96 |     SetEntityCoords(PlayerPedId(), Config.HiddenCoords.x, Config.HiddenCoords.y, Config.HiddenCoords.z)
 97 |     Wait(1500)
 98 |     ShutdownLoadingScreen()
 99 |     ShutdownLoadingScreenNui()
100 |     openCharMenu(true)
101 | end)
102 | 
103 | -- NUI Callbacks
104 | 
105 | RegisterNUICallback('closeUI', function(_, cb)
106 |     openCharMenu(false)
107 |     cb("ok")
108 | end)
109 | 
110 | RegisterNUICallback('disconnectButton', function(_, cb)
111 |     SetEntityAsMissionEntity(charPed, true, true)
112 |     DeleteEntity(charPed)
113 |     TriggerServerEvent('qb-multicharacter:server:disconnect')
114 |     cb("ok")
115 | end)
116 | 
117 | RegisterNUICallback('selectCharacter', function(data, cb)
118 |     local cData = data.cData
119 |     DoScreenFadeOut(10)
120 |     TriggerServerEvent('qb-multicharacter:server:loadUserData', cData)
121 |     openCharMenu(false)
122 |     SetEntityAsMissionEntity(charPed, true, true)
123 |     DeleteEntity(charPed)
124 |     cb("ok")
125 | end)
126 | 
127 | RegisterNUICallback('cDataPed', function(data, cb)
128 |     local cData = data.cData  
129 |     SetEntityAsMissionEntity(charPed, true, true)
130 |     DeleteEntity(charPed)
131 |     if cData ~= nil then
132 |         QBCore.Functions.TriggerCallback('qb-multicharacter:server:getSkin', function(model, data)
133 |             model = model ~= nil and tonumber(model) or false
134 |             if model ~= nil then
135 |                 CreateThread(function()
136 |                     RequestModel(model)
137 |                     while not HasModelLoaded(model) do
138 |                         Wait(0)
139 |                     end
140 |                     charPed = CreatePed(2, model, Config.PedCoords.x, Config.PedCoords.y, Config.PedCoords.z - 0.98, Config.PedCoords.w, false, true)
141 | 
142 |                     local RandomAnims = {
143 |                         "WORLD_HUMAN_HANG_OUT_STREET", 
144 |                         "WORLD HUMAN STAND IMPATIENT", 
145 |                         "WORLD_HUMAN_STAND_MOBILE", 
146 |                         "WORLD_HUMAN_SMOKING_POT", 
147 |                         "WORLD_HUMAN_LEANING", 
148 |                         "WORLD_HUMAN_DRUG DEALER_HARD", 
149 |                         "WORLD_HUMAN_SUPERHERO", 
150 |                         "WORLD_HUMAN_TOURIST_MAP", 
151 |                         "WORLD_HUMAN YOGA", 
152 |                         "WORLD_HUMAN_BINOCULARS", 
153 |                         "WORLD HUMAN BUM WASH", 
154 |                         "WORLD_HUMAN_CONST_DRILL", 
155 |                         "WORLD_HUMAN_MOBILE_FILM_SHOCKING", 
156 |                         "WORLD HUMAN MUSCLE FLEX", 
157 |                         "WORLD_HUMAN_MUSICIAN", 
158 |                         "WORLD_HUMAN_PAPARAZZI", 
159 |                         "WORLD_HUMAN_PARTYING",
160 |                     }
161 |                     local PlayAnim = RandomAnims[math.random(#RandomAnims)] 
162 |                     SetPedCanPlayAmbientAnims(charPed, true) 
163 |                     TaskStartScenarioInPlace(charPed, PlayAnim, 0, true)
164 | 
165 |                     SetPedComponentVariation(charPed, 0, 0, 0, 2)
166 |                     FreezeEntityPosition(charPed, false)
167 |                     SetEntityInvincible(charPed, true)
168 |                     PlaceObjectOnGroundProperly(charPed)
169 |                     SetBlockingOfNonTemporaryEvents(charPed, true)
170 |                     data = json.decode(data)
171 |                     TriggerEvent('qb-clothing:client:loadPlayerClothing', data, charPed)
172 |                 end)
173 |             else
174 |                 CreateThread(function()
175 |                     local randommodels = {
176 |                         "mp_m_freemode_01",
177 |                         "mp_f_freemode_01",
178 |                     }
179 |                     local model = GetHashKey(randommodels[math.random(1, #randommodels)])
180 |                     RequestModel(model)
181 |                     while not HasModelLoaded(model) do
182 |                         Wait(0)
183 |                     end
184 |                     charPed = CreatePed(2, model, Config.PedCoords.x, Config.PedCoords.y, Config.PedCoords.z - 0.98, Config.PedCoords.w, false, true)
185 |                     SetPedComponentVariation(charPed, 0, 0, 0, 2)
186 |                     FreezeEntityPosition(charPed, false)
187 |                     SetEntityInvincible(charPed, true)
188 |                     PlaceObjectOnGroundProperly(charPed)
189 |                     SetBlockingOfNonTemporaryEvents(charPed, true)
190 |                 end)
191 |             end
192 |             cb("ok")
193 |         end, cData.citizenid)
194 |     else
195 |         CreateThread(function()
196 |             local randommodels = {
197 |                 "mp_m_freemode_01",
198 |                 "mp_f_freemode_01",
199 |             }
200 |             local model = GetHashKey(randommodels[math.random(1, #randommodels)])
201 |             RequestModel(model)
202 |             while not HasModelLoaded(model) do
203 |                 Wait(0)
204 |             end
205 |             charPed = CreatePed(2, model, Config.PedCoords.x, Config.PedCoords.y, Config.PedCoords.z - 0.98, Config.PedCoords.w, false, true)
206 |             SetPedComponentVariation(charPed, 0, 0, 0, 2)
207 |             FreezeEntityPosition(charPed, false)
208 |             SetEntityInvincible(charPed, true)
209 |             PlaceObjectOnGroundProperly(charPed)
210 |             SetBlockingOfNonTemporaryEvents(charPed, true)
211 |         end)
212 |         cb("ok")
213 |     end
214 | end)
215 | 
216 | RegisterNUICallback('setupCharacters', function(data, cb)
217 |     QBCore.Functions.TriggerCallback("qb-multicharacter:server:setupCharacters", function(result)
218 |         SendNUIMessage({
219 |             action = "setupCharacters",
220 |             characters = result
221 |         })
222 |         cb("ok")
223 |     end)
224 | end)
225 | 
226 | RegisterNUICallback('removeBlur', function(data, cb)
227 |     SetTimecycleModifier('default')
228 |     cb("ok")
229 | end)
230 | 
231 | RegisterNUICallback('createNewCharacter', function(data, cb)
232 |     local cData = data
233 |     DoScreenFadeOut(150)
234 |     if cData.gender == "Male" then
235 |         cData.gender = 0
236 |     elseif cData.gender == "Female" then
237 |         cData.gender = 1
238 |     end
239 |     TriggerServerEvent('qb-multicharacter:server:createCharacter', cData)
240 |     Wait(500)
241 |     cb("ok")
242 | end)
243 | 
244 | RegisterNUICallback('removeCharacter', function(data, cb)
245 |     TriggerServerEvent('qb-multicharacter:server:deleteCharacter', data.citizenid)
246 |     TriggerEvent('qb-multicharacter:client:chooseChar')
247 |     cb("ok")
248 | end)


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <link href="reset.css" rel="stylesheet">
  8 |     <link href="style.css" rel="stylesheet">
  9 |     <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 12 |     <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
 13 | 
 14 |     <title>Multi Character </title>
 15 | </head>
 16 | 
 17 | <body>
 18 |   <div class="container">
 19 |     <div class="bars">
 20 |       <div class="topbar">
 21 |         <p><img class="responsive" src="https://cdn.discordapp.com/attachments/981359619333029919/981359649813065748/IMG_1063.png" alt="" width="200" height="200" /></p>					
 22 | 					 <div class="text"></div>
 23 | 					  <style>
 24 |               .text {
 25 |                 font-weight: 100;
 26 |                 font-family: 'Righteous', cursive;
 27 |                 font-size: 28px;
 28 |                 color: #fafafa;
 29 |               }
 30 |               .dud {
 31 |                 color: #ff0000;
 32 |               }
 33 |               /* Buzz */
 34 |               @-webkit-keyframes responsive {
 35 |                 50% {
 36 |                   -webkit-transform: translateX(3px) rotate(2deg);
 37 |                   transform: translateX(3px) rotate(2deg);
 38 |                 }
 39 |                 100% {
 40 |                   -webkit-transform: translateX(-3px) rotate(-2deg);
 41 |                   transform: translateX(-3px) rotate(-2deg);
 42 |                 }
 43 |               }
 44 |               @keyframes responsive {
 45 |                 50% {
 46 |                   -webkit-transform: translateX(3px) rotate(2deg);
 47 |                   transform: translateX(3px) rotate(2deg);
 48 |                 }
 49 |                 100% {
 50 |                   -webkit-transform: translateX(-3px) rotate(-2deg);
 51 |                   transform: translateX(-3px) rotate(-2deg);
 52 |                 }
 53 |               }
 54 |               .responsive {
 55 |                 display: inline-block;
 56 |                 vertical-align: middle;
 57 |                 -webkit-transform: perspective(1px) translateZ(0);
 58 |                 transform: perspective(1px) translateZ(0);
 59 |                 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 60 |               }
 61 |               .responsive:hover, .responsive:focus, .responsive:active {
 62 |                 -webkit-animation-name: responsive;
 63 |                 animation-name: responsive;
 64 |                 -webkit-animation-duration: 0.15s;
 65 |                 animation-duration: 0.15s;
 66 |                 -webkit-animation-timing-function: linear;
 67 |                 animation-timing-function: linear;
 68 |                 -webkit-animation-iteration-count: infinite;
 69 |                 animation-iteration-count: infinite;
 70 |               }
 71 |             </style>
 72 |           <script>
 73 |             class TextScramble {
 74 |               constructor(el) {
 75 |                 this.el = el
 76 |                 this.chars = '!<>-_\\/[]{}—=+*^?#________'
 77 |                 this.update = this.update.bind(this)
 78 |               }
 79 |               setText(newText) {
 80 |                 const oldText = this.el.innerText
 81 |                 const length = Math.max(oldText.length, newText.length)
 82 |                 const promise = new Promise((resolve) => this.resolve = resolve)
 83 |                 this.queue = []
 84 |                 for (let i = 0; i < length; i++) {
 85 |                   const from = oldText[i] || ''
 86 |                   const to = newText[i] || ''
 87 |                   const start = Math.floor(Math.random() * 40)
 88 |                   const end = start + Math.floor(Math.random() * 40)
 89 |                   this.queue.push({ from, to, start, end })
 90 |                 }
 91 |                 cancelAnimationFrame(this.frameRequest)
 92 |                 this.frame = 0
 93 |                 this.update()
 94 |                 return promise
 95 |               }
 96 |               update() {
 97 |                 let output = ''
 98 |                 let complete = 0
 99 |                 for (let i = 0, n = this.queue.length; i < n; i++) {
100 |                   let { from, to, start, end, char } = this.queue[i]
101 |                   if (this.frame >= end) {
102 |                     complete++
103 |                     output += to
104 |                   } else if (this.frame >= start) {
105 |                     if (!char || Math.random() < 0.28) {
106 |                       char = this.randomChar()
107 |                       this.queue[i].char = char
108 |                     }
109 |                     output += `<span class="dud">${char}</span>`
110 |                   } else {
111 |                     output += from
112 |                   }
113 |                 }
114 |                 this.el.innerHTML = output
115 |                 if (complete === this.queue.length) {
116 |                   this.resolve()
117 |                 } else {
118 |                   this.frameRequest = requestAnimationFrame(this.update)
119 |                   this.frame++
120 |                 }
121 |               }
122 |               randomChar() {
123 |                 return this.chars[Math.floor(Math.random() * this.chars.length)]
124 |               }
125 |             }
126 | 
127 |             const phrases = [
128 |               'QBCore',
129 |             ]
130 | 
131 |             const el = document.querySelector('.text')
132 |             const fx = new TextScramble(el)
133 | 
134 |             let counter = 0
135 |             const next = () => {
136 |               fx.setText(phrases[counter]).then(() => {
137 |                 setTimeout(next, 800)
138 |               })
139 |               counter = (counter + 1) % phrases.length
140 |             }
141 |             next()
142 | 				</script>				 
143 |       </div>
144 |     </div>   
145 | 
146 |     <div class="main-screen">
147 |       <div class="welcomescreen">
148 |         <div class="loading-rondje">
149 |           <div class="lds-ring"><div></div><div></div><div></div><div></div></div>                        
150 |             <p id="loading-text">Loading data</p>
151 |           </div>
152 |           <!-- <div class="start-btn continue-btn"><p>Spelen</p></div>
153 |           <div class="start-btn disconnect-btn"><p>Verlaten</p></div> -->
154 |         </div>
155 | 
156 |         <!-- <div class="server-log"> -->
157 |           <!-- <div class="server-log-header"><p>unwind Changelog</p></div> -->
158 |             <!-- <div class="log">
159 |               <span id="log-date">&#8226; 31-10-2019</span>
160 |                 <ul id="log-changes">
161 |                   <li><b>BUGFIXES</b></li>
162 |                     <li> &#8226; </li>
163 |                       <li> &nbsp; </li>
164 |                         <li><b>AANPASSINGEN</b></li>
165 |                         <li> &nbsp; </li>
166 |                         <li><b>NIEUW</b></li>
167 |                       </ul>
168 |                   </div> -->
169 |                 <!-- <div class="log">
170 |                     <span id="log-date">&#8226; 22-12-2019</span>
171 |                     <ul id="log-changes">
172 |                         <li><b>BUGFIXES</b></li>
173 |                         <li> &#8226; Inladen van decoraties</li>
174 |             </ul>
175 |           </div> -->
176 |         <!-- </div> -->
177 | 
178 |  
179 |                     <div class="characters-list">
180 |                     <div class="content__container">
181 |                     <p class="content__container__text">
182 |                       Welcome,
183 |                     </p>
184 |                       
185 |                       <ul class="content__container__list">
186 |                         <li class="content__container__list__item">please</li>
187 |                         <li class="content__container__list__item">choose</li>
188 |                         <li class="content__container__list__item">your</li>
189 |                         <li class="content__container__list__item">character</li>
190 |                       </ul>
191 |                     </div>
192 |                     <div class="character" id="char-1" data-cid="">
193 |                         <span id="slot-name">Empty Character Slot<span id="cid"></span></span>
194 |                     </div>
195 |                     <div class="character" id="char-2" data-cid="">
196 |                         <span id="slot-name">Empty Character Slot<span id="cid"></span></span>
197 |                     </div>
198 |                     <div class="character" id="char-3" data-cid="">
199 |                         <span id="slot-name">Empty Character Slot<span id="cid"></span></span>
200 |                     </div>
201 |                     <div class="character" id="char-4" data-cid="">
202 |                         <span id="slot-name">Empty Character Slot<span id="cid"></span></span>
203 |                     </div>
204 |                     <div class="character" id="char-5" data-cid="">
205 |                         <span id="slot-name">Empty Character Slot<span id="cid"></span></span>
206 |                     </div>
207 |                     <div class="character-btn" id="play"><p id="play-text">Select a character</p></div>
208 |                     <div class="character-btn" id="delete"><p id="delete-text">Select a character</p></div>
209 |                 </div>
210 | 
211 |                 <div class="character-info">
212 |                     <div class="char-info-titel"><i class="material-icons" id="char-info-icon">info</i><span id="char-info-titel">Information about character</span></div>
213 |                     <div class="character-info-valid">
214 |                         <span id="no-char">Select a Character Slot to see all the information about that character.</span>
215 |                     </div>
216 |                 </div>
217 |                 
218 |                 <div class="character-register">
219 |                     <div class="characters-register-block-header">
220 |                         <p>Character Registration</p>
221 |                         <i class="material-icons" id="close-reg">close</i>
222 |                     </div>
223 |                     <div class="char-register-inputs">
224 |                         <input type="text" id="first_name" placeholder="First name" onkeyup="this.value = this.value.replace(/[^a-zA-Z]/, '')" class="char-reg-input">
225 |                         <input type="text" id="last_name" placeholder="Last name" onkeyup="this.value = this.value.replace(/[^a-zA-Z]/, '')" class="char-reg-input">
226 |                         <input type="text" id="nationality" placeholder="Nationality" onkeyup="this.value = this.value.replace(/[^a-zA-Z]/, '')" class="char-reg-input">
227 |                         <input type="date" id="birthdate" placeholder="Date of birth" min="1900-01-01" max="2999-12-31" class="char-reg-input">
228 |                         <select id="gender" name="gender">
229 |                             <option value="man" selected>Man</option>
230 |                             <option value="woman">Woman</option>
231 |                         </select>
232 |                     </div>
233 |                     <div class="character-reg-btn" id="create"><p id="create-text">Confirm data</p></div>
234 |                 </div>
235 | 
236 |                 <div class="character-delete">
237 |                     <div class="characters-delete-block-header">
238 |                         <p>Remove character</p>
239 |                         <i class="material-icons" id="close-del">close</i>
240 |                     </div>
241 | 
242 |                     <p>Are you sure you want to delete this character?</p>
243 |                     <br>
244 |                     <p id="yeet">All your character data will be deleted and cannot be recovered.</p>
245 | 
246 |                     <div class="character-acceptdel-btn" id="accept-delete"><p id="accept-text">Remove character</p></div>
247 |                     <div class="character-canceldel-btn" id="cancel-delete"><p id="cancel-text">Back</p></div>
248 |                 </div>
249 |             </div>
250 |         </div>
251 |     </body>
252 |     <script type="text/javascript" src="script.js"></script>
253 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
254 | </html>


--------------------------------------------------------------------------------
/html/script.js:
--------------------------------------------------------------------------------
  1 | var selectedChar = null;
  2 | var WelcomePercentage = "30vh"
  3 | QBulticharacters = {}
  4 | var Loaded = false;
  5 | 
  6 | $(document).ready(function (){
  7 |     window.addEventListener('message', function (event) {
  8 |         var data = event.data;
  9 | 
 10 |         if (data.action == "ui") {
 11 |             if (data.toggle) {
 12 |                 $('.container').show();
 13 |                 $(".welcomescreen").fadeIn(150);
 14 |                 QBulticharacters.resetAll();
 15 | 
 16 |                 var originalText = "Retrieve player information";
 17 |                 var loadingProgress = 0;
 18 |                 var loadingDots = 0;
 19 |                 $("#loading-text").html(originalText);
 20 |                 var DotsInterval = setInterval(function() {
 21 |                     $("#loading-text").append(".");
 22 |                     loadingDots++;
 23 |                     loadingProgress++;
 24 |                     if (loadingProgress == 3) {
 25 |                         originalText = "Validate player data"
 26 |                         $("#loading-text").html(originalText);
 27 |                     }
 28 |                     if (loadingProgress == 4) {
 29 |                         originalText = "Retrieve player characters"
 30 |                         $("#loading-text").html(originalText);
 31 |                     }
 32 |                     if (loadingProgress == 6) {
 33 |                         originalText = "Validate player characters"
 34 |                         $("#loading-text").html(originalText);
 35 |                     }
 36 |                     if(loadingDots == 4) {
 37 |                         $("#loading-text").html(originalText);
 38 |                         loadingDots = 0;
 39 |                     }
 40 |                 }, 500);
 41 |             
 42 |                 setTimeout(function(){
 43 |                     $.post('https://QB-multicharacter/setupCharacters');
 44 |                     setTimeout(function(){
 45 |                         clearInterval(DotsInterval);
 46 |                         loadingProgress = 0;
 47 |                         originalText = "Retrieve data";
 48 |                         $(".welcomescreen").fadeOut(150);
 49 |                         QBulticharacters.fadeInDown('.character-info', '20%', 400);
 50 |                         QBulticharacters.fadeInDown('.characters-list', '20%', 400);
 51 |                         $.post('https://QB-multicharacter/removeBlur');
 52 |                     }, 2000);
 53 |                 }, 2000);
 54 |             } else {
 55 |                 $('.container').fadeOut(250);
 56 |                 QBulticharacters.resetAll();
 57 |             }
 58 |         }
 59 | 
 60 |         if (data.action == "setupCharacters") {
 61 |             setupCharacters(event.data.characters)
 62 |         }
 63 | 
 64 |         if (data.action == "setupCharInfo") {
 65 |             setupCharInfo(event.data.chardata)
 66 |         }
 67 |     });
 68 | 
 69 |     $('.datepicker').datepicker();
 70 | });
 71 | 
 72 | $('.continue-btn').click(function(e){
 73 |     e.preventDefault();
 74 | 
 75 |     // QBulticharacters.fadeOutUp('.welcomescreen', undefined, 400);
 76 |     // QBulticharacters.fadeOutDown('.server-log', undefined, 400);
 77 |     // setTimeout(function(){
 78 |     //     QBulticharacters.fadeInDown('.characters-list', '20%', 400);
 79 |     //     QBulticharacters.fadeInDown('.character-info', '20%', 400);
 80 |     //     $.post('https://QB-multicharacter/setupCharacters');
 81 |     // }, 400)
 82 | });
 83 | 
 84 | $('.disconnect-btn').click(function(e){
 85 |     e.preventDefault();
 86 | 
 87 |     $.post('https://QB-multicharacter/closeUI');
 88 |     $.post('https://QB-multicharacter/disconnectButton');
 89 | });
 90 | 
 91 | function setupCharInfo(cData) {
 92 |     if (cData == 'empty') {
 93 |         $('.character-info-valid').html('<span id="no-char">The selected character slot is not yet in use.<br><br>This character has no information yet.</span>');
 94 |     } else {
 95 |         var gender = ""
 96 |         if (cData.charinfo.gender == "man") { gender = "Man" }
 97 |         if (cData.charinfo.gender == "woman") { gender = "Woman" }
 98 |         $('.character-info-valid').html(
 99 |         '<div class="character-info-box"><span id="info-label">Name: </span><span class="char-info-js">'+cData.charinfo.firstname+' '+cData.charinfo.lastname+'</span></div>' +
100 |         '<div class="character-info-box"><span id="info-label">Date of birth: </span><span class="char-info-js">'+cData.charinfo.birthdate+'</span></div>' +
101 |         '<div class="character-info-box"><span id="info-label">Sex: </span><span class="char-info-js">'+gender+'</span></div>' +
102 |         '<div class="character-info-box"><span id="info-label">Nationality: </span><span class="char-info-js">'+cData.charinfo.nationality+'</span></div>' +
103 |         '<div class="character-info-box"><span id="info-label">Job: </span><span class="char-info-js">'+cData.job.label+'</span></div>' +
104 |         '<div class="character-info-box"><span id="info-label">Cash: </span><span class="char-info-js">&#36; '+cData.money.cash+'</span></div>' +
105 |         '<div class="character-info-box"><span id="info-label">Bank: </span><span class="char-info-js">&#36; '+cData.money.bank+'</span></div><br>' +
106 |         '<div class="character-info-box"><span id="info-label">Phone Number: </span><span class="char-info-js">'+cData.charinfo.phone+'</span></div>' +
107 |         '<div class="character-info-box"><span id="info-label">Account number: </span><span class="char-info-js">'+cData.charinfo.account+'</span></div>');
108 |     }
109 | }
110 | 
111 | function setupCharacters(characters) {
112 |     $.each(characters, function(index, char){
113 |         $('#char-'+char.cid).html("");
114 |         $('#char-'+char.cid).data("citizenid", char.citizenid);
115 |         setTimeout(function(){
116 |             $('#char-'+char.cid).html('<span id="slot-name">'+char.charinfo.firstname+' '+char.charinfo.lastname+'<span id="cid">' + char.citizenid + '</span></span>');
117 |             $('#char-'+char.cid).data('cData', char)
118 |             $('#char-'+char.cid).data('cid', char.cid)
119 |         }, 100)
120 |     })
121 | }
122 | 
123 | $(document).on('click', '#close-log', function(e){
124 |     e.preventDefault();
125 |     selectedLog = null;
126 |     $('.welcomescreen').css("filter", "none");
127 |     $('.server-log').css("filter", "none");
128 |     $('.server-log-info').fadeOut(250);
129 |     logOpen = false;
130 | });
131 | 
132 | $(document).on('click', '.character', function(e) {
133 |     var cDataPed = $(this).data('cData');
134 |     e.preventDefault();
135 |     if (selectedChar === null) {
136 |         selectedChar = $(this);
137 |         if ((selectedChar).data('cid') == "") {
138 |             $(selectedChar).addClass("char-selected");
139 |             setupCharInfo('empty')
140 |             $("#play-text").html("Create");
141 |             $("#play").css({"display":"block"});
142 |             $("#delete").css({"display":"none"});
143 |             $.post('https://QB-multicharacter/cDataPed', JSON.stringify({
144 |                 cData: cDataPed
145 |             }));
146 |         } else {
147 |             $(selectedChar).addClass("char-selected");
148 |             setupCharInfo($(this).data('cData'))
149 |             $("#play-text").html("Play");
150 |             $("#delete-text").html("Delete");
151 |             $("#play").css({"display":"block"});
152 |             $("#delete").css({"display":"block"});
153 |             $.post('https://QB-multicharacter/cDataPed', JSON.stringify({
154 |                 cData: cDataPed
155 |             }));
156 |         }
157 |     } else if ($(selectedChar).attr('id') !== $(this).attr('id')) {
158 |         $(selectedChar).removeClass("char-selected");
159 |         selectedChar = $(this);
160 |         if ((selectedChar).data('cid') == "") {
161 |             $(selectedChar).addClass("char-selected");
162 |             setupCharInfo('empty')
163 |             $("#play-text").html("Create");
164 |             $("#play").css({"display":"block"});
165 |             $("#delete").css({"display":"none"});
166 |             $.post('https://QB-multicharacter/cDataPed', JSON.stringify({
167 |                 cData: cDataPed
168 |             }));
169 |         } else {
170 |             $(selectedChar).addClass("char-selected");
171 |             setupCharInfo($(this).data('cData'))
172 |             $("#play-text").html("Play");
173 |             $("#delete-text").html("Delete");
174 |             $("#play").css({"display":"block"});
175 |             $("#delete").css({"display":"block"});
176 |             $.post('https://QB-multicharacter/cDataPed', JSON.stringify({
177 |                 cData: cDataPed
178 |             }));
179 |         }
180 |     }
181 | });
182 | 
183 | var entityMap = {
184 |     '&': '&amp;',
185 |     '<': '&lt;',
186 |     '>': '&gt;',
187 |     '"': '&quot;',
188 |     "'": '&#39;',
189 |     '/': '&#x2F;',
190 |     '': '&#x60;',
191 |     '=': '&#x3D;'
192 | };
193 | 
194 | function escapeHtml(string) {
195 |     return String(string).replace(/[&<>"'=/]/g, function (s) {
196 |         return entityMap[s];
197 |     });
198 | }
199 | function hasWhiteSpace(s) {
200 |     return /\s/g.test(s);
201 | }
202 | 
203 | $(document).on('click', '#create', function(e){
204 |     e.preventDefault();
205 | 
206 |     let firstname= escapeHtml($('#first_name').val())
207 |     let lastname= escapeHtml($('#last_name').val())
208 |     let nationality= escapeHtml($('#nationality').val())
209 |     let birthdate= escapeHtml($('#birthdate').val())
210 |     let gender= escapeHtml($('select[name=gender]').val())
211 |     let cid = escapeHtml($(selectedChar).attr('id').replace('char-', ''))
212 | 
213 |     if (!firstname || !lastname || !nationality || !birthdate || hasWhiteSpace(firstname) || hasWhiteSpace(lastname)|| hasWhiteSpace(nationality) ){
214 |     console.log("FIELDS REQUIRED")
215 |     }else{
216 |         $.post('https://QB-multicharacter/createNewCharacter', JSON.stringify({
217 |             firstname: $('#first_name').val(),
218 |             lastname: $('#last_name').val(),
219 |             nationality: $('#nationality').val(),
220 |             birthdate: $('#birthdate').val(),
221 |             gender: $('select[name=gender]').val(),
222 |             cid: $(selectedChar).attr('id').replace('char-', ''),
223 |         }));
224 |         $(".container").fadeOut(150);
225 |         $('.characters-list').css("filter", "none");
226 |         $('.character-info').css("filter", "none");
227 |         QBulticharacters.fadeOutDown('.character-register', '125%', 400);
228 |         refreshCharacters()
229 |     }
230 | });
231 | 
232 | $(document).on('click', '#accept-delete', function(e){
233 |     $.post('https://QB-multicharacter/removeCharacter', JSON.stringify({
234 |         citizenid: $(selectedChar).data("citizenid"),
235 |     }));
236 |     $('.character-delete').fadeOut(150);
237 |     $('.characters-block').css("filter", "none");
238 |     refreshCharacters()
239 | });
240 | 
241 | $(document).on('click', '#cancel-delete', function(e){
242 |     e.preventDefault();
243 |     $('.characters-block').css("filter", "none");
244 |     $('.character-delete').fadeOut(150);
245 | });
246 | 
247 | function refreshCharacters() {
248 |     $('.characters-list').html('<div class="character" id="char-1" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-2" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-3" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-4" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-5" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character-btn" id="play"><p id="play-text">Select a character</p></div><div class="character-btn" id="delete"><p id="delete-text">Select a character</p></div>')
249 |     setTimeout(function(){
250 |         $(selectedChar).removeClass("char-selected");
251 |         selectedChar = null;
252 |         $.post('https://QB-multicharacter/setupCharacters');
253 |         $("#delete").css({"display":"none"});
254 |         $("#play").css({"display":"none"});
255 |         QBulticharacters.resetAll();
256 |     }, 100)
257 | }
258 | 
259 | $("#close-reg").click(function (e) {
260 |     e.preventDefault();
261 |     $('.characters-list').css("filter", "none")
262 |     $('.character-info').css("filter", "none")
263 |     QBulticharacters.fadeOutDown('.character-register', '125%', 400);
264 | })
265 | 
266 | $("#close-del").click(function (e) {
267 |     e.preventDefault();
268 |     $('.characters-block').css("filter", "none");
269 |     $('.character-delete').fadeOut(150);
270 | })
271 | 
272 | $(document).on('click', '#play', function(e) {
273 |     e.preventDefault();
274 |     var charData = $(selectedChar).data('cid');
275 | 
276 |     if (selectedChar !== null) {
277 |         if (charData !== "") {
278 |             $.post('https://QB-multicharacter/selectCharacter', JSON.stringify({
279 |                 cData: $(selectedChar).data('cData')
280 |             }));
281 |             // QBulticharacters.fadeInDown('.welcomescreen', WelcomePercentage, 400);
282 |             // QBulticharacters.fadeInDown('.server-log', '25%', 400);
283 |             setTimeout(function(){
284 |                 QBulticharacters.fadeOutDown('.characters-list', "-40%", 400);
285 |                 QBulticharacters.fadeOutDown('.character-info', "-40%", 400);
286 |                 QBulticharacters.resetAll();
287 |             }, 1500);
288 |         } else {
289 |             $('.characters-list').css("filter", "blur(2px)")
290 |             $('.character-info').css("filter", "blur(2px)")
291 |             QBulticharacters.fadeInDown('.character-register', '25%', 400);
292 |         }
293 |     }
294 | });
295 | 
296 | $(document).on('click', '#delete', function(e) {
297 |     e.preventDefault();
298 |     var charData = $(selectedChar).data('cid');
299 | 
300 |     if (selectedChar !== null) {
301 |         if (charData !== "") {
302 |             $('.characters-block').css("filter", "blur(2px)")
303 |             $('.character-delete').fadeIn(250);
304 |         }
305 |     }
306 | });
307 | 
308 | QBulticharacters.fadeOutUp = function(element, time) {
309 |     $(element).css({"display":"block"}).animate({top: "-80.5%",}, time, function(){
310 |         $(element).css({"display":"none"});
311 |     });
312 | }
313 | 
314 | QBulticharacters.fadeOutDown = function(element, percent, time) {
315 |     if (percent !== undefined) {
316 |         $(element).css({"display":"block"}).animate({top: percent,}, time, function(){
317 |             $(element).css({"display":"none"});
318 |         });
319 |     } else {
320 |         $(element).css({"display":"block"}).animate({top: "103.5%",}, time, function(){
321 |             $(element).css({"display":"none"});
322 |         });
323 |     }
324 | }
325 | 
326 | QBulticharacters.fadeInDown = function(element, percent, time) {
327 |     $(element).css({"display":"block"}).animate({top: percent,}, time);
328 | }
329 | 
330 | QBulticharacters.resetAll = function() {
331 |     $('.characters-list').hide();
332 |     $('.characters-list').css("top", "-40");
333 |     $('.character-info').hide();
334 |     $('.character-info').css("top", "-40");
335 |     // $('.welcomescreen').show();
336 |     $('.welcomescreen').css("top", WelcomePercentage);
337 |     $('.server-log').show();
338 |     $('.server-log').css("top", "25%");
339 | }


--------------------------------------------------------------------------------
/html/style.css:
--------------------------------------------------------------------------------
   1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
   2 | @import url('https://fonts.googleapis.com/css?family=B612+Mono&display=swap');
   3 | @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
   4 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
   5 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
   6 | @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
   7 | 
   8 | .container {
   9 |     display: none;
  10 | }
  11 | 
  12 | .main-screen {
  13 |     position: absolute;
  14 |     height: 100vh;
  15 |     width: 100vw;
  16 |     left: 0;
  17 |     z-index: 100;
  18 | }
  19 | 
  20 | .characters-block {
  21 |     display: none;
  22 |     position: absolute;
  23 |     width: 800px;
  24 |     height: 550px;
  25 |     background-color: rgba(0, 0, 0, 0.9);
  26 |     top: -80%;
  27 |     margin: 0 auto;
  28 |     left: 0;
  29 |     right: 0;
  30 |     border-bottom: 2px solid #b12424;
  31 |     box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.25);
  32 |     box-shadow: inset 0px 0px 150px 0px rgba(255, 255, 255, 0.1);
  33 |     overflow: visible !important;
  34 | }
  35 | 
  36 | .characters-block-header {
  37 |     position: relative;
  38 |     top: 0;
  39 |     width: 100%;
  40 |     height: 30px;
  41 |     background-color: #881a1a;
  42 |     border-bottom: 2px solid #fff;
  43 |     font-family: 'Righteous', cursive;
  44 |     box-shadow: inset 0px 0px 150px 0px rgba(255, 255, 255, 0.1);
  45 | }
  46 | 
  47 | .disconnect-server-btn {
  48 |     position: absolute;
  49 |     width: 80px;
  50 |     height: 60%;
  51 |     background-color: rgba(32, 32, 32, 0.822);
  52 |     left: 10px;
  53 |     bottom: 8px;
  54 |     border: 1px solid rgb(236, 236, 236);
  55 |     border-radius: 3px;
  56 |     transition: all 0.2s ease;
  57 | }
  58 | 
  59 | #close-reg {
  60 |     position: absolute;
  61 |     right: 8px;
  62 |     bottom: 6px;
  63 |     color: rgba(0, 0, 0, 1.0);
  64 |     background: rgb(214, 50, 50);
  65 |     border-radius: 50%;
  66 |     font-size: 18px;
  67 | }
  68 | 
  69 | #close-log {
  70 |     position: absolute;
  71 |     right: 8px;
  72 |     top: 8px;
  73 |     color: rgb(214, 50, 50);
  74 |     background: rgb(226, 226, 226);
  75 |     border-radius: 50%;
  76 | }
  77 | 
  78 | #close-del {
  79 |     position: absolute;
  80 |     right: 8px;
  81 |     bottom: 6px;
  82 |     color: rgba(0, 0, 0, 1.0);
  83 |     background: rgb(214, 50, 50);
  84 |     border-radius: 50%;
  85 |     font-size: 18px;
  86 | }
  87 | 
  88 | .disconnect-server-btn:hover {
  89 |     background-color: rgba(51, 51, 51, 0.89);
  90 |     border-radius: 4px;
  91 | }
  92 | 
  93 | .disconnect-server-btn > p {
  94 |     color: rgb(255, 255, 255);
  95 |     font-size: 13px;
  96 |     padding-top: 5%;
  97 |     padding-left: 6px;
  98 | }
  99 | 
 100 | .characters-block-header > p {
 101 |     text-align: center;
 102 |     color: white;
 103 |     line-height: 24px;
 104 |     font-family: 'Righteous', cursive;    
 105 | }
 106 | 
 107 | .characters-list {
 108 |     display: none;
 109 |     position: absolute;
 110 |     width: 22%;
 111 |     height: auto;
 112 |     left: 13%;
 113 |     top: -40%;
 114 |     overflow: visible !important;
 115 | 
 116 |     -webkit-transform: perspective(1200px) rotateY(30deg) !important;
 117 |     -moz-transform: perspective(1200px) rotateY(30deg) !important;
 118 |     -ms-transform: perspective(1200px) rotateY(30deg) !important;
 119 |     -o-transform: perspective(1200px) rotateY(30deg) !important;
 120 |     transform: perspective(1200px) rotateY(30deg) !important;
 121 | 
 122 |     -webkit-transform-origin: 110% 25%;
 123 |     -moz-transform-origin: 110% 25%;
 124 |     -ms-transform-origin: 110% 25%;
 125 |     -o-transform-origin: 110% 25%;
 126 |     transform-origin: 110% 25%;
 127 | 
 128 |     padding: 20px;
 129 | }
 130 | 
 131 | .character-list-header {
 132 |     position: absolute;
 133 |     top: -20px;
 134 |     width: 100%;
 135 |     height: 8%;
 136 |     right: 0;
 137 | }
 138 | 
 139 | .character-list-header > p {
 140 |     text-align: center;
 141 |     line-height: 37px;
 142 |     font-family: 'Righteous', cursive;
 143 |     letter-spacing: 2px;
 144 |     font-weight: bold;
 145 |     color: white;
 146 | }
 147 | 
 148 | .character {
 149 | 	/* background: url(https://cdn.discordapp.com/attachments/336575770917076993/788068590758658088/images.jpg),linear-gradient(-45deg, #ff000038, #ff000038, #ff000038, #ff000038);	 */
 150 |     position: relative;
 151 |     width: 100%;
 152 |     height: 75px;
 153 |     margin-top: 15px;
 154 | 	border: 2px solid #fff;
 155 |     background-color: rgba(0, 0, 0, 0.75);
 156 |     font-family: 'Righteous', cursive;
 157 |     border-bottom: 4px solid #74aa3200;
 158 |     transition: .1s linear;
 159 |     border-radius: .2vh;
 160 | 	  display: inline-block;
 161 |   vertical-align: middle;
 162 |      -webkit-animation: AnimationName 10s ease infinite;
 163 |     -moz-animation: AnimationName 10s ease infinite;
 164 |     animation: AnimationName 10s ease infinite;	 
 165 |   -webkit-transform: perspective(1px) translateZ(0);
 166 |   transform: perspective(1px) translateZ(0);
 167 |   position: relative;
 168 |   -webkit-transition-duration: 0.3s;
 169 |   transition-duration: 0.3s;
 170 |   -webkit-transition-property: transform;
 171 |   transition-property: transform
 172 | }
 173 | 
 174 | 
 175 | @media only screen and (max-height: 900px) {
 176 | .character {
 177 | 	/* background: url(https://cdn.discordapp.com/attachments/336575770917076993/788068590758658088/images.jpg),linear-gradient(-45deg, #ff000038, #ff000038, #ff000038, #ff000038);	 */
 178 |     position: relative;
 179 |     width: 100%;
 180 |     height: 55px;
 181 |     margin-top: 15px;
 182 | 	border: 2px solid #fff;
 183 |     background-color: rgba(0, 0, 0, 0.75);
 184 |     font-family: 'Righteous', cursive;
 185 |     border-bottom: 4px solid #74aa3200;
 186 |     transition: .1s linear;
 187 |     border-radius: .2vh;
 188 | 	  display: inline-block;
 189 |   vertical-align: middle;
 190 |      -webkit-animation: AnimationName 10s ease infinite;
 191 |     -moz-animation: AnimationName 10s ease infinite;
 192 |     animation: AnimationName 10s ease infinite;	 
 193 |   -webkit-transform: perspective(1px) translateZ(0);
 194 |   transform: perspective(1px) translateZ(0);
 195 |   position: relative;
 196 |   -webkit-transition-duration: 0.3s;
 197 |   transition-duration: 0.3s;
 198 |   -webkit-transition-property: transform;
 199 |   transition-property: transform
 200 | }
 201 | }
 202 | 
 203 | 
 204 | .character:before {
 205 |   pointer-events: none;
 206 |   position: absolute;
 207 |   z-index: -1;
 208 |   content: '';
 209 |   top: 100%;
 210 |   left: 5%;
 211 |   box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 212 |   height: 10px;
 213 |   width: 90%;
 214 |   /* background: url(https://cdn.discordapp.com/attachments/336575770917076993/788068590758658088/images.jpg),linear-gradient(-45deg, #ff000038, #ff000038, #ff000038, #ff000038); */
 215 |   -webkit-transition-duration: 0.3s;
 216 |   transition-duration: 0.3s;
 217 |   -webkit-transition-property: transform, opacity;
 218 |   transition-property: transform, opacity;
 219 | }
 220 | .character:hover, .character:focus, .character:active {
 221 |   -webkit-transform: translateY(-5px);
 222 |   transform: translateY(-5px);
 223 |   /* background: url(https://cdn.discordapp.com/attachments/336575770917076993/788068590758658088/images.jpg),linear-gradient(-45deg, #ff000038, #ff000038, #ff000038, #ff000038); */
 224 |   /* move the element up by 5px */
 225 | }
 226 | .character:hover:before, .character:focus:before, .character:active:before {
 227 |   -webkit-transform: translateY(5px);
 228 |   transform: translateY(5px);
 229 |   /* background: url(https://cdn.discordapp.com/attachments/336575770917076993/788068590758658088/images.jpg),linear-gradient(-45deg, #ff000038, #ff000038, #ff000038, #ff000038); */
 230 |   /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
 231 | }
 232 | 
 233 | .character > span {
 234 |     color: rgb(255, 255, 255);
 235 |     font-family: 'Righteous', cursive;
 236 | }
 237 | 
 238 | #cid {
 239 |     position: relative;
 240 |     float: right;
 241 |     font-size: 11px;
 242 |     right: 35px;
 243 |     line-height: 80px;
 244 | }
 245 | 
 246 | .char-selected {
 247 |     background-color: #832b2bde;
 248 | }
 249 | 
 250 | .disabled {
 251 |     background-color: rgba(0, 0, 0, 0.691);
 252 | }
 253 | 
 254 | #slot-name {
 255 |     position: relative;
 256 |     color: rgb(255, 255, 255);
 257 |     font-size: 17px;
 258 |     line-height: 80px;
 259 |     left: 20px;
 260 |     font-family: 'Righteous', cursive;
 261 | }
 262 | 
 263 | .character-btn {
 264 |     position: relative;
 265 |     width: 30%;
 266 |     height: 50px;
 267 |     top: 65%;
 268 |     transition: 0.2s;
 269 |     float: left;
 270 |     margin-top: 10px;
 271 |     margin-right: 10px;
 272 | }
 273 | 
 274 | .character-btn > p {
 275 |     color: white;
 276 |     text-align: center;
 277 |     text-transform: uppercase;
 278 |     line-height: 50px;
 279 | }
 280 | 
 281 | #play {
 282 |     display: none;
 283 |     background-color: #44bd32;
 284 |     border-radius: 4px;
 285 |     transition: all 0.2s ease;
 286 | }
 287 | 
 288 | #play:hover {
 289 |     background-color: #54d441;
 290 |     border-radius: 8px;
 291 | }
 292 | 
 293 | #delete {
 294 |     display: none;
 295 |     background-color: #c02b2b;
 296 |     border-radius: 4px;
 297 |     transition: all 0.2s ease;
 298 | }
 299 | 
 300 | #delete:hover {
 301 |     background-color: #eb3434;
 302 |     border-radius: 8px;
 303 | }
 304 | 
 305 | .character-info {
 306 | 	/* background: url(https://cdn.discordapp.com/attachments/336575770917076993/788068602401914930/1514254114ad11fd0cbe2d42a8b85181.png),linear-gradient(-45deg, #73737326, #73737326, #73737326, #73737326); */
 307 |     border: 2px solid #fff;	
 308 |     display: none;
 309 |     position: absolute;
 310 |     width: 25%;
 311 |     height: 60%;
 312 |     right: 14%;
 313 |     top: -40%;
 314 |     -webkit-animation: AnimationName 10s ease infinite;
 315 |     -moz-animation: AnimationName 10s ease infinite;
 316 |     animation: AnimationName 10s ease infinite;	
 317 |     background-color: rgba(0, 0, 0, 0.5);
 318 |     overflow: visible !important;
 319 | 	   -webkit-transform: perspective(1200px) rotateY(-25deg) !important;
 320 |     -moz-transform: perspective(1200px) rotateY(-25deg) !important;
 321 |     -ms-transform: perspective(1200px) rotateY(-25deg) !important;
 322 |     -o-transform: perspective(1200px) rotateY(-25deg) !important;
 323 |     transform: perspective(1200px) rotateY(-25deg) !important;
 324 | 
 325 |     -webkit-transform-origin: 110% 25%;
 326 |     -moz-transform-origin: 110% 25%;
 327 |     -ms-transform-origin: 110% 25%;
 328 |     -o-transform-origin: 110% 25%;
 329 |     transform-origin: 110% 25%;
 330 | }
 331 | 
 332 | @-webkit-keyframes AnimationName {
 333 |     0%{background-position:0% 50%}
 334 |     50%{background-position:100% 50%}
 335 |     100%{background-position:0% 50%}
 336 | }
 337 | @-moz-keyframes AnimationName {
 338 |     0%{background-position:0% 50%}
 339 |     50%{background-position:100% 50%}
 340 |     100%{background-position:0% 50%}
 341 | }
 342 | @keyframes AnimationName {
 343 |     0%{background-position:0% 50%}
 344 |     50%{background-position:100% 50%}
 345 |     100%{background-position:0% 50%}
 346 | }
 347 | 
 348 | #char-info-icon {
 349 |     position: relative;
 350 |     font-size: 28px;
 351 |     color: white;
 352 |     right: 20px;
 353 |     overflow: visible !important;
 354 | }
 355 | 
 356 | #char-info-titel {
 357 |     position: absolute;
 358 |     font-size: 17px;
 359 |     color: white;
 360 |     top: 7px;
 361 |     left: 14px;
 362 |     overflow: visible !important;
 363 | }
 364 | 
 365 | #no-char {
 366 |     position: absolute;
 367 |     color: rgb(255, 255, 255);
 368 |     font-size: 16px;
 369 |     top: 30%;
 370 |     text-align: center;
 371 | }
 372 | 
 373 | .char-info-titel {
 374 |     position: relative;
 375 |     left: 28%;
 376 |     top: 3%;
 377 |     overflow: visible !important;
 378 | }
 379 | 
 380 | .character-info-valid {
 381 |     position: relative;
 382 |     top: 10%;
 383 |     overflow: visible !important;
 384 | }
 385 | 
 386 | .character-info-box {
 387 |     position: relative;
 388 |     color: white;
 389 |     font-family: 'Righteous', cursive;	
 390 |     font-size: 16px;
 391 |     width: 100%;
 392 |     height: 20px;
 393 |     border-bottom: 2px solid #fff;
 394 |     margin-bottom: 12px;
 395 | }
 396 | 
 397 | .char-info-js {
 398 |     position: absolute;
 399 |     left: 50%;
 400 | }
 401 | 
 402 | #info-label {
 403 |     margin-left: 10px;
 404 | }
 405 | 
 406 | .character-delete {
 407 |     display: none;
 408 |     position: absolute;
 409 |     width: 500px;
 410 |     height: 250px;
 411 |     top: 200px;
 412 |     left: 70px; 
 413 |     right: 0; 
 414 |     margin-left: auto; 
 415 |     margin-right: auto; 
 416 |     border-bottom: 4px solid #b12424;
 417 |     background-color: rgba(0, 0, 0, 0.7);
 418 |     box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.54);
 419 |     text-align: center;
 420 |     color: white;
 421 |     font-family: 'Righteous', cursive;
 422 |     overflow: visible !important;
 423 | }
 424 | 
 425 | .characters-delete-block-header {
 426 |     position: absolute;
 427 |     background-color: rgba(0, 0, 0, 0.7);
 428 |     width: 100%;
 429 |     height: 11%;
 430 |     color: rgb(255, 255, 255);
 431 |     text-align: center;
 432 |     font-size: 11px;
 433 |     line-height: 29px;
 434 |     font-family: 'Righteous', cursive;
 435 |     border-bottom: 2px solid #b12424;
 436 |     overflow: visible !important;
 437 | }
 438 | 
 439 | .characters-delete-block-header > p {
 440 |     font-family: 'Righteous', cursive;
 441 |     overflow: visible !important;
 442 | }
 443 | 
 444 | .character-delete > p {
 445 |     padding-top: 50px;
 446 |     font-size: 16px;
 447 |     overflow: visible !important;
 448 | }
 449 | 
 450 | #yeet {
 451 |     font-size: 12px;
 452 |     overflow: visible !important;
 453 | }
 454 | 
 455 | .character-acceptdel-btn {
 456 |     position: absolute;
 457 |     width: 43%;
 458 |     height: 13%;
 459 |     bottom: 0;
 460 |     left: 5%;
 461 |     margin-bottom: 15px;
 462 |     background-color: #78ca2c;
 463 |     border-radius: 4px;
 464 |     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.342);
 465 |     transition: 0.2s;
 466 |     overflow: visible !important;
 467 | }
 468 | 
 469 | .character-acceptdel-btn:hover {
 470 |     background-color: #67af25;
 471 | }
 472 | 
 473 | .character-canceldel-btn {
 474 |     position: absolute;
 475 |     width: 43%;
 476 |     height: 13%;
 477 |     bottom: 0;
 478 |     right: 5%;
 479 |     margin-bottom: 15px;
 480 |     background-color: #ca382c;
 481 |     border-radius: 4px;
 482 |     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.342);
 483 |     transition: 0.2s;
 484 |     overflow: visible !important;
 485 | }
 486 | 
 487 | .character-canceldel-btn:hover {
 488 |     background-color: #aa3126;
 489 | }
 490 | 
 491 | .character-acceptdel-btn > p {
 492 |     color: white;
 493 |     text-align: center;
 494 |     padding-top: 7px;
 495 |     font-family: 'Righteous', cursive;
 496 |     overflow: visible !important;
 497 | }
 498 | 
 499 | .character-canceldel-btn > p {
 500 |     color: white;
 501 |     text-align: center;
 502 |     padding-top: 7px;
 503 |     font-family: 'Righteous', cursive;
 504 |     overflow: visible !important;
 505 | }
 506 | 
 507 | .character-register {
 508 |     display: none;
 509 |     position: relative;
 510 |     width: 25%;
 511 |     height: 28%;
 512 |     top: 125%;
 513 |     margin-left: auto;
 514 |     margin-right: auto;
 515 |     left: 32px;
 516 |     background-color: rgba(0, 0, 0, 0.7);
 517 |     box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.54);
 518 |     font-family: 'Righteous', cursive;
 519 |     border-bottom: 4px solid #b12424;
 520 | }
 521 | 
 522 | .characters-register-block-header {
 523 |     position: absolute;
 524 |     background-color: rgba(0, 0, 0, 0.7);
 525 |     width: 100%;
 526 |     height: 11%;
 527 |     color: rgb(255, 255, 255);
 528 |     text-align: center;
 529 |     font-size: 11px;
 530 |     line-height: 29px;
 531 |     font-family: 'Righteous', cursive;
 532 |     border-bottom: 2px solid #b12424;
 533 | }
 534 | 
 535 | .char-register-inputs {
 536 |     position: absolute;
 537 |     top: 15%;
 538 |     left: 12%;
 539 |     overflow: visible !important;
 540 | }
 541 | 
 542 | .char-reg-input {
 543 |     position: relative;
 544 |     float: left;
 545 |     margin-left: 35px;
 546 |     margin-top: 13px;
 547 |     border: none;
 548 |     background-color: rgba(0, 0, 0, 0.808);
 549 |     outline: none;
 550 |     width: 120px;
 551 |     height: 30px;
 552 |     color: white;
 553 |     max-width: 100%;
 554 |     padding: 4px;
 555 |     border-radius: 2px 2px 4px 4px;
 556 |     box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.1);
 557 |     border: 1px solid #b12424bb;
 558 |     font-family: 'Righteous', cursive;
 559 |     text-align: center;
 560 |     transition: all 0.2s ease-in-out;
 561 | }
 562 | 
 563 | .char-reg-input:hover {
 564 |     background-color: rgba(34, 34, 34, 0.808);
 565 | }
 566 | 
 567 | .char-reg-input:focus {
 568 |     background-color: rgba(34, 34, 34, 0.808);
 569 |     border: 1px solid #b12424;
 570 | }
 571 | 
 572 | select {
 573 |     position: absolute;
 574 |     border: none;
 575 |     background-color: rgba(0, 0, 0, 0.808);
 576 |     outline: none;
 577 |     width: 295px;
 578 |     height: 30px;
 579 |     top: 120px;
 580 |     left: 35px;
 581 |     color: white;
 582 |     max-width: 100%;
 583 |     padding: 4px;
 584 |     border-radius: 2px 2px 4px 4px;
 585 |     box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.1);
 586 |     border: 1px solid #b12424bb;
 587 |     font-family: 'Righteous', cursive;
 588 |     text-align-last: center;
 589 |     -webkit-appearance: none;
 590 |     -moz-appearance: none;
 591 |     text-indent: 1px;
 592 |     text-overflow: '';
 593 |     transition: all 0.2s ease-in-out;
 594 | }
 595 | 
 596 | select:hover {
 597 |     background-color: rgba(34, 34, 34, 0.808);
 598 | }
 599 | 
 600 | select:focus {
 601 |     background-color: rgba(34, 34, 34, 0.808);
 602 |     border: 1px solid #b12424;
 603 | }
 604 | 
 605 | #gender option {
 606 |     background-color: transparent;
 607 |     border: none;
 608 |     outline: none;
 609 | }
 610 | 
 611 | select::placeholder {
 612 |     text-align: center;
 613 | }
 614 | 
 615 | select::-ms-expand {
 616 |     display: none;
 617 | }
 618 | 
 619 | .char-reg-input::placeholder {
 620 |     color: rgba(255, 255, 255, 0.52);
 621 | }
 622 | 
 623 | input[type="date"] {
 624 |     color: white;
 625 |     font-family: 'Righteous', cursive;
 626 |     text-align: center;
 627 | }
 628 | 
 629 | input[type=date]::-webkit-calendar-picker-indicator{
 630 |     display: none;
 631 | }
 632 | 
 633 | input[type=date]::-webkit-inner-spin-button, 
 634 | input[type=date]::-webkit-outer-spin-button { 
 635 |   -webkit-appearance: none; 
 636 |   margin: 0; 
 637 | }
 638 | 
 639 | input[type="date"]::-webkit-input-placeholder{ 
 640 |     visibility: hidden !important;
 641 | }
 642 | 
 643 | input[type="date"]::-webkit-clear-button {
 644 |     display: none;
 645 | }
 646 | 
 647 | #birthdate {
 648 |     color: white;
 649 |     text-align: center;
 650 |     font-family: 'Righteous', cursive;: 'Lato', monospace;
 651 | }
 652 | 
 653 | .character-reg-btn {
 654 |     position: absolute;
 655 |     width: auto;
 656 |     max-width: 50%;
 657 |     height: 36px;
 658 |     background-color: #ca382c;
 659 |     border-radius: 4px;
 660 |     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.342);
 661 |     bottom: 5%;
 662 |     margin: 0 auto;
 663 |     left: 0;
 664 |     right: 0;
 665 | }
 666 | 
 667 | .character-reg-btn > p {
 668 |     text-align: center;
 669 |     line-height: 34px;
 670 |     color: white;
 671 |     font-family: 'Righteous', cursive;
 672 |     font-size: 13px;
 673 | }
 674 | 
 675 | .bars div{
 676 |     animation-name: an-height;
 677 |     animation-duration: .6s;
 678 |     z-index: 101;
 679 | }
 680 | @keyframes an-height {
 681 |     from{ height: 0px; }
 682 | }
 683 | .topbar {
 684 |     position: absolute;
 685 | 	background: url();
 686 | 	background-size: cover;
 687 |     top: 0;
 688 |     left: 0;
 689 |     width: 100%;
 690 |     height: 23%;
 691 |     text-align: center;
 692 |     line-height: 5vh;
 693 |     font-family: 'Righteous', cursive;
 694 |     font-weight: bolder;
 695 |     font-size: 1.75vh;
 696 |     color: white;
 697 |     /* border-bottom: 3px solid #b12424; */
 698 | }
 699 | 
 700 | 
 701 | .bottombar {
 702 |     position: absolute;
 703 |     background-color: rgb(0, 0, 0);
 704 |     bottom: 0;
 705 |     left: 0;
 706 |     width: 100%;
 707 |     height: 7%;
 708 |     border-top: 3px solid #b12424;
 709 | }
 710 | 
 711 | .server-log {
 712 |     position: relative;
 713 |     width: 30%;
 714 |     height: 28%;
 715 |     top: 25%;
 716 |     margin-left: auto;
 717 |     margin-right: auto;
 718 |     background-color: rgba(0, 0, 0, 0.7);
 719 |     box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.54);
 720 |     font-family: 'Righteous', cursive;
 721 |     border-bottom: 4px solid #b12424;
 722 |     border-radius: 0px 0px 10px 10px;
 723 | }
 724 | 
 725 | .server-log-header {
 726 |     position: absolute;
 727 |     background-color: rgba(0, 0, 0, 0.7);
 728 |     width: 100%;
 729 |     height: 10%;
 730 |     color: rgb(255, 255, 255);
 731 |     text-align: center;
 732 |     font-size: 11px;
 733 |     line-height: 30px;
 734 |     font-family: 'Righteous', cursive;
 735 |     border-bottom: 2px solid #b12424;
 736 | }
 737 | 
 738 | .log {
 739 |     position: relative;
 740 |     top: 30px;
 741 |     color: rgb(255, 255, 255);
 742 |     font-family: 'Righteous', cursive; 
 743 |     margin-top: 20px;
 744 | }
 745 | 
 746 | #log-date {
 747 |     color: #ff4646;
 748 |     font-size: 12px;
 749 |     padding-left: 10px;
 750 |     text-shadow: 0px 0px 4px rgba(0,0,0,0.35);
 751 |     font-family: 'Righteous', cursive;
 752 | }
 753 | 
 754 | #log-changes {
 755 |     position: relative;
 756 |     top: 10px;
 757 |     left: 30px;
 758 |     font-size: 10px;
 759 |     text-shadow: 0px 0px 4px rgba(0,0,0,0.35);
 760 |     font-family: 'Righteous', cursive;
 761 | }
 762 | 
 763 | .welcomescreen {
 764 |     display: block;
 765 |     position: absolute;
 766 |     margin: 0 auto;
 767 |     left: 0;
 768 |     right: 0;
 769 |     top: 1%;
 770 |     height: 28%;
 771 |     width: 30%;
 772 | 	overflow: visible !important;
 773 | }
 774 | 
 775 | .welcomescreen > p {
 776 |     position: relative;
 777 |     color: #ffffff;
 778 |     text-align: center;
 779 | 	overflow: visible !important;
 780 | }
 781 | 
 782 | #welcome-titel {
 783 |     position: relative;
 784 |     top: 45px;
 785 |     left: 20px;
 786 |     font-size: 30px;
 787 |     font-family: 'Righteous', cursive;
 788 |     font-weight: bolder;
 789 | }
 790 | 
 791 | #unwind-logo {
 792 |     position: absolute;
 793 |     width: 60px;
 794 |     top: 10.5%;
 795 |     left: 21%;
 796 | }
 797 | 
 798 | .continue-btn {
 799 |     position: absolute;
 800 |     left: 3.5%;
 801 |     width: 45%;
 802 |     top: 75%;
 803 |     height: 3.6vh;
 804 |     background-color: #ca382c;
 805 |     border-radius: .2vh;
 806 |     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.342);
 807 |     transition: .1s linear;
 808 | }
 809 | 
 810 | .continue-btn:hover {
 811 |     background-color: #fa4b3b;
 812 | }
 813 | 
 814 | .continue-btn > p {
 815 |     text-align: center;
 816 |     line-height: 3.6vh;
 817 |     color: white;
 818 |     text-transform: uppercase;
 819 |     font-family: 'Righteous', cursive;
 820 | }
 821 | 
 822 | .disconnect-btn {
 823 |     position: absolute;
 824 |     right: 3.5%;
 825 |     width: 45%;
 826 |     top: 75%;
 827 |     height: 3.6vh;
 828 |     background-color: #ca382c;
 829 |     border-radius: .2vh;
 830 |     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.342);
 831 |     transition: .1s linear;
 832 | }
 833 | 
 834 | .disconnect-btn:hover {
 835 |     background-color: #fa4b3b;
 836 | }
 837 | 
 838 | .disconnect-btn > p {
 839 |     text-align: center;
 840 |     line-height: 3.6vh;
 841 |     color: white;
 842 |     text-transform: uppercase;
 843 |     font-family: 'Righteous', cursive;;
 844 | }
 845 | 
 846 | ::-webkit-scrollbar-track
 847 | {
 848 | 	background-color: #F5F5F5;
 849 | }
 850 | 
 851 | ::-webkit-scrollbar
 852 | {
 853 | 	width: 3px;
 854 | 	background-color: #b12424e5;
 855 | }
 856 | 
 857 | ::-webkit-scrollbar-thumb
 858 | {
 859 | 	background-color: #b12424e5;
 860 | }
 861 | 
 862 | .loading-rondje {
 863 |     position: absolute;
 864 |     margin: 0 auto;
 865 |     left: 0;
 866 |     right: 0;
 867 |     top: 50%;
 868 |     width: 150px;
 869 |     height: 150px;
 870 |     transform: translateY(-50%);
 871 |     text-align: center;
 872 |     padding: 1vh;
 873 | }
 874 | 
 875 | .loading-rondje > p {
 876 |     color: white;
 877 |     margin-top: 1vh;
 878 |     font-family: 'Righteous', cursive;
 879 |     text-shadow: 1px 1px 0px #00000085;
 880 | }
 881 | 
 882 | .lds-ring {
 883 |     display: inline-block;
 884 |     position: relative;
 885 |     width: 80px;
 886 |     height: 80px;
 887 | }
 888 | 
 889 | .lds-ring div {
 890 |     box-sizing: border-box;
 891 |     display: block;
 892 |     position: absolute;
 893 |     width: 64px;
 894 |     height: 64px;
 895 |     border: 8px solid #fff;
 896 |     border-radius: 50%;
 897 |     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 898 |     border-color: #fff transparent transparent transparent;
 899 | }
 900 | 
 901 | .lds-ring div:nth-child(1) {
 902 |     animation-delay: -0.45s;
 903 | }
 904 | 
 905 | .lds-ring div:nth-child(2) {
 906 |     animation-delay: -0.3s;
 907 | }
 908 | 
 909 | .lds-ring div:nth-child(3) {
 910 |     animation-delay: -0.15s;
 911 | }
 912 | 
 913 | @keyframes lds-ring {
 914 |     0% {
 915 |         transform: rotate(0deg);
 916 |     }
 917 |     100% {
 918 |         transform: rotate(360deg);
 919 |     }
 920 | }
 921 | 
 922 | 
 923 | .content {
 924 |   position: absolute;
 925 |   top: 50%;
 926 |   left: 50%;
 927 |   -webkit-transform: translate(-50%, -50%);
 928 |           transform: translate(-50%, -50%);
 929 |   height: 160px;
 930 |   overflow: hidden;
 931 |   font-family: 'Righteous', cursive;
 932 |   font-size: 55px;
 933 |   color: #fff;
 934 | }
 935 | .content__container {
 936 |   font-weight: 600;
 937 |   font-family: 'Righteous', cursive;
 938 |   overflow: hidden;
 939 |   height: 40px;
 940 |   padding: 0 40px;
 941 | }
 942 | .content__container:before {
 943 |   content: '[';
 944 |   left: 0;
 945 | }
 946 | .content__container:after {
 947 |   content: ']';
 948 |   position: absolute;
 949 |   right: 0;
 950 | }
 951 | .content__container:after, .content__container:before {
 952 |   position: absolute;
 953 |   top: 24px;
 954 |   color: #ff0000;
 955 |   font-size: 42px;
 956 |   line-height: 40px;
 957 |   -webkit-animation-name: opacity;
 958 |   -webkit-animation-duration: 2s;
 959 |   -webkit-animation-iteration-count: infinite;
 960 |   animation-name: opacity;
 961 |   animation-duration: 2s;
 962 |   animation-iteration-count: infinite;
 963 | }
 964 | .content__container__text {
 965 |   display: inline;
 966 |   font-family: 'Righteous', cursive;
 967 |   color: #fff;
 968 |   font-size: 30px;
 969 |   float: left;
 970 |   margin: 0;
 971 | }
 972 | .content__container__list {
 973 |   margin-top: -10px;
 974 |   font-family: 'Righteous', cursive;
 975 |   padding-left: 40px;
 976 |   text-align: left;
 977 |   list-style: none;
 978 |   -webkit-animation-name: change;
 979 |   -webkit-animation-duration: 10s;
 980 |   -webkit-animation-iteration-count: infinite;
 981 |   animation-name: change;
 982 |   animation-duration: 10s;
 983 |   animation-iteration-count: infinite;
 984 | }
 985 | .content__container__list__item {
 986 |   font-family: 'Righteous', cursive;
 987 |   line-height: 50px;
 988 |   color: #fff;
 989 |   font-size: 30px;
 990 |   margin: 0;
 991 | }
 992 | 
 993 | @-webkit-keyframes opacity {
 994 |   0%, 100% {
 995 |     opacity: 0;
 996 |   }
 997 |   50% {
 998 |     opacity: 1;
 999 |   }
1000 | }
1001 | @-webkit-keyframes change {
1002 |   0%, 12.66%, 100% {
1003 |     -webkit-transform: translate3d(0, 0, 0);
1004 |             transform: translate3d(0, 0, 0);
1005 |   }
1006 |   16.66%, 29.32% {
1007 |     -webkit-transform: translate3d(0, -25%, 0);
1008 |             transform: translate3d(0, -25%, 0);
1009 |   }
1010 |   33.32%,45.98% {
1011 |     -webkit-transform: translate3d(0, -50%, 0);
1012 |             transform: translate3d(0, -50%, 0);
1013 |   }
1014 |   49.98%,62.64% {
1015 |     -webkit-transform: translate3d(0, -75%, 0);
1016 |             transform: translate3d(0, -75%, 0);
1017 |   }
1018 |   66.64%,79.3% {
1019 |     -webkit-transform: translate3d(0, -50%, 0);
1020 |             transform: translate3d(0, -50%, 0);
1021 |   }
1022 |   83.3%,95.96% {
1023 |     -webkit-transform: translate3d(0, -25%, 0);
1024 |             transform: translate3d(0, -25%, 0);
1025 |   }
1026 | }
1027 | @keyframes opacity {
1028 |   0%, 100% {
1029 |     opacity: 0;
1030 |   }
1031 |   50% {
1032 |     opacity: 1;
1033 |   }
1034 | }
1035 | @keyframes change {
1036 |   0%, 12.66%, 100% {
1037 |     -webkit-transform: translate3d(0, 0, 0);
1038 |             transform: translate3d(0, 0, 0);
1039 |   }
1040 |   16.66%, 29.32% {
1041 |     -webkit-transform: translate3d(0, -25%, 0);
1042 |             transform: translate3d(0, -25%, 0);
1043 |   }
1044 |   33.32%,45.98% {
1045 |     -webkit-transform: translate3d(0, -50%, 0);
1046 |             transform: translate3d(0, -50%, 0);
1047 |   }
1048 |   49.98%,62.64% {
1049 |     -webkit-transform: translate3d(0, -75%, 0);
1050 |             transform: translate3d(0, -75%, 0);
1051 |   }
1052 |   66.64%,79.3% {
1053 |     -webkit-transform: translate3d(0, -50%, 0);
1054 |             transform: translate3d(0, -50%, 0);
1055 |   }
1056 |   83.3%,95.96% {
1057 |     -webkit-transform: translate3d(0, -25%, 0);
1058 |             transform: translate3d(0, -25%, 0);
1059 |   }
1060 | }
1061 | 


--------------------------------------------------------------------------------