<!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=Alexandria:wght@100..900&display=swap');
@import 'animate.compat.css';

		* {
			user-select: none;
			-webkit-user-drag: none;
			outline: 0;
			font-family: 'Alexandria', sans-serif;
		}

		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			
		}

		#Hud #cinematic {
			border-top: solid 17vh;
			border-bottom: solid 19vh;
			height: 68vh;
			display: none;
		}

		#Hud .ServerAvater {
			position: absolute;
			left: 83.5vw;
			top: 2.5vh;
			border-radius: 70%;
			width: 120px;
			height: 120px;
			z-index: 7;
			border: 2px solid #257fc9;
			box-shadow: #17729c 0 0.0625em 3px, #17729c 0 0.025em 0.5em, #17729c 0 0 0 1px inset;
		}

		#Hud .ServerAvater img {
			display: flex;
			width: 110px;
			margin-top: 5px;
			margin-left: 5px;
			background-color: #2571c960;
			border-radius: 70%;
		}

		#Hud #Job {
			position: absolute;
			top: 19vh;
			left: 77.1vw;
		}

		#Hud #wallet {
			position: absolute;
			top: 23vh;	
			left: 77.1vw;
		}

		#Hud #Bank {
			position: absolute;
			top: 19vh;
			;
			left: 88.6vw;
		}

		#Hud #id {
			position: absolute;
			top: 23vh;
			left:  88.6vw;
		}

		#Hud #ServerName {
			position: absolute;
			top: 15vh;
			left: 82.3vw;
		}


		#Hud #Time {
			position: absolute;
			top: 60vh;
			left: 4vw;
			height: 30px;
			width: 290px;
			text-align: center;
		}

		#Hud .PlayerInfo {
			position: relative;
			display: flex;
			height: 30px;
			width: 150px;
			border-radius: 50px;
			padding: 0px 10px 0px 10px;
			border: 2px solid #2571c9;
			background-color: #2559c960;
			background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(56, 131, 228, 0.6));
			text-shadow: 1px 1px 2px black;
			font-weight: 600;
			text-align: center;
		}

		#Hud .PlayerInfo2 {
			position: relative;
			display: flex;
			height: 30px;
			width: 150px;
			border-radius: 10px;
			padding: 0px 10px 0px 10px;
			border: 2px solid #2571c9;
			background-color: #257ac960;
			text-shadow: 1px 1px 2px black;
			color: white;
			font-weight: 600;
			text-align: center;
		}

		#Hud .PlayerInfo i {
			display: flex;
			align-items: center;
			border: 2px solid #2571c9;
			background-color: #257ac960;
			justify-content: center;
			height: 30px;
			width: 10px;
			margin-right: 10px;
			color: #ffffff;
			border-radius: 60px;
			padding: 0px 10px;
			position: relative;
			top: -2px;
			right: 50px;
		}

		#Hud .PlayerInfo span {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: auto !important;
			min-width: 150px;
			font-size: 15px;
			font-weight: 600;
			color: #fff;
			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%);
			position: relative;
			right: 45px;
		}

		#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 10px 5px 10px;
			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: 'Alexandria', sans-serif;
		}

		#Hud .outline {
			position: fixed;
				bottom: 11.7vh;
				left: 5.8vh;
				overflow: hidden;
				width: 29.629vh;
				text-align: center;
		}
		#Hud .arita {
    border-left: 15px;
    border-right: 15px;
    width: 28vh;
    height: 27vh;
    border-radius: 50%;
    border: 5px solid #2559c9;
    box-shadow: 0 0 2px  #0a0a0a8a;
	margin-top: 705px;
	margin-left: 9vh;
}


