mirror of
https://github.com/Michatec/wk_wars2x.git
synced 2026-04-01 00:16:27 +02:00
Started work on UI
This commit is contained in:
Dan
296
nui/old/radar.css
Normal file
296
nui/old/radar.css
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
/*-------------------------------------------------------------------------
|
||||||
|
|
||||||
|
Wraith Radar System - v1.0.3
|
||||||
|
Created by WolfKnight
|
||||||
|
|
||||||
|
Just a word of warning, I'm not the best at CSS structure, so this
|
||||||
|
could probably be 10x better, but fuck it.
|
||||||
|
|
||||||
|
-------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Digital-7";
|
||||||
|
src: url( "digital-7.regular.ttf" );
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Police Radar */
|
||||||
|
#policeradar {
|
||||||
|
/* To change the scale of the radar, change the value in the 'scale' function below.
|
||||||
|
Examples:
|
||||||
|
- 1.0 = default size
|
||||||
|
- 2.0 = twice the original size
|
||||||
|
- 0.5 = half the original size */
|
||||||
|
transform: scale( 2.0 );
|
||||||
|
|
||||||
|
width: 495px;
|
||||||
|
height: 202px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
top:0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background: rgba( 20, 20, 20, 0.97 );
|
||||||
|
background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#policeradar .antennalabel {
|
||||||
|
font-family: Verdana;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .antennalabeltop {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .antennalabelbottom {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .logo {
|
||||||
|
font-family: Verdana;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 20px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .patrolcontainer {
|
||||||
|
background-color: black;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .typecontainer {
|
||||||
|
background-color: black;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
#policeradar .typecontainer .text {
|
||||||
|
font-family: Verdana;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 27px;
|
||||||
|
margin-left: 13px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .typecontainer .active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
#policeradar .container .label {
|
||||||
|
font-family: Verdana;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .speedsourcecontainer {
|
||||||
|
width: 135px;
|
||||||
|
height: 58px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
#policeradar .container .speedsourcecontainer .speednumber {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .speedsourcecontainer .text {
|
||||||
|
font-family: "Digital-7";
|
||||||
|
font-size: 58px;
|
||||||
|
line-height: 58px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .target {
|
||||||
|
background: rgb( 200, 0, 0 );
|
||||||
|
background: linear-gradient( to bottom, rgb( 220, 0, 40 ), rgb( 90, 0, 0 ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .patrol {
|
||||||
|
background: rgb( 0, 125, 0 );
|
||||||
|
background: linear-gradient( to bottom, rgb( 0, 150, 0 ), rgb( 0, 75, 0 ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .locked {
|
||||||
|
color: rgb( 50, 0, 0 );
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .speedfastcontainer {
|
||||||
|
width: 99px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
#policeradar .container .speedfastcontainer .speednumber {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .container .speedfastcontainer .text {
|
||||||
|
font-family: "Digital-7";
|
||||||
|
font-size: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .arrowbox {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#policeradar .arrowbox i {
|
||||||
|
font-size: 20px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .arrowbox .active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradar .arrowbox .inactive {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Police Radar - Remote Control */
|
||||||
|
#policeradarrc {
|
||||||
|
width: 290px;
|
||||||
|
height: 380px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
padding: 10px 5px;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background-color: rgba( 20, 20, 20, 0.95 );
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .breakline {
|
||||||
|
width: 230px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .label {
|
||||||
|
font-family: Verdana;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container {
|
||||||
|
font-family: Verdana;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container button {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container button:hover {
|
||||||
|
background-color: #6cd3f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container button:active {
|
||||||
|
background-color: #56a8c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .toggle {
|
||||||
|
padding: 5px 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .limit {
|
||||||
|
padding: 5px 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .close {
|
||||||
|
padding: 3px 7px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .rowbutton {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .frontopp {
|
||||||
|
border-top-left-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .frontsame {
|
||||||
|
border-top-right-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .rearopp {
|
||||||
|
border-bottom-left-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#policeradarrc .container .rearsame {
|
||||||
|
border-bottom-right-radius: 50%;
|
||||||
|
}
|
||||||
158
nui/old/radar.html
Normal file
158
nui/old/radar.html
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
<!--
|
||||||
|
|
||||||
|
Wraith Radar System - v1.0.3
|
||||||
|
Created by WolfKnight
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||||
|
<script src="radar.js" type="text/javascript"></script>
|
||||||
|
<link href="radar.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body onselectstart="return false;" ondragstart="return false;">
|
||||||
|
<!-- Police Radar -->
|
||||||
|
<div id="policeradar">
|
||||||
|
<div class="antennalabel antennalabeltop">Front Antenna</div>
|
||||||
|
|
||||||
|
<div class="logo">WraithRS</div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<div class="container">
|
||||||
|
<div class="typecontainer">
|
||||||
|
<div class="text"><span class="fwdsame">SAME</span></div>
|
||||||
|
<div class="text"><span class="fwdopp">OPP</span></div>
|
||||||
|
<div class="text"><span class="fwdxmit">XMIT</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="typecontainer">
|
||||||
|
<div class="text"><span class="bwdsame">SAME</span></div>
|
||||||
|
<div class="text"><span class="bwdopp">OPP</span></div>
|
||||||
|
<div class="text"><span class="bwdxmit">XMIT</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="patrolcontainer">
|
||||||
|
<div class="speedsourcecontainer target" data-target="fwdspeed">
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">FWD</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="patrolcontainer">
|
||||||
|
<div class="speedsourcecontainer target" data-target="bwdspeed">
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">BWD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container" style="width: 5px;">
|
||||||
|
<div class="arrowbox">
|
||||||
|
<i class="fa fa-arrow-up fwdarrowfront"></i>
|
||||||
|
<i class="fa fa-arrow-down fwdarrowback"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrowbox">
|
||||||
|
<i class="fa fa-arrow-up bwdarrowfront"></i>
|
||||||
|
<i class="fa fa-arrow-down bwdarrowback"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="patrolcontainer" style="margin-top: 20px;">
|
||||||
|
<div class="speedfastcontainer target" data-target="fwdfast">
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">FWD FAST</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="patrolcontainer" style="margin-bottom: 20px;">
|
||||||
|
<div class="speedfastcontainer target" data-target="bwdfast">
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">BWD FAST</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="patrolcontainer">
|
||||||
|
<div class="speedfastcontainer patrol" data-target="patrolspeed">
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
<div class="speednumber text">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">PATROL SPEED</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="antennalabel antennalabelbottom">Rear Antenna</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Police Radar - Remote control -->
|
||||||
|
<div id="policeradarrc" style="display: none;">
|
||||||
|
<div class="container">
|
||||||
|
<button class="toggle" data-action="radar_toggle">TOGGLE RADAR</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">FRONT ANTENNA</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<button class="rowbutton frontopp" data-action="radar_frontopp">OPP</button>
|
||||||
|
<button class="rowbutton frontxmit" data-action="radar_frontxmit">XMIT</button>
|
||||||
|
<button class="rowbutton frontsame" data-action="radar_frontsame">SAME</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="breakline"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<button class="rowbutton rearopp" data-action="radar_rearopp">OPP</button>
|
||||||
|
<button class="rowbutton rearxmit" data-action="radar_rearxmit">XMIT</button>
|
||||||
|
<button class="rowbutton rearsame" data-action="radar_rearsame">SAME</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label">REAR ANTENNA</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<button class="limit" data-action="radar_setlimit">SET FAST LIMIT</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<button class="limit" data-action="radar_speedtype" style="margin-top: 0px;">TOGGLE SPEED TYPE</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<button class="limit" data-action="radar_lockbeep" style="margin-top: 0px;">TOGGLE LOCK BEEP</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<button class="close" data-action="close">CLOSE</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Police Radar - Set Fast Limit Numpad -->
|
||||||
|
<div id="policeradarnumpad" style="display: none;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
312
nui/radar.css
312
nui/radar.css
@@ -1,302 +1,68 @@
|
|||||||
/*-------------------------------------------------------------------------
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
Wraith Radar System - v1.0.3
|
|
||||||
Created by WolfKnight
|
|
||||||
|
|
||||||
Just a word of warning, I'm not the best at CSS structure, so this
|
|
||||||
could probably be 10x better, but fuck it.
|
|
||||||
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Digital-7";
|
|
||||||
src: url( "digital-7.regular.ttf" );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Police Radar */
|
#radar {
|
||||||
#policeradar {
|
transform: scale( 2 );
|
||||||
/* To change the scale of the radar, change the value in the 'scale' function below.
|
|
||||||
Examples:
|
|
||||||
- 1.0 = default size
|
|
||||||
- 2.0 = twice the original size
|
|
||||||
- 0.5 = half the original size */
|
|
||||||
transform: scale( 2.0 );
|
|
||||||
|
|
||||||
width: 495px;
|
width: 550px;
|
||||||
height: 202px;
|
height: 210px;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
/* Temp border and pos
|
||||||
|
border: 1px solid black;*/
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
bottom: 10px;
|
|
||||||
|
|
||||||
/* Below is the configuration for whether you want the radar in the bottom right
|
|
||||||
hand corner, or the bottom middle. */
|
|
||||||
|
|
||||||
/* Bottom right */
|
|
||||||
right: 10px;
|
|
||||||
|
|
||||||
/* Bottom middle */
|
top: 0;
|
||||||
/*right: 0;
|
bottom: 0;
|
||||||
left: 0; */
|
left: 0;
|
||||||
|
right: 0;
|
||||||
color: white;
|
|
||||||
background: rgba( 20, 20, 20, 0.97 );
|
background-color: rgb(30, 33, 38);
|
||||||
background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
|
|
||||||
border-radius: 10px;
|
display: grid;
|
||||||
|
grid-template-columns: repeat( 7, auto );
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
#policeradar .antennalabel {
|
#radar > div {
|
||||||
font-family: Verdana;
|
border: 1px solid orange;
|
||||||
font-size: 14px;
|
margin: 0;
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#policeradar .antennalabeltop {
|
#radar .modes {
|
||||||
top: 0;
|
display: grid;
|
||||||
left: 0;
|
grid-template-rows: 50% 50%;
|
||||||
padding-top: 5px;
|
|
||||||
}
|
}
|
||||||
|
#radar .modes .mode_text {
|
||||||
#policeradar .antennalabelbottom {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .logo {
|
|
||||||
font-family: Verdana;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: bold;
|
|
||||||
bottom: 15px;
|
|
||||||
right: 20px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .patrolcontainer {
|
|
||||||
background-color: black;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .typecontainer {
|
|
||||||
background-color: black;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
#policeradar .typecontainer .text {
|
|
||||||
font-family: Verdana;
|
font-family: Verdana;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 27px;
|
line-height: 27px;
|
||||||
margin-left: 13px;
|
margin-left: 13px;
|
||||||
color: black;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#policeradar .typecontainer .active {
|
#radar .speeds {
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
}
|
||||||
#policeradar .container .label {
|
|
||||||
font-family: Verdana;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .speedsourcecontainer {
|
#radar .dirs {
|
||||||
width: 135px;
|
|
||||||
height: 58px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
#policeradar .container .speedsourcecontainer .speednumber {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .speedsourcecontainer .text {
|
|
||||||
font-family: "Digital-7";
|
|
||||||
font-size: 58px;
|
|
||||||
line-height: 58px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .target {
|
|
||||||
background: rgb( 200, 0, 0 );
|
|
||||||
background: linear-gradient( to bottom, rgb( 220, 0, 40 ), rgb( 90, 0, 0 ) );
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .patrol {
|
|
||||||
background: rgb( 0, 125, 0 );
|
|
||||||
background: linear-gradient( to bottom, rgb( 0, 150, 0 ), rgb( 0, 75, 0 ) );
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .locked {
|
|
||||||
color: rgb( 50, 0, 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .speedfastcontainer {
|
|
||||||
width: 99px;
|
|
||||||
height: 50px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
#policeradar .container .speedfastcontainer .speednumber {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .container .speedfastcontainer .text {
|
|
||||||
font-family: "Digital-7";
|
|
||||||
font-size: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .arrowbox {
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
#policeradar .arrowbox i {
|
|
||||||
font-size: 20px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .arrowbox .active {
|
#radar .fast_modes {
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradar .arrowbox .inactive {
|
}
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
#radar .fast_speeds {
|
||||||
|
|
||||||
/* Police Radar - Remote Control */
|
}
|
||||||
#policeradarrc {
|
|
||||||
width: 290px;
|
|
||||||
height: 380px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
padding: 10px 5px;
|
|
||||||
|
|
||||||
color: white;
|
#radar .fast_dirs {
|
||||||
background-color: rgba( 20, 20, 20, 0.95 );
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .breakline {
|
}
|
||||||
width: 230px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .label {
|
#radar .patrol {
|
||||||
font-family: Verdana;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#policeradarrc .container {
|
|
||||||
font-family: Verdana;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container button {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container button:hover {
|
|
||||||
background-color: #6cd3f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container button:active {
|
|
||||||
background-color: #56a8c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .toggle {
|
|
||||||
padding: 5px 15px;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
color: black;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .limit {
|
|
||||||
padding: 5px 15px;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
color: black;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 15px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .close {
|
|
||||||
padding: 3px 7px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .rowbutton {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .frontopp {
|
|
||||||
border-top-left-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .frontsame {
|
|
||||||
border-top-right-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .rearopp {
|
|
||||||
border-bottom-left-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#policeradarrc .container .rearsame {
|
|
||||||
border-bottom-right-radius: 50%;
|
|
||||||
}
|
|
||||||
148
nui/radar.html
148
nui/radar.html
@@ -1,158 +1,48 @@
|
|||||||
<!--
|
|
||||||
|
|
||||||
Wraith Radar System - v1.0.3
|
|
||||||
Created by WolfKnight
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<link href="radar.css" rel="stylesheet" type="text/css"/>
|
||||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||||
<script src="radar.js" type="text/javascript"></script>
|
|
||||||
<link href="radar.css" rel="stylesheet" type="text/css"/>
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onselectstart="return false;" ondragstart="return false;">
|
<body onselectstart="return false;" ondragstart="return false;">
|
||||||
<!-- Police Radar -->
|
<div id="radar">
|
||||||
<div id="policeradar" style="display: none;">
|
<div class="modes">
|
||||||
<div class="antennalabel antennalabeltop">Front Antenna</div>
|
<div class="front_modes">
|
||||||
|
<p class="mode_text" id="frontSame">SAME</p>
|
||||||
<div class="logo">WraithRS</div>
|
<p class="mode_text" id="frontOpp">OPP</p>
|
||||||
|
<p class="mode_text" id="frontXmit">XMIT</p>
|
||||||
<div class="main">
|
|
||||||
<div class="container">
|
|
||||||
<div class="typecontainer">
|
|
||||||
<div class="text"><span class="fwdsame">SAME</span></div>
|
|
||||||
<div class="text"><span class="fwdopp">OPP</span></div>
|
|
||||||
<div class="text"><span class="fwdxmit">XMIT</span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="typecontainer">
|
|
||||||
<div class="text"><span class="bwdsame">SAME</span></div>
|
|
||||||
<div class="text"><span class="bwdopp">OPP</span></div>
|
|
||||||
<div class="text"><span class="bwdxmit">XMIT</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="rear_modes">
|
||||||
<div class="patrolcontainer">
|
<p class="mode_text" id="rearSame">SAME</p>
|
||||||
<div class="speedsourcecontainer target" data-target="fwdspeed">
|
<p class="mode_text" id="rearOpp">OPP</p>
|
||||||
<div class="speednumber text"></div>
|
<p class="mode_text" id="rearXmit">XMIT</p>
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="label">FWD</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="patrolcontainer">
|
|
||||||
<div class="speedsourcecontainer target" data-target="bwdspeed">
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="label">BWD</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container" style="width: 5px;">
|
|
||||||
<div class="arrowbox">
|
|
||||||
<i class="fa fa-arrow-up fwdarrowfront"></i>
|
|
||||||
<i class="fa fa-arrow-down fwdarrowback"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrowbox">
|
|
||||||
<i class="fa fa-arrow-up bwdarrowfront"></i>
|
|
||||||
<i class="fa fa-arrow-down bwdarrowback"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="patrolcontainer" style="margin-top: 20px;">
|
|
||||||
<div class="speedfastcontainer target" data-target="fwdfast">
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="label">FWD FAST</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="patrolcontainer" style="margin-bottom: 20px;">
|
|
||||||
<div class="speedfastcontainer target" data-target="bwdfast">
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="label">BWD FAST</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="patrolcontainer">
|
|
||||||
<div class="speedfastcontainer patrol" data-target="patrolspeed">
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
<div class="speednumber text"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="label">PATROL SPEED</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="antennalabel antennalabelbottom">Rear Antenna</div>
|
<div class="speeds">
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Police Radar - Remote control -->
|
|
||||||
<div id="policeradarrc" style="display: none;">
|
|
||||||
<div class="container">
|
|
||||||
<button class="toggle" data-action="radar_toggle">TOGGLE RADAR</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="label">FRONT ANTENNA</div>
|
<div class="dirs">
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<button class="rowbutton frontopp" data-action="radar_frontopp">OPP</button>
|
|
||||||
<button class="rowbutton frontxmit" data-action="radar_frontxmit">XMIT</button>
|
|
||||||
<button class="rowbutton frontsame" data-action="radar_frontsame">SAME</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="breakline"></div>
|
<div class="fast_modes">
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<button class="rowbutton rearopp" data-action="radar_rearopp">OPP</button>
|
|
||||||
<button class="rowbutton rearxmit" data-action="radar_rearxmit">XMIT</button>
|
|
||||||
<button class="rowbutton rearsame" data-action="radar_rearsame">SAME</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="label">REAR ANTENNA</div>
|
<div class="fast_speeds">
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<button class="limit" data-action="radar_setlimit">SET FAST LIMIT</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="fast_dirs">
|
||||||
<button class="limit" data-action="radar_speedtype" style="margin-top: 0px;">TOGGLE SPEED TYPE</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="patrol">
|
||||||
<button class="limit" data-action="radar_lockbeep" style="margin-top: 0px;">TOGGLE LOCK BEEP</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<button class="close" data-action="close">CLOSE</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Police Radar - Set Fast Limit Numpad -->
|
|
||||||
<div id="policeradarnumpad" style="display: none;">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user