parent
e852f0c03a
commit
6ac1b6139e
3 changed files with 83 additions and 70 deletions
@ -1,68 +1,87 @@ |
|||||||
#modal_profile |
#modal_profile |
||||||
{ |
{ |
||||||
width: 50%; |
width: 60%; |
||||||
height: 45%; |
height: 70%; |
||||||
padding: 0; |
padding: 10px; |
||||||
background-color: rgba(82, 82, 82, 0.774); |
background-color: rgba(0, 0, 0, 0.521); |
||||||
border-width: 0px; |
border: none; |
||||||
|
border-radius: 10px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
color: white; |
||||||
} |
} |
||||||
|
|
||||||
.profile-modal |
.profile-header |
||||||
{ |
{ |
||||||
margin: 20px; |
width: 100%; |
||||||
color: white; |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
} |
} |
||||||
.profile-header |
|
||||||
|
.profile-header p |
||||||
{ |
{ |
||||||
font-size: 14px; |
font-size: 40px; |
||||||
} |
} |
||||||
|
|
||||||
.profile-header button |
.profile-header button |
||||||
{ |
{ |
||||||
font-size: 25px; |
|
||||||
width: 30px; |
|
||||||
height: 30px; |
|
||||||
background-color: transparent; |
|
||||||
border-color: transparent; |
|
||||||
float: right; |
|
||||||
} |
|
||||||
.logout-logo img{ |
|
||||||
z-index: -1; |
|
||||||
position: absolute; |
|
||||||
width: 7%; |
|
||||||
} |
|
||||||
.profile-footer{ |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.profile-header button p |
||||||
|
{ |
||||||
|
font-size: 25px; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
} |
} |
||||||
.profile-footer button |
|
||||||
|
.profile-content |
||||||
{ |
{ |
||||||
position: relative; |
width: 80%; |
||||||
width: 63px; |
display: grid; |
||||||
height: 63px; |
grid-template-columns: 1fr 1fr; |
||||||
background-color: transparent; |
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; |
||||||
border-color: transparent; |
border: 1px solid white; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 0; |
||||||
} |
} |
||||||
.profile-footer p |
|
||||||
|
.profile-content p |
||||||
{ |
{ |
||||||
color: red; |
text-align: center; |
||||||
font-size: 22px; |
|
||||||
margin-bottom: -1px; |
|
||||||
margin-top: -9px; |
|
||||||
} |
} |
||||||
.profile-footer button:hover |
|
||||||
|
.tb-r |
||||||
{ |
{ |
||||||
cursor: pointer; |
border-right: 1px solid white; |
||||||
} |
} |
||||||
#btn-token{ |
|
||||||
background-color: grey; |
.profile-footer |
||||||
|
{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-around; |
||||||
|
width: 80%; |
||||||
|
padding: 5px; |
||||||
} |
} |
||||||
#btn-token:hover{ |
|
||||||
background-color: transparent; |
#btn-logout |
||||||
cursor: pointer; |
{ |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
padding: 0; |
||||||
|
border: none; |
||||||
|
background: none; |
||||||
} |
} |
||||||
.profile-header button:hover |
|
||||||
|
#btn-logout img |
||||||
{ |
{ |
||||||
cursor: pointer; |
width: 100%; |
||||||
|
height: 100%; |
||||||
} |
} |
||||||
@ -1,25 +1,19 @@ |
|||||||
<div class="profile-modal"> |
<div class="profile-header"> |
||||||
<div class="profile-header"> |
<div></div> |
||||||
<button id="btn-close">X</button> |
<p class="">Profile</p> |
||||||
<h1>Profile</h1> |
<button id="btn-close"><p>X</p></button> |
||||||
</div> |
</div> |
||||||
|
<div class="profile-content"> |
||||||
<div class="profile-content"> |
<p class="tb-r">Name</p><p id="name"></p> |
||||||
<hr> |
<p class="tb-r">Faction</p><p id="faction"></p> |
||||||
<p id="name">Name: </p> |
<p class="tb-r">Credits</p><p id="credit"></p> |
||||||
<p id="faction">Faction: </p> |
<p class="tb-r">Head Quaters</p><p id="hq"></p> |
||||||
<p id="credit">Credit: </p> |
<p class="tb-r">Number of ships</p><p id="shipcount"></p> |
||||||
<p id="hq">Headquarters: </p> |
</div> |
||||||
<p id="shipcount">Ship count: </p> |
|
||||||
<p id="token">Token: <button id="btn-token">COPY</button></p> |
|
||||||
<hr> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="profile-footer"> |
<div class="profile-footer"> |
||||||
<p>Logout</p> |
<button id="btn-logout"> |
||||||
<div class="logout-logo"> |
<img src="/assets/menu/logout.png" alt=""> |
||||||
<img src="/assets/menu/logout.png" alt=""> |
</button> |
||||||
<button id="btn-logout"></button> |
<button id="btn-token">COPY TOKEN</button> |
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
Loading…
Reference in New Issue