> For the complete documentation index, see [llms.txt](https://jgs.gitbook.io/jgsdev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jgs.gitbook.io/jgsdev/docs/hud/configuration.md).

# Configuration

### 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.

{% code title="web/js/tailwind.config.js" %}

```javascript
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)',
            },
        }
    }
};
```

{% endcode %}

### 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:

{% code title="config.lua" %}

```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>'
            },
        }
    }
}
```

{% endcode %}