├── servername.PNG ├── MiniatureMenu.jpg ├── backmenu-min.PNG ├── esx_menu_default ├── html │ ├── fonts │ │ ├── v.ttf │ │ ├── xx.ttf │ │ ├── xxqttf │ │ ├── pdown.ttf │ │ ├── glitch.otf │ │ ├── pdown2.ttf │ │ ├── bankgothic.ttf │ │ ├── exoeegular.ttf │ │ ├── bankgothic2.ttf │ │ ├── signpainter.ttf │ │ └── ChaletLondonNineteenSixty.ttf │ ├── img │ │ └── cursor.png │ ├── ui.html │ ├── css │ │ └── app.css │ └── js │ │ ├── mustache.min.js │ │ └── app.js ├── README.md ├── __resource.lua ├── client │ └── main.lua └── LICENSE.txt └── README.md /servername.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/servername.PNG -------------------------------------------------------------------------------- /MiniatureMenu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/MiniatureMenu.jpg -------------------------------------------------------------------------------- /backmenu-min.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/backmenu-min.PNG -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/v.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/v.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/xx.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/xx.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/xxqttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/xxqttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/pdown.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/pdown.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/img/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/img/cursor.png -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/glitch.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/glitch.otf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/pdown2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/pdown2.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/bankgothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/bankgothic.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/exoeegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/exoeegular.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/bankgothic2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/bankgothic2.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/signpainter.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/signpainter.ttf -------------------------------------------------------------------------------- /esx_menu_default/html/fonts/ChaletLondonNineteenSixty.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RocwoDev/esx_menu_default-Native-UI-reskin/HEAD/esx_menu_default/html/fonts/ChaletLondonNineteenSixty.ttf -------------------------------------------------------------------------------- /esx_menu_default/README.md: -------------------------------------------------------------------------------- 1 | # ESX MENU DEFAULT GTA ONLINE STYLE 2 | 3 | 4 | ### Creator : ArdentLeKey 5 | ### github.com/ArdentLeKey/esx_menu_default-Native-UI-reskin 6 | 7 | source : https://github.com/ESX-Org/esx_menu_default -------------------------------------------------------------------------------- /esx_menu_default/html/ui.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /esx_menu_default/__resource.lua: -------------------------------------------------------------------------------- 1 | resource_manifest_version '44febabe-d386-4d18-afbe-5e627f4af937' 2 | 3 | description 'ESX Menu Default' 4 | 5 | version '1.0.2' 6 | 7 | client_scripts { 8 | 'client/main.lua' 9 | } 10 | 11 | ui_page { 12 | 'html/ui.html' 13 | } 14 | 15 | files { 16 | 'html/ui.html', 17 | 'html/css/app.css', 18 | 'html/js/mustache.min.js', 19 | 'html/js/app.js', 20 | 'html/fonts/pdown.ttf', 21 | 'html/fonts/bankgothic2.ttf', 22 | 'html/fonts/ChaletLondonNineteenSixty.ttf', 23 | 'html/fonts/signpainter.ttf', 24 | 'html/fonts/bankgothic.ttf', 25 | 'html/fonts/v.ttf', 26 | 27 | } 28 | 29 | dependencies { 30 | 'es_extended' 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # esx_menu_default-Native-UI-reskin 2 | ### *A reskin of esx_menu_default with a Native UI style* 3 | 4 | This is my reskin of esx_menu_default, you can find original file here : [original esx_menu_default](https://github.com/ESX-Org/esx_menu_default) 5 | 6 | Here a video presentation : 7 | 8 | [](https://youtu.be/QcXjGRKm5B0) 9 | 10 | ## Installation 11 | - Replace your `esx_menu_default` folder by this one 12 | - Nothing else ! 13 | 14 | ## Change the server name 15 | - Go to `\esx_menu_default\html\js` and open `app.js` 16 | - Replace at line 4, `"Your Server Name"` by your server name 17 | 18 |  19 | 20 | ## Support 21 | 22 | You can ask for help on these discords: 23 | 24 | [My discord](https://discord.gg/hEhcEE4) 25 | 26 | [Mutual aid discord](https://discord.gg/EzwYgdV) 27 | 28 | ## License 29 | [MIT](https://choosealicense.com/licenses/mit/) 30 | -------------------------------------------------------------------------------- /esx_menu_default/html/css/app.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: SignPainter; 3 | src: url('../fonts/pdown.ttf'); 4 | } 5 | 6 | @font-face { 7 | font-family: signpainter2; 8 | src: url('../fonts/signpainter.ttf'); 9 | } 10 | 11 | @font-face { 12 | font-family: vo; 13 | src: url('../fonts/bankgothic.ttf'); 14 | } 15 | 16 | @font-face { 17 | font-family: glitch; 18 | src: url('../fonts/pdown.ttf'); 19 | } 20 | 21 | @font-face { 22 | font-family: bg; 23 | src: url('../fonts/bankgothic2.ttf'); 24 | } 25 | 26 | @font-face { 27 | font-family: chalet; 28 | src: url('../fonts/ChaletLondonNineteenSixty.ttf'); 29 | } 30 | 31 | 32 | .menu { 33 | font-family: vo; 34 | min-width : 22.5vw; 35 | color : #fff; 36 | position : absolute; 37 | } 38 | 39 | 40 | .menu.align-left { 41 | left: 40; 42 | top: 50%; 43 | transform: translate(0, -50%); 44 | } 45 | 46 | .menu.align-top-left { 47 | left: 40; 48 | top: 40; 49 | } 50 | 51 | .menu.align-top { 52 | left: 50%; 53 | top: 40; 54 | transform: translate(-50%, 0); 55 | } 56 | 57 | .menu.align-top-right { 58 | right: 10; 59 | top: 40; 60 | } 61 | 62 | .menu.align-right { 63 | right: 40; 64 | top: 50%; 65 | transform: translate(0, -50%); 66 | } 67 | 68 | .menu.align-bottom-right { 69 | right: 40; 70 | bottom: 40; 71 | } 72 | 73 | .menu.align-bottom { 74 | left: 50%; 75 | bottom: 40; 76 | transform: translate(-50%, 0); 77 | } 78 | 79 | .menu.align-bottom-left { 80 | left: 40; 81 | bottom: 40; 82 | } 83 | 84 | .menu.align-center { 85 | left: 50%; 86 | top: 50%; 87 | transform: translate(-50%, -50%); 88 | } 89 | 90 | .menu .head { 91 | font-family: SignPainter; 92 | font-size: 59px; 93 | 94 | background: linear-gradient(to left bottom, #3A539B, #1F3A93 ); 95 | text-align : center; 96 | height : 90px; 97 | line-height : 105px; 98 | color : white; 99 | font-style: oblique; 100 | 101 | 102 | } 103 | 104 | #headtext { 105 | display: inline-block; 106 | margin-top: 2vh; 107 | text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px; 108 | } 109 | 110 | .menu .head_ { 111 | font-family: signpainter2; 112 | font-size: 3.5vw; 113 | 114 | background: -webkit-linear-gradient(-45deg, rgba(11,60,123,1) 0%,rgba(46,105,187,1) 100%); 115 | text-align : center; 116 | vertical-align: text-bottom; 117 | height : 10vh; 118 | color : white; 119 | } 120 | 121 | .menu .categorie { 122 | font-family: chalet; 123 | font-size : 1.75vh; 124 | height : 3.5vh; 125 | padding: 0 10px; 126 | color: rgb(46,105,187); 127 | background-color: rgba(0, 0, 0, 1); 128 | text-transform: uppercase; 129 | font-weight: medium; 130 | position: left; 131 | } 132 | 133 | #catText { 134 | margin-top: 0.75vh; 135 | display: inline-block; 136 | } 137 | 138 | #itemText { 139 | padding-top: 0.5vh; 140 | } 141 | 142 | .menu .categorie2 { 143 | font-family: glitch; 144 | font-size : 23px; 145 | height : 0px; 146 | line-height : 35px; 147 | padding: 0 10px; 148 | color: white ; 149 | background-color: rgba(0, 0, 0, 1); 150 | text-transform: uppercase; 151 | font-size: 18px; 152 | font-weight: bold; 153 | padding: 0 10px; 154 | position: relative; 155 | left: 250px; 156 | top: -30px; 157 | 158 | } 159 | 160 | .menu .menu-items { 161 | max-height : 35vh; 162 | overflow-y : hidden; 163 | background-color: rgba(0, 0, 0, 0.6); 164 | } 165 | .menu .menu-items .menu-item { 166 | display : block; 167 | font-size : 2vh; 168 | height : 3vh; 169 | color : white; 170 | text-align : left; 171 | padding: 0 10px; 172 | display: flex; 173 | justify-content: space-between; 174 | } 175 | 176 | .menu .menu-items .menu-item.selected { 177 | background-color: white; 178 | color :black; 179 | } 180 | 181 | 182 | -------------------------------------------------------------------------------- /esx_menu_default/client/main.lua: -------------------------------------------------------------------------------- 1 | ESX = nil 2 | 3 | Citizen.CreateThread(function() 4 | 5 | while ESX == nil do 6 | TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end) 7 | Citizen.Wait(0) 8 | end 9 | 10 | local Keys = { 11 | ["ESC"] = 322, ["F1"] = 288, ["F2"] = 289, ["F3"] = 170, ["F5"] = 166, ["F6"] = 167, ["F7"] = 168, ["F8"] = 169, ["F9"] = 56, ["F10"] = 57, 12 | ["~"] = 243, ["1"] = 157, ["2"] = 158, ["3"] = 160, ["4"] = 164, ["5"] = 165, ["6"] = 159, ["7"] = 161, ["8"] = 162, ["9"] = 163, ["-"] = 84, ["="] = 83, ["BACKSPACE"] = 177, 13 | ["TAB"] = 37, ["Q"] = 44, ["W"] = 32, ["E"] = 38, ["R"] = 45, ["T"] = 245, ["Y"] = 246, ["U"] = 303, ["P"] = 199, ["["] = 39, ["]"] = 40, ["ENTER"] = 18, 14 | ["CAPS"] = 137, ["A"] = 34, ["S"] = 8, ["D"] = 9, ["F"] = 23, ["G"] = 47, ["H"] = 74, ["K"] = 311, ["L"] = 182, 15 | ["LEFTSHIFT"] = 21, ["Z"] = 20, ["X"] = 73, ["C"] = 26, ["V"] = 0, ["B"] = 29, ["N"] = 249, ["M"] = 244, [","] = 82, ["."] = 81, 16 | ["LEFTCTRL"] = 36, ["LEFTALT"] = 19, ["SPACE"] = 22, ["RIGHTCTRL"] = 70, 17 | ["HOME"] = 213, ["PAGEUP"] = 10, ["PAGEDOWN"] = 11, ["DELETE"] = 178, 18 | ["LEFT"] = 174, ["RIGHT"] = 175, ["TOP"] = 27, ["DOWN"] = 173, 19 | ["NENTER"] = 201, ["N4"] = 108, ["N5"] = 60, ["N6"] = 107, ["N+"] = 96, ["N-"] = 97, ["N7"] = 117, ["N8"] = 61, ["N9"] = 118 20 | } 21 | 22 | local GUI = {} 23 | GUI.Time = 0 24 | local MenuType = 'default' 25 | 26 | local openMenu = function(namespace, name, data) 27 | -- number = #data.elements 28 | -- table.insert(data, number) 29 | SendNUIMessage({ 30 | action = 'openMenu', 31 | namespace = namespace, 32 | name = name, 33 | data = data, 34 | }) 35 | 36 | -- FreezeEntityPosition(PlayerPedId(), true) 37 | -- SetPedCombatAttributes(PlayerPedId(), 292, true) 38 | end 39 | 40 | local closeMenu = function(namespace, name) 41 | 42 | SendNUIMessage({ 43 | action = 'closeMenu', 44 | namespace = namespace, 45 | name = name, 46 | data = data, 47 | }) 48 | -- FreezeEntityPosition(PlayerPedId(), false) 49 | -- SetPedCombatAttributes(PlayerPedId(), 292, false) 50 | end 51 | 52 | ESX.UI.Menu.RegisterType(MenuType, openMenu, closeMenu) 53 | 54 | RegisterNUICallback('menu_submit', function(data, cb) 55 | local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name) 56 | 57 | if menu.submit ~= nil then 58 | menu.submit(data, menu) 59 | PlaySoundFrontend(-1, "SELECT", "HUD_FRONTEND_DEFAULT_SOUNDSET", false) 60 | end 61 | 62 | cb('OK') 63 | end) 64 | 65 | RegisterNUICallback('menu_cancel', function(data, cb) 66 | 67 | local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name) 68 | 69 | if menu.cancel ~= nil then 70 | menu.cancel(data, menu) 71 | PlaySoundFrontend(-1, "CANCEL", "HUD_FRONTEND_DEFAULT_SOUNDSET", false) 72 | end 73 | 74 | cb('OK') 75 | end) 76 | 77 | RegisterNUICallback('menu_change', function(data, cb) 78 | 79 | local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name) 80 | 81 | for i=1, #data.elements, 1 do 82 | 83 | menu.setElement(i, 'value', data.elements[i].value) 84 | 85 | if data.elements[i].selected then 86 | menu.setElement(i, 'selected', true) 87 | PlaySoundFrontend(-1, "NAV_UP_DOWN", "HUD_FRONTEND_DEFAULT_SOUNDSET", false) 88 | else 89 | menu.setElement(i, 'selected', false) 90 | end 91 | 92 | end 93 | 94 | if menu.change ~= nil then 95 | menu.change(data, menu) 96 | end 97 | 98 | cb('OK') 99 | end) 100 | 101 | Citizen.CreateThread(function() 102 | --GUI.Time = GetGameTimer() 103 | while true do 104 | 105 | Wait(0) 106 | 107 | if IsControlPressed(0, 191) and (GetGameTimer() - GUI.Time) > 150 then -- 150 et Keys['ENTER'] 108 | 109 | SendNUIMessage({ 110 | action = 'controlPressed', 111 | control = 'ENTER' 112 | }) 113 | 114 | GUI.Time = GetGameTimer() 115 | 116 | end 117 | 118 | if IsControlPressed(0, Keys['BACKSPACE']) and (GetGameTimer() - GUI.Time) > 150 then 119 | 120 | SendNUIMessage({ 121 | action = 'controlPressed', 122 | control = 'BACKSPACE' 123 | }) 124 | 125 | GUI.Time = GetGameTimer() 126 | 127 | end 128 | 129 | if IsDisabledControlPressed(0, Keys['TOP']) and (GetGameTimer() - GUI.Time) > 150 then 130 | 131 | SendNUIMessage({ 132 | action = 'controlPressed', 133 | control = 'TOP' 134 | }) 135 | 136 | GUI.Time = GetGameTimer() 137 | 138 | end 139 | 140 | if IsControlPressed(0, Keys['DOWN']) and (GetGameTimer() - GUI.Time) > 150 then 141 | 142 | SendNUIMessage({ 143 | action = 'controlPressed', 144 | control = 'DOWN' 145 | }) 146 | 147 | GUI.Time = GetGameTimer() 148 | 149 | end 150 | 151 | if IsControlPressed(0, Keys['LEFT']) and (GetGameTimer() - GUI.Time) > 150 then 152 | 153 | SendNUIMessage({ 154 | action = 'controlPressed', 155 | control = 'LEFT' 156 | }) 157 | 158 | GUI.Time = GetGameTimer() 159 | 160 | end 161 | 162 | if IsControlPressed(0, Keys['RIGHT']) and (GetGameTimer() - GUI.Time) > 150 then 163 | 164 | SendNUIMessage({ 165 | action = 'controlPressed', 166 | control = 'RIGHT' 167 | }) 168 | 169 | GUI.Time = GetGameTimer() 170 | 171 | end 172 | 173 | end 174 | end) 175 | 176 | end) 177 | -------------------------------------------------------------------------------- /esx_menu_default/html/js/mustache.min.js: -------------------------------------------------------------------------------- 1 | (function defineMustache(global,factory){if(typeof exports==="object"&&exports&&typeof exports.nodeName!=="string"){factory(exports)}else if(typeof define==="function"&&define.amd){define(["exports"],factory)}else{global.Mustache={};factory(global.Mustache)}})(this,function mustacheFactory(mustache){var objectToString=Object.prototype.toString;var isArray=Array.isArray||function isArrayPolyfill(object){return objectToString.call(object)==="[object Array]"};function isFunction(object){return typeof object==="function"}function typeStr(obj){return isArray(obj)?"array":typeof obj}function escapeRegExp(string){return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function hasProperty(obj,propName){return obj!=null&&typeof obj==="object"&&propName in obj}var regExpTest=RegExp.prototype.test;function testRegExp(re,string){return regExpTest.call(re,string)}var nonSpaceRe=/\S/;function isWhitespace(string){return!testRegExp(nonSpaceRe,string)}var entityMap={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};function escapeHtml(string){return String(string).replace(/[&<>"'`=\/]/g,function fromEntityMap(s){return entityMap[s]})}var whiteRe=/\s*/;var spaceRe=/\s+/;var equalsRe=/\s*=/;var curlyRe=/\s*\}/;var tagRe=/#|\^|\/|>|\{|&|=|!/;function parseTemplate(template,tags){if(!template)return[];var sections=[];var tokens=[];var spaces=[];var hasTag=false;var nonSpace=false;function stripSpace(){if(hasTag&&!nonSpace){while(spaces.length)delete tokens[spaces.pop()]}else{spaces=[]}hasTag=false;nonSpace=false}var openingTagRe,closingTagRe,closingCurlyRe;function compileTags(tagsToCompile){if(typeof tagsToCompile==="string")tagsToCompile=tagsToCompile.split(spaceRe,2);if(!isArray(tagsToCompile)||tagsToCompile.length!==2)throw new Error("Invalid tags: "+tagsToCompile);openingTagRe=new RegExp(escapeRegExp(tagsToCompile[0])+"\\s*");closingTagRe=new RegExp("\\s*"+escapeRegExp(tagsToCompile[1]));closingCurlyRe=new RegExp("\\s*"+escapeRegExp("}"+tagsToCompile[1]))}compileTags(tags||mustache.tags);var scanner=new Scanner(template);var start,type,value,chr,token,openSection;while(!scanner.eos()){start=scanner.pos;value=scanner.scanUntil(openingTagRe);if(value){for(var i=0,valueLength=value.length;i