# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jgs.gitbook.io/jgsdev/docs/hud/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.