ihrz
Version:
iHrz in ts!
196 lines (167 loc) • 4.87 kB
HTML
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
width: 800px;
height: 400px;
background: transparent;
}
.card {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2b2d31 0%, #1e1f22 100%);
border-radius: 16px;
overflow: hidden;
display: flex;
}
.left-panel {
width: 280px;
background: rgba(0, 0, 0, 0.2);
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.avatar-container {
width: 180px;
height: 180px;
border-radius: 50%;
border: 4px solid ACCENT_COLOR;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 0 15px ACCENT_COLOR, 0 0 30px ACCENT_COLOR;
}
.avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.bot-badge {
position: absolute;
top: 160px;
right: 75px;
background: ACCENT_COLOR;
color: white;
padding: 4px 12px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.status {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.3);
padding: 8px 16px;
border-radius: 20px;
margin-bottom: 12px;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: STATUS_COLOR;
box-shadow: 0 0 10px STATUS_COLOR, 0 0 20px STATUS_COLOR;
}
.status-text {
color: #fff;
font-size: 14px;
font-weight: 500;
}
.right-panel {
flex: 1;
padding: 32px;
color: #fff;
}
.name-container {
margin-bottom: 24px;
}
.global-name {
font-size: 32px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.username {
font-size: 16px;
color: #b5bac1;
}
.details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.detail-item {
background: rgba(0, 0, 0, 0.2);
padding: 16px;
border-radius: 12px;
}
.detail-label {
color: #b5bac1;
font-size: 14px;
margin-bottom: 4px;
}
.detail-value {
color: #fff;
font-size: 16px;
font-weight: 500;
}
.code-block {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 12px;
font-family: 'Consolas', monospace;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="card">
<div class="left-panel">
<div class="avatar-container">
<img class="avatar" src="AVATAR_URL" alt="Bot Avatar">
</div>
<div class="status">
<span class="status-dot"></span>
<span class="status-text">STATUS_TEXT</span>
</div>
</div>
<div class="right-panel">
<div class="name-container">
<div class="global-name">BOT_NAME</div>
<div class="username">@BOT_USERNAME</div>
</div>
<div class="details">
<div class="detail-item">
<div class="detail-label">Bot ID</div>
<div class="detail-value">BOT_ID</div>
</div>
<div class="detail-item">
<div class="detail-label">Public</div>
<div class="detail-value">PUBLIC_STATUS</div>
</div>
<div class="detail-item">
<div class="detail-label">Owner</div>
<div class="detail-value">OWNER_TAG</div>
</div>
<div class="detail-item">
<div class="detail-label">Expires</div>
<div class="detail-value">EXPIRE_DATE</div>
</div>
</div>
<div class="code-block">
Code: BOT_CODE
</div>
</div>
</div>
</body>
</html>