<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta3/css/all.css">
	<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
	<script src=https://code.jquery.com/ui/1.13.1/jquery-ui.js></script>
	<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js></script>
	<script src=https://cdn.jsdelivr.net/npm/jquery-wheelcolorpicker@3.0.9/jquery.wheelcolorpicker.min.js></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
	<script src=https://cdn.jsdelivr.net/npm/simple-notify@0.5.4/dist/simple-notify.min.js></script>
    <style>
				@import url(https://fonts.googleapis.com/css2?family=Tajawal&display=swap);
                @import url('nui://vrp/Lexme_Controls/Lexme-Config.css');
@import 'animate.compat.css';
* {
    user-select: none;
    -webkit-user-drag: none;
    outline: 0;
    font-family: 'Cairo',sans-serif;
}
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#Hud .watermarkBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}
#Hud .watermark {
    margin-top: 5px;
    font-size: 20px;
    text-align: center;
}
#Hud .watermark font {
    font: 1.5em Tajawal,sans-serif
}
#Hud .Time {
    margin-top: 5px;
    text-align: center;
    font: 1em  Tajawal,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-family: Tajawal;
    align-items: center;
    left: 12.5vw;
    top: 34.2vw;
    background-color: #0000003b;
    border: solid 2px var(--Hud-Style);
    border-radius: 100px;
    bottom: 2vh;
    color: #f1ebeb;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 15px;
    position: absolute;
    height: 0px;
    width: 115px;
    box-shadow: var(--Hud-Style) 0 0.0300em 2px,var(--Hud-Style) 0 0.025em 0.4em,var(--Hud-Style) 0 0 0 1px inset;
}
#Hud .Online {
    margin-top: 5px;
    text-align: center;
    font: 1em  Tajawal,sans-serif;
    font-weight: 600;
}
#Hud #cinematic {
    border-top: solid 17vh;
    border-bottom: solid 19vh;
    height: 68vh;
    display: none;
}
#Hud .ServerAvater {
    position: absolute;
    left: 84.55vw;
    top: 3vh;
    border-radius: 60px;
    border: solid 2px var(--Hud-Style);
    width: 120px;
    height: 120px;
    z-index: 8;
    box-shadow: var(--Hud-Style) 0 0.0625em 3px,var(--Hud-Style) 0 0.025em 0.5em,rgb(255 255 255 / 10%) 0 0 0 1px inset;
    
}
#Hud .ServerAvater img {
    display: flex;
    width: 115px;
    margin-top: 3px;
    margin-left: 3px;
    
}
#Hud #id {
    position: absolute;
    top: 19%;
    right: 41px;
}
#servername {
    position: absolute;
    top: 15%;
    right: 149px;
}
#Hud #Job {
    position: absolute;
    top: 19%;
    right: 229px;    
}
#Hud #wallet {
    position: absolute;
    top: 23%;
    right: 41px;
}


