I'm currently making games where the user can print a card of themselves with their name, id, and their current experience like this : 
You must've had known what I'm going to ask here just by looking at the picture, is there anyway where I can use two overlaying div and make one of the div (that represent the current level) stick to the left part of the previous div (that represent maximum experience)? So as the experience system is increasing, the div will be longer than before as it was an experience bar in the game.
This card will be static because it is printed later on. I'm going to use HTML formater Jinja2 and convert the HTML file into PNG using this library, but I would do the javascript programming later after finishing this mockup. So, what can I do? Or is there any more efficient graphic system instead of using divs in HTML?
Here's my code :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:url("background.jpg");
overflow: hidden;
}
.card {
display: grid;
grid-template-columns: 300px;
grid-template-rows: 210px 210px 80px;
grid-template-areas: "image" "text" "stats";
border-radius: 18px;
background: white;
font-family: roboto;
text-align: center;
transition: 0.5s ease;
margin:30px;
}
.card-image {
grid-area: image;
background-color: #212121 ;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-size: cover;
}
.card-text {
grid-area: text;
margin: 70px;
}
.card-text .date {
color: #37474F;
font-size:18px;
}
.card-text p {
color: grey;
font-size:15px;
font-weight: 300;
}
.card-text h2 {
margin-top:0px;
font-size:28px;
}
.card-stats {
grid-area: stats;
display: flex;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
align-items: center;
justify-content: center;
flex-direction: column;
background: #424242
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
margin-top: 70px;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.card-stats .stat {
padding:10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
}
.card-stats .value{
font-size:22px;
font-weight: 500;
}
.card-stats .value sup{
font-size:12px;
}
.card-stats .type{
font-size:11px;
font-weight: 300;
text-transform: uppercase;
}
.expBar {
height: 14px;
width: 26.5%;
background-color: #00E5FF;
border-radius: 10px;
z-index: 1;
justify-content: center;
position: fixed;
}
.expBar-on {
height: 14px;
width: 10%;
max-width: 26.5%;
background-color: #004D40;
z-index: 5;
border-radius: 10px;
justify-content: center;
position: absolute;
}
.exp{
margin-top:43px;
margin-left: 180px;
left: 30px;
font-size: 15px;
font-family: roboto;
color: white;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="card">
<div class="card-image">
<div class="card-avatar">
<div class="image-container">
<img src="E:\SideProjects\pythonBot\avatar.jpg">
</div>
</div>
</div>
<div class="container-box">
</div>
<div class="card-text">
<h2> Ethan </h2>
<span class="date"> #33616 </span>
</div>
<div class="card-stats">
<div class="expBar">
</div>
<div class="expBar-on">
</div>
<span class="exp"> 500xp </span>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire