index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="newui/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hider">
<div class="mainMenu">
<div class="gradient"></div>
<div class="options">
<div class="optionLabel"><img src="newui/assets/mainOptions.png"></div>
<div class="child">
<div class="text">Optimize Peds</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="pedsON">ON</div>
<div class="switchOption selectedOFF" id="pedsOFF">OFF</div>
</div>
<div class="switchIndicator" id="peds"></div>
</div>
</div>
<div class="child">
<div class="text">Optimize Vehicles</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="vehiclesON">ON</div>
<div class="switchOption selectedOFF" id="vehiclesOFF">OFF</div>
</div>
<div class="switchIndicator" id="vehicles"></div>
</div>
</div>
<div class="child">
<div class="text">Optimize Objects</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="objectsON">ON</div>
<div class="switchOption selectedOFF" id="objectsOFF">OFF</div>
</div>
<div class="switchIndicator" id="objects"></div>
</div>
</div>
<div class="child">
<div class="text">Remove Particles</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="particlesON">ON</div>
<div class="switchOption selectedOFF" id="particlesOFF">OFF</div>
</div>
<div class="switchIndicator" id="particles"></div>
</div>
</div>
</div>
<div class="options" id="center">
<div class="optionLabel"><img src="newui/assets/otherOptions.png"></div>
<div class="child">
<div class="text">Disable Broken Glass</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="brokenON">ON</div>
<div class="switchOption selectedOFF" id="brokenOFF">OFF</div>
</div>
<div class="switchIndicator" id="broken"></div>
</div>
</div>
<div class="child">
<div class="text">Clearing Ped dirt</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="pedON">ON</div>
<div class="switchOption selectedOFF" id="pedOFF">OFF</div>
</div>
<div class="switchIndicator" id="ped"></div>
</div>
</div>
<div class="child">
<div class="text">Turn various optimizations</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="unnecessaryON">ON</div>
<div class="switchOption selectedOFF" id="unnecessaryOFF">OFF</div>
</div>
<div class="switchIndicator" id="unnecessary"></div>
</div>
</div>
</div>
<div class="options" style="margin-right: 0;">
<div class="optionLabel"><img src="newui/assets/worldOptions.png"></div>
<div class="child">
<div class="text">Disable Rain and Wind</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="rainON">ON</div>
<div class="switchOption selectedOFF" id="rainOFF">OFF</div>
</div>
<div class="switchIndicator" id="rain"></div>
</div>
</div>
<div class="child" >
<div class="text">Optimize Shadows</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="shadowsON">ON</div>
<div class="switchOption selectedOFF" id="shadowsOFF">OFF</div>
</div>
<div class="switchIndicator" id="shadows"></div>
</div>
</div>
<div class="child">
<div class="text">Optimize Lights</div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="lightsON">ON</div>
<div class="switchOption selectedOFF" id="lightsOFF">OFF</div>
</div>
<div class="switchIndicator" id="lights"></div>
</div>
</div>
<div class="child">
<div class="text">Set Textures to Low<small>(experimental)</small></div>
<div class="switch">
<div class="flex">
<div class="switchOption" id="lowTextureON">ON</div>
<div class="switchOption selectedOFF" id="lowTextureOFF">OFF</div>
</div>
<div class="switchIndicator" id="lowTexture"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="newui/script.js"></script>
</html>
script.js
$(".switchOption").click(function() {
let value = $(this).attr("id")
let boolean = false
if (value.includes("ON")) {
boolean = true
value = value.replace("ON", "")
$(`#${value}`).css("margin-left", "-1px");
$(`#${value}OFF`).removeClass("selectedOFF");
$(`#${value}ON`).addClass("selectedON");
} else {
value = value.replace("OFF", "")
$(`#${value}`).css("margin-left", "39px");
$(`#${value}OFF`).addClass("selectedOFF");
$(`#${value}ON`).removeClass("selectedON");
}
$.post(`https://${GetParentResourceName()}/changeOption`, JSON.stringify({ option: value, boolean: boolean}));
});
window.addEventListener('message', function (event) {
let action = event.data.action
if (action == "openMenu") {
let currentOptions = event.data.settings
for (var k in currentOptions){
if (currentOptions[k] == true) {
$(`#${k}`).css("margin-left", "-1px");
$(`#${k}OFF`).removeClass("selectedOFF");
$(`#${k}ON`).addClass("selectedON");
} else {
$(`#${k}`).css("margin-left", "39px");
$(`#${k}OFF`).addClass("selectedOFF");
$(`#${k}ON`).removeClass("selectedON");
}
}
$(".hider").fadeIn(250)
}
})
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$(".hider").fadeOut(250)
$.post(`https://${GetParentResourceName()}/exitMenu`);
}
});
style.css
body {
color:white;
padding: 0;
margin: 0;
}
* {
user-select: none;
}
.hider {
display: none;
width: 100vw;
height: 100vh;
}
@font-face {
font-family: "Gilroy";
src: url("assets/Gilroy-SemiBold.ttf");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("assets/Gilroy-Bold.ttf");
font-weight: 200;
font-style: normal;
font-display: swap;
}
.mainMenu {
position: absolute;
width: 100%;
height: 100vh;
background: linear-gradient(180deg, rgba(10, 11, 18, 0.9) .5%, rgba(10, 11, 18, 0) 100%);
display: flex;
justify-content: center;
overflow: scroll;
}
.mainMenu::-webkit-scrollbar {
display: none;
}
.options {
margin-right: 15px;
margin-top: 15px;
height: fit-content;
}
.optionsLabel {
margin-bottom: 10px;
}
.child {
padding: 10px;
padding-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(123, 144, 183, 0.15);
border-radius: 5px;
font-family: "Gilroy";
font-weight: 200;
font-size: 20px;
}
.child .text {
margin-left: 6px;
}
.switch {
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.247);
border-radius: 6px;
margin-right: 6px;
width: 75px;
height: 25px;
}
.switch .flex {
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.switchOption {
font-family: 'Gilroy';
font-weight: 100;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
z-index: 11;
transition: 0.2s;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.selectedON {
color: #ffffff;
}
.selectedOFF {
color: #ffffff;
}
.switchIndicator {
position: absolute;
background: linear-gradient(295.75deg, rgba(255, 26, 53, 0.27) 0%, rgba(255, 26, 53, 0) 100%);
border: 1px solid #FF1A35;
border-radius: 6px;
height: 25px;
width: 35px;
margin-top: -26px;
/* margin-left: -1px; */
margin-left: 39px;
z-index: 10;
transition: 0.35s;
}
small {
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
margin-left: 5px;
}
@media screen and (max-width: 1185px) {
.optionLabel img {
width: 300px;
}
.child {
font-size: 15px;
padding: 5px;
padding-right: 5px;
}
small {
font-size: 8px;
}
}
@media screen and (max-width: 950px) {
.mainMenu {
flex-wrap: wrap;
align-content: flex-start;
background-color: rgba(10, 11, 18, 0.7);
}
#center {
order: 3;
}
}
config.lua
Config = {}
Config.useModernUI = true -- In march 2023 the script was reworked and the new, modern ui has been released. We're supporting the old version, so you can switch here to old ui. To make it, just set it to false.
Config.GlobalSettings = {
["peds"] = false,
["vehicles"] = false,
["objects"] = false,
["particles"] = false,
["rain"] = false,
["shadows"] = false,
["lights"] = false,
["broken"] = false,
["unnecessary"] = false,
["ped"] = false,
["lowTexture"] = false,
}
--
Config.Key = "F11"
Config.DisableKeybind = false
Config.CommandString = "fps"
-- Exports:
-- 1. setSetting:
-- exports["17mov_FpsBooster"]:setSetting("peds", true)
RegisterNetEvent("fpsBooster:OpenMenu", function()
ExecuteCommand(Config.CommandString)
end)
Kolla på koden och fixa en client.lua