🍔NEON HUD

Here check the installation guide

This script is compatible with all ESX/QB or with any other, as long as you know how to change the functions and events through the config.

Never ensure this HUD, or any other, in-game with /ensure neon-hud, it should always be ensured with a full server restart.

INSTALLATION GUIDE

1. Download from KEYMASTER and Unzip the neon-hud.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure neon-hud,the name of the folder must not be changed or the resource will not function correctly. It should be located just below your core.

3. Delete or remove from your resources folder any other HUD you have.

4. Clear the cache of your server and also of your own FiveM.

5. Reboot the entire server with the forge script well ensured in your server.cfg.

CONFIG

The following will explain all the settings, one of the most important things that I recommend you spend a few minutes to understand in order to offer your users the best possible experience.

CONFIG

Config = {}

--  _____ _____ _   _ ______ _____ _____ _   _______  ___ _____ _____ _____ _   _ 
-- /  __ \  _  | \ | ||  ___|_   _|  __ \ | | | ___ \/ _ \_   _|_   _|  _  | \ | |
-- | /  \/ | | |  \| || |_    | | | |  \/ | | | |_/ / /_\ \| |   | | | | | |  \| |
-- | |   | | | | . ` ||  _|   | | | | __| | | |    /|  _  || |   | | | | | | . ` |
-- | \__/\ \_/ / |\  || |    _| |_| |_\ \ |_| | |\ \| | | || |  _| |_\ \_/ / |\  |
--  \____/\___/\_| \_/\_|    \___/ \____/\___/\_| \_\_| |_/\_/  \___/ \___/\_| \_/

-- Specify the framework to use: 'esx' or 'qbcore'
Config.Framework = 'esx' -- esx / qbcore

-- GENERAL COMMANDS CONFIGURATION
Config.Commands = {
    Settings = 'hud', -- Command to open HUD settings
    NoHud = 'nohud', -- Command to toggle HUD visibility off
    Cinematic = 'cinematic' -- Command to toggle cinematic mode
}

-- FEATURE TOGGLES
Config.UseWeaponSystem = true -- Toggle the custom weapon system usage (true to enable, false to disable)
Config.UseCustomStress = true -- Toggle the custom stress system usage (true to enable, false to disable)
Config.UseStaticID = false -- Toggle the usage of static IDs for players (true to enable, false to disable)
Config.Delay = 100 -- Delay in milliseconds for script operations. Higher values reduce consumption but may cause delays. Recommended range: 100-200ms for optimal performance.
Config.EnableSettingsMenu = true -- This makes the HUD Customisation Menu work, which is accessible to all players. If you set it to false it will not be usable

