diff --git a/nui/digital-7.regular.ttf b/nui/old/digital-7.regular.ttf similarity index 100% rename from nui/digital-7.regular.ttf rename to nui/old/digital-7.regular.ttf diff --git a/nui/old/radar.css b/nui/old/radar.css new file mode 100644 index 0000000..8b11ff4 --- /dev/null +++ b/nui/old/radar.css @@ -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%; +} \ No newline at end of file diff --git a/nui/old/radar.html b/nui/old/radar.html new file mode 100644 index 0000000..186e1f3 --- /dev/null +++ b/nui/old/radar.html @@ -0,0 +1,158 @@ + + + + + + + + + + + + +
+
Front Antenna
+ + + +
+
+
+
SAME
+
OPP
+
XMIT
+
+ +
+
SAME
+
OPP
+
XMIT
+
+
+ +
+
+
+
0
+
0
+
0
+
+ +
FWD
+
+ +
+
+
0
+
0
+
0
+
+ +
BWD
+
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+
+
0
+
0
+
0
+
+ +
FWD FAST
+
+ +
+
+
0
+
0
+
0
+
+ +
BWD FAST
+
+
+ +
+
+
+
0
+
0
+
0
+
+ +
PATROL SPEED
+
+
+
+ +
Rear Antenna
+
+ + + + + + + + + + \ No newline at end of file diff --git a/nui/radar.js b/nui/old/radar.js similarity index 100% rename from nui/radar.js rename to nui/old/radar.js diff --git a/nui/radar.css b/nui/radar.css index 970a277..4d3ed4d 100644 --- a/nui/radar.css +++ b/nui/radar.css @@ -1,302 +1,68 @@ -/*------------------------------------------------------------------------- - - 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" ); +div { + box-sizing: border-box; } -/* 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 ); +#radar { + transform: scale( 2 ); - width: 495px; - height: 202px; + width: 550px; + height: 210px; + + padding: 0; + + /* Temp border and pos + border: 1px solid black;*/ position: absolute; 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 */ - /*right: 0; - left: 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; + top: 0; + bottom: 0; + left: 0; + right: 0; + + background-color: rgb(30, 33, 38); + + display: grid; + grid-template-columns: repeat( 7, auto ); } - #policeradar .antennalabel { - font-family: Verdana; - font-size: 14px; - font-weight: bold; - text-align: center; - width: 100%; - position: absolute; + #radar > div { + border: 1px solid orange; + margin: 0; } - #policeradar .antennalabeltop { - top: 0; - left: 0; - padding-top: 5px; + #radar .modes { + display: grid; + grid-template-rows: 50% 50%; } - - #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 { + #radar .modes .mode_text { font-family: Verdana; font-size: 10px; line-height: 27px; margin-left: 13px; - color: black; + color: white; } - #policeradar .typecontainer .active { - color: white; - } + #radar .speeds { - #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%; - } + #radar .dirs { - #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; - } + #radar .fast_modes { - #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; - background-color: rgba( 20, 20, 20, 0.95 ); - border-radius: 5px; - - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; -} + #radar .fast_dirs { -#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%; -} \ No newline at end of file + #radar .patrol { + + } \ No newline at end of file diff --git a/nui/radar.html b/nui/radar.html index 33e2875..0d90a3e 100644 --- a/nui/radar.html +++ b/nui/radar.html @@ -1,158 +1,48 @@ - - + - - - - -