mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-29 01:08:54 +00:00
feat: esx_banking rewrite
fully rewritten esx banking
This commit is contained in:
Benzo
@@ -1,4 +1,9 @@
|
||||
# esx_banking
|
||||
<h1 align='center'>[ESX] Banking</a></h1><p align='center'><b><a href='https://discord.esx-framework.org/'>Discord</a> - <a href='https://esx-framework.org/'>Website</a> - <a href='https://docs.esx-framework.org/legacy/installation'>Documentation</a></b></h5>
|
||||
|
||||
A beautiful and Easy-To-Use Banking & ATM system for ESX, with optional OX Target Support
|
||||
|
||||
|
||||
## Special thanks: Gellipapa#9186,Rav3n95#2849,Csoki, csontvazharcos, Füsti, Pécé
|
||||
|
||||
## Download & Installation
|
||||
|
||||
@@ -21,7 +26,7 @@ Run the banking.sql into your database. Done.
|
||||
### License
|
||||
esx_banking - banking script for ESX
|
||||
|
||||
Copyright (C) 2015-2022 Jérémie N'gadi
|
||||
Copyright (C) 2022 ESX-Framework
|
||||
|
||||
This program Is free software: you can redistribute it And/Or modify it under the terms Of the GNU General Public License As published by the Free Software Foundation, either version 3 Of the License, Or (at your option) any later version.
|
||||
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
|
||||
-- Dumping structure for table legacy.banking
|
||||
CREATE TABLE IF NOT EXISTS `banking` (
|
||||
`identifier` varchar(50) DEFAULT NULL,
|
||||
`identifier` varchar(46) DEFAULT NULL,
|
||||
`type` varchar(50) DEFAULT NULL,
|
||||
`amount` int(64) DEFAULT NULL,
|
||||
`time` date DEFAULT NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||
`time` bigint(20) DEFAULT NULL,
|
||||
`ID` int(11) NOT NULL AUTO_INCREMENT,
|
||||
`balance` int(11) DEFAULT 0,
|
||||
PRIMARY KEY (`ID`)
|
||||
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
|
||||
|
||||
ALTER TABLE `users` ADD COLUMN `pincode` INT NULL;
|
||||
|
||||
@@ -1,125 +1,350 @@
|
||||
-- internal variables
|
||||
local hasAlreadyEnteredMarker, isInbankingMarker, menuIsShowed = false, false, false
|
||||
local PlayerData, ActivateBlips, Peds = {}, {}, {}
|
||||
local PlayerLoaded = true
|
||||
local isInMarker, isInAtmMarker, isInMenu, isMarkerShowed = false, false, false, false
|
||||
local _GetEntityCoords, _PlayerPedId
|
||||
|
||||
RegisterNetEvent('esx_banking:closebanking')
|
||||
AddEventHandler('esx_banking:closebanking', function()
|
||||
SetNuiFocus(false)
|
||||
menuIsShowed = false
|
||||
SendNUIMessage({
|
||||
hideAll = true
|
||||
})
|
||||
end)
|
||||
|
||||
RegisterNUICallback('escape', function(data, cb)
|
||||
TriggerEvent('esx_banking:closebanking')
|
||||
cb('ok')
|
||||
end)
|
||||
|
||||
RegisterNUICallback('deposit', function(data, cb)
|
||||
TriggerServerEvent('esx_banking:deposit', data.amount)
|
||||
getTransactionHistory()
|
||||
cb('ok')
|
||||
end)
|
||||
|
||||
RegisterNUICallback('withdraw', function(data, cb)
|
||||
TriggerServerEvent('esx_banking:withdraw', data.amount)
|
||||
getTransactionHistory()
|
||||
cb('ok')
|
||||
end)
|
||||
|
||||
-- Create blips
|
||||
CreateThread(function()
|
||||
if not Config.Blips.Enabled then return end
|
||||
|
||||
for _, bankingLocation in pairs(Config.bankingLocations) do
|
||||
bankingLocation.blip = AddBlipForCoord(bankingLocation.x, bankingLocation.y, bankingLocation.z - Config.ZDiff)
|
||||
SetBlipSprite(bankingLocation.blip, Config.Blips.Sprite)
|
||||
SetBlipDisplay(bankingLocation.blip, 4)
|
||||
SetBlipScale(bankingLocation.blip, Config.Blips.Scale)
|
||||
SetBlipColour(bankingLocation.blip, Config.Blips.Color)
|
||||
SetBlipAsShortRange(bankingLocation.blip, true)
|
||||
BeginTextCommandSetBlipName("STRING")
|
||||
AddTextComponentSubstringPlayerName(_U('banking_blip'))
|
||||
EndTextCommandSetBlipName(bankingLocation.blip)
|
||||
end
|
||||
end)
|
||||
|
||||
-- Activate menu when player is inside marker
|
||||
CreateThread(function()
|
||||
while true do
|
||||
local coords = GetEntityCoords(PlayerPedId())
|
||||
local Sleep = 1500
|
||||
isInbankingMarker = false
|
||||
|
||||
for k,v in pairs(Config.bankingLocations) do
|
||||
local Pos = vector3(v.x,v.y,v.z)
|
||||
if #(coords - Pos) < 2.0 then
|
||||
Sleep = 0
|
||||
isInbankingMarker, canSleep = true, false
|
||||
ESX.TextUI(_U('press_e_banking'))
|
||||
DrawMarker(20, Pos.x, Pos.y, Pos.z,0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.3, 0.2, 0.2, 187, 255, 0, 255, false, true, 2, nil, nil, false)
|
||||
break
|
||||
end
|
||||
end
|
||||
|
||||
if isInbankingMarker and not hasAlreadyEnteredMarker then
|
||||
hasAlreadyEnteredMarker = true
|
||||
canSleep = false
|
||||
end
|
||||
|
||||
if not isInbankingMarker and hasAlreadyEnteredMarker then
|
||||
hasAlreadyEnteredMarker = false
|
||||
SetNuiFocus(false)
|
||||
menuIsShowed = false
|
||||
canSleep = false
|
||||
ESX.HideUI()
|
||||
|
||||
SendNUIMessage({
|
||||
hideAll = true
|
||||
})
|
||||
end
|
||||
Wait(Sleep)
|
||||
end
|
||||
end)
|
||||
|
||||
-- Menu interactions
|
||||
CreateThread(function()
|
||||
while true do
|
||||
local Sleep = 1500
|
||||
if isInbankingMarker and not menuIsShowed then
|
||||
Sleep = 0
|
||||
if IsControlJustReleased(0, 38) and IsPedOnFoot(PlayerPedId()) then
|
||||
menuIsShowed = true
|
||||
getTransactionHistory()
|
||||
ESX.TriggerServerCallback('esx:getPlayerData', function(data)
|
||||
SendNUIMessage({
|
||||
showMenu = true,
|
||||
player = {
|
||||
money = data.money,
|
||||
accounts = data.accounts
|
||||
}
|
||||
})
|
||||
end)
|
||||
SetNuiFocus(true, true)
|
||||
end
|
||||
end
|
||||
Wait(Sleep)
|
||||
end
|
||||
end)
|
||||
|
||||
-- close the menu when script is stopping to avoid being stuck in NUI focus
|
||||
AddEventHandler('onResourceStop', function(resource)
|
||||
if resource == GetCurrentResourceName() then
|
||||
if menuIsShowed then
|
||||
TriggerEvent('esx_banking:closebanking')
|
||||
end
|
||||
end
|
||||
end)
|
||||
|
||||
function getTransactionHistory()
|
||||
ESX.TriggerServerCallback("esx_banking:gethistory", function(_history)
|
||||
SendNUIMessage({
|
||||
history = {json.encode(_history)}
|
||||
})
|
||||
end)
|
||||
-- Functions
|
||||
-- Listen for keypress while player inside the marker
|
||||
local function Listen4Key()
|
||||
CreateThread(function()
|
||||
while (isInMarker or isInAtmMarker) and not isInMenu do
|
||||
if IsControlJustReleased(0, 38) then
|
||||
OpenUi(isInAtmMarker)
|
||||
end
|
||||
Wait(0)
|
||||
end
|
||||
end)
|
||||
end
|
||||
|
||||
-- Create Blips
|
||||
local function CreateBlips()
|
||||
local tmpActiveBlips = {}
|
||||
for i = 1, #Config.Banks do
|
||||
if type(Config.Banks[i].Blip) == 'table' and Config.Banks[i].Blip.Activate then
|
||||
local blip = AddBlipForCoord(Config.Banks[i].Position.xy)
|
||||
SetBlipSprite(blip, Config.Banks[i].Blip.Sprite)
|
||||
SetBlipScale(blip, Config.Banks[i].Blip.Scale)
|
||||
SetBlipColour(blip, Config.Banks[i].Blip.Color)
|
||||
SetBlipAsShortRange(blip, true)
|
||||
BeginTextCommandSetBlipName('STRING')
|
||||
AddTextComponentSubstringPlayerName(Config.Banks[i].Blip.Label)
|
||||
EndTextCommandSetBlipName(blip)
|
||||
tmpActiveBlips[#tmpActiveBlips + 1] = blip
|
||||
end
|
||||
end
|
||||
|
||||
ActivateBlips = tmpActiveBlips
|
||||
end
|
||||
|
||||
-- Remove blips
|
||||
local function RemoveBlips()
|
||||
for i = 1, #ActivateBlips do
|
||||
if DoesBlipExist(ActivateBlips[i]) then
|
||||
RemoveBlip(ActivateBlips[i])
|
||||
end
|
||||
end
|
||||
ActivateBlips = {}
|
||||
end
|
||||
|
||||
-- Ped Handler
|
||||
local function PedHandler(ids)
|
||||
local tmpPeds = {}
|
||||
|
||||
for _, id in pairs(ids) do
|
||||
if not Peds[id] then
|
||||
|
||||
if not HasModelLoaded(Config.Peds[id].Model) then
|
||||
RequestModel(Config.Peds[id].Model)
|
||||
Wait(100)
|
||||
while not HasModelLoaded(Config.Peds[id].Model) do
|
||||
Wait(10)
|
||||
end
|
||||
end
|
||||
|
||||
local npc = CreatePed(6, Config.Peds[id].Model, Config.Peds[id].Position + vector4(0, 0, -1, 0), false,
|
||||
false)
|
||||
TaskStartScenarioInPlace(npc, Config.Peds[id].Scenario, 0, true)
|
||||
SetEntityInvincible(npc, true)
|
||||
SetEntityProofs(npc, true, true, true, true, true, true, 1, true)
|
||||
SetBlockingOfNonTemporaryEvents(npc, true)
|
||||
FreezeEntityPosition(npc, true)
|
||||
SetPedDiesWhenInjured(npc, false)
|
||||
SetEntityCanBeDamaged(npc, false)
|
||||
SetPedCanRagdollFromPlayerImpact(npc, false)
|
||||
SetPedCanRagdoll(npc, false)
|
||||
SetEntityAsMissionEntity(npc, true, true)
|
||||
SetEntityDynamic(npc, false)
|
||||
|
||||
if Config.Target then
|
||||
exports.ox_target:addGlobalPed(npc, {
|
||||
options = {{
|
||||
icon = "fas fa-money-bill-wave",
|
||||
label = _U('access_bank'),
|
||||
action = function()
|
||||
OpenUi()
|
||||
end
|
||||
}},
|
||||
distance = 2
|
||||
})
|
||||
end
|
||||
|
||||
Peds[id] = npc
|
||||
end
|
||||
end
|
||||
|
||||
for id, handle in pairs(Peds) do
|
||||
local del = true
|
||||
|
||||
for i = 1, #ids do
|
||||
|
||||
if ids[i] == id then
|
||||
del = false
|
||||
tmpPeds[id] = handle
|
||||
end
|
||||
end
|
||||
|
||||
if del then
|
||||
DeletePed(handle)
|
||||
if Config.Target then
|
||||
exports.ox_target:removeGlobalPed(handle, {_U('access_bank')})
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Peds = tmpPeds
|
||||
end
|
||||
|
||||
function OpenUi(atm)
|
||||
atm = atm or false
|
||||
isInMenu = true
|
||||
if not Config.Target then
|
||||
ESX.HideUI()
|
||||
end
|
||||
ESX.TriggerServerCallback('esx_banking:getPlayerData', function(data)
|
||||
SendNUIMessage({
|
||||
showMenu = true,
|
||||
openATM = atm,
|
||||
datas = {
|
||||
your_money_panel = {
|
||||
title = _U('your_money_title'),
|
||||
desc = _U('your_money_desc'),
|
||||
accountsData = {{
|
||||
title = _U('your_money_cash'),
|
||||
name = "cash",
|
||||
amount = data.money
|
||||
}, {
|
||||
title = _U('your_money_bank'),
|
||||
name = "bank",
|
||||
amount = data.bankMoney
|
||||
}}
|
||||
},
|
||||
bankCardData = {
|
||||
bankName = _U('bank_name'),
|
||||
cardNumber = "2232 2222 2222 2222",
|
||||
createdDate = "08/08",
|
||||
name = data.playerName
|
||||
},
|
||||
transactionsData = data.transactionHistory
|
||||
}
|
||||
})
|
||||
end)
|
||||
SetNuiFocus(true, true)
|
||||
end
|
||||
|
||||
local function CloseUi()
|
||||
SetNuiFocus(false)
|
||||
isInMenu = false
|
||||
SendNUIMessage({
|
||||
showMenu = false
|
||||
})
|
||||
|
||||
if not Config.Target and (isInMarker or isInAtmMarker) then
|
||||
ESX.TextUI(_U('press_e_banking'))
|
||||
Listen4Key()
|
||||
end
|
||||
end
|
||||
|
||||
local function ShowMarker(coord)
|
||||
CreateThread(function()
|
||||
while isMarkerShowed do
|
||||
DrawMarker(20, coord.x, coord.y, coord.z, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.3, 0.2, 0.2, 187, 255, 0, 255,
|
||||
false, true, 2, nil, nil, false)
|
||||
Wait(0)
|
||||
end
|
||||
end)
|
||||
end
|
||||
|
||||
local function StartThread()
|
||||
CreateThread(function()
|
||||
CreateBlips()
|
||||
|
||||
if Config.Target then
|
||||
exports.ox_target:addModel(Config.AtmModels, {
|
||||
options = {{
|
||||
icon = 'fas fa-credit-card',
|
||||
label = _U('access_bank'),
|
||||
action = function()
|
||||
OpenUi(true)
|
||||
end
|
||||
}},
|
||||
distance = 1.5
|
||||
})
|
||||
if not Config.EnablePeds then
|
||||
for i = 1, #Config.Banks do
|
||||
local targetInfo = Config.Banks[i].Position
|
||||
exports.ox_target:addBoxZone('openBank' .. i, targetInfo.xyz, 1.5, 1.5, {
|
||||
name = 'openBank' .. i,
|
||||
heading = targetInfo.w,
|
||||
minZ = targetInfo.z - 1.0,
|
||||
maxZ = targetInfo.z + 1.5,
|
||||
debugPoly = Config.Debug
|
||||
}, {
|
||||
options = {{
|
||||
icon = 'fas fa-money-bill-wave',
|
||||
label = _U('access_bank'),
|
||||
action = function()
|
||||
OpenUi()
|
||||
end
|
||||
}},
|
||||
distance = 2.0
|
||||
})
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
while PlayerLoaded do
|
||||
_PlayerPedId = PlayerPedId()
|
||||
_GetEntityCoords = GetEntityCoords(_PlayerPedId)
|
||||
|
||||
if Config.EnablePeds then
|
||||
local closestPed = {}
|
||||
|
||||
for i = 1, #Config.Peds do
|
||||
local distance = #(_GetEntityCoords - Config.Peds[i].Position.xyz)
|
||||
if distance <= Config.DrawMarker then
|
||||
closestPed[#closestPed + 1] = i
|
||||
end
|
||||
end
|
||||
|
||||
PedHandler(closestPed)
|
||||
end
|
||||
|
||||
if not Config.Target and not isInMenu and IsPedOnFoot(PlayerPedId()) then
|
||||
local closestBank = {}
|
||||
|
||||
for i = 1, #Config.AtmModels do
|
||||
local atm = GetClosestObjectOfType(_GetEntityCoords, 3.0, Config.AtmModels[i], false)
|
||||
if atm ~= 0 then
|
||||
local atmOffset = GetOffsetFromEntityInWorldCoords(atm, 0.0, -0.7, 0.0)
|
||||
local atmHeading = GetEntityHeading(atm)
|
||||
local atmDistance = #(_GetEntityCoords - atmOffset)
|
||||
if not isInAtmMarker and atmDistance <= 1.5 then
|
||||
isInAtmMarker = true
|
||||
ESX.TextUI(_U('press_e_banking'))
|
||||
Listen4Key()
|
||||
elseif isInAtmMarker and atmDistance > 1.5 then
|
||||
isInAtmMarker = false
|
||||
ESX.HideUI()
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
for i = 1, #Config.Banks do
|
||||
local bankDistance = #(_GetEntityCoords - Config.Banks[i].Position.xyz)
|
||||
|
||||
if bankDistance <= Config.DrawMarker then
|
||||
closestBank = {Config.Banks[i].Position, bankDistance}
|
||||
end
|
||||
end
|
||||
|
||||
if not isMarkerShowed and next(closestBank) then
|
||||
isMarkerShowed = true
|
||||
ShowMarker(closestBank[1].xyz)
|
||||
elseif isMarkerShowed and not next(closestBank) then
|
||||
isMarkerShowed = false
|
||||
end
|
||||
|
||||
if next(closestBank) then
|
||||
if not isInMarker and closestBank[2] <= 1.0 then
|
||||
isInMarker = true
|
||||
ESX.TextUI(_U('press_e_banking'))
|
||||
Listen4Key()
|
||||
elseif isInMarker and closestBank[2] > 1.0 then
|
||||
isInMarker = false
|
||||
ESX.HideUI()
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
Wait(1000)
|
||||
end
|
||||
end)
|
||||
end
|
||||
|
||||
-- NuiCallbacks
|
||||
RegisterNUICallback('close', function(data, cb)
|
||||
CloseUi()
|
||||
cb('ok')
|
||||
end)
|
||||
|
||||
RegisterNUICallback('clickButton', function(data, cb)
|
||||
if data ~= nil and isInMenu then
|
||||
TriggerServerEvent("esx_banking:doingType", data)
|
||||
end
|
||||
cb('ok')
|
||||
end)
|
||||
|
||||
RegisterNUICallback('checkPincode', function(data, cb)
|
||||
if data ~= nil and isInMenu then
|
||||
ESX.TriggerServerCallback("esx_banking:checkPincode", function(pincode)
|
||||
if pincode then
|
||||
cb({
|
||||
success = true
|
||||
})
|
||||
ESX.ShowNotification(_U('pincode_found'), "success")
|
||||
|
||||
else
|
||||
cb({
|
||||
error = true
|
||||
})
|
||||
ESX.ShowNotification(_U('pincode_not_found'), "error")
|
||||
end
|
||||
end, data)
|
||||
end
|
||||
end)
|
||||
|
||||
-- Events
|
||||
RegisterNetEvent('esx_banking:closebanking', function()
|
||||
CloseUi()
|
||||
end)
|
||||
|
||||
RegisterNetEvent('esx_banking:updateMoneyInUI')
|
||||
AddEventHandler('esx_banking:updateMoneyInUI', function(doingType, bankMoney, money)
|
||||
SendNUIMessage({
|
||||
updateData = true,
|
||||
data = {
|
||||
type = doingType,
|
||||
bankMoney = bankMoney,
|
||||
money = money
|
||||
}
|
||||
})
|
||||
end)
|
||||
|
||||
-- Resource starting
|
||||
AddEventHandler('onResourceStart', function(resource)
|
||||
if resource ~= GetCurrentResourceName() then
|
||||
return
|
||||
end
|
||||
StartThread()
|
||||
end)
|
||||
|
||||
-- Resource stopping
|
||||
AddEventHandler('onResourceStop', function(resource)
|
||||
if resource ~= GetCurrentResourceName() then
|
||||
return
|
||||
end
|
||||
RemoveBlips()
|
||||
if isInMenu then
|
||||
CloseUi()
|
||||
end
|
||||
end)
|
||||
|
||||
@@ -1,26 +1,133 @@
|
||||
Config = {}
|
||||
|
||||
Config.ZDiff = 2.0
|
||||
|
||||
Config.Locale = 'en'
|
||||
|
||||
Config.Blips = {
|
||||
Enabled = true,
|
||||
Sprite = 106,
|
||||
Scale = 0.7,
|
||||
Color = 2,
|
||||
Config = {
|
||||
Debug = false,
|
||||
DrawMarker = 10,
|
||||
Target = false, -- ox_target (https://github.com/overextended/ox_target)
|
||||
Locale = 'en',
|
||||
EnablePeds = true,
|
||||
AtmModels = {`prop_fleeca_atm`, `prop_atm_01`, `prop_atm_02`, `prop_atm_03`},
|
||||
Banks = {
|
||||
{
|
||||
Position = vector4(149.91, -1040.74, 29.374, 160),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(-1212.63, -330.78, 37.59, 210),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(-2962.47, 482.93, 15.5, 270),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(-113.01, 6470.24, 31.43, 315),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(314.16, -279.09, 53.97, 160),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(-350.99, -49.99, 48.84, 160),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(1175.02, 2706.87, 37.89, 0),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
{
|
||||
Position = vector4(246.63, 223.62, 106.0, 160),
|
||||
Blip = {
|
||||
Enabled = true,
|
||||
Color = 69,
|
||||
Label = 'Bank',
|
||||
Sprite = 108,
|
||||
Scale = 0.7
|
||||
}
|
||||
},
|
||||
},
|
||||
Peds = {
|
||||
{
|
||||
Position = vector4(149.5513, -1042.1570, 29.3680, 341.6520),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(-1211.8585, -331.9854, 37.7809, 28.5983),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(-2961.0720, 483.1107, 15.6970, 88.1986),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(-112.2223, 6471.1128, 31.6267, 132.7517),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(313.8176, -280.5338, 54.1647, 339.1609),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(-351.3247, -51.3466, 49.0365, 339.3305),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(1174.9718, 2708.2034, 38.0879, 178.2974),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
},
|
||||
{
|
||||
Position = vector4(247.0348, 225.1851, 106.2875, 158.7528),
|
||||
Model = `U_M_M_BankMan`,
|
||||
Scenario = 'WORLD_HUMAN_CLIPBOARD'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Config.bankingLocations = {
|
||||
{ ['x'] = 149.644, ['y'] = -1040.492, ['z'] = 29.366},
|
||||
{ ['x'] = -112.64, ['y'] = 6469.72, ['z'] = 31.366},
|
||||
{ ['x'] = -2962.58, ['y'] = 482.67, ['z'] = 15.69},
|
||||
{ ['x'] = -1213.27, ['y'] = -331.461, ['z'] = 37.773},
|
||||
{ ['x'] = 314.187, ['y'] = -278.621, ['z'] = 54.170},
|
||||
{ ['x'] = -351.534, ['y'] = -49.529, ['z'] = 49.042},
|
||||
{ ['x'] = -1570.197, ['y'] = -546.651, ['z'] = 34.955},
|
||||
{ ['x'] = 33.232, ['y'] = -1347.849, ['z'] = 29.497},
|
||||
{ ['x'] = 129.216, ['y'] = -1292.347, ['z'] = 29.269}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
fx_version 'adamant'
|
||||
fx_version 'cerulean'
|
||||
|
||||
game 'gta5'
|
||||
|
||||
@@ -25,10 +25,7 @@ client_scripts {
|
||||
ui_page 'html/ui.html'
|
||||
|
||||
files {
|
||||
'html/ui.html',
|
||||
'html/roboto.ttf',
|
||||
'html/css/app.css',
|
||||
'html/scripts/app.js'
|
||||
'html/**',
|
||||
}
|
||||
|
||||
dependency 'es_extended'
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
{
|
||||
"lang":"EN",
|
||||
"__comment":"On DYNAMIC_FORM_DATA do not change 'componentName', 'elementID'!",
|
||||
"EN":{
|
||||
"DYNAMIC_FORM_DATA":[
|
||||
{
|
||||
"componentName":"moreGraph",
|
||||
"elementID":"#wrapper",
|
||||
"title":"",
|
||||
"closeButtonText":"Close",
|
||||
"bankTitle":"Fleeca Bank",
|
||||
"mainExitButtonText": "Log out"
|
||||
},
|
||||
{
|
||||
"elementID":"#cpincode",
|
||||
"name":"cpincode",
|
||||
"buttonText":"Approve",
|
||||
"inputPlaceholder": "Enter 4 digit...",
|
||||
"title":"PIN CODE SETUP",
|
||||
"description": "Here you can set or change the PIN code.",
|
||||
"type":"password"
|
||||
},
|
||||
{
|
||||
"elementID":"#withdraw",
|
||||
"name":"withdraw",
|
||||
"buttonText":"Approve",
|
||||
"inputPlaceholder": "Amount",
|
||||
"title":"WITHDRAW",
|
||||
"description": "Here you can withdraw your money from the bank.",
|
||||
"type":"number"
|
||||
},
|
||||
{
|
||||
"elementID":"#deposit",
|
||||
"name":"deposit",
|
||||
"buttonText":"Approval",
|
||||
"inputPlaceholder": "Amount",
|
||||
"title":"DEPOSIT",
|
||||
"description": "Here, you can deposit your money to the bank.",
|
||||
"type":"number"
|
||||
},
|
||||
{
|
||||
"elementID":"#transfer",
|
||||
"name":"transfer",
|
||||
"buttonText":"Transfer",
|
||||
"inputPlaceholder": "Amount",
|
||||
"inputPlaceholder2": "Player ID",
|
||||
"title":"TRANSFER",
|
||||
"description": "Here you can transfer your money to someone else."
|
||||
},
|
||||
{
|
||||
"componentName":"trans",
|
||||
"elementID":"#third-column",
|
||||
"title":"TRANSACTION HISTORY",
|
||||
"description": "Here you can see your transaction history.",
|
||||
"moreHistoryText": "Show more history",
|
||||
"moreGraphText": "Show more graph"
|
||||
},
|
||||
{
|
||||
"componentName":"pincodePanel",
|
||||
"elementID":"#wrapper",
|
||||
"title":"Enter PIN",
|
||||
"deleteButtonText": "<i class='fa-solid fa-ban'></i>",
|
||||
"loginButtonText": "<i class='fa-solid fa-right-to-bracket'></i>",
|
||||
"closeButtonText": "Close"
|
||||
},
|
||||
{
|
||||
"componentName":"atmComponent",
|
||||
"elementID":"#wrapper",
|
||||
"title":"Fleeca Bank",
|
||||
"closeButtonText":"Log out"
|
||||
}
|
||||
],
|
||||
"LAUNGAGE": {
|
||||
"withdraw":"WITHDRAW",
|
||||
"deposit":"DEPOSIT",
|
||||
"transfer":"TRANSFER",
|
||||
"transferReceive":"RECEIVED TRANSFER",
|
||||
"moneyFormat":"$__replaceData__",
|
||||
"graphTitle":"Your balance",
|
||||
"moreGraphTitle": "Big Graph",
|
||||
"moreHistoryTitle":"Show more history",
|
||||
"inputErrorTitle":"Data is incorrect",
|
||||
"inputErrorMessage":"It cannot be empty or a value less than 1!",
|
||||
"showPincodeErrorTitle":"PIN incorrect",
|
||||
"showPincodeErrorMessage":"The pin must have at least 4 characters!",
|
||||
"tableLang":{
|
||||
"typeLabel": "Transaction type",
|
||||
"balanceLabel":"Balance",
|
||||
"amountLabel":"Amount",
|
||||
"timeLabel":"Time",
|
||||
"searchInputPlaceholder":"Search ...",
|
||||
"_comment": "tableFullLanguage options: English,Hungarian you can find here all lang: https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/",
|
||||
"tableFullLanguage":"English"
|
||||
}
|
||||
}
|
||||
},
|
||||
"HU":{
|
||||
"DYNAMIC_FORM_DATA":[
|
||||
{
|
||||
"componentName":"moreGraph",
|
||||
"elementID":"#wrapper",
|
||||
"title":"",
|
||||
"closeButtonText":"Bezárás",
|
||||
"bankTitle":"OTP BANK FELÜLET",
|
||||
"mainExitButtonText": "Kijelentkezés"
|
||||
},
|
||||
{
|
||||
"elementID":"#cpincode",
|
||||
"name":"cpincode",
|
||||
"buttonText":"Jóváhagyás",
|
||||
"inputPlaceholder": "Írj be 4 számot...",
|
||||
"title":"PIN KÓD BEÁLLÍTÁS",
|
||||
"description": "Itt tudod beállítani vagy cserélni pinkódodat.",
|
||||
"type":"password"
|
||||
},
|
||||
{
|
||||
"elementID":"#withdraw",
|
||||
"name":"withdraw",
|
||||
"buttonText":"Jóváhagyás",
|
||||
"inputPlaceholder": "Összeg",
|
||||
"title":"PÉNZ KIVÉTEL",
|
||||
"description": "Itt tudsz pénzt kivenni a számládról.",
|
||||
"type":"number"
|
||||
},
|
||||
{
|
||||
"elementID":"#deposit",
|
||||
"name":"deposit",
|
||||
"buttonText":"Jóváhagyás",
|
||||
"inputPlaceholder": "Összeg",
|
||||
"title":"PÉNZ BETÉTEL",
|
||||
"description": "Itt tudsz pénzt be tenni a számládra.",
|
||||
"type":"number"
|
||||
},
|
||||
{
|
||||
"elementID":"#transfer",
|
||||
"name":"transfer",
|
||||
"buttonText":"Utalás",
|
||||
"inputPlaceholder": "Összeg",
|
||||
"inputPlaceholder2": "Játékos azonosító",
|
||||
"title":"UTALÁS",
|
||||
"description": "Itt tudsz pénzt utalni egy adott játékosnak."
|
||||
},
|
||||
{
|
||||
"componentName":"trans",
|
||||
"elementID":"#third-column",
|
||||
"title":"SZÁMLA TÖRTÉNET",
|
||||
"description": "Itt látod a számla történeted.",
|
||||
"moreHistoryText": "Több számla történet mutatása",
|
||||
"moreGraphText": "Nagyított diagram mutatása"
|
||||
},
|
||||
{
|
||||
"componentName":"pincodePanel",
|
||||
"elementID":"#wrapper",
|
||||
"title":"Írd be a PIN kódod",
|
||||
"deleteButtonText": "<i class='fa-solid fa-ban'></i>",
|
||||
"loginButtonText": "<i class='fa-solid fa-right-to-bracket'></i>",
|
||||
"closeButtonText": "Bezárás"
|
||||
},
|
||||
{
|
||||
"componentName":"atmComponent",
|
||||
"elementID":"#wrapper",
|
||||
"title":"OTP BANK",
|
||||
"closeButtonText":"Kijelentkezés"
|
||||
}
|
||||
|
||||
],
|
||||
"LAUNGAGE": {
|
||||
"withdraw":"KIVÉTEL",
|
||||
"deposit":"BETÉTEL",
|
||||
"transfer":"UTALÁS",
|
||||
"transferReceive":"KAPOTT UTALÁS",
|
||||
"moneyFormat":"__replaceData__ Ft",
|
||||
"graphTitle":"Egyenleged",
|
||||
"moreGraphTitle": "Nagyított grafikon",
|
||||
"moreHistoryTitle":"Teljes számla történet",
|
||||
"inputErrorTitle":"Adat hibás",
|
||||
"inputErrorMessage":"Nem lehet üres vagy érték kisebb mint 1!",
|
||||
"showPincodeErrorTitle":"PIN hibás",
|
||||
"showPincodeErrorMessage":"Legalább 4 karakternek kell lennie a pinnek!",
|
||||
"tableLang":{
|
||||
"typeLabel": "Tranzakció típus",
|
||||
"balanceLabel":"Egyenleged",
|
||||
"amountLabel":"Összeg",
|
||||
"timeLabel":"Idő",
|
||||
"searchInputPlaceholder":"Kereső ...",
|
||||
"_comment": "tableFullLanguage options: English,Hungarian you can find here all lang: https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/",
|
||||
"tableFullLanguage":"Hungarian"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,126 +1,760 @@
|
||||
@font-face {
|
||||
font-family: roboto;
|
||||
src: url('../roboto.ttf');
|
||||
:root{
|
||||
--primary-color: #2e69d5;
|
||||
--secondary-color: #378cbf;
|
||||
--text-color:#ffff;
|
||||
--background-light:#232934;
|
||||
--background-light-2:#202020;
|
||||
--background-dark:#0a0e19;
|
||||
--accent-red: #378cbf;
|
||||
--accent-green:#45b157;
|
||||
--accent-gray: #474e57;
|
||||
--accent-gray-2:#545457;
|
||||
|
||||
--columnsBackground:var(--background-dark);
|
||||
--allTitleColor:var(--text-color);
|
||||
--yourMoneyPriceTextColor:var(--accent-green);
|
||||
--bankCardBackgroundColor: linear-gradient(110deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
--buttonBackgroundColor:var(--background-light);
|
||||
--inputBackgroundColor:var(--background-light);
|
||||
--inputTextColor:var(--text-color);
|
||||
--inputPlaceholderColor:var(--accent-gray-2);
|
||||
--checkmarkColor:var(--text-color);
|
||||
--acceptExitButtonColorText:var(--text-color);
|
||||
--exitButtonHoverBackgroundColor:var(--primary-color);
|
||||
--acceptButtonHoverBackgroundColor:var(--secondary-color);
|
||||
--bankCardTextColor:var(--text-color);
|
||||
--bankCardNumberColor:var(--text-color);
|
||||
--moneyContainerBackgroundColor:var(--background-light);
|
||||
--moneyAndTransactionContainer:var(--background-light);
|
||||
--transactionContainerBackgroundColor:var(--background-light);
|
||||
--moneyAndTransactionallTitleColorText:var(--text-color);
|
||||
--transactionDataTextColor:var(--text-color);
|
||||
--cardSubtitleTextColor:var(--accent-gray);
|
||||
--depositColorText:var(--accent-green);
|
||||
--withDrawColorText:var(--primary-color);
|
||||
--moreHistoryButtonHoverColor: var(--secondary-color);
|
||||
--moreGraphButtonHoverColor:var(--secondary-color);
|
||||
--hrRowColor:var(--accent-gray);
|
||||
--loadingCircle:var(--secondary-color);
|
||||
--tableAllTextColor:var(--text-color);
|
||||
--tableBackgroundColorPaginationButton: var(--secondary-color);
|
||||
--tableBackgroundColorPaginationButtonHover:var(--secondary-color);
|
||||
--tableRowHoverBackgroundColor:var(--secondary-color);
|
||||
--tableScrollBarBackgroundColor:var(--background-light);
|
||||
--tableScrollBarBackgroundColorHover:var(--secondary-color);
|
||||
--tableSelectBoxBackgroundColor:var(--background-light);
|
||||
--tableSearchInputBackgroundColor:var(--background-light);
|
||||
--tableScrollBarBackgroundColor2:var(--background-light);
|
||||
--disableButtonBackgroundColor:var(--background-light-2);
|
||||
--graphLineColor:var(--secondary-color);
|
||||
--graphLineBackgroundColor:var(--secondary-color);
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;500;800&display=swap');
|
||||
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#wrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: roboto;
|
||||
}
|
||||
|
||||
#cursor {
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
height: 93.24vmin;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
user-select: none;
|
||||
min-width: 42vmin;
|
||||
font-size: 2vmin;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
background: #232934;
|
||||
height: 700px;
|
||||
width: 1000px;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
margin: -250px 0 0 -300px;
|
||||
height: 73vmin;
|
||||
width: 139.41vmin;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#header {
|
||||
color: white;
|
||||
padding:20px;
|
||||
background: #353e4f;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 150vmin;
|
||||
flex-wrap: wrap;
|
||||
margin:2vmin;
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap:3vmin;
|
||||
flex-wrap: wrap;
|
||||
height: 68.15vmin;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
width: 50%;
|
||||
/* FIRST COLUMN START */
|
||||
|
||||
#menu #first-column {
|
||||
width: 36vmin;
|
||||
background: var(--columnsBackground);
|
||||
padding: 1.85vmin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.79vmin;
|
||||
border-radius: 1.38vmin;
|
||||
flex: 1 1 27.7vmin;
|
||||
height: 72.56vmin;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
width: 50%;
|
||||
margin: 20px;
|
||||
color: white;
|
||||
border: solid #353e4f 2px;
|
||||
border-radius: 10px;
|
||||
height: 205px;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
#menu #first-column hr {
|
||||
border: 1px solid var(--hrRowColor);
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.left-side::-webkit-scrollbar {
|
||||
display: none;
|
||||
#bankcard {
|
||||
height: 16.6vmin;
|
||||
width: 25vmin;
|
||||
margin: 0 auto;
|
||||
background: var(--bankCardBackgroundColor);
|
||||
border-radius: 1.38vmin;
|
||||
padding: 1.85vmin 1.6vmin 0px 1.85vmin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.webgl {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
outline: none;
|
||||
#bankcard .content p{
|
||||
margin: 0;
|
||||
color:var(--bankCardTextColor);
|
||||
font-size: 0.92vmin;
|
||||
}
|
||||
|
||||
|
||||
.left-side .transaction-header {
|
||||
#bankcard .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
background: #353e4f;
|
||||
}
|
||||
|
||||
#bankcard .title span{
|
||||
color:var(--bankCardTextColor);
|
||||
}
|
||||
|
||||
.group {
|
||||
margin: 20px;
|
||||
color: white;
|
||||
#bankcard .title svg{
|
||||
width: 4.16vmin;
|
||||
height: 4.16vmin;
|
||||
}
|
||||
|
||||
#bankcard .content {
|
||||
position: absolute;
|
||||
bottom: 1.66vmin;
|
||||
}
|
||||
|
||||
#bankcard .content .card-data{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#bankcard .content .cardnumber {
|
||||
color: var(--bankCardNumberColor);
|
||||
font-size: 1.85vmin;
|
||||
letter-spacing: 0.37vmin;
|
||||
margin-bottom: 0.46vmin;
|
||||
}
|
||||
|
||||
#bankcard .content .card-data:nth-child(2){
|
||||
margin-right: 0.27vmin;
|
||||
}
|
||||
|
||||
#bankcard .content .card-data p {
|
||||
font-size: 1.48vmin;
|
||||
}
|
||||
|
||||
#your-money-panel #money-containers{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: solid #353e4f 2px;
|
||||
border-radius: 10px;
|
||||
gap: 0.92vmin;
|
||||
}
|
||||
|
||||
.group > button {
|
||||
color: white;
|
||||
width: 50%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #353e4f;
|
||||
border-radius: 4px;
|
||||
background-color: #353e4f;
|
||||
.exit-button , .accept-button , #pincode-container .button-groups button {
|
||||
background-color:var(--buttonBackgroundColor);
|
||||
padding:1.85vmin 1.85vmin;
|
||||
/*width: 35vmin;*/
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border:none;
|
||||
color:var(--acceptExitButtonColorText);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: bold;
|
||||
border-radius: 0.27vmin;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
.exit-button:hover , #modal-container #title-container button:hover{
|
||||
background-color: var(--exitButtonHoverBackgroundColor);
|
||||
box-shadow: -1vmin 1vmin 1vmin -1vmin var(--exitButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
.accept-button:hover{
|
||||
background-color: var(--acceptButtonHoverBackgroundColor);
|
||||
box-shadow: -1vmin 1vmin 1vmin -1vmin var(--acceptButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
/* FIRST COLUMN END */
|
||||
|
||||
|
||||
/* SECOND COLUMN START*/
|
||||
|
||||
#menu #second-column{
|
||||
width: 35.18vmin;
|
||||
border-radius: 1.38vmin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 0.92vmin;
|
||||
flex: 1 1 27.77vmin;
|
||||
padding-right: 1.85vmin;
|
||||
padding-left: 1.85vmin;
|
||||
}
|
||||
|
||||
#withdraw,#deposit,#transfer{
|
||||
background: var(--columnsBackground);
|
||||
padding: 1.85vmin;
|
||||
border-radius: 1.38vmin;
|
||||
width: 35.18vmin;
|
||||
}
|
||||
|
||||
#menu #second-column #withdraw {
|
||||
height: 18.48vmin;
|
||||
}
|
||||
|
||||
#menu #second-column #deposit {
|
||||
height: 18.48vmin;
|
||||
}
|
||||
|
||||
#menu #second-column #transfer {
|
||||
height: 26.63vmin;
|
||||
}
|
||||
|
||||
/* SECOND COLUMN END*/
|
||||
|
||||
/* THIRD COLUMN START*/
|
||||
|
||||
#menu #third-column{
|
||||
width: 32.77vmin;
|
||||
background: var(--columnsBackground);
|
||||
border-radius: 1.38vmin;
|
||||
padding:1.85vmin;
|
||||
flex: 1 1 37.03vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #graph-container{
|
||||
width: calc(100% - 0.46vmin);
|
||||
height: 38vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0px 1.9vmin;
|
||||
margin-top: 1.48vmin;
|
||||
gap:0.92vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container button{
|
||||
padding: 0.92vmin;
|
||||
width: 20.92vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container #more_history:hover{
|
||||
background-color: var(--moreHistoryButtonHoverColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--moreHistoryButtonHoverColor);
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container #more_graph:hover{
|
||||
background-color: var(--moreGraphButtonHoverColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--moreGraphButtonHoverColor);
|
||||
}
|
||||
|
||||
#menu #third-column #transactions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.92vmin;
|
||||
padding: 1.85vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #transactions-container .transaction-container{
|
||||
/* width: 40.37vmin; */
|
||||
width: 100%;
|
||||
background-color: var(--transactionContainerBackgroundColor);
|
||||
padding: 0.92vmin 0.92vmin 0.92vmin 1.85vmin;
|
||||
font-size: 1.8vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #transactions-container .transaction-container .transaction{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #transactions-container .transaction-container .transaction span {
|
||||
color: var(--transactionDataTextColor);
|
||||
background: var(--columnsBackground);
|
||||
border-radius: 0.27vmin;
|
||||
padding: 0.46vmin;
|
||||
font-size: 1.20vmin;
|
||||
}
|
||||
|
||||
/* THIRD COLUMN END*/
|
||||
|
||||
|
||||
/* GENERAL START*/
|
||||
|
||||
.money-container,.transaction-container {
|
||||
background-color: var(--moneyAndTransactionContainer);
|
||||
padding: 0.92vmin 0.92vmin 0.92vmin 1.85vmin;
|
||||
border-radius: 0.27vmin;
|
||||
}
|
||||
|
||||
.money-container{
|
||||
background-color: var(--moneyContainerBackgroundColor);
|
||||
}
|
||||
|
||||
|
||||
.group > input {
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
background-color: #353e4f;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
.money-container h4 {
|
||||
margin-bottom: 0.5vmin;
|
||||
}
|
||||
|
||||
.group > input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
.money-container h4 , .transaction h4{
|
||||
color:var(--moneyAndTransactionallTitleColorText);
|
||||
text-shadow: 0.09vmin 0.09vmin 0.18vmin black;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
.money-container span , .transaction-container span{
|
||||
color:var(--yourMoneyPriceTextColor);
|
||||
text-shadow: 0.09vmin 0.09vmin 0.18vmin black;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
.accept-button svg{
|
||||
height: 1.38vmin;
|
||||
fill:var(--checkmarkColor);
|
||||
}
|
||||
|
||||
.green-text{
|
||||
color:var(--depositColorText) !important;
|
||||
}
|
||||
|
||||
.red-text{
|
||||
color:var(--withDrawColorText) !important;
|
||||
}
|
||||
|
||||
|
||||
.disable-button{
|
||||
background-color: var(--disableButtonBackgroundColor) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ecedef;
|
||||
color: var(--allTitleColor);
|
||||
font-size: 2.31vmin;
|
||||
text-shadow: 0.09vmin 0.09vmin 0.92vmin rgb(255 255 255 / 47%);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p{
|
||||
color: var(--cardSubtitleTextColor);
|
||||
margin-bottom: 0.92vmin;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 1.38vmin;
|
||||
background-color: var(--inputBackgroundColor);
|
||||
padding: 1.85vmin 1.85vmin;
|
||||
outline: none;
|
||||
border:none;
|
||||
color:var(--inputTextColor);
|
||||
margin-bottom:1.85vmin;
|
||||
border-radius: 0.46vmin;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--inputPlaceholderColor);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.transaction-listing {
|
||||
/* GENERAL END*/
|
||||
|
||||
#modal-container {
|
||||
background-color: var(--columnsBackground);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
border-radius: 1.38vmin;
|
||||
}
|
||||
|
||||
#more-modal-container {
|
||||
height: 93%;
|
||||
padding: 0 6vmin;
|
||||
}
|
||||
|
||||
#modal-container h3{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 1vmin;
|
||||
}
|
||||
|
||||
#modal-container #title-container button {
|
||||
background-color: var(--buttonBackgroundColor);
|
||||
padding: 1.85vmin 1.85vmin;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: bold;
|
||||
border-radius: 0.27vmin 0.27vmin 0.27vmin 1.27vmin;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 1.5vmin;
|
||||
border: none;
|
||||
color: var(--inputTextColor);
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 0vmin;
|
||||
top: 0vmin;
|
||||
width: 14vmin;
|
||||
}
|
||||
|
||||
/*DATA TABLES DESIGN */
|
||||
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-top: .755em;
|
||||
color:var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
#example_wrapper {
|
||||
margin-top: 4vmin;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
padding: 1vmin;
|
||||
font-family: 'Raleway', sans-serif !important;
|
||||
}
|
||||
|
||||
#example_filter input{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-bottom: 5px solid rgba(255,255,255, 0.5);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
gap: 1vmin;
|
||||
border: none;
|
||||
padding:2vmin;
|
||||
background-color: var(--tableSearchInputBackgroundColor);
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled ,table.dataTable thead>tr>td.sorting_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 26px;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
table.dataTable tbody tr td {
|
||||
color: var(--tableAllTextColor);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.greenTableText{
|
||||
color: var(--depositColorText) !important;
|
||||
}
|
||||
|
||||
.redTableText{
|
||||
color: var(--withDrawColorText) !important;
|
||||
}
|
||||
|
||||
table.dataTable.no-footer {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
|
||||
cursor: default;
|
||||
color:var(--tableAllTextColor) !important;
|
||||
border: 1px solid #828282;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||
background: none;
|
||||
color:var(--tableAllTextColor) !important;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #828282;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
||||
color: white !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--tableBackgroundColorPaginationButton) !important;
|
||||
color:var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
|
||||
.dataTables_wrapper .dataTables_length select {
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
background-color: var(--tableSelectBoxBackgroundColor) !important;
|
||||
padding: 4px;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
padding: 1vmin;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
table.dataTable tbody tr{ height: 50px !important; }
|
||||
|
||||
table.dataTable tbody tr:hover {
|
||||
background-color:var(--tableRowHoverBackgroundColor) !important;
|
||||
}
|
||||
|
||||
#example_wrapper > div.dataTables_scroll > div.dataTables_scrollHead > div > table > thead > tr > th.sorting_disabled{
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
/*DATA TABLE DESIGN END*/
|
||||
|
||||
/*SCROLLBAR DESIGN*/
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--tableScrollBarBackgroundColor2);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--tableScrollBarBackgroundColor);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--tableScrollBarBackgroundColorHover);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* LOADING CIRCLE*/
|
||||
|
||||
:root {
|
||||
--rotation-animation-speed: 2s;
|
||||
--rotation-animation-easing: linear;
|
||||
--stroke-animation-speed: 1.5s;
|
||||
--stroke-animation-easing: ease-in-out;
|
||||
--stroke-width: 3px;
|
||||
--stroke-start-dasharray: 1, 200;
|
||||
--stroke-end-dasharray: 89, 200;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 0px auto;
|
||||
width: 23.14vmin;
|
||||
height: 23.14vmin;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.circular-loader {
|
||||
animation: rotate var(--rotation-animation-speed) var(--rotation-animation-easing) infinite;
|
||||
}
|
||||
|
||||
.loader-path {
|
||||
fill: none;
|
||||
stroke-width: var(--stroke-width);
|
||||
animation: animate-stroke var(--stroke-animation-speed) var(--stroke-animation-easing) infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-stroke {
|
||||
0% {
|
||||
stroke-dasharray: var(--stroke-start-dasharray);
|
||||
stroke-dashoffset: 0;
|
||||
stroke: var(--columnsBackground);
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: var(--stroke-end-dasharray);
|
||||
stroke-dashoffset: -35;
|
||||
stroke: var(--loadingCircle);
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: var(--stroke-end-dasharray);
|
||||
stroke-dashoffset: -124;
|
||||
stroke: var(--loadingCircle);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#pincode-container{
|
||||
background-color: var(--columnsBackground);
|
||||
height: 80%;
|
||||
width: 40vmin;
|
||||
color: white;
|
||||
display: flex;
|
||||
border-radius: 3vmin;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5vmin;
|
||||
}
|
||||
|
||||
#pincode-container h4{
|
||||
text-align: center;
|
||||
margin-top: 2vmin;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-input {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 15vmin;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-input span{
|
||||
display: block;
|
||||
width: 3vmin;
|
||||
height: 3vmin;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--secondary-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers {
|
||||
display: grid;
|
||||
grid-template-columns: 10vmin 10vmin 10vmin;
|
||||
grid-template-rows: 10vmin 10vmin 10vmin;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div {
|
||||
background-color: var(--background-light);
|
||||
padding: 2vmin 2vmin;
|
||||
border-radius: 50%;
|
||||
width: 3vmin;
|
||||
height: 3vmin;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div:hover{
|
||||
background-color: var(--secondary-color);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--secondary-color);
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div:nth-child(11):hover{
|
||||
background-color: var(--exitButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--exitButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div:nth-child(12):hover{
|
||||
background-color: var(--acceptButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--acceptButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
#pincode-container .button-groups{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2vmin;
|
||||
margin-top: 2vmin;
|
||||
}
|
||||
|
||||
#pincode-container .button-groups button{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#pincode-container .button-groups button:hover{
|
||||
background-color: var(--exitButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--exitButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
#pincode-container .button-groups .login:hover{
|
||||
background-color: var(--acceptButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.20vmin var(--acceptButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
.circleBackground{
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
|
||||
/* ATM DESIGNS*/
|
||||
|
||||
#atm-container{
|
||||
display: grid;
|
||||
grid-template-columns: 60% 60%;
|
||||
gap:3vmin;
|
||||
height: 58vh;
|
||||
}
|
||||
|
||||
.firstGridColumn, .secondGridColumn{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.85vmin;
|
||||
}
|
||||
|
||||
.firstGridColumn{
|
||||
gap: 1.79vmin;
|
||||
border-radius: 1.38vmin;
|
||||
background: var(--columnsBackground);
|
||||
}
|
||||
|
||||
.secondGridColumn{
|
||||
gap: 3vmin;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secondGridColumn div{
|
||||
background: var(--columnsBackground);
|
||||
padding: 3vmin;
|
||||
border-radius: 1.38vmin;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M474.045,173.813c-4.201,1.371-6.494,5.888-5.123,10.088c7.571,23.199,11.411,47.457,11.411,72.1
|
||||
c0,62.014-24.149,120.315-68,164.166s-102.153,68-164.167,68s-120.316-24.149-164.167-68S16,318.014,16,256
|
||||
S40.149,135.684,84,91.833s102.153-68,164.167-68c32.889,0,64.668,6.734,94.455,20.017c28.781,12.834,54.287,31.108,75.81,54.315
|
||||
c3.004,3.239,8.066,3.431,11.306,0.425c3.24-3.004,3.43-8.065,0.426-11.306c-23-24.799-50.26-44.328-81.024-58.047
|
||||
C317.287,15.035,283.316,7.833,248.167,7.833c-66.288,0-128.608,25.813-175.48,72.687C25.814,127.392,0,189.712,0,256
|
||||
c0,66.287,25.814,128.607,72.687,175.479c46.872,46.873,109.192,72.687,175.48,72.687s128.608-25.813,175.48-72.687
|
||||
c46.873-46.872,72.687-109.192,72.687-175.479c0-26.332-4.105-52.26-12.201-77.064
|
||||
C482.762,174.736,478.245,172.445,474.045,173.813z"/>
|
||||
<path d="M504.969,83.262c-4.532-4.538-10.563-7.037-16.98-7.037s-12.448,2.499-16.978,7.034l-7.161,7.161
|
||||
c-3.124,3.124-3.124,8.189,0,11.313c3.124,3.123,8.19,3.124,11.314-0.001l7.164-7.164c1.51-1.512,3.52-2.344,5.66-2.344
|
||||
s4.15,0.832,5.664,2.348c1.514,1.514,2.348,3.524,2.348,5.663s-0.834,4.149-2.348,5.663L217.802,381.75
|
||||
c-1.51,1.512-3.52,2.344-5.66,2.344s-4.15-0.832-5.664-2.348L98.747,274.015c-1.514-1.514-2.348-3.524-2.348-5.663
|
||||
c0-2.138,0.834-4.149,2.351-5.667c1.51-1.512,3.52-2.344,5.66-2.344s4.15,0.832,5.664,2.348l96.411,96.411
|
||||
c1.5,1.5,3.535,2.343,5.657,2.343s4.157-0.843,5.657-2.343l234.849-234.849c3.125-3.125,3.125-8.189,0-11.314
|
||||
c-3.124-3.123-8.189-3.123-11.313,0L212.142,342.129l-90.75-90.751c-4.533-4.538-10.563-7.037-16.98-7.037
|
||||
s-12.448,2.499-16.978,7.034c-4.536,4.536-7.034,10.565-7.034,16.977c0,6.412,2.498,12.441,7.034,16.978l107.728,107.728
|
||||
c4.532,4.538,10.563,7.037,16.98,7.037c6.417,0,12.448-2.499,16.977-7.033l275.847-275.848c4.536-4.536,7.034-10.565,7.034-16.978
|
||||
S509.502,87.794,504.969,83.262z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
File diff suppressed because it is too large
Load Diff
@@ -1,46 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.css"/>
|
||||
<link rel="stylesheet" href="./libs/simple-notify.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="css/app.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
ESX banking
|
||||
</div>
|
||||
<div id="menu">
|
||||
<!-- THIS NEEDS TO BE ON THE LEFT SIDE -->
|
||||
<div class="loader"></div>
|
||||
<div id="wrapper"></div>
|
||||
|
||||
<div class="left-side">
|
||||
<div class="transaction-header">
|
||||
<div>
|
||||
Amount
|
||||
</div>
|
||||
<div>
|
||||
Type
|
||||
</div>
|
||||
</div>
|
||||
<div id="transaction-list"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- THIS NEEDS TO BE ON THE RIGHT SIDE -->
|
||||
<div class="right-side">
|
||||
<div class="group">
|
||||
<input type="number" id="deposit_amount" tabindex="1" onClick="this.select();"/>
|
||||
<button id="deposit_btn">Deposit</button>
|
||||
</div>
|
||||
<div class="group">
|
||||
<input type="number" id="withdraw_amount" tabindex="2" onClick="this.select();"/>
|
||||
<button id="withdraw_btn">Withdraw</button>
|
||||
</div>
|
||||
<div class="group" id="player-details"></div>
|
||||
<div class="group" id="bank-details"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/bc14c07181.js" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="./libs/simple-notify.min.js"></script>
|
||||
<script src="scripts/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
Locales['de'] = {
|
||||
['invalid_amount'] = 'Das ist ein ungültiger Geldbetrag',
|
||||
['deposit_money'] = 'Sie haben $%s eingezahlt',
|
||||
['withdraw_money'] = 'Sie haben $%s ausgezahlt',
|
||||
['press_e_banking'] = 'Drücke [E] um auf die Bank zuzugreifen',
|
||||
['banking_blip'] = 'Bank',
|
||||
}
|
||||
@@ -2,6 +2,19 @@ Locales['en'] = {
|
||||
['invalid_amount'] = 'That\'s an invalid amount of money',
|
||||
['deposit_money'] = 'you have deposited $%s',
|
||||
['withdraw_money'] = 'you have withdrawn $%s',
|
||||
['pincode_money'] = 'you have new pincode %s',
|
||||
['transfer_money'] = 'you success transfer money $%s ID: %s',
|
||||
['receive_transfer'] = 'you receive transfer money $%s ID: %s',
|
||||
['press_e_banking'] = 'press [E] to access the bank',
|
||||
['access_bank'] = 'Access the bank',
|
||||
['banking_blip'] = 'Bank',
|
||||
}
|
||||
['cant_do_it'] = "Can't do it!",
|
||||
['not_enough_money'] = "Not enough money! You need %s money!",
|
||||
['pincode_not_found'] = "Invalid PIN code",
|
||||
['pincode_found'] = "Valid PIN code...",
|
||||
['bank_name'] = "Fleeca Bank",
|
||||
['your_money_title'] = "Balance",
|
||||
['your_money_desc'] = "Here you can see your current balance and cash.",
|
||||
['your_money_cash'] = "Your cash",
|
||||
['your_money_bank'] = "Your bank balance"
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
Locales['fr'] = {
|
||||
['invalid_amount'] = 'Le montant est invalide',
|
||||
['deposit_money'] = 'vous avez déposé $%s',
|
||||
['withdraw_money'] = 'vous avez retiré $%s',
|
||||
['press_e_banking'] = 'appuyez sur [E] pour accéder à la banque',
|
||||
['banking_blip'] = 'Banque',
|
||||
}
|
||||
@@ -1,7 +1,20 @@
|
||||
Locales['hu'] = {
|
||||
['invalid_amount'] = 'Érvénytelen pénz mennyiség',
|
||||
['deposit_money'] = 'Befizettél %s$-t',
|
||||
['withdraw_money'] = 'Kivettél %s$-t',
|
||||
['press_e_banking'] = 'Nyomd meg a [E] gombot a bank eléréséhez',
|
||||
['banking_blip'] = 'Bank',
|
||||
}
|
||||
['invalid_amount'] = 'Érvénytelen pénz mennyiség',
|
||||
['deposit_money'] = 'Befizettél %s$-t',
|
||||
['withdraw_money'] = 'Kivettél %s$-t',
|
||||
['pincode_money'] = 'Az új PIN kódod: %s',
|
||||
['transfer_money'] = 'Sikeres utalás! Összeg: $%s ID: %s',
|
||||
['receive_transfer'] = 'Utalás érkezett! Összeg: $%s ID: %s',
|
||||
['press_e_banking'] = 'Nyomd meg a [E] gombot a bank eléréséhez',
|
||||
['access_bank'] = 'Bank megnyitása',
|
||||
['banking_blip'] = 'Bank',
|
||||
['cant_do_it'] = "Ezt nem lehet!",
|
||||
['not_enough_money'] = "Nincs elég pénzed, még szükséged lesz ennyire: %s",
|
||||
['pincode_not_found'] = "Érvénytelen PIN kód",
|
||||
['pincode_found'] = "Érvényes PIN kód...",
|
||||
['bank_name'] = "Fleeca Bank",
|
||||
['your_money_title'] = "Egyenleg",
|
||||
['your_money_desc'] = "Itt láthatod a jelenlegi egyenleged és készpénzed.",
|
||||
['your_money_cash'] = "Készpénz",
|
||||
['your_money_bank'] = "Banki egyenleged"
|
||||
}
|
||||
@@ -1,61 +1,155 @@
|
||||
RegisterServerEvent('esx_banking:deposit')
|
||||
AddEventHandler('esx_banking:deposit', function(amount)
|
||||
local source = source
|
||||
local xPlayer = ESX.GetPlayerFromId(source)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
amount = tonumber(amount)
|
||||
-- get keys utils
|
||||
local function get_key(t)
|
||||
local key
|
||||
for k, _ in pairs(t) do
|
||||
key = k
|
||||
end
|
||||
return key
|
||||
end
|
||||
|
||||
if not tonumber(amount) then return end
|
||||
amount = ESX.Math.Round(amount)
|
||||
|
||||
if amount == nil or amount <= 0 or amount > xPlayer.getMoney() then
|
||||
xPlayer.showNotification(_U('invalid_amount'))
|
||||
else
|
||||
xPlayer.removeMoney(amount)
|
||||
xPlayer.addAccountMoney('bank', amount)
|
||||
xPlayer.showNotification(_U('deposit_money', amount))
|
||||
MySQL.update('INSERT INTO banking (identifier, type, amount, time) VALUES (@identifier, @type, @amount, @time)', {
|
||||
['@identifier'] = identifier,
|
||||
['@type'] = "deposit",
|
||||
['@amount'] = amount,
|
||||
['@time'] = os.date('%Y-%m-%d')
|
||||
})
|
||||
end
|
||||
-- Resource starting
|
||||
AddEventHandler('onResourceStart', function(resourceName)
|
||||
if (GetCurrentResourceName() ~= resourceName) then
|
||||
return
|
||||
end
|
||||
local twoMonthMs = (os.time() - 5259487) * 1000
|
||||
MySQL.Sync.fetchScalar('DELETE FROM banking WHERE time < ? ', {twoMonthMs})
|
||||
end)
|
||||
|
||||
ESX.RegisterServerCallback("esx_banking:gethistory", function(source, cb)
|
||||
local xPlayer = ESX.GetPlayerFromId(source)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
local history = MySQL.Sync.prepare('SELECT * FROM banking WHERE identifier = ?', {identifier})
|
||||
cb(history)
|
||||
-- event
|
||||
RegisterServerEvent('esx_banking:doingType')
|
||||
AddEventHandler('esx_banking:doingType', function(typeData)
|
||||
if source == nil then
|
||||
return
|
||||
end
|
||||
if (typeData == nil) then
|
||||
return
|
||||
end
|
||||
|
||||
local source = source
|
||||
local xPlayer = ESX.GetPlayerFromId(source)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
local money = xPlayer.getAccount('money').money
|
||||
local bankMoney = xPlayer.getAccount('bank').money
|
||||
|
||||
local key = get_key(typeData)
|
||||
if typeData.deposit then
|
||||
amount = tonumber(typeData.deposit)
|
||||
elseif typeData.withdraw then
|
||||
amount = tonumber(typeData.withdraw)
|
||||
elseif typeData.transfer and typeData.transfer.moneyAmount then
|
||||
amount = tonumber(typeData.transfer.moneyAmount)
|
||||
elseif typeData.pincode then
|
||||
amount = tonumber(typeData.pincode)
|
||||
end
|
||||
|
||||
if not tonumber(amount) then
|
||||
return
|
||||
end
|
||||
amount = ESX.Math.Round(amount)
|
||||
|
||||
if amount == nil or amount <= 0 then
|
||||
TriggerClientEvent("esx:showNotification", source, _U('invalid_amount'), "error")
|
||||
else
|
||||
if typeData.deposit and amount <= money then
|
||||
-- deposit
|
||||
BANK.Deposit(amount, xPlayer)
|
||||
elseif typeData.withdraw and bankMoney ~= nil and amount <= bankMoney then
|
||||
-- withdraw
|
||||
BANK.Withdraw(amount, xPlayer)
|
||||
elseif typeData.pincode then
|
||||
-- pincode
|
||||
BANK.Pincode(amount, identifier)
|
||||
elseif typeData.transfer then
|
||||
-- transfer
|
||||
if tonumber(typeData.transfer.playerId) > 0 and bankMoney >= amount then
|
||||
local xTarget = ESX.GetPlayerFromId(tonumber(typeData.transfer.playerId))
|
||||
if not BANK.Transfer(xTarget, xPlayer, amount, key) then
|
||||
return
|
||||
end
|
||||
end
|
||||
else
|
||||
TriggerClientEvent("esx:showNotification", source, _U('not_enough_money', amount), "error")
|
||||
return
|
||||
end
|
||||
|
||||
money = xPlayer.getAccount('money').money
|
||||
bankMoney = xPlayer.getAccount('bank').money
|
||||
if typeData.transfer then
|
||||
TriggerClientEvent("esx:showNotification", source,
|
||||
_U(string.format('%s_money', key), amount, typeData.transfer.playerId), "success")
|
||||
else
|
||||
TriggerClientEvent("esx:showNotification", source, _U(string.format('%s_money', key), amount), "success")
|
||||
end
|
||||
if not typeData.pincode then
|
||||
BANK.LogTransaction(source, string.upper(key), amount, bankMoney)
|
||||
end
|
||||
|
||||
TriggerClientEvent("esx_banking:updateMoneyInUI", source, key, bankMoney, money)
|
||||
end
|
||||
end)
|
||||
|
||||
-- register callbacks
|
||||
ESX.RegisterServerCallback("esx_banking:getPlayerData", function(source, cb)
|
||||
local xPlayer = ESX.GetPlayerFromId(source)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
local weekAgo = (os.time() - 604800) * 1000
|
||||
local transactionHistory = MySQL.Sync.fetchAll(
|
||||
'SELECT * FROM banking WHERE identifier = ? AND time > ? ORDER BY time DESC LIMIT 10', {identifier, weekAgo})
|
||||
local playerData = {
|
||||
playerName = xPlayer.getName(),
|
||||
money = xPlayer.getAccount('money').money,
|
||||
bankMoney = xPlayer.getAccount('bank').money,
|
||||
transactionHistory = transactionHistory
|
||||
}
|
||||
|
||||
|
||||
|
||||
RegisterServerEvent('esx_banking:withdraw')
|
||||
AddEventHandler('esx_banking:withdraw', function(amount)
|
||||
local source = source
|
||||
local xPlayer = ESX.GetPlayerFromId(source)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
local time = os.date('%Y-%m-%d')
|
||||
amount = tonumber(amount)
|
||||
local accountMoney = xPlayer.getAccount('bank').money
|
||||
|
||||
if not tonumber(amount) then return end
|
||||
amount = ESX.Math.Round(amount)
|
||||
|
||||
if amount == nil or amount <= 0 or amount > accountMoney then
|
||||
xPlayer.showNotification(_U('invalid_amount'))
|
||||
else
|
||||
xPlayer.removeAccountMoney('bank', amount)
|
||||
xPlayer.addMoney(amount)
|
||||
xPlayer.showNotification(_U('withdraw_money', amount))
|
||||
MySQL.update('INSERT INTO banking (identifier, type, amount, time) VALUES (@identifier, @type, @amount, @time)', {
|
||||
['@identifier'] = identifier,
|
||||
['@type'] = "withdraw",
|
||||
['@amount'] = amount,
|
||||
['@time'] = os.date('%Y-%m-%d')
|
||||
})
|
||||
end
|
||||
cb(playerData)
|
||||
end)
|
||||
|
||||
ESX.RegisterServerCallback("esx_banking:checkPincode", function(source, cb, inputPincode)
|
||||
local xPlayer = ESX.GetPlayerFromId(source)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
local pincode = MySQL.Sync.fetchScalar('SELECT COUNT(1) AS pincode FROM users WHERE identifier = ? AND pincode = ?',
|
||||
{identifier, inputPincode})
|
||||
cb(pincode > 0)
|
||||
end)
|
||||
|
||||
-- bank functions
|
||||
BANK = {
|
||||
Withdraw = function(amount, xPlayer)
|
||||
xPlayer.addAccountMoney('money', amount)
|
||||
xPlayer.removeAccountMoney('bank', amount)
|
||||
end,
|
||||
Deposit = function(amount, xPlayer)
|
||||
xPlayer.removeAccountMoney('money', amount)
|
||||
xPlayer.addAccountMoney('bank', amount)
|
||||
end,
|
||||
Transfer = function(xTarget, xPlayer, amount, key)
|
||||
if xTarget == nil or xPlayer.source == xTarget.source then
|
||||
TriggerClientEvent("esx:showNotification", source, _U("cant_do_it"), "error")
|
||||
return false
|
||||
end
|
||||
|
||||
xPlayer.removeAccountMoney('bank', amount)
|
||||
xTarget.addAccountMoney('bank', amount)
|
||||
bankMoney = xTarget.getAccount('bank').money
|
||||
BANK.LogTransaction(xTarget.source, "TRANSFER_RECEIVE", amount, bankMoney)
|
||||
TriggerClientEvent("esx:showNotification", xTarget.source, _U('receive_transfer', amount, xPlayer.source),
|
||||
"success")
|
||||
|
||||
return true
|
||||
end,
|
||||
Pincode = function(amount, identifier)
|
||||
MySQL.update('UPDATE users SET pincode = ? WHERE identifier = ? ', {amount, identifier})
|
||||
end,
|
||||
LogTransaction = function(playerId, logType, amount, bankMoney)
|
||||
if source == nil then
|
||||
return
|
||||
end
|
||||
local xPlayer = ESX.GetPlayerFromId(playerId)
|
||||
local identifier = xPlayer.getIdentifier()
|
||||
|
||||
MySQL.insert('INSERT INTO banking (identifier, type, amount, time, balance) VALUES (?, ?, ?, ?, ?)',
|
||||
{identifier, logType, amount, os.time() * 1000, bankMoney})
|
||||
end
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user