Started work on UI settings

nui/radar.css

@@ -34,6 +34,8 @@ button:focus { outline: none; }
     /* left: 0; */
 
     background-image: url( "frame.png" );
+
+    z-index: 1;
 }
 
 .frame_border {
@@ -357,7 +359,7 @@ button:focus { outline: none; }
 
     /* clip-path: polygon( 5% 0, 95% 0, 100% 25%, 90% 100%, 10% 100%, 0 25% ); */
 
-    z-index: 15;
+    z-index: 2;
 }
     /* Button template classes */
     #rc button {
@@ -561,3 +563,127 @@ button:focus { outline: none; }
     #rc .blue {
         background-color: rgb( 84, 210, 255 );
     }
+
+#uiSettingsBox {
+    width: 200px;
+    height: 250px;
+
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    /* background-color: rgb( 0, 255, 55 ); */
+    background-color: transparent;
+
+    /* display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px; */
+
+    z-index: 3;
+}
+    #uiSettingsBox .title {
+        text-align: center;
+        font-size: 20px;
+        padding: 5px 0;
+        margin: 0 auto;
+        color: rgb( 255, 255, 255 );
+        background-color: rgb( 20, 22, 18 );
+    }
+
+    #uiSettingsBox .remote_settings {
+        background-color: rgb( 20, 22, 18 );
+    }
+        #uiSettingsBox .remote_settings .alignment {
+            height: 200px;
+            background-color: purple;
+
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+        }
+            #uiSettingsBox .remote_settings .alignment .aligner {
+                height: 85%;
+                width: 25%;
+            }
+
+    #uiSettingsBox .radar_settings {
+        background-color: rgb(50, 54, 45);
+    }
+        #uiSettingsBox .radar_settings .alignment {
+            height: 200px;
+
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            align-items: center;
+
+            padding: 5px;
+        }
+            #uiSettingsBox .radar_settings .alignment .aligner {
+                width: 55px;
+                height: 55px;
+
+                position: relative;
+
+                background-color: rgb( 225, 225, 225 );
+
+                border-radius: 10px;
+            }
+
+            #uiSettingsBox .radar_settings .alignment .aligner:hover {
+                width: 55px;
+                height: 55px;
+
+                background-color: rgb( 255, 255, 255 );
+
+                position: relative;
+            }
+                #uiSettingsBox .radar_settings .alignment .aligner .arrow {
+                    width: 45px; 
+                    height: 45px;
+
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+
+                    margin: auto;
+
+                    background-color: rgb( 0, 0, 0 );
+
+                    clip-path: polygon( 50% 0, 10% 30%, 10% 50%, 40% 30%, 40% 100%, 60% 100%, 60% 30%, 90% 50%, 90% 30% );
+                }
+
+                #uiSettingsBox .radar_settings .alignment .aligner .top_left { transform: rotate( -45deg ); }
+                #uiSettingsBox .radar_settings .alignment .aligner .top_right { transform: rotate( 45deg ); }
+                #uiSettingsBox .radar_settings .alignment .aligner .left { transform: rotate( -90deg ); }
+                #uiSettingsBox .radar_settings .alignment .aligner .right { transform: rotate( 90deg ); }
+                #uiSettingsBox .radar_settings .alignment .aligner .bottom_left { transform: rotate( -135deg ); }
+                #uiSettingsBox .radar_settings .alignment .aligner .bottom { transform: rotate( 180deg ); }
+                #uiSettingsBox .radar_settings .alignment .aligner .bottom_right { transform: rotate( 135deg ); }
+
+                #uiSettingsBox .radar_settings .alignment .aligner button {
+                    width: 100%;
+                    height: 100%;
+                    
+                    position: absolute; 
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+
+                    margin: auto;
+
+                    border: none;
+                    background-color: transparent;
+                }
+
+            #uiSettingsBox .radar_settings .alignment .holo {
+                width: 55px;
+                height: 55px;
+                background-color: transparent;
+            }

nui/radar.html

@@ -160,6 +160,34 @@
 			<p class="logo"><span class="large">Wraith</span> ARS 2X</p>
 		</div>
 
+		<div id="uiSettingsBox">
+			<!-- <div class="remote_settings">
+				<p class="title">Remote</p>
+
+				<div class="alignment">
+					<button id="remoteAlignLeft" class="aligner"></button>
+					<button id="remoteAlignCentre" class="aligner"></button>
+					<button id="remoteAlignRight" class="aligner"></button>
+				</div>
+			</div> -->
+
+			<div class="radar_settings">
+				<p class="title">Radar Position</p>
+
+				<div class="alignment">
+					<div class="aligner"><div class="arrow top_left"></div><button></button></div>
+					<div class="aligner"><div class="arrow"></div><button></button></div>
+					<div class="aligner"><div class="arrow top_right"></div><button></button></div>
+					<div class="aligner"><div class="arrow left"></div><button></button></div>
+					<div class="holo"></div>
+					<div class="aligner"><div class="arrow right"></div><button></button></div>
+					<div class="aligner"><div class="arrow bottom_left"></div><button></button></div>
+					<div class="aligner"><div class="arrow bottom"></div><button></button></div>
+					<div class="aligner"><div class="arrow bottom_right"></div><button></button></div>
+				</div>
+			</div>
+		</div>
+
 		<!-- Load JavaScript files -->
 		<script src="nui://game/ui/jquery.js"></script>
 		<script src="radar.js"></script>