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

This commit is contained in:
fullgream 2025-08-16 17:46:40 +03:00
parent af987ce195
commit 8e3d83cc43
2 changed files with 45 additions and 3 deletions

View File

@ -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-top: calc(5%);
margin-left: calc(5vw);
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; */

View File

@ -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>