#Hud #Bank {
    position: absolute;
    top: 23%;
    right: 229px;  
}
#Hud #dirty {
    position: absolute;
    top: 109.5vh;
    left: 89.0vw;
}
#Hud .PlayerInfo {
    position: relative;
    display: flex;
    height: 30px;
    width: 179px;
    border-radius: 100px;
    padding: 0px 0px 0px 0px;
    font-weight: 555;
    background-image: linear-gradient(to left,rgba(19, 18, 18, 0.219),rgba(19, 18, 18, 0.219));
    border: solid 2px var(--Hud-Style);
    box-shadow: var(--Hud-Style) 0 0.0300em 2px,var(--Hud-Style) 0 0.025em 0.4em,var(--Hud-Style) 0 0 0 1px inset;
   
}
#Hud .PlayerInfo i {
    display: flex;
    align-items: center;
    color: #ffffff;
    margin-top: 0%;
    margin-left: 5%;
    
    
    
}
#Hud .PlayerInfo span {
    display: flex;
    align-items: center;
    font-family: Tajawal;
    justify-content: space-around;
    width: auto !important;
    min-width: 110px;
    padding-right: 20px;
    height: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0px 0px 6px rgb(0 0 0 / 63%),0 8px 13px rgb(0 0 0 / 10%),0 18px 23px rgb(0 0 0 / 10%);
}
#Hud .OnlineJobs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    left: 95vw;
    top: 40vh;
}
#Hud .OnlineJobs .Online {
    display: flex;
    border-radius: 50px;
    margin-top: 10px;
    padding: 5px 0px 5px 0px;
    width: fit-content;
    border: solid 1px rgba(88,88,88,0.5);
    background-image: linear-gradient(to right,rgba(255,0,0,0),rgb(117 117 117 / 50%));
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px inset;
}
#Hud .OnlineJobs .Online span {
    color: #fff;
}
#Hud .OnlineJobs .Online i {
    color: #fff;
    margin-left: 10px;
}
#Hud .Weapon {
    display: none;
    position: absolute;
    left: 165vh;
    top: 50vw;
}
#Hud .Weapon .img img {
    width: 110px;
    height: 40px;
}
#Hud .Weapon .ammo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
}
#Hud .Weapon .ammo img {
    width: 20px;
    height: 25px;
    margin-right: 7px;
}
#Hud .Weapon .ammo span {
    color: #fff;
    font-weight: 500;
}
#Hud .HotKays {
    position: absolute;
    left: 0.3vw;
    top: 40vh;
}
#Hud .HotKays .HotKay {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
#Hud .HotKays .HotKay .Kay {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border: solid 2px #ffffffb4;
    border-radius: 10px;
    width: 30px;
    height: 30px;
}
#Hud .HotKays .HotKay span {
    color: #fff;
    font-family: Tajawal,sans-serif
}
#Hud .outline {
    animation: slide-in-elliptic-right-fwd .7s cubic-bezier(.25,.46,.45,.94) both;
    border: none;
    border-radius: 15px;
    border-left: 15px;
    border-right: 15px;
    position: fixed;
    bottom: 8.5vh;
    left: 5.8vh;
    width: 29.629vh;
    text-align: center;
    z-index: -1;
}
#Hud .outline .mapborder {
    border-left: 15px;
    border-right: 15px;
    width: 26.851vh;
    height: 25.0vh;
    border: 4px solid var(--Hud-Style);
    border-radius: 50%;
    position: relative;
}
#Hud .postals-container {
    font-family: Tajawal;
    align-items: center;
    left: 4.5vw;
    top: 34.5vw;
    background-color: #0000003b;
    border: solid 2px var(--Hud-Style);
    border-radius: 50px;
    bottom: 2vh;
    color: #f1ebeb;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 15px;
    position: absolute;
    height: 0px;
    width: 115px;
    box-shadow: var(--Hud-Style) 0 0.0300em 2px,var(--Hud-Style) 0 0.025em 0.4em,var(--Hud-Style) 0 0 0 1px inset;
}
#Hud .postals-container #nearest-postal,#Hud .postals-container .nearest-postal {
    font: 1em Tajawal,sans-serif;
    text-shadow: 2px 2px 3px rgba(0,0,0,.45);
    font-weight: 700;
    margin: 5px 10px
}
#Hud .postals-container .nearest-postal {
    color: rgba(255,255,255,.9);
    font-size: 1.1em
}
#Hud #nearest-postal {
    color: rgb(255, 255, 255);
    font-size: 1em;
    text-align: center
}
#Hud #health {
    position: absolute;
    top: 91vh;
    left: 3.5vw;
}
#Hud #armor {
    position: absolute;
    top: 91vh;
    left: 6.5vw;
}
#Hud #hunger {
    position: absolute;
    top: 91vh;
    left: 9.5vw;
}
#Hud #thirst {
    position: absolute;
    top: 91vh;
    left: 12.5vw;
}
#Hud #stamina {
    position: absolute;
    top: 91vh;
    left: 15.5vw;
}
#Hud .progressplayer {
    transition: stroke-dashoffset .35s ease 0s;
    transform: rotate(270deg);
    transform-origin: 50% 50%;
    stroke-linecap: round;
    border-radius: 100%;
    border: 7px solid #fff
}
#Hud .progressplayer image {
    fill: #f5f5f5;
}
.carStats {
    display: none;
}
.carStats .stat {
    background: linear-gradient(to top,#5b5b5b 90%,#1bd295 90%);
    text-align: right
}
.carStats .stat .icon {
    float: right;
    right: 0;
    left: 15px
}
.fa-icon {
    position: absolute;
    left: 5%
}
.carStats .stat span {
    white-space: nowrap;
    right: 20px
}
#gas img {
    width: 40%;
    margin-left: -1px
}
#damage img {
    width: 40%;
    margin-left: 0
}
#air img {
    margin-left: -2px
}
.progress {
    -webkit-transition: .35s stroke-dashoffset;
    -o-transition: .35s stroke-dashoffset;
    transition: .35s stroke-dashoffset;
    -webkit-transform: rotate(140deg);
    -ms-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
.backgroundCircle,.outer {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
.dials {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 45% 45% d
}
.dials span {
    color: rgba(255,255,255,.8);
    font-size: 12px
}
.dials svg {
    opacity: 1 !important
}
#idnumber {
    fill: #f5f5f5;
    overflow: hidden;
    font: 14px Arial,Helvetica,sans-serif;
}
.dials span {
    opacity: 0
}
.dials span:after {
    position: relative;
    content: "%";
    font-size: 7px
}
.dials g {
    -webkit-transform: translate(16px,13px);
    -ms-transform: translate(16px,13px);
    transform: translate(16px,13px)
}
.counter {
    position: absolute;
    left: 21.8vw;
    top: 84vh;
}
.counter .counter2 {
    height: 200%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}
.counter .counter2 div {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px
}
.counter .counter2 div svg {
    opacity: .2
}
.counter .counter2 .active svg {
    opacity: .8
}
.counter .counter2 .speedometer {
    width: 100px;
    height: 100px;
    text-align: center;
}
.counter .counter2 .speedometer svg {
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: scale(2) translate(-25%,-25%);
    -ms-transform: scale(2) translate(-25%,-25%);
    transform: scale(2) translate(-25%,-25%)
}
.counter .counter2 .speedometer .outer {
    opacity: .3;
    -webkit-transform: rotate(180deg) scale(1.2);
    -ms-transform: rotate(180deg) scale(1.2);
    transform: rotate(180deg) scale(1.2)
}
.counter .counter2 .speedometer .text {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    text-shadow: 1px 1px 3px rgba(0,0,0,.75);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0
}
.counter .counter2 .speedometer .text .speed {
    color: #fff;
    display: block;
    text-shadow: 1px 1px 3px #000;
    font: 20px Tajawal,sans-serif
}
.counter .counter2 .speedometer .text .mph {
    color: #fff;
    display: block;
    text-transform: uppercase;
    font: 12px sans-serif
}
#fuel {
    position: absolute;
    left: 22.5vw;
    top: 89vh;
}
#seatbelt {
    position: absolute;
    left: 24.5vw;
    top: 89vh;
}
#lights {
    position: absolute;
    left: 26.5vw;
    top: 89vh;
}
.Panl {
    display: none;
    position: fixed;
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px;
    background: rgba(23,23,23,.45);
    border: 1px solid #fff;
    border-radius: 15px;
    width: 600px;
    height: 420px;
    left: 35vw;
    top: 25vh;
    display: block;
    animation: flipInX 1s;
}
.header {
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
    height: 30px;
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px
}
.header .options {
    display: none;
    position: absolute;
    left: 0.2vw;
    top: 3.4vh;
    color: #fff;
    background-color: teal;
    background: rgba(23,23,23,0.692);
    width: 8vw;
    border-radius: 5px;
    z-index: 99;
}
#color-position {
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
}
.header .options .options-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 888;
}
#button-Share:hover {
    background-color: teal;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#button-color:hover {
    background-color: teal;
}
#button-position:hover {
    background-color: teal;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.header .options .options-button img {
    width: 20px;
    margin-right: 5px;
}
.header .options .options-button span {
    margin-top: 5px;
    margin-bottom: 5px;
}
#close {
    margin-right: 6px;
    order: 3;
    margin-top: 3px;
    cursor: pointer
}
#custom-options {
    position: relative;
    order: 1;
    margin-left: 8px;
    margin-top: 5px;
    cursor: pointer
}
.white-icon {
    filter: invert(100%)
}
.seatbelt-img {
    filter: invert(25%) sepia() saturate(10000%) hue-rotate(0deg)
}
#title-hud {
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    order: 2;
    font: 16px Tajawal
}
.row-content {
    position: absolute;
    left: 2vw;
    bottom: 130px
}
.row {
    display: table-row;
    border-top: solid #fff 1px
}
.toggle-button-cover {
    display: table-cell;
    position: relative;
    width: 200px;
    box-sizing: border-box
}
.knobs,.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}
.toggle-button-cover img {
    position: relative;
    width: 25px;
    top: .8vw;
    right: 15px
}
.button {
    position: relative;
    top: 50%;
    width: 73px;
    height: 32px;
    margin: -18px auto 0;
    overflow: hidden
}
.button.r,.button.r .layer {
    border-radius: 100px;
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px
    
}
.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin-right: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3
}
.knobs {
    z-index: 2;
}
.layer {
    width: 100%;
    background-color: #c5c5c587;
    box-shadow: 2px 2px 5px rgba(139, 200, 240, 0.658); 
    transition: .3s ease all;
    z-index: 1
}
#button-4 .knobs:before {
    content: "ON";
    position: absolute;
    top: 2px;
    left: 40px;
    width: 20px;
    height: 10px;
    color: #fff;
    text-align: center;
    padding: 9px 4px;
    background-color: #14a502;
    border-radius: 50%;
    transition: .3s ease all,left .3s cubic-bezier(.18,.89,.35,1.15);
    font: bold 10px/1 sans-serif
}
#button-4 .checkbox:active+.knobs:before {
    width: 46px;
    margin-left: -26px;
    border-radius: 100px
}
#button-4 .checkbox:checked:active+.knobs:before {
    margin-left: 0px
}
#button-4 .checkbox:checked+.knobs:before {
    content: "OFF";
    left: 4px;
    background-color: #f44336
}
#button-4 .checkbox:checked~.layer {
    background-color: #c5c5c587
}
#selection {
    position: absolute;
    left: 90px;
    top: 340px;
    text-align-last: center;
    text-align: center;
    color: #fff;
    width: 165px;
    height: 25px;
    border-radius: 10px;
    background: #c5c5c587;
    text-shadow: #000 1px 1px 5px;
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px;
    overflow: hidden;
    cursor: pointer;
    font: 14px Tajawal,sans-serif
}
#selection option {
    font-size: 11px;
    background-color: #00000087;
    font: 10px Tajawal,sans-serif;
}
.color-block {
    max-width: 300px;
    width: 10%;
    box-sizing: border-box;
    margin-bottom: 10px
}
.jQWCP-wWidget {
    position: relative;
    box-sizing: content-box;
    border: solid #fff 1px;
    padding: 5px;
    z-index: 1001;
    width: 166px !important;
    touch-action: none
}
.jQWCP-wWidget:focus {
    box-shadow: 0 0 10px 2px var(--pinkredcolord)
}
.jQWCP-wWidget.jQWCP-block {
    position: absolute;
    left: 350px;
    top: 310px;
    border-radius: 15px
}
.jQWCP-wWheel {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    float: left;
    width: 65px;
    height: 65px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: solid 2px #979797;
    margin: 5px;
    margin-right: 10px;
    transition: border .15s;
    cursor: crosshair;
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px
}
.jQWCP-wWheelOverlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    -webkit-border-radius: 90px;
    -moz-border-radius: 50%;
    border-radius: 50%
}
.jQWCP-wWheelCursor {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px;
    cursor: crosshair;
    border: solid 2px #fff;
    box-shadow: 1px 1px 2px #000;
    border-radius: 50%
}
.jQWCP-slider-wrapper,.jQWCP-wPreview {
    position: relative;
    width: 13px;
    height: 80px;
    float: left;
    margin-top: 5px;
    margin-right: 9px
}
.jQWCP-slider-wrapper:last-child,.jQWCP-wPreview:last-child,.jQWCP-wWheel:last-child {
    margin-right: 0
}
.jQWCP-slider,.jQWCP-wPreviewBox {
    position: relative;
    width: 85%;
    height: 100%;
    border: solid 1px #7b7b7b;
    margin: -1px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    transition: border .15s;
    box-shadow: rgb(0 0 0 / 25%) 0 .0625em 3px,rgb(0 0 0 / 55%) 0 .025em .5em,rgb(255 255 255 / 10%) 0 0 0 1px
}
.jQWCP-scursor {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 6px;
    margin: -5px -1px -5px -3px;
    cursor: crosshair;
    border: solid 2px #fff;
    box-shadow: 1px 1px 2px #000;
    border-radius: 4px
}
.jQWCP-wAlphaSlider,.jQWCP-wPreviewBox {
    background: url(data:image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEVAQEB/f39eaJUuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYRBDgK9dKdMgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAARSURBVAjXY/jPwIAVYRf9DwB+vw/x6vMT1wAAAABJRU5ErkJggg==) center center
}
.jQWCP-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000
}
	</style>
