ihrz
Version:
iHrz in ts!
104 lines (92 loc) • 2.5 kB
HTML
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background: #2C2F33;
width: 600px;
height: 200px;
box-sizing: border-box;
color: white;
}
.card {
background: #23272A;
border-radius: 10px;
padding: 20px;
position: relative;
display: flex;
height: 100%;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
.info {
flex-grow: 1;
}
.username {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
color: #FFFFFF;
}
.level {
font-size: 18px;
color: #7289DA;
margin-bottom: 15px;
}
.progress-container {
background: #40444B;
height: 24px;
border-radius: 12px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.progress-bar {
background: linear-gradient(90deg, #5865F2, #7289DA);
height: 100%;
border-radius: 12px;
transition: width 0.3s ease;
}
.xp-text {
position: absolute;
width: 100%;
text-align: center;
line-height: 24px;
color: white;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.stats {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #B9BBBE;
}
</style>
</head>
<body>
<div class="card">
<img src="AVATAR_URL" class="avatar" />
<div class="info">
<div class="username">USERNAME</div>
<div class="level">{level} LEVEL</div>
<div class="progress-container">
<div class="progress-bar" style="width: PROGRESS_PERCENT%"></div>
<div class="xp-text">CURRENT_XP / XP_NEEDED XP</div>
</div>
<div class="stats">
<span>{needed_xp} XP_REMAINING</span>
<span>{xp_total} TOTAL_XP</span>
</div>
</div>
</div>
</body>
</html>