├── config.lua ├── esx_identity.sql ├── locales ├── cs.lua ├── en.lua ├── fr.lua └── de.lua ├── fxmanifest.lua ├── html ├── script.js ├── index.html └── style.css ├── README.md ├── client └── main.lua └── server └── main.lua /config.lua: -------------------------------------------------------------------------------- 1 | Config = {} 2 | 3 | Config.Locale = 'en' -------------------------------------------------------------------------------- /esx_identity.sql: -------------------------------------------------------------------------------- 1 | USE `essentialmode`; 2 | 3 | ALTER TABLE `users` 4 | ADD COLUMN `firstname` VARCHAR(50) NULL DEFAULT '', 5 | ADD COLUMN `lastname` VARCHAR(50) NULL DEFAULT '', 6 | ADD COLUMN `dateofbirth` VARCHAR(25) NULL DEFAULT '', 7 | ADD COLUMN `sex` VARCHAR(10) NULL DEFAULT '', 8 | ADD COLUMN `height` VARCHAR(5) NULL DEFAULT '' 9 | ; -------------------------------------------------------------------------------- /locales/cs.lua: -------------------------------------------------------------------------------- 1 | Locales['cs'] = { 2 | ['show_registration'] = 'zobrazit registracni menu', 3 | ['show_active_character'] = 'zobrazit aktivni postavy', 4 | ['delete_character'] = 'smazat svou stavajici postavu a vytvorit novou', 5 | ['deleted_character'] = 'vase postava byla smazana.', 6 | ['not_registered'] = 'nemas zaregistrovanou postavu.', 7 | ['active_character'] = '~b~aktivni postava:~s~ %s %s', 8 | ['already_registered'] = 'jiz mas zaregistrovanou postavu.', 9 | ['failed_identity'] = 'nastaveni vasi postavy selhalo, zkus to prosim znovu pozdeji nebo kontaktuj majitele serveru!', 10 | ['create_a_character'] = 'aby jsi mohl/a hrat, tak se musis registrovat.' 11 | } 12 | -------------------------------------------------------------------------------- /locales/en.lua: -------------------------------------------------------------------------------- 1 | Locales['en'] = { 2 | ['show_registration'] = 'show Registration Menu', 3 | ['show_active_character'] = 'show Active Character', 4 | ['delete_character'] = 'delete Your Character And Create A New One', 5 | ['deleted_character'] = 'your character has been deleted.', 6 | ['not_registered'] = 'you do not have a character reistered.', 7 | ['active_character'] = '~b~active Character:~s~ %s %s', 8 | ['already_registered'] = 'you already have a character registered.', 9 | ['failed_identity'] = 'failed to set your character, try again later or contact the server admin!', 10 | ['create_a_character'] = 'you have to create a character in order to play.' 11 | } 12 | -------------------------------------------------------------------------------- /locales/fr.lua: -------------------------------------------------------------------------------- 1 | Locales['fr'] = { 2 | ['show_registration'] = 'Afficher le menu de création de personnage', 3 | ['show_active_character'] = 'Afficher personnage actuel', 4 | ['delete_character'] = 'Supprimer votre personnage et créer un nouveau personnage', 5 | ['deleted_character'] = 'Vôtre personnage a été supprimé.', 6 | ['not_registered'] = 'Vous avez aucun personnage enregistré.', 7 | ['active_character'] = '~b~Personnage actuel:~s~ %s %s', 8 | ['already_registered'] = 'Vous avez déja un personnage.', 9 | ['failed_identity'] = 'Échec de la création de vôtre personnage, essayez plus tard!', 10 | ['create_a_character'] = 'Vous devez creer un personnage avant de jouer!' 11 | } 12 | -------------------------------------------------------------------------------- /fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | description 'ESX Identity' 6 | 7 | version '1.2.0' 8 | 9 | server_scripts { 10 | '@es_extended/locale.lua', 11 | '@mysql-async/lib/MySQL.lua', 12 | 'locales/en.lua', 13 | 'locales/cs.lua', 14 | 'locales/de.lua', 15 | 'locales/fr.lua', 16 | 'config.lua', 17 | 'server/main.lua' 18 | } 19 | 20 | client_scripts { 21 | '@es_extended/locale.lua', 22 | 'locales/en.lua', 23 | 'locales/cs.lua', 24 | 'locales/de.lua', 25 | 'locales/fr.lua', 26 | 'config.lua', 27 | 'client/main.lua' 28 | } 29 | 30 | ui_page 'html/index.html' 31 | 32 | files { 33 | 'html/index.html', 34 | 'html/script.js', 35 | 'html/style.css' 36 | } 37 | 38 | dependency 'es_extended' 39 | -------------------------------------------------------------------------------- /locales/de.lua: -------------------------------------------------------------------------------- 1 | Locales['de'] = { 2 | ['show_registration'] = 'Registrierungsmenü anzeigen', 3 | ['show_active_character'] = 'zeige aktiven Charakter', 4 | ['delete_character'] = 'Lösche deinen Charakter und erstelle einen neuen', 5 | ['deleted_character'] = '~r~~hold~Dein Charakter wurde gelöscht.', 6 | ['not_registered'] = '~r~~hold~Sie haben keinen Charakter neu registriert.', 7 | ['active_character'] = '~b~aktive Charakter:~s~ %s %s', 8 | ['already_registered'] = '~g~~hold~Sie haben bereits einen Charakter registriert.', 9 | ['failed_identity'] = '~r~~hold~Fehler beim Festlegen Ihres Charakters, versuchen Sie es später erneut!', 10 | ['create_a_character'] = '~r~~hold~Sie müssen einen Charakter erstellen, um spielen zu können.' 11 | } 12 | -------------------------------------------------------------------------------- /html/script.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | window.addEventListener('message', function(event) { 3 | if (event.data.type == "enableui") { 4 | document.body.style.display = event.data.enable ? "block" : "none"; 5 | } 6 | }); 7 | 8 | document.onkeyup = function (data) { 9 | if (data.which == 27) { // Escape key 10 | $.post('http://esx_identity/escape', JSON.stringify({})); 11 | } 12 | }; 13 | 14 | $("#register").submit(function(event) { 15 | event.preventDefault(); // Prevent form from submitting 16 | 17 | // Verify date 18 | var date = $("#dateofbirth").val(); 19 | var dateCheck = new Date($("#dateofbirth").val()); 20 | 21 | if (dateCheck == "Invalid Date") { 22 | date == "invalid"; 23 | } 24 | 25 | $.post('http://esx_identity/register', JSON.stringify({ 26 | firstname: $("#firstname").val(), 27 | lastname: $("#lastname").val(), 28 | dateofbirth: date, 29 | sex: $(".sex:checked").val(), 30 | height: $("#height").val() 31 | })); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Discord - Support and Store 2 | https://discord.gg/HpTx3KNuBK 3 | 4 | 5 | # esx_identity 6 | 7 | ## Requirements 8 | * Dependencies For Full Functionality 9 | * [esx_skin](https://github.com/ESX-Org/esx_skin) 10 | * [esx_policejob](https://github.com/ESX-Org/esx_policejob) 11 | * [esx_society](https://github.com/ESX-Org/esx_society) 12 | 13 | ## Download & Installation 14 | 15 | ### Manually 16 | - Put it in the `[esx]` directory 17 | 18 | ## Installation 19 | - Import `esx_identity.sql` in your database 20 | - Add this to your `server.cfg`: 21 | 22 | ``` 23 | start esx_identity 24 | ``` 25 | 26 | - If you are using esx_policejob or esx_society, you need to enable the following in the scripts' `config.lua`: 27 | ```Config.EnableESXIdentity = true``` 28 | 29 | ### Commands 30 | ``` 31 | /register 32 | /charlist 33 | /charselect 34 | /chardel 35 | ``` 36 | 37 | # Legal 38 | ### License 39 | esx_identity - rp characters 40 | 41 | Copyright (C) 2015-2020 Jérémie N'gadi 42 | 43 | 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. 44 | 45 | This program Is distributed In the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty Of MERCHANTABILITY Or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License For more details. 46 | 47 | You should have received a copy Of the GNU General Public License along with this program. If Not, see http://www.gnu.org/licenses/. 48 | -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |

Please register

14 |
15 |
16 | 17 |
18 |
Name
19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 |
Birthday
38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 |
46 |
Height
47 |
48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 |
61 | 65 | 69 |
70 |
71 |
72 | 73 |
74 | 75 |
76 |
77 |
78 | 79 |
80 | 81 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /client/main.lua: -------------------------------------------------------------------------------- 1 | local guiEnabled, hasIdentity, isDead = false, false, false 2 | local myIdentity, myIdentifiers = {}, {} 3 | 4 | ESX = nil 5 | 6 | Citizen.CreateThread(function() 7 | while ESX == nil do 8 | TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end) 9 | Citizen.Wait(0) 10 | end 11 | end) 12 | 13 | AddEventHandler('esx:onPlayerDeath', function(data) 14 | isDead = true 15 | end) 16 | 17 | AddEventHandler('playerSpawned', function(spawn) 18 | isDead = false 19 | end) 20 | 21 | function EnableGui(state) 22 | SetNuiFocus(state, state) 23 | guiEnabled = state 24 | 25 | SendNUIMessage({ 26 | type = "enableui", 27 | enable = state 28 | }) 29 | end 30 | 31 | RegisterNetEvent('esx_identity:showRegisterIdentity') 32 | AddEventHandler('esx_identity:showRegisterIdentity', function() 33 | if not isDead then 34 | EnableGui(true) 35 | end 36 | end) 37 | 38 | RegisterNetEvent('esx_identity:identityCheck') 39 | AddEventHandler('esx_identity:identityCheck', function(identityCheck) 40 | hasIdentity = identityCheck 41 | end) 42 | 43 | RegisterNetEvent('esx_identity:saveID') 44 | AddEventHandler('esx_identity:saveID', function(data) 45 | myIdentifiers = data 46 | end) 47 | 48 | RegisterNUICallback('escape', function(data, cb) 49 | if hasIdentity then 50 | EnableGui(false) 51 | else 52 | ESX.ShowNotification(_U('create_a_character')) 53 | end 54 | end) 55 | 56 | RegisterNUICallback('register', function(data, cb) 57 | local reason = "" 58 | myIdentity = data 59 | for theData, value in pairs(myIdentity) do 60 | if theData == "firstname" or theData == "lastname" then 61 | reason = verifyName(value) 62 | 63 | if reason ~= "" then 64 | break 65 | end 66 | elseif theData == "dateofbirth" then 67 | if value == "invalid" then 68 | reason = "Invalid date of birth!" 69 | break 70 | end 71 | elseif theData == "height" then 72 | local height = tonumber(value) 73 | if height then 74 | if height > 200 or height < 140 then 75 | reason = "Unacceptable player height!" 76 | break 77 | end 78 | else 79 | reason = "Unacceptable player height!" 80 | break 81 | end 82 | end 83 | end 84 | 85 | if reason == "" then 86 | TriggerServerEvent('esx_identity:setIdentity', data, myIdentifiers) 87 | EnableGui(false) 88 | Citizen.Wait(500) 89 | TriggerEvent('esx_skin:openSaveableMenu', myIdentifiers.id) 90 | else 91 | ESX.ShowNotification(reason) 92 | end 93 | end) 94 | 95 | Citizen.CreateThread(function() 96 | while true do 97 | Citizen.Wait(0) 98 | 99 | if guiEnabled then 100 | DisableControlAction(0, 1, true) -- LookLeftRight 101 | DisableControlAction(0, 2, true) -- LookUpDown 102 | DisableControlAction(0, 106, true) -- VehicleMouseControlOverride 103 | DisableControlAction(0, 142, true) -- MeleeAttackAlternate 104 | DisableControlAction(0, 30, true) -- MoveLeftRight 105 | DisableControlAction(0, 31, true) -- MoveUpDown 106 | DisableControlAction(0, 21, true) -- disable sprint 107 | DisableControlAction(0, 24, true) -- disable attack 108 | DisableControlAction(0, 25, true) -- disable aim 109 | DisableControlAction(0, 47, true) -- disable weapon 110 | DisableControlAction(0, 58, true) -- disable weapon 111 | DisableControlAction(0, 263, true) -- disable melee 112 | DisableControlAction(0, 264, true) -- disable melee 113 | DisableControlAction(0, 257, true) -- disable melee 114 | DisableControlAction(0, 140, true) -- disable melee 115 | DisableControlAction(0, 141, true) -- disable melee 116 | DisableControlAction(0, 143, true) -- disable melee 117 | DisableControlAction(0, 75, true) -- disable exit vehicle 118 | DisableControlAction(27, 75, true) -- disable exit vehicle 119 | else 120 | Citizen.Wait(500) 121 | end 122 | end 123 | end) 124 | 125 | function verifyName(name) 126 | -- Don't allow short user names 127 | local nameLength = string.len(name) 128 | if nameLength > 25 or nameLength < 2 then 129 | return 'Your player name is either too short or too long.' 130 | end 131 | 132 | -- Don't allow special characters (doesn't always work) 133 | local count = 0 134 | for i in name:gmatch('[abcdefghijklmnopqrstuvwxyzåäöABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ0123456789 -]') do 135 | count = count + 1 136 | end 137 | if count ~= nameLength then 138 | return 'Your player name contains special characters that are not allowed on this server.' 139 | end 140 | 141 | -- Does the player carry a first and last name? 142 | -- 143 | -- Example: 144 | -- Allowed: 'Bob Joe' 145 | -- Not allowed: 'Bob' 146 | -- Not allowed: 'Bob joe' 147 | local spacesInName = 0 148 | local spacesWithUpper = 0 149 | for word in string.gmatch(name, '%S+') do 150 | 151 | if string.match(word, '%u') then 152 | spacesWithUpper = spacesWithUpper + 1 153 | end 154 | 155 | spacesInName = spacesInName + 1 156 | end 157 | 158 | if spacesInName > 2 then 159 | return 'Your name contains more than two spaces' 160 | end 161 | 162 | if spacesWithUpper ~= spacesInName then 163 | return 'your name must start with a capital letter.' 164 | end 165 | 166 | return '' 167 | end -------------------------------------------------------------------------------- /server/main.lua: -------------------------------------------------------------------------------- 1 | ESX = nil 2 | 3 | TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end) 4 | 5 | function getIdentity(source, callback) 6 | local xPlayer = ESX.GetPlayerFromId(source) 7 | 8 | MySQL.Async.fetchAll('SELECT identifier, firstname, lastname, dateofbirth, sex, height FROM `users` WHERE `identifier` = @identifier', { 9 | ['@identifier'] = xPlayer.identifier 10 | }, function(result) 11 | if result[1].firstname ~= nil then 12 | local data = { 13 | identifier = result[1].identifier, 14 | firstname = result[1].firstname, 15 | lastname = result[1].lastname, 16 | dateofbirth = result[1].dateofbirth, 17 | sex = result[1].sex, 18 | height = result[1].height 19 | } 20 | 21 | callback(data) 22 | else 23 | local data = { 24 | identifier = '', 25 | firstname = '', 26 | lastname = '', 27 | dateofbirth = '', 28 | sex = '', 29 | height = '' 30 | } 31 | 32 | callback(data) 33 | end 34 | end) 35 | end 36 | 37 | function setIdentity(identifier, data, callback) 38 | MySQL.Async.execute('UPDATE `users` SET `firstname` = @firstname, `lastname` = @lastname, `dateofbirth` = @dateofbirth, `sex` = @sex, `height` = @height WHERE identifier = @identifier', { 39 | ['@identifier'] = identifier, 40 | ['@firstname'] = data.firstname, 41 | ['@lastname'] = data.lastname, 42 | ['@dateofbirth'] = data.dateofbirth, 43 | ['@sex'] = data.sex, 44 | ['@height'] = data.height 45 | }, function(rowsChanged) 46 | if callback then 47 | callback(true) 48 | end 49 | end) 50 | end 51 | 52 | function updateIdentity(playerId, data, callback) 53 | local xPlayer = ESX.GetPlayerFromId(playerId) 54 | 55 | MySQL.Async.execute('UPDATE `users` SET `firstname` = @firstname, `lastname` = @lastname, `dateofbirth` = @dateofbirth, `sex` = @sex, `height` = @height WHERE identifier = @identifier', { 56 | ['@identifier'] = xPlayer.identifier, 57 | ['@firstname'] = data.firstname, 58 | ['@lastname'] = data.lastname, 59 | ['@dateofbirth'] = data.dateofbirth, 60 | ['@sex'] = data.sex, 61 | ['@height'] = data.height 62 | }, function(rowsChanged) 63 | if callback then 64 | TriggerEvent('esx_identity:characterUpdated', playerId, data) 65 | callback(true) 66 | end 67 | end) 68 | end 69 | 70 | function deleteIdentity(source) 71 | local xPlayer = ESX.GetPlayerFromId(source) 72 | 73 | MySQL.Async.execute('UPDATE `users` SET `firstname` = @firstname, `lastname` = @lastname, `dateofbirth` = @dateofbirth, `sex` = @sex, `height` = @height WHERE identifier = @identifier', { 74 | ['@identifier'] = xPlayer.identifier, 75 | ['@firstname'] = '', 76 | ['@lastname'] = '', 77 | ['@dateofbirth'] = '', 78 | ['@sex'] = '', 79 | ['@height'] = '', 80 | }) 81 | end 82 | 83 | RegisterServerEvent('esx_identity:setIdentity') 84 | AddEventHandler('esx_identity:setIdentity', function(data, myIdentifiers) 85 | local xPlayer = ESX.GetPlayerFromId(source) 86 | setIdentity(myIdentifiers.steamid, data, function(callback) 87 | if callback then 88 | TriggerClientEvent('esx_identity:identityCheck', myIdentifiers.playerid, true) 89 | TriggerEvent('esx_identity:characterUpdated', myIdentifiers.playerid, data) 90 | else 91 | xPlayer.showNotification(_U('failed_identity')) 92 | end 93 | end) 94 | end) 95 | 96 | AddEventHandler('esx:playerLoaded', function(playerId, xPlayer) 97 | local myID = { 98 | steamid = xPlayer.identifier, 99 | playerid = playerId 100 | } 101 | 102 | TriggerClientEvent('esx_identity:saveID', playerId, myID) 103 | 104 | getIdentity(playerId, function(data) 105 | if data.firstname == '' then 106 | TriggerClientEvent('esx_identity:identityCheck', playerId, false) 107 | TriggerClientEvent('esx_identity:showRegisterIdentity', playerId) 108 | else 109 | TriggerClientEvent('esx_identity:identityCheck', playerId, true) 110 | TriggerEvent('esx_identity:characterUpdated', playerId, data) 111 | end 112 | end) 113 | end) 114 | 115 | AddEventHandler('esx_identity:characterUpdated', function(playerId, data) 116 | local xPlayer = ESX.GetPlayerFromId(playerId) 117 | 118 | if xPlayer then 119 | xPlayer.setName(('%s %s'):format(data.firstname, data.lastname)) 120 | xPlayer.set('firstName', data.firstname) 121 | xPlayer.set('lastName', data.lastname) 122 | xPlayer.set('dateofbirth', data.dateofbirth) 123 | xPlayer.set('sex', data.sex) 124 | xPlayer.set('height', data.height) 125 | end 126 | end) 127 | 128 | -- Set all the client side variables for connected users one new time 129 | AddEventHandler('onResourceStart', function(resource) 130 | if resource == GetCurrentResourceName() then 131 | Citizen.Wait(3000) 132 | local xPlayers = ESX.GetPlayers() 133 | 134 | for i=1, #xPlayers, 1 do 135 | local xPlayer = ESX.GetPlayerFromId(xPlayers[i]) 136 | 137 | if xPlayer then 138 | local myID = { 139 | steamid = xPlayer.identifier, 140 | playerid = xPlayer.source 141 | } 142 | 143 | TriggerClientEvent('esx_identity:saveID', xPlayer.source, myID) 144 | 145 | getIdentity(xPlayer.source, function(data) 146 | if data.firstname == '' then 147 | TriggerClientEvent('esx_identity:identityCheck', xPlayer.source, false) 148 | TriggerClientEvent('esx_identity:showRegisterIdentity', xPlayer.source) 149 | else 150 | TriggerClientEvent('esx_identity:identityCheck', xPlayer.source, true) 151 | TriggerEvent('esx_identity:characterUpdated', xPlayer.source, data) 152 | end 153 | end) 154 | end 155 | end 156 | end 157 | end) 158 | 159 | ESX.RegisterCommand('register', 'user', function(xPlayer, args, showError) 160 | getIdentity(xPlayer.source, function(data) 161 | if data.firstname ~= '' then 162 | xPlayer.showNotification(_U('already_registered')) 163 | else 164 | TriggerClientEvent('esx_identity:showRegisterIdentity', xPlayer.source) 165 | end 166 | end) 167 | end, false, {help = _U('show_registration')}) 168 | 169 | ESX.RegisterCommand('char', 'user', function(xPlayer, args, showError) 170 | getIdentity(xPlayer.source, function(data) 171 | if data.firstname == '' then 172 | xPlayer.showNotification(_U('not_registered')) 173 | else 174 | xPlayer.showNotification(_U('active_character', data.firstname, data.lastname)) 175 | end 176 | end) 177 | end, false, {help = _U('show_active_character')}) 178 | 179 | ESX.RegisterCommand('chardel', 'user', function(xPlayer, args, showError) 180 | getIdentity(xPlayer.source, function(data) 181 | if data.firstname == '' then 182 | xPlayer.showNotification(_U('not_registered')) 183 | else 184 | deleteIdentity(xPlayer.source) 185 | xPlayer.showNotification(_U('deleted_character')) 186 | TriggerClientEvent('esx_identity:showRegisterIdentity', xPlayer.source) 187 | end 188 | end) 189 | end, false, {help = _U('delete_character')}) -------------------------------------------------------------------------------- /html/style.css: -------------------------------------------------------------------------------- 1 | 2 | /* ========================================================================== 3 | #FONT 4 | ========================================================================== */ 5 | .font-robo { 6 | font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif; 7 | } 8 | 9 | .font-poppins { 10 | font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif; 11 | } 12 | 13 | .font-opensans { 14 | font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif; 15 | } 16 | 17 | /* ========================================================================== 18 | #GRID 19 | ========================================================================== */ 20 | .row { 21 | display: -webkit-box; 22 | display: -webkit-flex; 23 | display: -moz-box; 24 | display: -ms-flexbox; 25 | display: flex; 26 | -webkit-flex-wrap: wrap; 27 | -ms-flex-wrap: wrap; 28 | flex-wrap: wrap; 29 | } 30 | 31 | .row .col-2:last-child .input-group-desc { 32 | margin-bottom: 0; 33 | } 34 | 35 | .row-space { 36 | -webkit-box-pack: justify; 37 | -webkit-justify-content: space-between; 38 | -moz-box-pack: justify; 39 | -ms-flex-pack: justify; 40 | justify-content: space-between; 41 | } 42 | 43 | .row-refine { 44 | margin: 0 -15px; 45 | } 46 | 47 | .row-refine .col-3 .input-group-desc, 48 | .row-refine .col-9 .input-group-desc { 49 | margin-bottom: 0; 50 | } 51 | 52 | .col-2 { 53 | width: -webkit-calc((100% - 30px) / 2); 54 | width: -moz-calc((100% - 30px) / 2); 55 | width: calc((100% - 30px) / 2); 56 | } 57 | 58 | @media (max-width: 767px) { 59 | .col-2 { 60 | width: 100%; 61 | } 62 | } 63 | 64 | .form-row { 65 | display: -webkit-box; 66 | display: -webkit-flex; 67 | display: -moz-box; 68 | display: -ms-flexbox; 69 | display: flex; 70 | -webkit-flex-wrap: wrap; 71 | -ms-flex-wrap: wrap; 72 | flex-wrap: wrap; 73 | -webkit-box-align: center; 74 | -webkit-align-items: center; 75 | -moz-box-align: center; 76 | -ms-flex-align: center; 77 | align-items: center; 78 | margin-bottom: 40px; 79 | } 80 | 81 | .form-row .name { 82 | width: 125px; 83 | color: #555; 84 | font-size: 15px; 85 | font-weight: 700; 86 | } 87 | 88 | .form-row .value { 89 | width: -webkit-calc(100% - 125px); 90 | width: -moz-calc(100% - 125px); 91 | width: calc(100% - 125px); 92 | } 93 | 94 | @media (max-width: 767px) { 95 | .form-row { 96 | display: block; 97 | } 98 | .form-row .name, 99 | .form-row .value { 100 | display: block; 101 | width: 100%; 102 | } 103 | .form-row .name { 104 | margin-bottom: 7px; 105 | } 106 | } 107 | 108 | .col-3, 109 | .col-9 { 110 | padding: 0 15px; 111 | position: relative; 112 | width: 100%; 113 | min-height: 1px; 114 | } 115 | 116 | .col-3 { 117 | -webkit-box-flex: 0; 118 | -webkit-flex: 0 0 25%; 119 | -moz-box-flex: 0; 120 | -ms-flex: 0 0 25%; 121 | flex: 0 0 25%; 122 | max-width: 25%; 123 | } 124 | 125 | @media (max-width: 767px) { 126 | .col-3 { 127 | -webkit-box-flex: 0; 128 | -webkit-flex: 0 0 35%; 129 | -moz-box-flex: 0; 130 | -ms-flex: 0 0 35%; 131 | flex: 0 0 35%; 132 | max-width: 35%; 133 | } 134 | } 135 | 136 | .col-9 { 137 | -webkit-box-flex: 0; 138 | -webkit-flex: 0 0 75%; 139 | -moz-box-flex: 0; 140 | -ms-flex: 0 0 75%; 141 | flex: 0 0 75%; 142 | max-width: 75%; 143 | } 144 | 145 | @media (max-width: 767px) { 146 | .col-9 { 147 | -webkit-box-flex: 0; 148 | -webkit-flex: 0 0 65%; 149 | -moz-box-flex: 0; 150 | -ms-flex: 0 0 65%; 151 | flex: 0 0 65%; 152 | max-width: 65%; 153 | } 154 | } 155 | 156 | /* ========================================================================== 157 | #BOX-SIZING 158 | ========================================================================== */ 159 | /** 160 | * More sensible default box-sizing: 161 | * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 162 | */ 163 | html { 164 | -webkit-box-sizing: border-box; 165 | -moz-box-sizing: border-box; 166 | box-sizing: border-box; 167 | } 168 | 169 | * { 170 | padding: 0; 171 | margin: 0; 172 | } 173 | 174 | *, *:before, *:after { 175 | -webkit-box-sizing: inherit; 176 | -moz-box-sizing: inherit; 177 | box-sizing: inherit; 178 | } 179 | 180 | /* ========================================================================== 181 | #RESET 182 | ========================================================================== */ 183 | /** 184 | * A very simple reset that sits on top of Normalize.css. 185 | */ 186 | body, 187 | h1, h2, h3, h4, h5, h6, 188 | blockquote, p, pre, 189 | dl, dd, ol, ul, 190 | figure, 191 | hr, 192 | fieldset, legend { 193 | margin: 0; 194 | padding: 0; 195 | } 196 | 197 | /** 198 | * Remove trailing margins from nested lists. 199 | */ 200 | li > ol, 201 | li > ul { 202 | margin-bottom: 0; 203 | } 204 | 205 | /** 206 | * Remove default table spacing. 207 | */ 208 | table { 209 | border-collapse: collapse; 210 | border-spacing: 0; 211 | } 212 | 213 | /** 214 | * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` 215 | * on fieldsets. 216 | */ 217 | fieldset { 218 | min-width: 0; 219 | /* [1] */ 220 | border: 0; 221 | } 222 | 223 | button { 224 | outline: none; 225 | background: none; 226 | border: none; 227 | } 228 | 229 | /* ========================================================================== 230 | #PAGE WRAPPER 231 | ========================================================================== */ 232 | .page-wrapper { 233 | min-height: 100vh; 234 | } 235 | 236 | body { 237 | font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif; 238 | font-weight: 400; 239 | font-size: 14px; 240 | Display: none; 241 | } 242 | 243 | h1, h2, h3, h4, h5, h6 { 244 | font-weight: 400; 245 | } 246 | 247 | h1 { 248 | font-size: 36px; 249 | } 250 | 251 | h2 { 252 | font-size: 30px; 253 | } 254 | 255 | h3 { 256 | font-size: 24px; 257 | } 258 | 259 | h4 { 260 | font-size: 18px; 261 | } 262 | 263 | h5 { 264 | font-size: 15px; 265 | } 266 | 267 | h6 { 268 | font-size: 13px; 269 | } 270 | 271 | /* ========================================================================== 272 | #BACKGROUND 273 | ========================================================================== */ 274 | 275 | 276 | .bg-gra-03 { 277 | background-image: url("https://i.ibb.co/hF9MnYZ/background.jpg"); 278 | background-repeat: no-repeat, repeat; 279 | background-size: auto, cover; 280 | margin: 0; 281 | padding: 0; 282 | overflow: hidden; 283 | } 284 | 285 | /* ========================================================================== 286 | #SPACING 287 | ========================================================================== */ 288 | .p-t-100 { 289 | padding-top: 100px; 290 | } 291 | 292 | .p-t-130 { 293 | padding-top: 130px; 294 | } 295 | 296 | .p-t-180 { 297 | padding-top: 180px; 298 | } 299 | 300 | .p-t-45 { 301 | padding-top: 45px; 302 | } 303 | 304 | .p-t-20 { 305 | padding-top: 20px; 306 | } 307 | 308 | .p-t-15 { 309 | padding-top: 15px; 310 | } 311 | 312 | .p-t-10 { 313 | padding-top: 10px; 314 | } 315 | 316 | .p-t-30 { 317 | padding-top: 30px; 318 | } 319 | 320 | .p-b-100 { 321 | padding-bottom: 100px; 322 | } 323 | 324 | .p-b-50 { 325 | padding-bottom: 50px; 326 | } 327 | 328 | .m-r-45 { 329 | margin-right: 45px; 330 | } 331 | 332 | .m-r-55 { 333 | margin-right: 55px; 334 | } 335 | 336 | .m-b-55 { 337 | margin-bottom: 55px; 338 | } 339 | 340 | /* ========================================================================== 341 | #WRAPPER 342 | ========================================================================== */ 343 | .wrapper { 344 | position: absolute; 345 | left: 580px; 346 | top: 100px; 347 | margin: 0 auto; 348 | } 349 | 350 | .wrapper--w960 { 351 | max-width: 960px; 352 | } 353 | 354 | .wrapper--w790 { 355 | max-width: 790px; 356 | } 357 | 358 | .wrapper--w780 { 359 | max-width: 780px; 360 | } 361 | 362 | .wrapper--w680 { 363 | max-width: 680px; 364 | } 365 | 366 | /* ========================================================================== 367 | #BUTTON 368 | ========================================================================== */ 369 | 370 | .btn { 371 | line-height: 50px; 372 | padding: 0 40px; 373 | margin-left: 180px; 374 | -webkit-transition: all 0.4s ease; 375 | -o-transition: all 0.4s ease; 376 | -moz-transition: all 0.4s ease; 377 | transition: all 0.4s ease; 378 | cursor: pointer; 379 | font-size: 15px; 380 | text-transform: uppercase; 381 | font-weight: 700; 382 | color: #fff; 383 | font-family: inherit; 384 | } 385 | 386 | .btn--radius { 387 | -webkit-border-radius: 3px; 388 | -moz-border-radius: 3px; 389 | border-radius: 3px; 390 | } 391 | 392 | .btn--radius-2 { 393 | -webkit-border-radius: 5px; 394 | -moz-border-radius: 5px; 395 | border-radius: 5px; 396 | } 397 | 398 | .btn--pill { 399 | -webkit-border-radius: 20px; 400 | -moz-border-radius: 20px; 401 | border-radius: 20px; 402 | } 403 | 404 | .btn--green { 405 | background: #57b846; 406 | } 407 | 408 | .btn--green:hover { 409 | background: #4dae3c; 410 | } 411 | 412 | .btn--blue { 413 | background: #4272d7; 414 | } 415 | 416 | .btn--blue:hover { 417 | background: #3868cd; 418 | } 419 | 420 | .btn--red { 421 | background: #ff4b5a; 422 | } 423 | 424 | .btn--red:hover { 425 | background: #eb3746; 426 | } 427 | 428 | /* ========================================================================== 429 | #FORM 430 | ========================================================================== */ 431 | input { 432 | outline: none; 433 | margin: 0; 434 | border: none; 435 | -webkit-box-shadow: none; 436 | -moz-box-shadow: none; 437 | box-shadow: none; 438 | width: 100%; 439 | font-size: 14px; 440 | font-family: inherit; 441 | } 442 | 443 | .radio-container { 444 | display: inline-block; 445 | position: relative; 446 | padding-left: 30px; 447 | cursor: pointer; 448 | font-size: 16px; 449 | color: #666; 450 | -webkit-user-select: none; 451 | -moz-user-select: none; 452 | -ms-user-select: none; 453 | user-select: none; 454 | } 455 | 456 | .radio-container input { 457 | position: absolute; 458 | opacity: 0; 459 | cursor: pointer; 460 | } 461 | 462 | .radio-container input:checked ~ .checkmark { 463 | background-color: #e5e5e5; 464 | } 465 | 466 | .radio-container input:checked ~ .checkmark:after { 467 | display: block; 468 | } 469 | 470 | .radio-container .checkmark:after { 471 | top: 50%; 472 | left: 50%; 473 | -webkit-transform: translate(-50%, -50%); 474 | -moz-transform: translate(-50%, -50%); 475 | -ms-transform: translate(-50%, -50%); 476 | -o-transform: translate(-50%, -50%); 477 | transform: translate(-50%, -50%); 478 | width: 12px; 479 | height: 12px; 480 | -webkit-border-radius: 50%; 481 | -moz-border-radius: 50%; 482 | border-radius: 50%; 483 | background: #57b846; 484 | } 485 | 486 | .checkmark { 487 | position: absolute; 488 | top: 50%; 489 | -webkit-transform: translateY(-50%); 490 | -moz-transform: translateY(-50%); 491 | -ms-transform: translateY(-50%); 492 | -o-transform: translateY(-50%); 493 | transform: translateY(-50%); 494 | left: 0; 495 | height: 20px; 496 | width: 20px; 497 | background-color: #e5e5e5; 498 | -webkit-border-radius: 50%; 499 | -moz-border-radius: 50%; 500 | border-radius: 50%; 501 | -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); 502 | -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); 503 | box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); 504 | } 505 | 506 | .checkmark:after { 507 | content: ""; 508 | position: absolute; 509 | display: none; 510 | } 511 | 512 | .input--style-5 { 513 | background: #e5e5e5; 514 | line-height: 50px; 515 | -webkit-border-radius: 5px; 516 | -moz-border-radius: 5px; 517 | border-radius: 5px; 518 | padding: 0 22px; 519 | font-size: 16px; 520 | color: #555; 521 | } 522 | 523 | .input-group-desc { 524 | position: relative; 525 | } 526 | 527 | @media (max-width: 767px) { 528 | .input-group-desc { 529 | margin-bottom: 40px; 530 | } 531 | } 532 | 533 | .input-group { 534 | position: relative; 535 | margin: 0; 536 | } 537 | 538 | .label { 539 | color: #555; 540 | font-size: 15px; 541 | font-weight: 700; 542 | } 543 | 544 | .label--block { 545 | width: 100%; 546 | } 547 | 548 | .label--desc { 549 | position: absolute; 550 | text-transform: capitalize; 551 | display: block; 552 | color: #999; 553 | font-size: 14px; 554 | margin: 0; 555 | margin-top: 7px; 556 | left: 0; 557 | } 558 | 559 | /* ========================================================================== 560 | #SELECT2 561 | ========================================================================== */ 562 | .select--no-search .select2-search { 563 | display: none !important; 564 | } 565 | 566 | .select2-container--open .select2-dropdown--below { 567 | border: none; 568 | -webkit-border-radius: 3px; 569 | -moz-border-radius: 3px; 570 | border-radius: 3px; 571 | -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); 572 | -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); 573 | box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); 574 | border: 1px solid #e0e0e0; 575 | margin-top: 5px; 576 | overflow: hidden; 577 | } 578 | 579 | .select2-container--default .select2-results__option { 580 | padding-left: 22px; 581 | } 582 | 583 | .rs-select2 .select2-container { 584 | width: 100% !important; 585 | outline: none; 586 | background: #e5e5e5; 587 | -webkit-border-radius: 5px; 588 | -moz-border-radius: 5px; 589 | border-radius: 5px; 590 | } 591 | 592 | .rs-select2 .select2-container .select2-selection--single { 593 | outline: none; 594 | border: none; 595 | height: 50px; 596 | background: transparent; 597 | } 598 | 599 | .rs-select2 .select2-container .select2-selection--single .select2-selection__rendered { 600 | line-height: 50px; 601 | padding-left: 0; 602 | color: #555; 603 | font-size: 16px; 604 | font-family: inherit; 605 | padding-left: 22px; 606 | padding-right: 50px; 607 | } 608 | 609 | .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow { 610 | height: 50px; 611 | right: 15px; 612 | display: -webkit-box; 613 | display: -webkit-flex; 614 | display: -moz-box; 615 | display: -ms-flexbox; 616 | display: flex; 617 | -webkit-box-pack: center; 618 | -webkit-justify-content: center; 619 | -moz-box-pack: center; 620 | -ms-flex-pack: center; 621 | justify-content: center; 622 | -webkit-box-align: center; 623 | -webkit-align-items: center; 624 | -moz-box-align: center; 625 | -ms-flex-align: center; 626 | align-items: center; 627 | } 628 | 629 | .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b { 630 | display: none; 631 | } 632 | 633 | .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after { 634 | font-family: "Material-Design-Iconic-Font"; 635 | content: '\f2f9'; 636 | font-size: 24px; 637 | color: #999; 638 | -webkit-transition: all 0.4s ease; 639 | -o-transition: all 0.4s ease; 640 | -moz-transition: all 0.4s ease; 641 | transition: all 0.4s ease; 642 | } 643 | 644 | .rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after { 645 | -webkit-transform: rotate(-180deg); 646 | -moz-transform: rotate(-180deg); 647 | -ms-transform: rotate(-180deg); 648 | -o-transform: rotate(-180deg); 649 | transform: rotate(-180deg); 650 | } 651 | 652 | /* ========================================================================== 653 | #TITLE 654 | ========================================================================== */ 655 | .title { 656 | font-size: 24px; 657 | text-transform: uppercase; 658 | font-weight: 700; 659 | text-align: center; 660 | color: #fff; 661 | } 662 | 663 | /* ========================================================================== 664 | #CARD 665 | ========================================================================== */ 666 | .card { 667 | -webkit-border-radius: 3px; 668 | -moz-border-radius: 3px; 669 | border-radius: 3px; 670 | background: #fff; 671 | } 672 | 673 | .card-5 { 674 | background: #fff; 675 | -webkit-border-radius: 10px; 676 | -moz-border-radius: 10px; 677 | border-radius: 10px; 678 | -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); 679 | -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); 680 | box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); 681 | } 682 | 683 | .card-5 .card-heading { 684 | padding: 20px 0; 685 | background: #1a1a1a; 686 | -webkit-border-top-left-radius: 10px; 687 | -moz-border-radius-topleft: 10px; 688 | border-top-left-radius: 10px; 689 | -webkit-border-top-right-radius: 10px; 690 | -moz-border-radius-topright: 10px; 691 | border-top-right-radius: 10px; 692 | } 693 | 694 | .card-5 .card-body { 695 | padding: 52px 85px; 696 | padding-bottom: 73px; 697 | } 698 | 699 | @media (max-width: 767px) { 700 | .card-5 .card-body { 701 | padding: 40px 30px; 702 | padding-bottom: 50px; 703 | } 704 | } 705 | --------------------------------------------------------------------------------