ihrz
Version:
iHrz in ts!
264 lines (236 loc) • 7.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
}
.container {
background-color: #2c2c2c;
border-radius: 15px;
padding: 20px;
width: 1024px;
margin: 20px;
box-sizing: border-box;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.stat-box {
background-color: #383838;
padding: 15px;
border-radius: 10px;
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #4e5d94;
}
.stat-label {
font-size: 14px;
color: #888;
margin-top: 5px;
}
.chart-container {
background-color: #383838;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
height: 300px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
background-color: #383838;
padding: 15px;
border-radius: 10px;
}
.header-left {
display: flex;
align-items: center;
}
.header-left img {
width: 64px;
height: 64px;
border-radius: 50%;
margin-right: 15px;
}
.header-text h1 {
margin: 0;
font-size: 24px;
}
.header-text p {
margin: 5px 0 0;
color: #888;
}
.header-right {
text-align: right;
}
.header-right p {
margin: 5px 0;
color: #888;
}
.header-right .date {
color: #4e5d94;
font-weight: bold;
}
.locale-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
}
.locale-box {
background-color: #383838;
padding: 15px;
border-radius: 10px;
height: 150px;
overflow-y: auto;
}
.locale-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #4e5d94;
}
.locale-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid #444;
}
.locale-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-left">
<img src="{author_pfp}" alt="Profile Picture">
<div class="header-text">
<h1>AuthRestore</h1>
<p>{guild_name}</p>
</div>
</div>
<div class="header-right">
<p>{created_by} {config_author}</p>
<p class="date">{created_on} {create_date}</p>
<p>{role}: {role_id}</p>
</div>
</div>
<div class="stats-grid">
<div class="stat-box">
<div class="stat-value">{total_members}</div>
<div class="stat-label">{total_members2}</div>
</div>
<div class="stat-box">
<div class="stat-value">{total_verifications}</div>
<div class="stat-label">{total_verification2}</div>
</div>
<div class="stat-box">
<div class="stat-value">{key_used_count}</div>
<div class="stat-label">{key_used_count2}</div>
</div>
</div>
<div class="chart-container">
<canvas id="registrationChart"></canvas>
</div>
<div class="locale-stats">
<div class="locale-box">
<div class="locale-title">{recent_locales_distribution}</div>
<div id="localeList"></div>
</div>
<div class="locale-box">
<div class="locale-title">{recent_verifications}</div>
<div id="recentList"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const registrationData = {registrationData};
const timeLabels = {timeLabels};
const localeData = {localeData};
const recentVerifications = {recentVerifications};
const ctx = document.getElementById('registrationChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: timeLabels,
datasets: [{
label: '{registration_over_time}',
data: registrationData,
borderColor: '#4e5d94',
backgroundColor: 'rgba(78, 93, 148, 0.2)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
color: '#444'
},
ticks: {
color: '#fff'
}
},
x: {
grid: {
color: '#444'
},
ticks: {
color: '#fff'
}
}
},
plugins: {
legend: {
labels: {
color: '#fff'
}
}
}
}
});
const localeList = document.getElementById('localeList');
Object.entries(localeData).forEach(([locale, count]) => {
const div = document.createElement('div');
div.className = 'locale-item';
div.innerHTML = `<span>${locale}</span><span>${count}</span>`;
localeList.appendChild(div);
});
const recentList = document.getElementById('recentList');
recentVerifications.forEach(verification => {
const div = document.createElement('div');
div.className = 'locale-item';
div.innerHTML = `<span>${verification.username}</span><span>${verification.date}</span>`;
recentList.appendChild(div);
});
</script>
</body>
</html>