ihrz
Version:
iHrz in ts!
154 lines (138 loc) • 4.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #36393f;
color: #ffffff;
font-family: "Whitney", "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
.podium-container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 300px;
gap: 30px;
}
.podium-spot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: linear-gradient(145deg, #2c2f33, #23272a);
box-shadow:
0 10px 15px rgba(0, 0, 0, 0.4),
0 4px 6px rgba(0, 0, 0, 0.2);
border-radius: 12px;
padding: 20px;
position: relative;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
overflow: hidden;
height: 100%;
width: 200px;
}
.podium-spot:hover {
transform: translateY(-10px);
box-shadow:
0 15px 20px rgba(0, 0, 0, 0.5),
0 6px 8px rgba(0, 0, 0, 0.3);
}
.avatar {
border-radius: 50%;
border: 4px solid gold;
position: relative;
width: 80px;
height: 80px;
}
.second-place .avatar {
border-color: silver;
}
.third-place .avatar {
border-color: #cd7f32;
}
.xp-badge {
background: linear-gradient(to right, #22c55e, #16a34a);
color: #ffffff;
padding: 5px 15px;
font-size: 0.85rem;
font-weight: bold;
margin-top: 10px;
border-radius: 12px;
text-align: center;
}
.card-content {
text-align: center;
}
h2 {
font-size: 1.2rem;
font-weight: bold;
margin: 10px 0 5px;
}
p {
font-size: 0.95rem;
color: #b9bbbe;
margin: 0;
}
.highlight-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #fbbf24, #f97316, #ef4444);
animation: move-bar 3s linear infinite;
}
@keyframes move-bar {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
</style>
</head>
<body class="bg-gray-900 p-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-white">{title}</h1>
</div>
<div class="podium-container">
<!-- Third Place -->
<div class="podium-spot third-place">
<div class="highlight-bar"></div>
<img src="{3_avatar}" alt="Third Place Avatar" class="avatar" />
<div class="card-content">
<h2>{3_username}</h2>
<p>{3_level}</p>
</div>
<div class="xp-badge">{3_xp} XP</div>
</div>
<!-- First Place -->
<div class="podium-spot first-place">
<div class="highlight-bar"></div>
<img src="{1_avatar}" alt="First Place Avatar" class="avatar" />
<div class="card-content">
<h2>{1_username}</h2>
<p>{1_level}</p>
</div>
<div class="xp-badge">{1_xp} XP</div>
</div>
<!-- Second Place -->
<div class="podium-spot second-place">
<div class="highlight-bar"></div>
<img src="{2_avatar}" alt="Second Place Avatar" class="avatar" />
<div class="card-content">
<h2>{2_username}</h2>
<p>{2_level}</p>
</div>
<div class="xp-badge">{2_xp} XP</div>
</div>
</div>
</body>
</html>