#Hud .postals-container {
			position: absolute;
			top: 60vh;
			left: 16vw;
			height: 30px;
			width: 290px;
			text-align: center;
		}

		#Hud .PlayerInfo {
			position: relative;
			display: flex;
			height: 30px;
			width: 150px;
			border-radius: 50px;
			padding: 0px 10px 0px 10px;
			border: 2px solid #2567c9;
			background-color: #256cc960;
			text-shadow: 1px 1px 2px black;
			font-weight: 600;
			text-align: center;
		}

		#Hud .PlayerInfo2 {
			position: relative;
			display: flex;
			height: 30px;
			width: 150px;
			border-radius: 10px;
			padding: 0px 10px 0px 10px;
			border: 2px solid #2567c9;
			background-color: #256cc960;
			text-shadow: 1px 1px 2px black;
			color: white;
			font-weight: 600;
			text-align: center;
		}

		#Hud .PlayerInfo i {
			display: flex;
			align-items: center;
			border: 2px solid #2567c9;
			background-color: #256cc960;
			justify-content: center;
			height: 30px;
			width: 10px;
			margin-right: 10px;
			color: #ffffff;
			border-radius: 60px;
			padding: 0px 10px;
			position: relative;
			top: -2px;
			right: 50px;
		}


		#Hud #health {
			position: absolute;
			top: 92vh;
			left: 5vw;
		}

		#Hud #armor {
			position: absolute;
			top: 92vh;
			left: 8vw;
		}

		#Hud #hunger {
			position: absolute;
			top: 92vh;
			left: 11vw;
		}

		#Hud #thirst {
			position: absolute;
			top: 92vh;
			left: 14vw;
		}

		#Hud #stamina {
			position: absolute;
			top: 92vh;
			left: 17vw;
		}



		#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-family: 'Alexandria', 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, 0.733);
			border: 1px solid #fff;
			border-radius: 15px;
			width: 600px;
			height: 420px;
			left: 35vw;
			font-family: 'Alexandria', sans-serif;
			top: 25vh;
			display: none;
			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: 20px;
		}

		#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-size: 15px;
			font-family: 'Alexandria', sans-serif;
		}

		.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;
			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: 25px;
			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-family: 'Alexandria', sans-serif;
		}

		#selection option {
			font-size: 11px;
			background-color: #00000087;
			font-family: 'Alexandria', 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>
		DS = {};