-- HUD SETTINGS CONFIGURATION
Config.Settings = {
    ShowCashMoney = true, -- Show cash amount on HUD
    ShowBankMoney = true, -- Show bank amount on HUD
    ShowBlackMoney = true, -- Show "black" money amount on HUD
    ShowJob = true, -- Show player's job on HUD
    ShowHealth = true, -- Show health bar on HUD
    ShowHunger = true, -- Show hunger indicator on HUD
    ShowThirst = true, -- Show thirst indicator on HUD
    ShowArmor = true, -- Show armor indicator on HUD
    ShowOxygen = true, -- Show oxygen level when underwater
    ShowStress = true, -- Show stress level indicator on HUD
    ShowMicroVolume = true, -- Show microphone volume indicator
    ShowSpeedometer = true, -- Show speedometer on HUD
    ShowAddressMarker = true, -- Show address marker on screen (true to enable, false to disable)
    ShowRadarOnlyInVehicle = true, -- Show radar only when player is in a vehicle
    UseMPH = false, -- Use MPH for speed unit (true for MPH, false for KM/H)
    UseKeyOpen = true, -- Allow HUD configuration to be opened with a key
    OpenMenu = 'I', -- Key to open the HUD settings panel (see list: [https://docs.fivem.net/docs/game-references/controls/])
    Mode = 'normal', -- Default HUD display mode for players (options: normal, reduced, minimal)
    Size = 30, -- Default size for HUD elements
    Color = '#FF0451', -- Default color for HUD elements
    ShowHudLoadNotification = true, -- Show HUD loading notification (true to enable, false to disable)
    ShowCashChangeNotification = true, -- Show cash change notification (true to enable, false to disable)
    ShowBankChangeNotification = true, -- Show bank balance change notification (true to enable, false to disable)
    ShowLowFuelNotification = true, -- Show low fuel notification (true to enable, false to disable)
    ShowLowHealthNotification = true, -- Show low health notification (true to enable, false to disable)
    ShowLowThirstNotification = true, -- Show low thirst notification (true to enable, false to disable)
    ShowLowHungerNotification = true, -- Show low hunger notification (true to enable, false to disable)
    ShowSeatbeltNotification = true, -- Show seatbelt notification (true to enable, false to disable)
    ShowCruiseNotification = true -- Show cruise control notification (true to enable, false to disable)
}

-- LOGO CONFIGURATION
Config.Logo = {
    ActiveWithText = true, -- Enables the default HUD logo with custom text
    Text = '<h1>LOGO</h1><span>SERVER</span>' -- HTML content for the logo and server name
}

-- STRESS SYSTEM CONFIGURATION
Config.StressSystem = {
    StressMultiplier = 1.0, -- The speed at which stress increases - Values: 0.1 = very slow, 1.0 = normal, 2.0 = very fast
    MinimumSpeed = 100, -- Speed threshold for stress accumulation
    MinimumSpeedUnbuckled = 80, -- Speed threshold for increased stress when not buckled up
    StressChance = 1.0, -- Chance of stress when shooting (1.0 equals 100% chance)
    MinimumStress = 50, -- Minimum stress level before the screen starts to shake
    BlacklistedWeapons = { -- List of weapons that do not cause stress when used
        `weapon_petrolcan`,
        `weapon_hazardcan`,
        `weapon_fireextinguisher`
    },
    EffectInterval = { -- Defines the stress effect intervals and their duration
        [1] = { min = 50, max = 60, timeout = math.random(50000, 60000) },
        [2] = { min = 60, max = 70, timeout = math.random(40000, 50000) },
        [3] = { min = 70, max = 80, timeout = math.random(30000, 40000) },
        [4] = { min = 80, max = 90, timeout = math.random(20000, 30000) },
        [5] = { min = 90, max = 100, timeout = math.random(15000, 20000) }
    },
    Intensity = { -- Configures the intensity of stress effects based on stress level
        ['BLUR'] = {
            [1] = { min = 50, max = 60, intensity = 1500 },
            [2] = { min = 60, max = 70, intensity = 2000 },
            [3] = { min = 70, max = 80, intensity = 2500 },
            [4] = { min = 80, max = 90, intensity = 2700 },
            [5] = { min = 90, max = 100, intensity = 3000 }
        }
    }
}

-- SEATBELT CONFIGURATION
Config.Seatbelt = {
    Active = false, -- Toggle the seatbelt feature
    Keybind = 'B', -- Keybind to toggle seatbelt
    Command = 'seatbelt', -- Command to toggle seatbelt
    EjectSpeed = 45.0, -- Minimum speed at which a player can be ejected from a vehicle
    EjectAccel = 100.0 -- Minimum acceleration for ejection
}

-- CRUISE CONTROL CONFIGURATION
Config.Cruise = {
    Active = true, -- Toggle the cruise control feature
    Keybind = 'B', -- Keybind to toggle cruise control
    Command = 'cruise2' -- Command to toggle cruise control
}

-- TRANSLATION CONFIGURATION FOR HUD AND NOTIFICATIONS
Config.Translation = {

    -- HUD SETTINGS MENU TRANSLATIONS
    hudtitle = 'HUD PANEL', -- Title of the HUD settings panel
    hudsubtitle = 'Change Anything', -- Subtitle of the HUD settings panel
    normalmode = 'Normal Mode:', -- Option for normal HUD mode
    normalmodedesc = 'With all its characteristic', -- Description of normal HUD mode
    reducedmode = 'Reduced Mode:', -- Option for reduced HUD mode
    reducedmodedesc = 'Remove the money part', -- Description of reduced HUD mode
    minimalmode = 'Minimal Mode:', -- Option for minimal HUD mode
    minimalmodedesc = 'Just the essentials', -- Description of minimal HUD mode
    size = 'Size:', -- Option to change the size of HUD elements
    sizedesc = 'Resize from 0 to 100%', -- Description of size option
    color = 'Color:', -- Option to change the color of HUD elements
    colordesc = 'Change color of any elements', -- Description of color option
    position = 'Position:', -- Option to change the position of HUD elements
    positiondesc = 'Change the position of things', -- Description of position option
    cinematicmode = 'Cinematic Mode', -- Toggle for cinematic mode
    nohudmode = 'No Hud Mode', -- Toggle for turning off the HUD
    save = 'Save', -- Button to save changes
    cancel = 'Cancel', -- Button to cancel changes
    reset = 'Reset Changes', -- Button to reset changes to default
    colorhelp = 'Press the specific item whose color you want to change.', -- Help text for changing color
    positionhelp = 'Drag the elements to change their position.', -- Help text for changing position

    -- HUD DISPLAY TEXT TRANSLATIONS
    moneytext = 'Money in Cash', -- Display text for cash amount
    banktext = 'Money in Bank', -- Display text for bank amount
    cryptotext = 'Money in Crypto', -- Display text for crypto amount
    locationtext = 'Location', -- Display text for player's location

    -- NOTIFICATION TEXT TRANSLATIONS
    hudloaded = 'The HUD has been loaded', -- Notification when HUD loads successfully
    gasolinelow = 'Your gasoline level is low', -- Notification for low gasoline level
    seatbelton = 'Your seatbelt is on', -- Notification when seatbelt is on
    seatbeltoff = 'Your seatbelt is off', -- Notification when seatbelt is off
    lowhealth = 'Your health level is low', -- Notification for low health level
    lowthirst = 'Your thirst level is low', -- Notification for low thirst level
    lowhunger = 'Your hunger level is low', -- Notification for low hunger level
    cruisecontrolon = 'Cruise control activated', -- Notification when cruise control is activated
    cruisecontroloff = 'Cruise control deactivated', -- Notification when cruise control is deactivated
    cashchanged = 'Your cash balance has changed by $%s', -- Notification for change in cash balance
    bankchanged = 'Your bank balance has changed by $%s', -- Notification for change in bank balance
    stressAdded = 'Stress increased by %s', -- Notification for increased stress    
    stressRemoved = 'Stress reduced by %s', -- Notification for reduced stress
    stressReset = 'Stress has been reset', -- Notification for stress reset

    -- OTHER HUD RELATED TRANSLATIONS
    seatbelthelp = 'Toggle seatbelt on / off', -- Help text for toggling seatbelt
    settingshelp = 'Open the HUD settings', -- Help text for opening HUD settings
    cruisehelp = 'Turn cruise mode on / off' -- Help text for toggling cruise mode
}

-- EVENTS CONFIGURATION BASED ON SELECTED FRAMEWORK
Config.Events = {

    -- PlayerLoaded: Event triggered when a player is fully loaded into the game. 
    -- It differs based on the selected framework, allowing for framework-specific functionality.
    PlayerLoaded = Config.Framework == 'esx' and 'esx:playerLoaded' 
                   or Config.Framework == 'qbcore' and 'QBCore:Client:OnPlayerLoaded' 
                   or 'custom event', -- Fallback to a custom event if neither 'esx' nor 'qbcore' is selected

    -- MoneyChange: Event triggered when there's a change in the player's money. 
    -- This is important for updating the HUD to reflect the current balance accurately.
    MoneyChange = Config.Framework == 'esx' and 'esx:setAccountMoney' 
                  or Config.Framework == 'qbcore' and 'hud:client:OnMoneyChange' 
                  or 'custom event', -- Fallback to a custom event if neither 'esx' nor 'qbcore' is selected

    -- JobChange: Event triggered when the player's job is changed or updated. 
    -- Essential for roles-based gameplay, ensuring the HUD shows the current job accurately.
    JobChange = Config.Framework == 'esx' and 'esx:setJob' 
                or Config.Framework == 'qbcore' and 'QBCore:Client:OnJobUpdate' 
                or 'custom event', -- Fallback to a custom event if neither 'esx' nor 'qbcore' is selected

    -- NeedsChange: Event triggered when there's a change in the player's needs (e.g., hunger, thirst).
    -- It's crucial for survival aspects of the game, keeping the HUD updated with the latest needs status.
    NeedsChange = Config.Framework == 'esx' and 'esx_status:onTick' 
                  or Config.Framework == 'qbcore' and 'hud:client:UpdateNeeds' 
                  or 'custom event', -- Fallback to a custom event if neither 'esx' nor 'qbcore' is selected

    -- StressChange: Event triggered when there's a change in the player's stress level.
    -- This affects gameplay dynamics, particularly in scenarios involving health and interaction.
    StressChange = Config.Framework == 'esx' and 'neon-hud:updateStress' 
                   or Config.Framework == 'qbcore' and 'hud:client:UpdateStress' 
                   or 'custom event' -- Fallback to a custom event if neither 'esx' nor 'qbcore' is selected
}

-- FUNCTIONS CONFIGURATION TO INTERACT WITH THE GAME FRAMEWORK
Config.Functions = {

    -- GetPlayerData: Returns player data from the framework. The actual data structure may vary between ESX and QBCore.
    GetPlayerData = function()
        if Config.Framework == 'esx' then
            return ESX.GetPlayerData() -- For ESX framework
        elseif Config.Framework == 'qbcore' then
            return QBCore.Functions.GetPlayerData() -- For QBCore framework
        end
    end,

    -- GetPlayerCash: Retrieves the player's cash amount.
    GetPlayerCash = function()
        if Config.Framework == 'esx' then
            local playerData = Config.Functions.GetPlayerData()
            for key, account in pairs(playerData.accounts) do
                if account.name == 'money' then
                    return account.money -- Returns cash for ESX
                end
            end
        elseif Config.Framework == 'qbcore' then
            local playerData = Config.Functions.GetPlayerData()
            return playerData.money.cash -- Returns cash for QBCore
        end
    end,

    -- GetPlayerBank: Retrieves the player's bank amount.
    GetPlayerBank = function()
        if Config.Framework == 'esx' then
            local playerData = Config.Functions.GetPlayerData()
            for key, account in pairs(playerData.accounts) do
                if account.name == 'bank' then
                    return account.money -- Returns bank balance for ESX
                end
            end
        elseif Config.Framework == 'qbcore' then
            local playerData = Config.Functions.GetPlayerData()
            return playerData.money.bank -- Returns bank balance for QBCore
        end
    end,

    -- GetPlayerOtherAccount: Retrieves the player's other account balance (e.g., black money or crypto).
    GetPlayerOtherAccount = function()
        if Config.Framework == 'esx' then
            local playerData = Config.Functions.GetPlayerData()
            for key, account in pairs(playerData.accounts) do
                if account.name == 'black_money' then
                    return account.money -- Returns black money for ESX
                end
            end
        elseif Config.Framework == 'qbcore' then
            local playerData = Config.Functions.GetPlayerData()
            return playerData.money.crypto -- Returns crypto for QBCore
        end
    end,

    -- GetPlayerJob: Retrieves the player's job information.
    GetPlayerJob = function()
        local playerData = Config.Functions.GetPlayerData()
        return playerData.job.label -- Returns job label for both ESX and QBCore
    end,

    GetPlayerJobGrade = function()
        local playerData = Config.Functions.GetPlayerData()
        if Config.Framework == 'esx' then
            return playerData.job.grade_label
        elseif Config.Framework == 'qbcore' then
            return playerData.job.grade.name
        end
    end,

    -- GetFuel: Retrieves the fuel level of a given vehicle.
    GetFuel = function(vehicle)
        -- Returns fuel level for both ESX and QBCore using GTA's native function
        return GetVehicleFuelLevel(vehicle)
    end,

    -- GetStaticId: Placeholder function for potential implementation of static ID retrieval.
    GetStaticId = function(id)
        -- Implementation can be added here for both ESX and QBCore if needed
    end,

    -- Notification: Shows a notification to the player. The method varies between ESX and QBCore.
    Notification = function(text)
        if Config.Framework == 'esx' then
            ESX.ShowNotification(text) -- For ESX framework
        elseif Config.Framework == 'qbcore' then
            QBCore.Functions.Notify(text) -- For QBCore framework
        end
    end

}

-- DISPLAY WEAPONS CONFIGURATION
Config.Weapons = {

    -- Each entry maps a weapon's hash key to its code name, allowing the script to recognize and handle weapons appropriately.
    [GetHashKey('WEAPON_UNARMED')] = { 'WEAPON_UNARMED' },
    [GetHashKey('WEAPON_KNIFE')] = { 'WEAPON_KNIFE' },
    [GetHashKey('WEAPON_NIGHTSTICK')] = { 'WEAPON_NIGHTSTICK' },
    [GetHashKey('WEAPON_HAMMER')] = { 'WEAPON_HAMMER' },
    [GetHashKey('WEAPON_BAT')] = { 'WEAPON_BAT' },
    [GetHashKey('WEAPON_GOLFCLUB')] = { 'WEAPON_GOLFCLUB' },
    [GetHashKey('WEAPON_CROWBAR')] = { 'WEAPON_CROWBAR' },
    [GetHashKey('WEAPON_PISTOL')] = { 'WEAPON_PISTOL' },
    [GetHashKey('WEAPON_COMBATPISTOL')] = { 'WEAPON_COMBATPISTOL' },
    [GetHashKey('WEAPON_APPISTOL')] = { 'WEAPON_APPISTOL' },
    [GetHashKey('WEAPON_PISTOL50')] = { 'WEAPON_PISTOL50' },
    [GetHashKey('WEAPON_MICROSMG')] = { 'WEAPON_MICROSMG' },
    [GetHashKey('WEAPON_SMG')] = { 'WEAPON_SMG' },
    [GetHashKey('WEAPON_ASSAULTSMG')] = { 'WEAPON_ASSAULTSMG' },
    [GetHashKey('WEAPON_ASSAULTRIFLE')] = { 'WEAPON_ASSAULTRIFLE' },
    [GetHashKey('WEAPON_CARBINERIFLE')] = { 'WEAPON_CARBINERIFLE' },
    [GetHashKey('WEAPON_ADVANCEDRIFLE')] = { 'WEAPON_ADVANCEDRIFLE' },
    [GetHashKey('WEAPON_MG')] = { 'WEAPON_MG' },
    [GetHashKey('WEAPON_COMBATMG')] = { 'WEAPON_COMBATMG' },
    [GetHashKey('WEAPON_PUMPSHOTGUN')] = { 'WEAPON_PUMPSHOTGUN' },
    [GetHashKey('WEAPON_SAWNOFFSHOTGUN')] = { 'WEAPON_SAWNOFFSHOTGUN' },
    [GetHashKey('WEAPON_ASSAULTSHOTGUN')] = { 'WEAPON_ASSAULTSHOTGUN' },
    [GetHashKey('WEAPON_BULLPUPSHOTGUN')] = { 'WEAPON_BULLPUPSHOTGUN' },
    [GetHashKey('WEAPON_STUNGUN')] = { 'WEAPON_STUNGUN' },
    [GetHashKey('WEAPON_SNIPERRIFLE')] = { 'WEAPON_SNIPERRIFLE' },
    [GetHashKey('WEAPON_HEAVYSNIPER')] = { 'WEAPON_HEAVYSNIPER' },
    [GetHashKey('WEAPON_GRENADELAUNCHER')] = { 'WEAPON_GRENADELAUNCHER' },
    [GetHashKey('WEAPON_GRENADELAUNCHER_SMOKE')] = { 'WEAPON_GRENADELAUNCHER_SMOKE' },
    [GetHashKey('WEAPON_RPG')] = { 'WEAPON_RPG' },
    [GetHashKey('WEAPON_MINIGUN')] = { 'WEAPON_MINIGUN' },
    [GetHashKey('WEAPON_GRENADE')] = { 'WEAPON_GRENADE' },
    [GetHashKey('WEAPON_STICKYBOMB')] = { 'WEAPON_STICKYBOMB' },
    [GetHashKey('WEAPON_SMOKEGRENADE')] = { 'WEAPON_SMOKEGRENADE' },
    [GetHashKey('WEAPON_BZGAS')] = { 'WEAPON_BZGAS' },
    [GetHashKey('WEAPON_MOLOTOV')] = { 'WEAPON_MOLOTOV' },
    [GetHashKey('WEAPON_FIREEXTINGUISHER')] = { 'WEAPON_FIREEXTINGUISHER' },
    [GetHashKey('WEAPON_PETROLCAN')] = { 'WEAPON_PETROLCAN' },
    [GetHashKey('WEAPON_FLARE')] = { 'WEAPON_FLARE' },
    [GetHashKey('WEAPON_SNSPISTOL')] = { 'WEAPON_SNSPISTOL' },
    [GetHashKey('WEAPON_SPECIALCARBINE')] = { 'WEAPON_SPECIALCARBINE' },
    [GetHashKey('WEAPON_HEAVYPISTOL')] = { 'WEAPON_HEAVYPISTOL' },
    [GetHashKey('WEAPON_BULLPUPRIFLE')] = { 'WEAPON_BULLPUPRIFLE' },
    [GetHashKey('WEAPON_HOMINGLAUNCHER')] = { 'WEAPON_HOMINGLAUNCHER' },
    [GetHashKey('WEAPON_PROXMINE')] = { 'WEAPON_PROXMINE' },
    [GetHashKey('WEAPON_SNOWBALL')] = { 'WEAPON_SNOWBALL' },
    [GetHashKey('WEAPON_VINTAGEPISTOL')] = { 'WEAPON_VINTAGEPISTOL' },
    [GetHashKey('WEAPON_DAGGER')] = { 'WEAPON_DAGGER' },
    [GetHashKey('WEAPON_FIREWORK')] = { 'WEAPON_FIREWORK' },
    [GetHashKey('WEAPON_MUSKET')] = { 'WEAPON_MUSKET' },
    [GetHashKey('WEAPON_MARKSMANRIFLE')] = { 'WEAPON_MARKSMANRIFLE' },
    [GetHashKey('WEAPON_HEAVYSHOTGUN')] = { 'WEAPON_HEAVYSHOTGUN' },
    [GetHashKey('WEAPON_GUSENBERG')] = { 'WEAPON_GUSENBERG' },
    [GetHashKey('WEAPON_HATCHET')] = { 'WEAPON_HATCHET' },
    [GetHashKey('WEAPON_RAILGUN')] = { 'WEAPON_RAILGUN' },
    [GetHashKey('WEAPON_COMBATPDW')] = { 'WEAPON_COMBATPDW' },
    [GetHashKey('WEAPON_KNUCKLE')] = { 'WEAPON_KNUCKLE' },
    [GetHashKey('WEAPON_MARKSMANPISTOL')] = { 'WEAPON_MARKSMANPISTOL' },
    [GetHashKey('WEAPON_FLASHLIGHT')] = { 'WEAPON_FLASHLIGHT' },
    [GetHashKey('WEAPON_MACHETE')] = { 'WEAPON_MACHETE' },
    [GetHashKey('WEAPON_MACHINEPISTOL')] = { 'WEAPON_MACHINEPISTOL' },
    [GetHashKey('WEAPON_SWITCHBLADE')] = { 'WEAPON_SWITCHBLADE' },
    [GetHashKey('WEAPON_REVOLVER')] = { 'WEAPON_REVOLVER' },
    [GetHashKey('WEAPON_COMPACTRIFLE')] = { 'WEAPON_COMPACTRIFLE' },
    [GetHashKey('WEAPON_DBSHOTGUN')] = { 'WEAPON_DBSHOTGUN' },
    [GetHashKey('WEAPON_FLAREGUN')] = { 'WEAPON_FLAREGUN' },
    [GetHashKey('WEAPON_AUTOSHOTGUN')] = { 'WEAPON_AUTOSHOTGUN' },
    [GetHashKey('WEAPON_BATTLEAXE')] = { 'WEAPON_BATTLEAXE' },
    [GetHashKey('WEAPON_COMPACTLAUNCHER')] = { 'WEAPON_COMPACTLAUNCHER' },
    [GetHashKey('WEAPON_MINISMG')] = { 'WEAPON_MINISMG' },
    [GetHashKey('WEAPON_PIPEBOMB')] = { 'WEAPON_PIPEBOMB' },
    [GetHashKey('WEAPON_POOLCUE')] = { 'WEAPON_POOLCUE' },
    [GetHashKey('WEAPON_SWEEPER')] = { 'WEAPON_SWEEPER' },
    [GetHashKey('WEAPON_WRENCH')] = { 'WEAPON_WRENCH' },
    [GetHashKey('WEAPON_PISTOL_MK2')] = { 'WEAPON_PISTOL_MK2' },
    [GetHashKey('WEAPON_SNSPISTOL_MK2')] = { 'WEAPON_SNSPISTOL_MK2' },
    [GetHashKey('WEAPON_REVOLVER_MK2')] = { 'WEAPON_REVOLVER_MK2' },
    [GetHashKey('WEAPON_SMG_MK2')] = { 'WEAPON_SMG_MK2' },
    [GetHashKey('WEAPON_PUMPSHOTGUN_MK2')] = { 'WEAPON_PUMPSHOTGUN_MK2' },
    [GetHashKey('WEAPON_ASSAULTRIFLE_MK2')] = { 'WEAPON_ASSAULTRIFLE_MK2' },
    [GetHashKey('WEAPON_CARBINERIFLE_MK2')] = { 'WEAPON_CARBINERIFLE_MK2' },
    [GetHashKey('WEAPON_SPECIALCARBINE_MK2')] = { 'WEAPON_SPECIALCARBINE_MK2' },
    [GetHashKey('WEAPON_BULLPUPRIFLE_MK2')] = { 'WEAPON_BULLPUPRIFLE_MK2' },
    [GetHashKey('WEAPON_COMBATMG_MK2')] = { 'WEAPON_COMBATMG_MK2' },
    [GetHashKey('WEAPON_HEAVYSNIPER_MK2')] = { 'WEAPON_HEAVYSNIPER_MK2' },
    [GetHashKey('WEAPON_MARKSMANRIFLE_MK2')] = { 'WEAPON_MARKSMANRIFLE_MK2' }

}

If you want to edit the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.

The script is RESPONSIVE for all resolutions as well.