328 lines
15 KiB
HTML
328 lines
15 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">
|
||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
|
||
<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;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
}
|
||
.card-body {
|
||
padding: 15px;
|
||
background-color: #282828;
|
||
border-radius: 0 0 10px 10px;
|
||
color: #b0b0b0;
|
||
}
|
||
.card-body p {
|
||
margin: 8px 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
.no-data {
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
color: #888;
|
||
margin-top: 30px;
|
||
}
|
||
.icon {
|
||
font-size: 1.2rem;
|
||
color: #ffeb3b;
|
||
}
|
||
/* Статистика игрока */
|
||
.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;
|
||
}
|
||
|
||
.circle {
|
||
width: 20px; /* Размер круга */
|
||
height: 20px; /* Размер круга */
|
||
border-radius: 50%; /* Скругление для круга */
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: 'Orbitron', sans-serif; /* Используем футуристический шрифт */
|
||
font-size: 11px; /* Размер текста внутри круга */
|
||
color: white; /* Цвет текста */
|
||
background: radial-gradient(circle, rgba(255, 165, 0, 1) 10%, rgba(255, 69, 0, 1) 60%, rgba(255, 0, 0, 1) 100%); /* Огненный градиент */
|
||
background-size: 200% 200%;
|
||
animation: fireGlow 2s ease-in-out infinite; /* Анимации */
|
||
text-shadow: 0 0 5px rgba(255, 69, 0, 0.9), 0 0 10px rgba(255, 69, 0, 0.8), 0 0 15px rgba(255, 69, 0, 0.7); /* Эффект свечения */
|
||
}
|
||
|
||
@keyframes fireGlow {
|
||
0% {
|
||
box-shadow: 0 0 10px rgba(255, 69, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.5), 0 0 30px rgba(255, 69, 0, 0.3);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 20px rgba(255, 69, 0, 1), 0 0 40px rgba(255, 69, 0, 0.8), 0 0 60px rgba(255, 69, 0, 0.6);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 10px rgba(255, 69, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.5), 0 0 30px rgba(255, 69, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
|
||
.money {
|
||
font-family: 'Orbitron', sans-serif; /* Используем тот же футуристический шрифт */
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: #00ff99; /* Цвет текста — светлый неоново-зеленый */
|
||
text-shadow: 0 0 5px rgba(0, 255, 153, 0.8), 0 0 10px rgba(0, 255, 153, 0.7), 0 0 15px rgba(0, 255, 153, 0.6); /* Электронный блеск */
|
||
letter-spacing: 2px; /* Немного увеличиваем расстояние между символами для эффектности */
|
||
text-transform: uppercase; /* Верхний регистр для четкости */
|
||
background: linear-gradient(90deg, #00ff99, #33ccff, #ff33cc); /* Градиент для фона текста */
|
||
background-clip: text; /* Применяем фон к тексту */
|
||
color: transparent; /* Делаем текст прозрачным, чтобы фон был виден */
|
||
animation: glow-electronic 3s infinite alternate; /* Анимация мерцающего эффекта */
|
||
}
|
||
|
||
@keyframes glow-electronic {
|
||
0% {
|
||
text-shadow: 0 0 5px rgba(0, 255, 153, 0.8), 0 0 10px rgba(0, 255, 153, 0.7), 0 0 15px rgba(0, 255, 153, 0.6);
|
||
}
|
||
50% {
|
||
text-shadow: 0 0 10px rgba(0, 255, 153, 1), 0 0 20px rgba(0, 255, 153, 0.9), 0 0 30px rgba(0, 255, 153, 0.8);
|
||
}
|
||
100% {
|
||
text-shadow: 0 0 5px rgba(0, 255, 153, 0.8), 0 0 10px rgba(0, 255, 153, 0.7), 0 0 15px rgba(0, 255, 153, 0.6);
|
||
}
|
||
}
|
||
|
||
|
||
.nickname {
|
||
font-family: 'Orbitron', sans-serif; /* Шрифт с футуристическим стилем */
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
background: linear-gradient(90deg, #00ff99, #00ccff, #ff33cc); /* Градиент для текста */
|
||
background-clip: text; /* Применяет фон к тексту */
|
||
color: transparent; /* Делаем текст прозрачным, чтобы фон был виден */
|
||
text-shadow: 0 0 10px rgba(0, 255, 153, 0.7), 0 0 20px rgba(0, 204, 255, 0.7), 0 0 30px rgba(255, 51, 204, 0.7); /* Неоновые тени */
|
||
letter-spacing: 1px; /* Расстояние между буквами для футуристичного эффекта */
|
||
text-transform: uppercase; /* Преобразуем в верхний регистр для более стильного вида */
|
||
transition: all 0.3s ease; /* Плавные переходы */
|
||
}
|
||
|
||
.nickname:hover {
|
||
transform: scale(1.05); /* Легкое увеличение при наведении */
|
||
text-shadow: 0 0 15px rgba(0, 255, 153, 1), 0 0 40px rgba(0, 204, 255, 1), 0 0 60px rgba(255, 51, 204, 1);
|
||
}
|
||
|
||
.company {
|
||
font-family: 'Orbitron', sans-serif; /* Футуристический шрифт */
|
||
font-size: 16px; /* Размер текста */
|
||
font-weight: bold; /* Жирное начертание */
|
||
color: #00FFFF; /* Холодный цвет для футуристичного эффекта */
|
||
text-transform: uppercase; /* Заглавные буквы */
|
||
letter-spacing: 2px; /* Расстояние между буквами для четкости */
|
||
background: linear-gradient(90deg, #00FFFF, #0099CC, #003366); /* Градиент */
|
||
-webkit-background-clip: text; /* Применение градиента к тексту */
|
||
color: transparent; /* Прозрачный цвет для текста */
|
||
text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.3); /* Тени для неонового эффекта */
|
||
transition: all 0.3s ease; /* Плавные переходы */
|
||
}
|
||
|
||
.company:hover {
|
||
transform: scale(1.05); /* Легкое увеличение при наведении */
|
||
text-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 25px rgba(0, 255, 255, 0.8), 0 0 35px rgba(0, 255, 255, 0.6); /* Увеличение свечения при наведении */
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
<h1 class="company">Таблица Лидеров</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">
|
||
<span class="nickname">${player.username} ${player.status === 'bronze' ? '[🔺]' : player.status === 'silver' ? '[🔹]' : player.status === 'gold' ? '[🔸]' : player.status === 'admin' ? '[🛡️]' : ''}
|
||
</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">
|
||
<span class="nickname">${character.username}
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Баланс: <span class="money">${character.dirtymoney} Ð</span></p>
|
||
<p>Уровень: <span class="circle">${character.level}</span></p>
|
||
<p>Врагов ликвидировано: ${character.enemiesKilled}</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">
|
||
<span class="company">${enterprise.name} <span class="icon">${enterprise.icon}</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Тип ресурса: ${enterprise.resourceType}</p>
|
||
<p>Уровень: <span class="circle">${enterprise.level}</span></p>
|
||
<p>Производительность: ${enterprise.efficiency} ед./час</p>
|
||
<p>Емкость склада: ${enterprise.warehouseCapacity} ед.</p>
|
||
<p>Текущие ресурсы: ${enterprise.currentResources} ед.</p>
|
||
<p>Владелец: <span class="nickname">${enterprise.owner}</p>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
break;
|
||
case 'businesses':
|
||
topContent.innerHTML = data.map(business => `
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="company">${business.name}
|
||
</div>
|
||
<div class="card-body">
|
||
<p>Владелец: <span class="nickname">${business.owner}</span></p>
|
||
<p>Баланс: <span class="money">${business.balance} ₽</span></p>
|
||
<p>Сотрудники: ${business.usersCount}</p>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
break;
|
||
default:
|
||
topContent.innerHTML = `<div class="no-data">Неизвестный тип топа.</div>`;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Инициализация
|
||
fetchTop('users'); // Показываем топ пользователей по умолчанию
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|