ihrz
Version:
iHrz in ts!
269 lines (240 loc) • 8.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: white;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.container {
background-color: #2c2c2c;
border-radius: 15px;
padding: 20px;
max-width: 100%;
width: 1024px;
height: auto;
box-sizing: border-box;
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.header {
grid-column: span 3;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.header h1 {
font-size: 28px;
margin: 0;
}
.header img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.stat {
background-color: #383838;
padding: 20px;
border-radius: 10px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.chart-container {
background-color: #383838;
padding: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
grid-column: span 1;
grid-row: span 1;
}
canvas {
max-width: 100%;
height: 400px;
}
.top-message-members,
.top-message-channels {
background-color: #383838;
padding: 15px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.list-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 16px;
}
.footer {
grid-column: span 3;
font-size: 12px;
color: #888;
text-align: center;
margin-top: 10px;
}
@media (max-width: 1024px) {
.container {
width: 90%;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
width: 100%;
}
.stat,
.chart-container,
.top-message-members,
.top-message-channels {
width: 100%;
}
}
.noto-color-emoji-regular {
font-family: "Noto Color Emoji", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>{header_h1_value}</h1>
<img src="{author_pfp}" alt="Server Logo">
</div>
<div class="stat">
<p class="label" style="font-weight: bold;">{messages_word}</p>
<p>1d<br><strong>{message_daily} {messages_word}</strong></p>
<p>7d<br><strong>{message_weekly} {messages_word}</strong></p>
<p>30d<br><strong>{message_monthly} {messages_word}</strong></p>
</div>
<div class="chart-container">
<canvas id="statsChart"></canvas>
</div>
<div class="stat">
<p class="label" style="font-weight: bold;">{voice_activity}</p>
<p>1d<br><strong>{voice_daily} {minutes_word}</strong></p>
<p>7d<br><strong>{voice_weekly} {minutes_word}</strong></p>
<p>30d<br><strong>{voice_monthly} {minutes_word}</strong></p>
</div>
<div class="top-message-members">
<p class="label" style="font-weight: bold;">{top_message}</p>
<div class="list-item">
<span># {messages_top1}</span><span>{messages_top1_2} {messages_word}</span>
</div>
<div class="list-item">
<span># {messages_top2}</span><span>{messages_top2_2} {messages_word}</span>
</div>
<div class="list-item">
<span># {messages_top3}</span><span>{messages_top3_2} {messages_word}</span>
</div>
</div>
<div class="top-message-channels">
<p class="label" style="font-weight: bold;">{top_voice}</p>
<div class="list-item">
<span># {voice_top1}</span><span>{voice_top1_2}</span>
</div>
<div class="list-item">
<span># {voice_top2}</span><span>{voice_top2_2}</span>
</div>
<div class="list-item">
<span># {voice_top3}</span><span>{voice_top3_2} </span>
</div>
</div>
<div class="top-message-channels">
<p class="label" style="font-weight: bold;">{guild_name}</p>
<div class="list-item">
<span>iHorizon</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const messageData = {messageData};
const voiceData = {voiceData};
const labels = Array.from({ length: 30 }, (_, i) => `.`);
const ctx = document.getElementById('statsChart').getContext('2d');
const statsChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '{messages_word}',
data: messageData,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: false,
tension: 0.1
},
{
label: '{voice_activity}',
data: voiceData,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: false,
tension: 0.1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: ''
},
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0
}
},
y: {
title: {
display: true,
},
ticks: {
stepSize: 5
},
beginAtZero: true
}
},
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});
</script>
</body>
</html>