From 546c01e22363c3ae727eab637061541ddd794908 Mon Sep 17 00:00:00 2001
From: Andyyy7666 <86536434+Andyyy7666@users.noreply.github.com>
Date: Sat, 26 Feb 2022 01:48:22 +0100
Subject: [PATCH] Update index.html

some nice changes to the input bars
---
 ND_Core/source/ui/index.html | 126 ++++++++++++++++++++++++-----------
 1 file changed, 86 insertions(+), 40 deletions(-)

diff --git a/ND_Core/source/ui/index.html b/ND_Core/source/ui/index.html
index 0f5d510..a4af9e3 100644
--- a/ND_Core/source/ui/index.html
+++ b/ND_Core/source/ui/index.html
@@ -60,28 +60,51 @@
             <p id="characterCreatorTopText"><a class="fas fa-user-edit" style="color:white;"></a> Character Creation</p>
             <hr id="characterCreatorTopTextLine">
             <div id="characterInfoContainer">
-                <!--First & last name-->
-                <label class="firstRowText" style="margin-right: 15.7vw;" for="firstname">First Name</label>
-                <label class="firstRowText" style="margin-right: 15.7vw;" for="lastname">Last Name</label>
-                <input id="firstName" class="firstRowInput" style="margin-right: 4.1vw;" type="text" placeholder="First Name" name="firstname" required>
-                <input id="lastName" class="firstRowInput" style="margin-right: 4.1vw;" type="text" placeholder="Last Name" name="lastname" required>
+                <div id="characterInfoContainerLeft">
+                    <!--First name-->
+                    <label class="firstRowText" for="firstname">First Name</label>
+                    <br>
+                    <input id="firstName" class="firstRowInput" type="text" placeholder="First Name" name="firstname" required>
 
-                <!--Dob and gender-->
-                <label class="secondRowText" style="margin-right: 15vw;" for="dob">Date of Birth</label>
-                <label class="secondRowText" style="margin-right: 15vw;" for="gender">Gender</label>
-                <input id="dateOfBirth" class="secondRowInput" style="margin-right: 4.35vw;" type="date" name="dob" required>
-                <select id="gender" class="secondRowInput" style="margin-right: 4.35vw;" name="gender" required>
-                    <option class="secondRowInput">Male</option>
-                    <option class="secondRowInput">Female</option>
-                </select>
+                    <br>
 
-                <!--Twotter name and department-->
-                <label class="thirdRowText" style="margin-right: 14.38vw;" for="twotter">Twotter Name</label>
-                <label class="thirdRowText" style="margin-right: 14.38vw;" for="department">Department</label>
-                <input id="twtName" class="thirdRowInput" style="margin-right: 4.2vw;" type="text" placeholder="Twotter Name" name="twotter" required>
-                <select id="department" class="thirdRowInput departments" style="margin-right: 4.2vw;" name="department" required></select>
+                    <!--Dob-->
+                    <label class="secondRowText" for="dob">Date of Birth</label>
+                    <br>
+                    <input id="dateOfBirth" class="secondRowInput" type="date" name="dob" required>
+
+                    <br>
+
+                    <!--Twotter name-->
+                    <label class="thirdRowText" for="twotter">Twotter Name</label>
+                    <br>
+                    <input id="twtName" class="thirdRowInput" type="text" placeholder="Twotter Name" name="twotter" required>
+                </div>
+                <div id="characterInfoContainerRight">
+                    <!--Last name-->
+                    <label class="firstRowText" for="lastname">Last Name</label>
+                    <br>
+                    <input id="lastName" style="width: 93%;" class="firstRowInput" type="text" placeholder="Last Name" name="lastname" required>
+
+                    <br>
+
+                    <!--gender-->
+                    <label class="secondRowText" for="gender">Gender</label>
+                    <br>
+                    <select id="gender" class="secondRowInput" name="gender" required>
+                        <option class="secondRowInput">Male</option>
+                        <option class="secondRowInput">Female</option>
+                    </select>
+
+                    <br>
+
+                    <!--Department-->
+                    <label class="thirdRowText" for="department">Department</label>
+                    <br>
+                    <select id="department" class="thirdRowInput departments" name="department" required></select>
+                </div>
             </div>
