489 lines
21 KiB
HTML
489 lines
21 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://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* Общие стили */
|
||
body {
|
||
font-family: 'Tektur', sans-serif;
|
||
background-color: #121212;
|
||
color: #e0e0e0;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
width: 90%;
|
||
max-width: 800px;
|
||
padding: 20px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border-radius: 15px;
|
||
box-shadow: 0 0 20px rgba(226, 111, 34, 0.3);
|
||
text-align: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #e26f22;
|
||
text-shadow: 0 0 10px rgba(226, 111, 34, 0.8), 0 0 20px rgba(226, 111, 34, 0.5);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Секции */
|
||
.section {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
border: 2px solid #e26f22;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.section h2 {
|
||
font-size: 22px;
|
||
color: #e26f22;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.section p {
|
||
font-size: 16px;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
/* Прогресс-бары */
|
||
.progress-bar {
|
||
position: relative;
|
||
height: 20px;
|
||
width: 100%;
|
||
background: linear-gradient(90deg, #e26f22, #e28f22, #e29c22); /* Градиент */
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
margin: 10px 0;
|
||
box-shadow: 0 0 10px rgba(226, 111, 34, 0.6), 0 0 20px rgba(226, 111, 34, 0.4), 0 0 30px rgba(226, 111, 34, 0.3); /* Тени для неонового эффекта */
|
||
transition: all 0.3s ease; /* Плавные переходы */
|
||
}
|
||
|
||
.progress-bar:hover {
|
||
transform: scale(1.05); /* Легкое увеличение при наведении */
|
||
box-shadow: 0 0 15px rgba(226, 111, 34, 1), 0 0 25px rgba(226, 111, 34, 0.8), 0 0 35px rgba(226, 111, 34, 0.6); /* Увеличение свечения при наведении */
|
||
}
|
||
|
||
.progress-hp, .progress-stamina {
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.progress-hp {
|
||
background: linear-gradient(90deg, red, darkred);
|
||
}
|
||
|
||
.progress-stamina {
|
||
background: linear-gradient(90deg, green, darkgreen);
|
||
}
|
||
|
||
/* FIRE характеристики */
|
||
.fire-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
|
||
.stat {
|
||
padding: 10px;
|
||
border: 2px solid #e26f22;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
text-align: center;
|
||
}
|
||
|
||
.stat span {
|
||
font-size: 20px;
|
||
color: #e26f22;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Круги прогресса */
|
||
.progress-circle {
|
||
display: inline-block;
|
||
text-align: center;
|
||
margin: 10px;
|
||
}
|
||
|
||
.circle-container {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.circle {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.background-ring {
|
||
fill: none;
|
||
stroke: rgba(255, 255, 255, 0.1);
|
||
stroke-width: 8;
|
||
}
|
||
|
||
.progress-ring {
|
||
fill: none;
|
||
stroke: #e26f22;
|
||
stroke-width: 8;
|
||
stroke-dasharray: 251;
|
||
stroke-dashoffset: 251;
|
||
transition: stroke-dashoffset 0.5s ease;
|
||
}
|
||
|
||
.circle-text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #e26f22;
|
||
text-shadow: 0 0 10px rgba(226, 111, 34, 0.8);
|
||
}
|
||
|
||
/* Кнопка */
|
||
.button {
|
||
display: block;
|
||
margin: 20px auto 0;
|
||
padding: 10px 20px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(90deg, #e26f22, #0099CC);
|
||
text-decoration: none;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 15px rgba(226, 111, 34, 0.6);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.button:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 25px rgba(226, 111, 34, 0.8);
|
||
}
|
||
|
||
/* Картинка профиля */
|
||
.profile-img {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
margin: 10px auto;
|
||
background-size: cover;
|
||
background-position: center;
|
||
border: 2px solid #e26f22;
|
||
box-shadow: 0 0 10px rgba(226, 111, 34, 0.6), 0 0 20px rgba(226, 111, 34, 0.4), 0 0 30px rgba(226, 111, 34, 0.3); /* Тени для неонового эффекта */
|
||
transition: all 0.3s ease; /* Плавные переходы */
|
||
}
|
||
|
||
.profile-img:hover {
|
||
transform: scale(1.05); /* Легкое увеличение при наведении */
|
||
box-shadow: 0 0 15px rgba(226, 111, 34, 1), 0 0 25px rgba(226, 111, 34, 0.8), 0 0 35px rgba(226, 111, 34, 0.6); /* Увеличение свечения при наведении */
|
||
}
|
||
|
||
.company {
|
||
font-family: 'Tektur', sans-serif; /* Футуристический шрифт */
|
||
font-size: 16px; /* Размер текста */
|
||
font-weight: bold; /* Жирное начертание */
|
||
color: #e26f22; /* Холодный цвет для футуристичного эффекта */
|
||
text-transform: uppercase; /* Заглавные буквы */
|
||
letter-spacing: 2px; /* Расстояние между буквами для четкости */
|
||
background: linear-gradient(90deg, #e26f22, #e28f22, #e29c22); /* Градиент */
|
||
-webkit-background-clip: text; /* Применение градиента к тексту */
|
||
color: transparent; /* Прозрачный цвет для текста */
|
||
text-shadow: 0 0 10px rgba(226, 111, 34, 0.6), 0 0 20px rgba(226, 111, 34, 0.4), 0 0 30px rgba(226, 111, 34, 0.3); /* Тени для неонового эффекта */
|
||
transition: all 0.3s ease; /* Плавные переходы */
|
||
}
|
||
|
||
.company:hover {
|
||
transform: scale(1.05); /* Легкое увеличение при наведении */
|
||
text-shadow: 0 0 15px rgba(226, 111, 34, 1), 0 0 25px rgba(226, 111, 34, 0.8), 0 0 35px rgba(226, 111, 34, 0.6); /* Увеличение свечения при наведении */
|
||
}
|
||
|
||
.money {
|
||
font-family: 'Tektur', 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: 'Tektur', 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);
|
||
}
|
||
</style>
|
||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="company">📜 Меню игрока</div>
|
||
|
||
<div class="profile-section">
|
||
<div id="profile-img" class="profile-img"></div>
|
||
<div class="progress-circle">
|
||
<div class="circle-container">
|
||
<svg class="circle" width="100" height="100">
|
||
<circle class="background-ring" cx="50" cy="50" r="40"></circle>
|
||
<circle class="progress-ring" id="profile-progress" cx="50" cy="50" r="40"></circle>
|
||
</svg>
|
||
<div class="circle-text" id="profile-level">0</div>
|
||
</div>
|
||
<p>Профиль</p>
|
||
</div>
|
||
<div class="progress-circle">
|
||
<div class="circle-container">
|
||
<svg class="circle" width="100" height="100">
|
||
<circle class="background-ring" cx="50" cy="50" r="40"></circle>
|
||
<circle class="progress-ring" id="character-progress" cx="50" cy="50" r="40"></circle>
|
||
</svg>
|
||
<div class="circle-text" id="character-level">0</div>
|
||
</div>
|
||
<p>Персонаж</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-bar">
|
||
<div class="progress-hp" id="hp-bar" style="width: 0%;"></div>
|
||
</div>
|
||
|
||
<div class="progress-bar">
|
||
<div class="progress-stamina" id="stamina-bar" style="width: 0%;"></div>
|
||
</div>
|
||
|
||
<div class="fire-stats">
|
||
<div class="stat">
|
||
<p>Сила</p>
|
||
<span id="force">—</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Интеллект</p>
|
||
<span id="intelligence">—</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Стойкость</p>
|
||
<span id="resilience">—</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Выносливость</p>
|
||
<span id="endurance">—</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2 class="company">👤 Личные данные</h2>
|
||
<p>Имя: <span class="nickname" id="name">—</span></p>
|
||
<p>Telegram ID: <span id="telegramID">—</span></p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2 class="company">👤 Профиль</h2>
|
||
<p>Деньги: <span class="money" id="money">—</span></p>
|
||
<p>Грязные деньги: <span class="money" id="dirtymoney">—</span></p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2 class="company">🏢 Организация</h2>
|
||
<p>Название: <span class="company" id="business-name">—</span></p>
|
||
<p>Баланс: <span class="money" id="business-balance">—</span></p>
|
||
<p>Материалы: <span id="business-materials">—</span></p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2 class="company">🏭 Предприятия</h2>
|
||
<div id="enterprises">
|
||
<p>Нет активных предприятий.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2 class="company">🗄️ Склад</h2>
|
||
<div id="warehouse">
|
||
<p>Нет доступного склада.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="/scoreboard" class="button">🔒</a>
|
||
</div>
|
||
|
||
<script>
|
||
const tg = window.Telegram.WebApp;
|
||
const playerId = tg.initDataUnsafe.user.id;
|
||
|
||
fetch(`/player/${playerId}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
const { user, business, enterprises, warehouse } = data;
|
||
|
||
// Личные данные
|
||
document.getElementById("name").textContent = user.name || user.username;
|
||
document.getElementById("telegramID").textContent = user.telegramID;
|
||
|
||
// Профиль
|
||
document.getElementById("money").textContent = "₽" + user.money;
|
||
document.getElementById("dirtymoney").textContent = "Ð" + user.dirtymoney;
|
||
|
||
// Устанавливаем картинку профиля
|
||
const profileImg = document.getElementById("profile-img");
|
||
const profilePhotoUrl = tg.initDataUnsafe.user.photo_url;
|
||
|
||
if (profilePhotoUrl) {
|
||
profileImg.style.backgroundImage = `url(${profilePhotoUrl})`;
|
||
} else {
|
||
profileImg.style.backgroundImage = `url('https://via.placeholder.com/100')`;
|
||
}
|
||
|
||
// Уровни профиля и персонажа
|
||
document.getElementById("profile-level").textContent = user.profileLevel;
|
||
document.getElementById("character-level").textContent = user.characterLevel;
|
||
|
||
const profileProgress = document.getElementById("profile-progress");
|
||
const characterProgress = document.getElementById("character-progress");
|
||
const profileProgressValue = (user.profileExp / user.profileExpToUp) * 251;
|
||
const characterProgressValue = (user.characterExp / user.characterExpToUp) * 251;
|
||
profileProgress.style.strokeDashoffset = 251 - profileProgressValue;
|
||
characterProgress.style.strokeDashoffset = 251 - characterProgressValue;
|
||
|
||
// Установка прогресса HP и Стамины
|
||
let hpProgress = user.maxHp ? (user.hp / user.maxHp) * 100 : 0;
|
||
let staminaProgress = user.maxStamina ? (user.stamina / user.maxStamina) * 100 : 0;
|
||
if (hpProgress <= 0) hpProgress = 0;
|
||
if (staminaProgress <= 0) staminaProgress = 0;
|
||
|
||
|
||
document.getElementById("hp-bar").style.width = `${hpProgress}%`;
|
||
document.getElementById("hp-bar").textContent = `❤`;
|
||
document.getElementById("stamina-bar").style.width = `${staminaProgress}%`;
|
||
document.getElementById("stamina-bar").style.backgroundColor = `green`;
|
||
document.getElementById("stamina-bar").textContent = `🔋`;
|
||
|
||
|
||
// Характеристики FIRE
|
||
document.getElementById("force").textContent = user.force;
|
||
document.getElementById("intelligence").textContent = user.intelligence;
|
||
document.getElementById("endurance").textContent = user.endurance;
|
||
document.getElementById("resilience").textContent = user.resilience;
|
||
|
||
// Организация
|
||
document.getElementById("business-name").textContent = business.name;
|
||
document.getElementById("business-balance").textContent = "₽" + business.balance;
|
||
document.getElementById("business-materials").textContent = business.materials;
|
||
|
||
// Предприятия
|
||
const enterprisesDiv = document.getElementById("enterprises");
|
||
if (enterprises.length > 0) {
|
||
enterprisesDiv.innerHTML = "";
|
||
enterprises.forEach(ent => {
|
||
const div = document.createElement("div");
|
||
div.classList.add("section");
|
||
div.innerHTML = `
|
||
<strong>${ent.name}</strong><br>
|
||
Тип ресурса: ${getResourceIcon(ent.resourceType)} ${getResourceName(ent.resourceType)}<br>
|
||
Уровень: ${ent.level}<br>
|
||
Эффективность: ${ent.efficiency}/час<br>
|
||
Заполненность склада: ${ent.currentResources}/${ent.warehouseCapacity}<br><br>
|
||
`;
|
||
// Добавляем прогрессбар заполненности склада
|
||
const progress = (ent.currentResources / ent.warehouseCapacity) * 100;
|
||
const progressBar = document.createElement("div");
|
||
progressBar.innerHTML = `<div class="progress-bar" style="width: ${progress}%"></div>`;
|
||
div.appendChild(progressBar);
|
||
enterprisesDiv.appendChild(div);
|
||
});
|
||
}
|
||
|
||
// Склад
|
||
const warehouseDiv = document.getElementById("warehouse");
|
||
if (warehouse.maxMaterials != 0) {
|
||
warehouseDiv.innerHTML = "";
|
||
const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond'];
|
||
resources.forEach(res => {
|
||
const div = document.createElement("div");
|
||
div.innerHTML = `${getResourceIcon(res)} ${getResourceName(res)}: ${warehouse[res]}`;
|
||
warehouseDiv.appendChild(div);
|
||
});
|
||
// Добавляем прогрессбар заполненности склада
|
||
const warehouseCapacity = warehouse.wood + warehouse.coal + warehouse.oil + warehouse.metall + warehouse.gold + warehouse.diamond;
|
||
const progress = (warehouseCapacity / warehouse.capacity) * 100;
|
||
const progressBar = document.createElement("div");
|
||
progressBar.innerHTML = `<div class="progress-bar" style="width: ${progress}%"></div>`;
|
||
warehouseDiv.appendChild(progressBar);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error("Ошибка загрузки данных:", err);
|
||
});
|
||
|
||
function getResourceIcon(resource) {
|
||
switch (resource.toLowerCase()) {
|
||
case 'wood': return '🌳';
|
||
case 'metall': return '🛠️';
|
||
case 'oil': return '🛢️';
|
||
case 'coal': return '⛏️';
|
||
case 'gold': return '💰';
|
||
case 'diamond': return '💎';
|
||
default: return '⚙️';
|
||
}
|
||
}
|
||
|
||
function getResourceName(resource) {
|
||
switch (resource.toLowerCase()) {
|
||
case 'wood': return 'Дерево';
|
||
case 'metall': return 'Металл';
|
||
case 'oil': return 'Нефть';
|
||
case 'coal': return 'Уголь';
|
||
case 'gold': return 'Золото';
|
||
case 'diamond': return 'Алмазы';
|
||
default: return 'Ресурс';
|
||
}
|
||
}
|
||
|
||
// Обновляем сайт каждые 5 секунд для получения актуальных данных
|
||
setInterval(() => {
|
||
window.location.reload();
|
||
}, 30000);
|
||
</script>
|
||
</body>
|
||
</html> |