239 lines
9.2 KiB
HTML
239 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>Таблица лидеров</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEJgP4v8Jf+K6cM7V3zv7+uCGo5F5O+Xq6bM+bB5HXitBzvvhQ2V5+fu+n9U7" crossorigin="anonymous">
|
||
<style>
|
||
body {
|
||
background-color: #121212;
|
||
color: #e0e0e0;
|
||
font-family: 'Roboto', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
max-width: 100%;
|
||
height: 100%;
|
||
}
|
||
.container {
|
||
max-width: 100%;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
}
|
||
h1 {
|
||
font-size: 1.6rem;
|
||
text-align: center;
|
||
color: #d46600;
|
||
margin-bottom: 15px;
|
||
}
|
||
.btn-group {
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.btn {
|
||
background-color: #444;
|
||
color: #ffffff;
|
||
border: 1px solid #333;
|
||
font-size: 50%;
|
||
padding: 8px 16px;
|
||
margin: 0 5px;
|
||
border-radius: 8px;
|
||
transition: 0.3s ease;
|
||
width: 50%;
|
||
}
|
||
.btn:hover {
|
||
background-color: #00bcd4;
|
||
color: #121212;
|
||
}
|
||
.card {
|
||
background-color: #1f1f1f;
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
border: 1px solid #333;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
|
||
}
|
||
.card-header {
|
||
background-color: #222;
|
||
color: #d46600;
|
||
font-size: 1rem;
|
||
padding: 10px;
|
||
text-align: center;
|
||
}
|
||
.card-body {
|
||
padding: 15px;
|
||
background-color: #282828;
|
||
color: #b0b0b0;
|
||
}
|
||
.card-body p {
|
||
margin: 8px 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
.money {
|
||
color: #00c853;
|
||
font-weight: bold;
|
||
}
|
||
.no-data {
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
color: #888;
|
||
margin-top: 30px;
|
||
}
|
||
.icon {
|
||
font-size: 1.2rem;
|
||
color: #ffeb3b;
|
||
}
|
||
.circle {
|
||
border-radius: 5px;
|
||
background-color: orange;
|
||
color: black;
|
||
padding: 5px;
|
||
}
|
||
/* Статистика игрока */
|
||
.fire-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
padding: 10px;
|
||
margin-top: 15px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.fire-stats .stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.fire-stats .stat span {
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
<h1>Таблица Лидеров</h1>
|
||
|
||
<!-- Кнопки для выбора топа -->
|
||
<div class="btn-group" role="group">
|
||
<button type="button" class="btn" id="btn-users" onclick="fetchTop('users')">Пользователи</button>
|
||
<button type="button" class="btn" id="btn-characters" onclick="fetchTop('characters')">CampFireGG.Crime</button>
|
||
</div>
|
||
<div class="btn-group" role="group">
|
||
<button type="button" class="btn" id="btn-enterprises" onclick="fetchTop('enterprises')">Предприятия</button>
|
||
<button type="button" class="btn" id="btn-businesses" onclick="fetchTop('businesses')">Организации</button>
|
||
</div>
|
||
|
||
<!-- Контейнер для вывода данных -->
|
||
<div id="top-content"></div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz4fnFO9gyb6I7gDbNf8gU5X7ATpTftdO5n8J2LrC7gg6tGSRW3p5p1p17" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-KyZXEJgP4v8Jf+K6cM7V3zv7+uCGo5F5O+Xq6bM+bB5HXitBzvvhQ2V5+fu+n9U7" crossorigin="anonymous"></script>
|
||
<script>
|
||
// Функция для загрузки данных топа
|
||
async function fetchTop(type) {
|
||
console.log(`Загрузка данных топа: ${type}`);
|
||
const response = await fetch(`/${type}`);
|
||
const data = await response.json();
|
||
|
||
const topContent = document.getElementById('top-content');
|
||
topContent.innerHTML = ''; // Очистка текущего контента
|
||
|
||
if (data.length === 0) {
|
||
topContent.innerHTML = `<div class="no-data">Нет данных для отображения.</div>`;
|
||
return;
|
||
}
|
||
|
||
switch (type) {
|
||
case 'users':
|
||
topContent.innerHTML = data.map(player => `
|
||
<div class="card">
|
||
<div class="card-header">
|
||
${player.username} ${player.status === 'bronze' ? '[🔺]' : player.status === 'silver' ? '[🔹]' : '[🔸]'}
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Баланс: <span class="money">${player.money} ₽</span></p>
|
||
<p>Уровень: <span class="circle">${player.level}</span></p>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
break;
|
||
case 'characters':
|
||
topContent.innerHTML = data.map(character => `
|
||
<div class="card">
|
||
<div class="card-header">
|
||
${character.username}
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Грязные деньги: <span class="money">${character.dirtymoney} Ð</span></p>
|
||
<p>Уровень: <span class="circle">${character.level} </span></p>
|
||
<div class="fire-stats">
|
||
<div class="stat">
|
||
<p>Сила</p>
|
||
<span id="force">${character.force}</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Интеллект</p>
|
||
<span id="intelligence">${character.intelligence}</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Стойкость</p>
|
||
<span id="resilience">${character.resilience}</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Выносливость</p>
|
||
<span id="endurance">${character.endurance}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
break;
|
||
case 'enterprises':
|
||
topContent.innerHTML = data.map(enterprise => `
|
||
<div class="card">
|
||
<div class="card-header">
|
||
${enterprise.name} <span class="icon">${enterprise.icon}</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Тип ресурса: ${enterprise.resourceType}</p>
|
||
<p>Уровень: ${enterprise.level}</p>
|
||
<p>Производительность: ${enterprise.efficiency} ед./час</p>
|
||
<p>Емкость склада: ${enterprise.warehouseCapacity} ед.</p>
|
||
<p>Текущие ресурсы: ${enterprise.currentResources} ед.</p>
|
||
<p>Владелец: ${enterprise.owner}</p>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
break;
|
||
case 'businesses':
|
||
topContent.innerHTML = data.map(business => `
|
||
<div class="card">
|
||
<div class="card-header">
|
||
${business.name}
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Владелец: ${business.owner}</p>
|
||
<p>Баланс: ${business.balance} ₽</p>
|
||
<p>Пользователи: ${business.usersCount}</p>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
break;
|
||
default:
|
||
topContent.innerHTML = `<div class="no-data">Неизвестный тип топа.</div>`;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Инициализация
|
||
fetchTop('users'); // Показываем топ пользователей по умолчанию
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|