</head>
<body>
	<script>
		Ai0z = {};
$("body").html(`
<div id="Hud">
        <div class="watermarkBox cin">
            <div id="watermark"><div class="watermark" id="watermarkx"></div></div>
            <div class="Time" id="time">10:40</div>
            <div class="Online" id="count">Online: 1</div>
        </div>

        <div id="cinematic"></div>
        <div class="ServerAvater cin" id="serverlogo">
            <img src="https://i.ibb.co/4pQq5c7/512.gif" alt="">
        </div>
        <div id="Job" class="Info cin">
            <div class="PlayerInfo">
                <i class="fas fa-briefcase"></i>
                <span>Job</span>
            </div>
        </div>
        <div id="Bank" class="Info cin">
            <div class="PlayerInfo">
                <i class="fa fa-university"></i>
                <span>Bank</span>
            </div>
        </div>
        <div id="wallet" class="Info cin">
            <div class="PlayerInfo">
                <i class="fas fa-dollar-sign"></i>
                <span>wallet</span>
            </div>
        </div>
        <div id="id" class="Info cin">
            <div class="PlayerInfo">
                <i class="fas fa-id-card"></i>
                <span>id</span>
            </div>
        </div>
        <div id="dirty" class="Info cin">
            <div class="PlayerInfo">
                <i class="fas fa-user-ninja"></i>
                <span>dirty</span>
            </div>
        </div>
        <div id="servername" class="Info cin">
        <div class="PlayerInfo">
            <i class="fa-solid fa-star"></i>
            <span>Crous Land</span>
        </div>
    </div> 


 


        <div class="OnlineJobs cin" id="jobs">
			
		</div>

        <div class="Weapon cin" id="Weapon">
            <div class="img">
                <img src="./img/weapons/WEAPON_ADVANCEDRIFLE.png" alt="">
            </div>
            <div class="ammo">
                <img src="./img/weapons/weapon-bullets.png" alt="">
                <span>100/7</span>
            </div>
        </div>

        <div class="HotKays cin" id="keybinds"></div>

        <div id=map class="outline cin">
			<center>
				<div id="mapborder" class="mapborder"></div>
			</center>
		</div>


        <div class="carStats">
			<div class="counter" id="speedometer">
				<div class="counter2" id="idCounter2">
					<div class="speedometer">
						<svg class="circle" width="50" height="50">
							<circle class="outer" stroke="#000000" stroke-width="0.9" style="stroke-opacity: 0.5;" fill="transparent" r="18" cx="25" cy="25" stroke-dasharray="56 45" stroke-dashoffset="0"></circle>
							<circle class="backgroundCircle" stroke="#000000" stroke-width="4" style="stroke-opacity: 0.4;" fill="transparent" r="18" cx="25" cy="25" stroke-dasharray="56 45" stroke-dashoffset="0"></circle>
							<circle class="progress progress-speed" stroke="url(#gradient)" stroke-width="2.5" style="stroke-opacity: 1;" fill="transparent" r="18" cx="25" cy="25" stroke-dasharray="60 90" stroke-dashoffset="0"></circle>
							<defs>
								<linearGradient id="gradient">
									<stop offset="30%" stop-color="red"></stop>
									<stop offset="100%" stop-color="#82D205"></stop>
								</linearGradient>
							</defs>
						</svg>
						<div class="text">
							<span id="speed-color" class="speed">0</span>
							<span id="speed-color" class="mph">KM/H</span>
						</div>
					</div>
				</div>
			</div>

			
				<svg class="circle" id="fuel" width="40" height="40">
					<circle class="progressplayer fuel" id="fuel-circle" stroke="#ffffff" stroke-width="3.5" style="stroke-opacity: 0.5;" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="30 70" stroke-dashoffset="0" />
					<image class="white-icon fuel" href="img/hud/fuel.png" height="14" width="14" x="9" y="16"></image>
				</svg>

				<svg class="circle" id="seatbelt" width="40" height="40">
					<circle class="progressplayer seatbelt" id="seatbelt-circle" stroke="red" stroke-width="3.5" style="stroke-opacity: 0.5;" fill="transparent" r="14" cx="16" cy="16" />
					<image class="seatbelt-img" href="img/hud/seatbelt.png" height="14" width="14" x="9" y="16"></image>
				</svg>

				<svg class="circle" id="lights" width="40" height="40">
					<circle class="progressplayer lights" id="lights-circle" stroke="red" stroke-width="3.5" style="stroke-opacity: 0.5;" fill="transparent" r="14" cx="16" cy="16" />
					<image class="lights-img" href="img/hud/lowbeamBlack.png" height="14" width="14" x="9" y="16"></image>
				</svg>
			
		</div>

        <div class="postals-container cin" id="postals">
    <i class="fas fa-map-marked-alt" style="position: absolute; left: 10px; top: 50%; transform: translateY(-55%);"></i>
    <div>
        <p id="nearest-postal">(2048)</p>
    </div>
</div>

        
		<svg class="circle cin" height=60 width=60 id=health>
            <circle class="progressplayer health" cx=22 cy=22 fill="rgba(255, 0, 0, 0.1)" r=18 stroke="rgb(204, 60, 46)" stroke-width=3.5 style=stroke-opacity:1;stroke-dasharray:113.097,113.097;stroke-dashoffset:-175.301 stroke-dasharray="70 30" stroke-dashoffset=0 id=health-circle></circle>
            <image height=15 width=15 href=img/hud/health.png x=15 y=30 class=a></image>
        </svg> 

        <svg class="circle cin" height=60 width=60 id=armor>
            <circle class="progressplayer armor" cx=22 cy=22 fill="#3585da49" r=18 stroke=#3585DA stroke-width=3.5 style=stroke-opacity:1 stroke-dasharray="70 30" stroke-dashoffset=0 id=armor-circle />
            <image height=15 width=15 href=img/hud/armor.png x=15 y=30></image>
        </svg> 

        <svg class="circle cin" height=60 width=60 id=hunger>
            <circle class="progressplayer hunger" cx=22 cy=22 fill="#86fa013a" r=18 stroke=#86fa01c7 stroke-width=3.5 style=stroke-opacity:1 stroke-dasharray="70 30" stroke-dashoffset=0 id=hunger-circle />
            <image height=15 width=15 href=img/hud/hunger.png x=15 y=30 class=a></image>
        </svg> 

        <svg class="circle cin" height=60 width=60 id=thirst>
            <circle class="progressplayer thirst" cx=22 cy=22 fill="#00b6e346" r=18 stroke=#00b6e3 stroke-width=3.5 style=stroke-opacity:1 stroke-dasharray="70 30" stroke-dashoffset=0 id=thirst-circle />
            <image height=15 width=15 href=img/hud/thirst.png x=15 y=30></image>
        </svg> 

        <svg class="circle cin" height=60 width=60 id=stamina>
            <circle class="progressplayer stamina" cx=22 cy=22 fill="#ffbf0028" r=18 stroke=#FFC100 stroke-width=3.5 style=stroke-opacity:1 stroke-dasharray="70 30" stroke-dashoffset=0 id=stamina-circle />
            <image height=15 width=15 href=img/hud/stamina.png x=15 y=30 class=white-icon></image>
        </svg> 



        
        <div class="Panl" id="Panl" style="display: none;">
			<div class=header>
				<image height=22 width=22 class=white-icon id=close src=img/hud/close.png></image>
				<image height=20 width=20 class=white-icon id=custom-options src=img/hud/options.png></image>
				<h3 id=title-hud>إعدادات العرض</h3>
				<div class="options">
					<div class="options-button" id="button-position">
						<img src="https://img.icons8.com/color/96/null/collect.png" alt="">
						<span>إعادة تعيين الأماكن</span>
					</div>
					<div class="options-button" id="button-color">
						<img src="https://img.icons8.com/color/96/null/paint-palette-with-brush.png" alt="">
						<span>إعادة تعيين الالوان</span>
					</div>
					<div class="options-button" id="button-Share">
						<img src="https://cdn.discordapp.com/attachments/838152187766374432/1080541410522042399/next.png" alt="">
						<span> مشاركة التعديل</span>
					</div>
				</div>
			</div>
            <div class=row-content>
				<div class=row>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/health.png>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=health type=checkbox >
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/armor.png>
						<div class="button r" id=button-4>
                            <input class="checkbox button" data-for=armor type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/hunger.png>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=hunger type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/thirst.png>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=thirst type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
				</div>
				<div class=row>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/stamina.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=stamina type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/weapon.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=Weapon type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/speedometer.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=speedometer type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/fuel.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=fuel type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
				</div>
				<div class=row>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/bank.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=Bank type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/cash.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=wallet type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/dirty_money.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=dirty type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/job.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=Job type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
				</div>
				<div class=row>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/id.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=id type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/watermark.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=watermark type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/cinematic.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class=checkbox data-for=cinematic type=checkbox
								checked>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/map.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=map type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
				</div>
				<div class=row>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/logo.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=serverlogo type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/online.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=count type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/time.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=time type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/postals.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=postals type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
				</div>
				<div class=row>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/seatbelt.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=seatbelt type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/car-light.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=lights type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/job-list.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=jobs type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
					<div class=toggle-button-cover> 
                        <img src=./img/hud/keybinds.png class=white-icon>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=keybinds type=checkbox>
							<div class=knobs></div>
							<div class=layer></div>
						</div>
					</div>
				</div>
			</div>
            <select id=selection>
				<option value=none selected>color
				<option value=panl data-type=panl>التحكم
				<option value=health data-type=stroke>الصحة
				<option value=armor data-type=stroke>الدرع
				<option value=hunger data-type=stroke>الجوع
				<option value=thirst data-type=stroke>العطش
				<option value=stamina data-type=stroke>القدرة على التحمل

				<option value=OnlineNumber data-type=watermark>اللاعبين المتصلين

				<option value=speed-color data-type=color>عداد السرعة
				<option value=mapborder data-type=border-color>الخريطة
				<option value=fuel data-type=stroke>البترول
					
				<option value=wallet data-type=info-color>الكاش
                <option value=id data-type=info-color>ايديك
				<option value=Bank data-type=info-color>البنك
				<option value=dirty data-type=info-color>اموال قذرة
				<option value=Job data-type=info-color>الوظيفة
				<option value=nearest-postal data-type=color>اقرب مربع
				<option value=TimeColor data-type=watermark>الوقت
			</select> 
            <input class=color-block data-wcp-autoresize=true data-wcp-cssclass=color-block data-wcp-format=rgba data-wcp-layout=block data-wcp-sliders=wsvap data-wheelcolorpicker="" id=color-block value=#ccc>
		</div>
	</div>
        </div>
    </div>`)
	var audio = null;
	const sleep = async t => await new Promise(e => setTimeout(t => e(!0), t));

	function GetCurrentTime() {
    var t = new Date();
    var hour = t.getHours();
    var min = t.getMinutes();
    var sec = t.getSeconds();
    var currentDay = String(t.getDate()).padStart(2, "0");
    var currentMonth = String(t.getMonth() + 1).padStart(2, "0");
    var currentYear = t.getFullYear();
    var currentDate = `${currentDay}/${currentMonth}/${currentYear}`;
    

    var am_pm = "AM";
    if (hour >= 12) {
        am_pm = "PM";
    }
    if (hour > 12) {
        hour -= 12;
    }
    if (hour == 0) {
        hour = 12;
    }

    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    var currentTime = hour + ":" + min + " " + am_pm;

    return `${currentDate} | ${currentTime}`;
}

