⚙️Configuration

In this section you will be able to see how to edit and configure the HUD in a personalized way so that you can adapt each function offered by our script to your needs.

1. Tailwind Config

Our HUD script is designed and built using a responsive technology that, through Tailwind, helps the project to be fully adaptable to any resolution.

In addition, it has an interactive file so that each user can quickly configure the most important parameters in the visual environment of the HUD, such as the main color that by default will be blue.

web/js/tailwind.config.js

if (!tailwind) tailwind = {};

tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: 'rgba(0, 136, 204, 255)\n',
            },
            fontFamily: {
                onest: ['Onest', 'sans-serif'],
                rajdhani: ['Rajdhani', 'sans-serif'],
            },
            boxShadow: {
                'dynamic': '0 0 .4vw rgba(0, 0, 0, 0.665)',
            },
            dropShadow: {
                'dynamic': '0 0 .4vw rgba(0, 0, 0, .665)',
            },
        }
    }
};

2. Main File

Next we will share the Config.lua file that will allow our customers to configure the script as much as they want:

config.lua

Config = {}

Config.GeneralSettings = {
    AlwaysMinimap = false,
    Logo = 'https://i.postimg.cc/pLnnLRD7/logo.png',
    ToggleCommand = 'toghud',
    CinematicCommand = 'cine',
}

Config.CustomMinimap = {
    Enable = true,
    Colors = {
        ['red'] = 0,
        ['green'] = 136,
        ['blue'] = 204,
        ['alpha'] = 100
    }
}

Config.Speedometer = {
    Enable = true,
    CountSystem = 'kmh', -- kmh or mph (change it too in the html file)
    Ticktime = 50, -- ms
    Seatbelt = {
        Enable = true,
        Command = 'seatbelt',
        Key = {
            Enable = true,
            Bind = 'b',
            Description = 'Toggle Seatbelt'
        }
    },
}

Config.Notify = {
    Types = {
        ['info'] = {
            title = 'Information',
            icon = 'fa-thin fa-info-circle',
            boxColor = 'rgba(0, 123, 255, 0.3)',
            titleColor = '#007bff',
        },
        ['success'] = {
            title = 'Success',
            icon = 'fa-thin fa-badge-check',
            boxColor = 'rgba(40, 167, 69, 0.3)',
            titleColor = '#28a745',
        },
        ['warn'] = {
            title = 'Warning',
            icon = 'fa-thin fa-exclamation-triangle',
            boxColor = 'rgba(255, 193, 7, 0.3)',
            titleColor = '#ffc107',
        },
        ['error'] = {
            title = 'Error',
            icon = 'fa-thin fa-exclamation-circle',
            boxColor = 'rgba(220, 53, 69, 0.3)',
            titleColor = '#dc3545',
        },
        ['bank'] = {
            title = 'Bank',
            icon = 'fa-thin fa-university',
            boxColor = 'rgba(23, 162, 184, 0.3)',
            titleColor = '#17a2b8',
        },
        ['sms'] = {
            title = 'SMS',
            icon = 'fa-thin fa-comment-alt',
            boxColor = 'rgba(0, 136, 204, 0.3)',
            titleColor = '#0088cc',
        },        
    },

    Colors = {
        Colors = {
            ['~r~'] = {
                type = 'color',
                replace = 'rgba(255, 0, 0, 1)',
            },
            ['~g~'] = {
                type = 'color',
                replace = 'rgba(37,211,102,1)',
            },
            ['~b~'] = {
                type = 'color',
                replace = 'rgba(29,161,242,1)',
            },
            ['~y~'] = {
                type = 'color',
                replace = 'rgba(255, 255, 0, 1)',
            },
            ['~w~'] = {
                type = 'color',
                replace = 'rgba(255, 255, 255, 1)',
            },
            ['~s~'] = {
                type = 'end',
                replace = '</span>',
            },
            ['\n'] = {
                type = 'end',
                replace = '<br>'
            },
        }
    }
}