ihrz
Version:
iHrz in ts!
151 lines (139 loc) • 4.81 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Previous styles remain the same */
body {
background-color: #36393f;
color: #ffffff;
font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 512px;
position: relative;
}
.title-container {
padding-top: 20px;
padding-bottom: 40px;
position: relative;
z-index: 10;
}
/* Rest of the previous styles... */
.podium-container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 300px;
gap: 30px;
margin-top: 20px;
position: relative;
z-index: 1;
}
.podium-spot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: linear-gradient(145deg, #2f3438, #1a1c1f);
box-shadow:
0 10px 15px rgba(0, 0, 0, 0.4),
0 4px 6px rgba(0, 0, 0, 0.2),
inset 0 0 20px rgba(255, 215, 0, 0.1);
border-radius: 15px;
padding: 20px;
position: relative;
transition: all 0.4s ease;
overflow: hidden;
height: 100%;
width: 200px;
}
.podium-spot:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 15px 30px rgba(255, 215, 0, 0.2),
0 6px 10px rgba(0, 0, 0, 0.3);
}
.avatar {
border-radius: 50%;
border: 4px solid;
position: relative;
width: 80px;
height: 80px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.first-place .avatar { border-color: #ffd700; }
.second-place .avatar { border-color: #c0c0c0; }
.third-place .avatar { border-color: #cd7f32; }
.wealth-badge {
background: linear-gradient(135deg, #ffd700, #b8860b);
color: #ffffff;
padding: 8px 16px;
font-size: 0.9rem;
font-weight: bold;
margin-top: 10px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.card-content {
text-align: center;
margin: 15px 0;
}
h2 {
font-size: 1.2rem;
font-weight: bold;
margin: 10px 0 5px;
background: linear-gradient(to right, #ffd700, #daa520);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.highlight-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #ffd700, #daa520, #b8860b);
animation: shimmer 3s linear infinite;
background-size: 200% 100%;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</head>
<body class="bg-gray-900">
<div class="title-container">
<h1 class="text-4xl font-bold text-center bg-gradient-to-r from-yellow-400 to-yellow-600 bg-clip-text text-transparent">{title}</h1>
</div>
<div class="podium-container">
<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>
</div>
<div class="wealth-badge">{coin_emoji} {3_wealth}</div>
</div>
<div class="podium-spot first-place" style="height: 120%">
<div class="highlight-bar"></div>
<img src="{1_avatar}" alt="First Place Avatar" class="avatar" />
<div class="card-content">
<h2>{1_username}</h2>
</div>
<div class="wealth-badge">{coin_emoji} {1_wealth}</div>
</div>
<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>
</div>
<div class="wealth-badge">{coin_emoji} {2_wealth}</div>
</div>
</div>
</body>
</html>