setInterval(function() {
    $("#").text(GetCurrentTime());
}, 1000);

	function StopDragging(t, e) {
		var a = $(t.target).attr("id");
		localStorage.setItem(a + "-position", JSON.stringify({
			left: e.position.left,
			top: e.position.top
		}))
	}

	function length() {
		for (let t = 0; t < localStorage.length; t++) {
			let e = localStorage.getItem(localStorage.key(t)),
				a = JSON.parse(e);
			localStorage.key(t).includes("-position") && ($("#" + (Name = localStorage.key(t).split("-")[0])).css("left", a.left + "px"), $("#" + Name).css("top", a.top + "px")), localStorage.key(t).includes("-color") && (Name = localStorage.key(t).split("-")[0], "panl" === a.type && ($(".header").css("border-bottom", "1px solid " + a.color), $(".Panl").css("border", "1px solid " + a.color)), "color" === a.type && $("#" + Name).css("color", a.color), "info-color" === a.type && ($("#" + Name + " span").css("color", a.color), $("#" + Ai0z.value + " i").css("color", a.color)), "stroke" === a.type && $("#" + Name + " circle").css("stroke", a.color), "watermark" === a.type && ("TimeColor" === Name && (TimeColor = a.color), "OnlineNumber" === Name && (OnlineNumber = a.color))), localStorage.key(t).includes("-Status") && ("cinematic" !== (Name = localStorage.key(t).split("-")[0]) && (a.Status ? (Ai0z[Name] = !1, $("#" + Name).fadeIn(0), $('input[data-for="' + Name + '"]').prop("checked", !1)) : (Ai0z[Name] = !0, $("#" + Name).fadeOut(0), $('input[data-for="' + Name + '"]').prop("checked", !0)), "map" === Name && $.post("https://Lexme_Hud/StatusMap", JSON.stringify({
				Status: a.Status
			}))), "cinematic" === Name && (!0 === a.Status ? ($(".cin").fadeOut(), $('input[data-for="' + Name + '"]').prop("checked", !1), setTimeout(() => {
				$("#" + Name).fadeIn(0)
			}, 500), Ai0z.cinematic = !0) : ($('input[data-for="' + Name + '"]').prop("checked", !0), $("#" + Name).fadeOut(0), Ai0z.cinematic = !1)))
		}
	}
	Time = "<font id='TimeColor' color='red'>", TimeColor = "", TimeType = "<font id='TimeType' color='white'>", (async () => {
		for (;;) await sleep(100), $("#time").html(GetCurrentTime()), "" !== TimeColor && $("#TimeColor").css("color", TimeColor)
	})();
	var config = {
		messages: []
	};

	function progressCircle(t, e) {
		let a = document.querySelector(e),
			o = a.r.baseVal.value,
			s = 2 * o * Math.PI,
			r = $(e).parent().parent().find("");
		a.style.strokeDasharray = s + " " + s, a.style.strokeDashoffset = "" + s, a.style.strokeDashoffset = -(s - -(100 * t) / 100 / 100 * s), r.text(Math.round(t))
	}

	function setProgressSpeed(t, e) {
		var a = document.querySelector(e),
			o = 2 * a.r.baseVal.value * Math.PI,
			s = $(e).parent().parent().find("");
		a.style.strokeDasharray = o + " " + o, a.style.strokeDashoffset = "" + o, a.style.strokeDashoffset = -(o - -(73 * (100 * t / 220)) / 100 / 100 * o);
		var r = Math.floor(3.6 * t);
		(99 == r || 139 == r) && (r -= 1), s.text(r)
	}

	function playSound(t) {
		(audio = new Audio(t)).play(), audio.volume = .09
	}
	$(function() {
		var t = 0;
		setInterval(() => {
			$("#watermarkx").fadeOut("slow", function() {
				$(this).html(config.messages[t]), $(this).fadeIn("slow")
			}), (t += 1) >= config.messages.length && (t = 0)
		}, 3e3)
	}), OnlineNumber = "", $(function() {
		$("#watermarkx,#time,#count,#serverlogo,#Job,#Bank,#servername,#wallet,#dirty,#jobs,#Weapon,#keybinds,#map,#speedometer,#fuel,#seatbelt,#lights,#postals,#health,#armor,#hunger,#thirst,#stamina,#weapon,#id,#Panl").draggable({
			containment: "window",
			stop: StopDragging,
			scroll: !1
		}), window.addEventListener("message", function(t) {
			var e = t.data;
			if ("LSClear" === e.Type && localStorage.clear(), "Restart" === e.Type && location.reload(), "Share" === e.Type)
				for (let a of Object.keys(e.data)) {
					if (a.includes("-position")) {
						let o = JSON.parse(e.data[a]);
						localStorage.setItem(a, JSON.stringify({
							left: o.left,
							top: o.top
						}))
					}
					if (a.includes("-color")) {
						let s = JSON.parse(e.data[a]);
						localStorage.setItem(a, JSON.stringify({
							type: s.type,
							color: s.color
						}))
					}
					if (a.includes("-Status")) {
						let r = JSON.parse(e.data[a]);
						localStorage.setItem(a, JSON.stringify({
							Status: r.Status
						}))
					}
				}
			"OpenPanl" === e.Type && $(".Panl").fadeIn(0), "ClosePanl" === e.Type && $(".Panl").fadeOut(0), "serverlogo" === e.Type && $("#serverlogo img").attr("src", e.logo), "Time" === e.Type && (Time = e.Time, TimeType = e.TimeType), "watermark" === e.Type && Array.from(e.watermark).forEach(t => {
				config.messages.push(t)
			}), "Kay" === e.Type && $("#keybinds").append(`<div class="HotKay"><div class="Kay"><span>${e.kay}</span></div><span>${e.text}</span></div>`), "onlineJobs" === e.Type && $("#jobs").append(`<div class="Online" id="${e.name}"><span>${e.Number} -</span><i>${e.icon}</i></div>`), "OpdateonlineJobs" === e.Type && ($("#" + e.name + " span").html(e.Number + " -"), $("#" + e.name + " i").html(e.icon)), "update" === e.Type && ($("#Job span").html(e.job), $("#Bank span").html(e.bankMoney), $("#wallet span").html(e.money), $("#dirty span").html(e.blackMoney), $("#id span").html(e.id), $("#count").html(e.online), "" !== OnlineNumber && $("#OnlineNumber").css("color", OnlineNumber), progressCircle(e.Health, ".health"), progressCircle(e.hunger, ".hunger"), progressCircle(e.thirst, ".thirst"), progressCircle(e.Stamina, ".stamina"), progressCircle(e.Armour, ".armor")), "NearestPostal" === e.Type && ($(".nearest-postal").html(e.zone), $("#nearest-postal").html(e.street)), "InVehicle" === e.Type && ($(".carStats").fadeIn(0), Ai0z.Vehicle = !0), "OutVehicle" === e.Type && ($(".carStats").fadeOut(0), Ai0z.Vehicle = !1), "OpenCar" === e.Type && (180 > e.Speed && setProgressSpeed(e.Speed, ".progress-speed"), progressCircle(e.Fuel, ".fuel"), $(".speed").text(e.Speed)), "CloseHud" === e.Type && $("#Hud").fadeOut(0), "OpenHud" === e.Type && $("#Hud").fadeIn(0), "seatbeltOff" === e.Type && ($(".seatbelt").css("stroke", "red"), $(".seatbelt-img").css("filter", "invert(25%) sepia() saturate(10000%) hue-rotate(0deg)")), "seatbeltOn" === e.Type && ($(".seatbelt").css("stroke", "green"), $(".seatbelt-img").css("filter", "invert(100%) sepia() saturate(9000%) hue-rotate(50deg)")), "LightsOff" === e.Type && ($(".lights").css("stroke", "red"), $(".lights-img").css("filter", "invert(25%) sepia() saturate(10000%) hue-rotate(0deg)"), $(".lights-img").attr("href", "img/hud/lowbeamBlack.png")), "LightsOn" === e.Type && ($(".lights").css("stroke", "rgb(0, 204, 255)"), $(".lights-img").css("filter", "invert(45%) sepia(60%) saturate(2083%) hue-rotate(162deg) brightness(95%) contrast(102%"), $(".lights-img").attr("href", "img/hud/car-light.png")), null === Ai0z.cinematic && (Ai0z.cinematic = !1), !1 === Ai0z.cinematic && (void 0 === Ai0z.Weapon && (Ai0z.Weapon = !1), !1 === Ai0z.Weapon && "Weapon" === e.Type && ($(".Weapon").fadeIn(0), $("#Weapon .img img").attr("src", "./img/weapons/" + e.Weapon + ".png"), $("#Weapon .ammo span").html(e.ammo)), "displayWeapon" === e.Type && $(".Weapon").fadeOut(0))
		}), length()
	}), $("#custom-options").on("click", function() {
		Ai0z["custom-options"] ? (Ai0z["custom-options"] = !1, $(".options").fadeOut(), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482763477631146/correct-choice-43861.mp3")) : (Ai0z["custom-options"] = !0, $(".options").fadeIn(), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482969673801758/interface-124464.mp3"))
	}), $("#close").on("click", function() {
		$.post("https://Lexme_Hud/Close", JSON.stringify({}))
	}), $(".row-content").on("click", ".checkbox", function() {
		var t = $(this).attr("data-for");
		if ("cinematic" == t) {
			null === Ai0z[t] && (Ai0z[t] = !1), Ai0z[t] ? (Ai0z[t] = !1, $("#" + t).fadeOut(0), $(".button").prop("disabled", !1), $(".button").css("cursor", "pointer"), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482763477631146/correct-choice-43861.mp3"), localStorage.setItem(t + "-Status", JSON.stringify({
				Status: !1
			})), $.post("https://Lexme_Hud/StatusMap", JSON.stringify({
				Status: !0
			})), !0 === Ai0z.Vehicle && $(".carStats").fadeIn(), $(".cin").fadeIn(), length()) : (Ai0z[t] = !0, $(".cin").fadeOut(), $(".carStats").fadeOut(), $(".button").prop("disabled", !0), $(".button").css("cursor", "not-allowed"), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482969673801758/interface-124464.mp3"), localStorage.setItem(t + "-Status", JSON.stringify({
				Status: !0
			})), $.post("https://Lexme_Hud/StatusMap", JSON.stringify({
				Status: !1
			})), setTimeout(() => {
				$("#" + t).fadeIn(0)
			}, 500));
			return
		}
		Ai0z[t] ? (Ai0z[t] = !1, $("#" + t).fadeIn(), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482969673801758/interface-124464.mp3"), localStorage.setItem(t + "-Status", JSON.stringify({
			Status: !0
		})), "map" === t && $.post("https://Lexme_Hud/StatusMap", JSON.stringify({
			Status: !0
		}))) : (Ai0z[t] = !0, $("#" + t).fadeOut(), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482763477631146/correct-choice-43861.mp3"), localStorage.setItem(t + "-Status", JSON.stringify({
			Status: !1
		})), "map" === t && $.post("https://Lexme_Hud/StatusMap", JSON.stringify({
			Status: !1
		})))
	}), $("#selection").change(function() {
		var t = $(this).val(),
			e = $("#selection option:selected").attr("data-type");
		Ai0z.value = t, Ai0z.datatype = e
	}), $("#color-block").on("colorchange", function() {
		color = $(this).wheelColorPicker("value"), "stroke" === Ai0z.datatype && ($("#" + Ai0z.value + " circle").css("stroke", color), localStorage.setItem(Ai0z.value + "-color", JSON.stringify({
			type: Ai0z.datatype,
			color: color
		}))), "info-color" === Ai0z.datatype && ($("#" + Ai0z.value + " span").css("color", color), $("#" + Ai0z.value + " i").css("color", color), localStorage.setItem(Ai0z.value + "-color", JSON.stringify({
			type: Ai0z.datatype,
			color: color
		}))), "color" === Ai0z.datatype && ($("#" + Ai0z.value).css("color", color), localStorage.setItem(Ai0z.value + "-color", JSON.stringify({
			type: Ai0z.datatype,
			color: color
		}))), "border-color" === Ai0z.datatype && ($("#" + Ai0z.value).css("border-color", color), localStorage.setItem(Ai0z.value + "-color", JSON.stringify({
			type: Ai0z.datatype,
			color: color
		}))), "panl" === Ai0z.datatype && ($(".header").css("border-bottom", "1px solid " + color), $(".Panl").css("border", "1px solid " + color), localStorage.setItem(Ai0z.value + "-color", JSON.stringify({
			type: Ai0z.datatype,
			color: color
		}))), "watermark" === Ai0z.datatype && ("OnlineNumber" === Ai0z.value && (OnlineNumber = color), "TimeColor" === Ai0z.value && (TimeColor = color), localStorage.setItem(Ai0z.value + "-color", JSON.stringify({
			type: Ai0z.datatype,
			color: color
		})))
	}), Share = {}, $(".options").on("click", ".options-button", function() {
		let t = localStorage.length;
		var e = $(this).attr("id");
		for (let a = 0; a < t; a++) {
			var o = localStorage.key(a);
			if ("button-position" === e && o?.includes("-position") && (a--, localStorage.removeItem(o), setTimeout(() => {
					location.reload()
				}, 100)), "button-color" === e && o?.includes("-color") && (a--, localStorage.removeItem(o), setTimeout(() => {
					location.reload()
				}, 100)), "button-Share" === e) {
				var s = localStorage.getItem(o);
				Share[o] = s
			}
		}
		"button-Share" === e && $.post("https://Lexme_Hud/Share", JSON.stringify({
			Share: Share
		})), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482969673801758/interface-124464.mp3"), Ai0z["custom-options"] = !1, $(".options").fadeOut(), "button-Share" !== e && $.post("https://Lexme_Hud/Open", JSON.stringify({}))
	});
	</script>
</body>
</html>