Add splitted element on profile and add first steps of create characters menu

server/frontend/public/css/connect/main.css

@@ -116,14 +116,40 @@
 	backdrop-filter: blur(5px);
 	border-radius : 15px;
 	width: calc(90vw);
-	height: calc(80vh);
+	height: calc(85vh);
 	
-	margin-left: calc(5%);
+	margin-left: calc(5vw);
-	margin-top: calc(5%);
+	margin-top: calc(5vh);
 	
 	padding: 5px;
 }
 
+.flex-box {
+	display: flex;
+}
+
+.charlist-item {
+	width: 25vw;
+}
+
+.avatar-on-charlist {
+	width: 50px;
+	height: 50px;
+	margin-right: 15px;
+	border-radius: 100%;
+}
+
+.characters-menu {
+	width: 25vw;
+	height: 75vh;
+}
+
+.character-menu {
+	float: left;
+	width: 65vw;
+	height: 75vh;
+}
+
 /* $accordion-color:green; */
 /* $accordion-padding-y:1.3rem; */
 /* $accordion-padding-x:2.5rem; */

server/frontend/public/js/connect/auth.js

@@ -104,6 +104,22 @@ ServerAuth.mainMenuForm.innerHTML = `
 <div id="main-panel" >
 	<div id="main-content">
 		<center><h2>Your Profile</h2></center><hr/>
+		<div class="flex-box">
+			<div class="characters-menu">
+				<center><h4>Characters</h4></center>
+				<div class="user-character-list btn-group-vertical charlist-item" role="group" aria-label="Characters">
+					<button type="button" class="btn btn-dark btn-outline-light">
+						<div class="flex-box"><img src="https://fullgream.tech/assets/contacts-image.jpg" class="avatar-on-charlist" /><h5>John Doe</h5></div>
+					</button>
+					<button type="button" class="btn btn-success btn-outline-light">Add character</button>
+				</div>
+			</div>
+			<div class="character-menu">
+				<center><h4>Character</h4></center>
+				<div>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>