-            <hr id="characterCreatorTopTextLine" style="margin-top: 5vh;">
+            <hr id="characterCreatorTopTextLine">
             <button id="submitCharacterCreation" class="characterSubmitButton" type="submit" form="characterCreator"><a class="fas fa-plus-circle" style="color:white;"></a> Create Character</button>
             <button id="cancelCharacterCreation" class="characterResetButton" type="reset"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
         </form>
@@ -91,28 +114,51 @@
             <p id="characterCreatorTopText"><a class="fas fa-user-edit" style="color:white;"></a> Character Editor</p>
             <hr id="characterCreatorTopTextLine">
             <div id="characterInfoContainer">
-                <!--First & last name-->
-                <label class="firstRowText" style="margin-right: 15.7vw;" for="firstname">First Name</label>
-                <label class="firstRowText" style="margin-right: 15.7vw;" for="lastname">Last Name</label>
-                <input id="newFirstName" class="firstRowInput" style="margin-right: 4.1vw;" type="text" placeholder="First Name" name="firstname" required>
-                <input id="newLastName" class="firstRowInput" style="margin-right: 4.1vw;" type="text" placeholder="Last Name" name="lastname" required>
-                
-                <!--Dob and gender-->
-                <label class="secondRowText" style="margin-right: 15vw;" for="dob">Date of Birth</label>
-                <label class="secondRowText" style="margin-right: 15vw;" for="gender">Gender</label>
-                <input id="newDateOfBirth" class="secondRowInput" style="margin-right: 4.35vw;" type="date" name="dob" required>
-                <select id="newGender" class="secondRowInput" style="margin-right: 4.35vw;" name="gender" required>
-                    <option class="secondRowInput">Male</option>
-                    <option class="secondRowInput">Female</option>
-                </select>
-                
-                <!--Twotter name and department-->
-                <label class="thirdRowText" style="margin-right: 14.38vw;" for="twotter">Twotter Name</label>
-                <label class="thirdRowText" style="margin-right: 14.38vw;" for="department">Department</label>
-                <input id="newTwtName" class="thirdRowInput" style="margin-right: 4.2vw;" type="text" placeholder="Twotter Name" name="twotter" required>
-                <select id="newDepartment" class="thirdRowInput departments" style="margin-right: 4.2vw;" name="department" required></select>
+                <div id="characterInfoContainerLeft">
+                    <!--First name-->
+                    <label class="firstRowText" for="firstname">First Name</label>
+                    <br>
+                    <input id="newFirstName" class="firstRowInput" type="text" placeholder="First Name" name="firstname" required>
+
+                    <br>
+
+                    <!--Dob-->
+                    <label class="secondRowText" for="dob">Date of Birth</label>
+                    <br>
+                    <input id="newDateOfBirth" class="secondRowInput" type="date" name="dob" required>
+
+                    <br>
+
+                    <!--Twotter name-->
+                    <label class="thirdRowText" for="twotter">Twotter Name</label>
+                    <br>
+                    <input id="newTwtName" class="thirdRowInput" type="text" placeholder="Twotter Name" name="twotter" required>
+                </div>
+                <div id="characterInfoContainerRight">
+                    <!--Last name-->
+                    <label class="firstRowText" for="lastname">Last Name</label>
+                    <br>
+                    <input id="newLastName" style="width: 93%;" class="firstRowInput" type="text" placeholder="Last Name" name="lastname" required>
+                    
+                    <br>
+
+                    <!--gender-->
+                    <label class="secondRowText" for="gender">Gender</label>
+                    <br>
+                    <select id="newGender" class="secondRowInput" name="gender" required>
+                        <option class="secondRowInput">Male</option>
+                        <option class="secondRowInput">Female</option>
+                    </select>
+
+                    <br>
+                    
+                    <!--Department-->
+                    <label class="thirdRowText" for="department">Department</label>
+                    <br>
+                    <select id="newDepartment" class="thirdRowInput departments" name="department" required></select>
+                </div>
             </div>
-            <hr id="characterCreatorTopTextLine" style="margin-top: 5vh;">
+            <hr id="characterCreatorTopTextLine">
             <button id="submitCharacterEditing" class="characterSubmitButton" type="submit" form="characterEditor"><a class="fas fa-plus-circle" style="color:white;"></a> Save Changes</button>
             <button id="cancelCharacterEditing" class="characterResetButton" type="reset"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
         </form>