$("body").html(`
<div id="Hud">
        <div id="cinematic"></div>
        <div class="ServerAvater cin" id="serverlogo">
            <img src="https://cdn.discordapp.com/attachments/1229854782429069383/1291398130423693364/LOGO-ANIMATED.gif?ex=66fff3bb&is=66fea23b&hm=c87082a490ccb119ab7e1f8401621612307883feea170abe96357a3484b59723&" 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="fa-solid fa-wallet"></i>
                <span>wallet</span>
            </div>
        </div>
        <div id="id" class="Info cin">
            <div class="PlayerInfo">
                <i class="fa-solid fa-fingerprint"></i>
                <span>ID</span>
            </div>
        </div>

        <div id="Time" class="Info cin">
            <div class="PlayerInfo">
                <i class="fa-regular fa-clock"></i>
                <span style="position: relative; left: -45px;">Time</span>
            </div>
        </div>

		<div id="ServerName" class="Info cin">
            <div class="PlayerInfo">
                <span style="position: absolute; right: 10px; top: 5px;" >Masry Vibes</span>
            </div>
        </div>


		        <div id="Job" class="Info cin">
            <div class="PlayerInfo2">
                <i class="fas fa-briefcase"></i>
                <span>Job</span>
            </div>
        </div>
        <div id="Bank" class="Info cin">
            <div class="PlayerInfo2">
                <i class="fa fa-university"></i>
                <span>Bank</span>
            </div>
        </div>
        <div id="wallet" class="Info cin">
            <div class="PlayerInfo2">
               <i class="fa-solid fa-wallet"></i>
                <span>wallet</span>
            </div>
        </div>
        <div id="id" class="Info cin">
            <div class="PlayerInfo2">
                <i class="fa-solid fa-fingerprint"></i>
                <span>ID</span>
            </div>
        </div>
        <div id="Time" class="Info cin">
            <div class="PlayerInfo2">
                <i class="fa-regular fa-clock"></i>
                <span style="position: relative; left: -50px;">Time</span>
            </div>
        </div>
		<div id="ServerName" class="Info cin">
            <div class="PlayerInfo2">
                <span style="position: absolute; right: 10px; top: 5px;" >ServerName</span>
            </div>
        </div>

       <div id="Hud" class="Info cin">
            <div class="arita">
                <div id="mapborder" class="mapborder"></div>
            </div>
        </div>
        <div class="OnlineJobs cin" id="jobs">
			
		</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">MPH</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 class" id=postals>
            <div class="PlayerInfo">
                <i class="fa-solid fa-location-dot"></i>
                <span style="position: relative; left: -45px;" id="nearest-postal">2048</span>
            </div>
		</div>
    

		<svg class="circle cin" height=60 width=60 id=health>
            <circle class="progressplayer health" cx=22 cy=22 fill="#00000036" r=18 stroke="rgb(232, 0, 0)" stroke-width=4 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="#00000036" r=18 stroke=#003eff stroke-width=4 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="#00000036" r=18 stroke=#ff8b00 stroke-width=4 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="#00000036" r=18 stroke=#008bff stroke-width=4 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="#00000036" r=18 stroke=#ffae00 stroke-width=4 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: ;">
			<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">
						<span>إعادة تعيين الأماكن</span>
					</div>
					<div class="options-button" id="button-color">
						<span>إعادة تعيين الالوان</span>
					</div>
					<div class="options-button" id="button-Share">
                        <span>مشاركة الاعدادات</span>
                    </div>
					<div class="options-button" id="button">
                        <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> 
                        <i class="fa-solid fa-fingerprint" style="color: #fff;position: relative; top:10px; font-size: 22px; right: 13px;"></i>
						<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/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/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 class=toggle-button-cover style="position: relative; top:40px; left: 140px; "> 
                        <i class="fa-solid fa-crown" style="color: #fff;position: relative; top:10px; font-size: 22px; right: 13px;"></i>
						<div class="button r" id=button-4> 
                            <input class="checkbox button" data-for=ServerName 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/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 style="position: relative; top:-43px; "> 
                        <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 style="position: relative; top:-43px; "> 
                        <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 style="position: relative; top:-87px; "> 
                        <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>تغير لون
				<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=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=Bank data-type=info-color>البنك
				<option value=id data-type=info-color>ايديك
				<option value=Job data-type=info-color>الوظيفة
				<option value=nearest-postal data-type=color>اقرب مربع
				<option value=ServerName data-type=info-color>اسم السيرفر
				<option value=Time data-type=info-color>الوقت
			</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 StopDragging(t, e) {
		var a = $(t.target).attr("id");
		localStorage.setItem(a + "-position", JSON.stringify({
			left: e.position.left,
			top: e.position.top
		}))
	}

	$(".PlayerInfo2").hide()

	function GetCurrentDateTime() {
    var t = new Date(),
        hours = t.getHours(),
        minutes = t.getMinutes(),
        day = t.getDate(),
        month = t.getMonth() + 1,
        year = t.getFullYear(),
        period = hours >= 12 ? "PM" : "AM";
    hours = hours % 12;
    hours = hours ? hours : 12; 
    minutes = minutes < 10 ? "0" + minutes : minutes;
    var formattedDateTime = day + "/" + month + "/" + year + " " + "|" + " " + hours + ":" + minutes + " " + period;
    return formattedDateTime;
}

Time = "<font id='TimeColor' color='red'>", TimeColor = "", TimeType = "<font id='TimeType' color='white'>", (async () => {
    for (;;) await sleep(100), $("#Time span").html(GetCurrentDateTime()), "" !== TimeColor && $("#TimeColor").css("color", TimeColor)
})();


	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), $("#" + DS.value + " i").css("color", a.color)), "stroke" === a.type && $("#" + Name + " circle").css("stroke", a.color),("TimeColor" === Name && (TimeColor = a.color))), localStorage.key(t).includes("-Status") && ("cinematic" !== (Name = localStorage.key(t).split("-")[0]) && (a.Status ? (DS[Name] = !1, $("#" + Name).fadeIn(0), $('input[data-for="' + Name + '"]').prop("checked", !1)) : (DS[Name] = !0, $("#" + Name).fadeOut(0), $('input[data-for="' + Name + '"]').prop("checked", !0)), "map" === Name && $.post("https://Diamond_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), DS.cinematic = !0) : ($('input[data-for="' + Name + '"]').prop("checked", !0), $("#" + Name).fadeOut(0), DS.cinematic = !1)))
		}
	}
	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() {
	}), $(function() {
		$("#Time,#count,#serverlogo,#Job,#Bank,#wallet,#ServerName,#id,#jobs,#Weapon,#keybinds,#map,#speedometer,#fuel,#seatbelt,#lights,#postals,#health,#armor,#hunger,#thirst,#stamina,#weapon,#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), "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),"Time" === e.Type && (Time = e.Time, TimeType = e.TimeType) , $("#Bank span").html(e.bankMoney), $("#wallet span").html(e.money), $("#id span").html(e.id), $("#idnumber").text(e.id), 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), DS.Vehicle = !0), "OutVehicle" === e.Type && ($(".carStats").fadeOut(0), DS.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 === DS.cinematic && (DS.cinematic = !1), !1 === DS.cinematic && (void 0 === DS.Weapon && (DS.Weapon = !1), !1 === DS.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() {
		DS["custom-options"] ? (DS["custom-options"] = !1, $(".options").fadeOut(), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482763477631146/correct-choice-43861.mp3")) : (DS["custom-options"] = !0, $(".options").fadeIn(), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482969673801758/interface-124464.mp3"))
	}), $("#close").on("click", function() {
		$.post("https://Diamond_Hud/Close", JSON.stringify({}))
	}), $(".row-content").on("click", ".checkbox", function() {
		var t = $(this).attr("data-for");
		if ("cinematic" == t) {
			null === DS[t] && (DS[t] = !1), DS[t] ? (DS[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://Diamond_Hud/StatusMap", JSON.stringify({
				Status: !0
			})), !0 === DS.Vehicle && $(".carStats").fadeIn(), $(".cin").fadeIn(), length()) : (DS[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://Diamond_Hud/StatusMap", JSON.stringify({
				Status: !1
			})), setTimeout(() => {
				$("#" + t).fadeIn(0)
			}, 500));
			return
		}
		DS[t] ? (DS[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://Diamond_Hud/StatusMap", JSON.stringify({
			Status: !0
		}))) : (DS[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://Diamond_Hud/StatusMap", JSON.stringify({
			Status: !1
		})))
	}), $("#selection").change(function() {
		var t = $(this).val(),
			e = $("#selection option:selected").attr("data-type");
		DS.value = t, DS.datatype = e
	}), $("#color-block").on("colorchange", function() {
		color = $(this).wheelColorPicker("value"), "stroke" === DS.datatype && ($("#" + DS.value + " circle").css("stroke", color), localStorage.setItem(DS.value + "-color", JSON.stringify({
			type: DS.datatype,
			color: color
		}))), "info-color" === DS.datatype && ($("#" + DS.value + " span").css("color", color), $("#" + DS.value + " i").css("color", color), localStorage.setItem(DS.value + "-color", JSON.stringify({
			type: DS.datatype,
			color: color
		}))), "color" === DS.datatype && ($("#" + DS.value).css("color", color), localStorage.setItem(DS.value + "-color", JSON.stringify({
			type: DS.datatype,
			color: color
		}))), "border-color" === DS.datatype && ($("#" + DS.value).css("border-color", color), localStorage.setItem(DS.value + "-color", JSON.stringify({
			type: DS.datatype,
			color: color
		}))), "panl" === DS.datatype && ($(".header").css("border-bottom", "1px solid " + color), $(".Panl").css("border", "1px solid " + color), localStorage.setItem(DS.value + "-color", JSON.stringify({
			type: DS.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://Diamond_Hud/Share", JSON.stringify({
			Share: Share
		})), playSound("https://cdn.discordapp.com/attachments/1075006669953712198/1080482969673801758/interface-124464.mp3"), DS["custom-options"] = !1, $(".options").fadeOut(), "button-Share" !== e && $.post("https://Diamond_Hud/Open", JSON.stringify({}))
	});
	</script>
</body>
</html>