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
Copy 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)',
},
}
}
};
Next we will share the Config.lua file that will allow our customers to configure the script as much as they want:
Copy 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>'
},
}
}
}