Update index.html
This commit is contained in:
Degradin
parent
b7db1ecd55
commit
ab6d6c2ac9
@ -6,7 +6,6 @@
|
|||||||
<title>Меню игрока</title>
|
<title>Меню игрока</title>
|
||||||
<style>
|
<style>
|
||||||
/* Общие стили */
|
/* Общие стили */
|
||||||
<<<<<<< Updated upstream
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -168,127 +167,11 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
=======
|
|
||||||
body {
|
|
||||||
font-family: 'Arial', sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #f4f7fc;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Контейнер для контента */
|
.fire-stats .stat {
|
||||||
.container {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 20px auto;
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 15px;
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Заголовки */
|
|
||||||
.title {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
}
|
||||||
color: #e26f22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section h2 {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #e26f22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section p {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section span {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кнопка */
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
background-color: #e26f22;
|
|
||||||
color: white;
|
|
||||||
padding: 10px 20px;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-align: center;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Эмодзи */
|
|
||||||
.emoji {
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Иконки ресурсов */
|
|
||||||
.resource-icon {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для предприятия */
|
|
||||||
.enterprise {
|
|
||||||
padding: 15px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Контейнер профиля */
|
|
||||||
.profile-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Аватар профиля */
|
|
||||||
.profile-img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кольца прогресса */
|
|
||||||
.progress-ring {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
|
|
||||||
circle {
|
|
||||||
transition: stroke-dashoffset 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
<<<<<<< Updated upstream
|
|
||||||
.fire-stats .stat span {
|
.fire-stats .stat span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@ -313,113 +196,6 @@ circle {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: width 0.5s ease;
|
transition: width 0.5s ease;
|
||||||
}
|
}
|
||||||
=======
|
|
||||||
.level-ring {
|
|
||||||
stroke-width: 10;
|
|
||||||
fill: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-level-ring {
|
|
||||||
stroke: #e26f22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.character-level-ring {
|
|
||||||
stroke: #4e9f3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
#progress-ring {
|
|
||||||
stroke-dasharray: 283;
|
|
||||||
stroke-dashoffset: 283;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Уровень в профиле */
|
|
||||||
.level-circle {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -7px;
|
|
||||||
right: 10px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: #e26f22;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Прогресс-бары */
|
|
||||||
.progress-bar {
|
|
||||||
margin-top: 15px;
|
|
||||||
background-color: #ddd;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-hp {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #e26f22;
|
|
||||||
transition: width 0.5s ease;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-stamina {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #4ba100;
|
|
||||||
transition: width 0.5s ease;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Статистика игрока */
|
|
||||||
.fire-stats {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
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 {
|
|
||||||
stroke-width: 10;
|
|
||||||
fill: transparent;
|
|
||||||
transform-origin: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-level-ring {
|
|
||||||
stroke-dasharray: 141.5; /* Половина окружности */
|
|
||||||
}
|
|
||||||
|
|
||||||
.character-level-ring {
|
|
||||||
stroke-dasharray: 141.5; /* Половина окружности */
|
|
||||||
transform: rotate(180deg); /* Поворот правого полукруга */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
</style>
|
</style>
|
||||||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
@ -431,39 +207,23 @@ circle {
|
|||||||
<div id="profile-img" class="profile-img"></div>
|
<div id="profile-img" class="profile-img"></div>
|
||||||
<div class="progress-circle">
|
<div class="progress-circle">
|
||||||
<div class="circle-container">
|
<div class="circle-container">
|
||||||
<<<<<<< Updated upstream
|
|
||||||
<svg class="circle" width="100" height="100">
|
<svg class="circle" width="100" height="100">
|
||||||
=======
|
|
||||||
<svg class="circle">
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
<circle class="background-ring" cx="50" cy="50" r="40"></circle>
|
<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>
|
<circle class="progress-ring" id="profile-progress" cx="50" cy="50" r="40"></circle>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="circle-text" id="profile-level">0</div>
|
<div class="circle-text" id="profile-level">0</div>
|
||||||
<<<<<<< Updated upstream
|
|
||||||
</div>
|
</div>
|
||||||
<p>Профиль</p>
|
<p>Профиль</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-circle">
|
<div class="progress-circle">
|
||||||
<div class="circle-container">
|
<div class="circle-container">
|
||||||
<svg class="circle" width="100" height="100">
|
<svg class="circle" width="100" height="100">
|
||||||
=======
|
|
||||||
<p>Профиль</p>
|
|
||||||
</div>
|
|
||||||
<div class="circle-container">
|
|
||||||
<svg class="circle">
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
<circle class="background-ring" cx="50" cy="50" r="40"></circle>
|
<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>
|
<circle class="progress-ring" id="character-progress" cx="50" cy="50" r="40"></circle>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="circle-text" id="character-level">0</div>
|
<div class="circle-text" id="character-level">0</div>
|
||||||
<<<<<<< Updated upstream
|
|
||||||
</div>
|
</div>
|
||||||
<p>Персонаж</p>
|
<p>Персонаж</p>
|
||||||
=======
|
|
||||||
<p>Персонаж</p>
|
|
||||||
</div>
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -553,23 +313,11 @@ circle {
|
|||||||
// Уровни профиля и персонажа
|
// Уровни профиля и персонажа
|
||||||
document.getElementById("profile-level").textContent = user.profileLevel;
|
document.getElementById("profile-level").textContent = user.profileLevel;
|
||||||
document.getElementById("character-level").textContent = user.characterLevel;
|
document.getElementById("character-level").textContent = user.characterLevel;
|
||||||
<<<<<<< Updated upstream
|
|
||||||
|
|
||||||
const profileProgress = document.getElementById("profile-progress");
|
const profileProgress = document.getElementById("profile-progress");
|
||||||
const characterProgress = document.getElementById("character-progress");
|
const characterProgress = document.getElementById("character-progress");
|
||||||
profileProgress.style.strokeDashoffset = 251 - (251 * user.profileLevel / 100);
|
profileProgress.style.strokeDashoffset = 251 - (251 * user.profileLevel / 100);
|
||||||
characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100);
|
characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100);
|
||||||
=======
|
|
||||||
|
|
||||||
const profileProgress = document.getElementById("profile-progress");
|
|
||||||
const characterProgress = document.getElementById("character-progress");
|
|
||||||
profileProgress.style.strokeDashoffset = 251 - (251 * user.profileLevel / 100);
|
|
||||||
characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100);
|
|
||||||
|
|
||||||
|
|
||||||
// Уровень в кружке
|
|
||||||
document.getElementById("level-circle").textContent = user.profileLevel;
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
|
|
||||||
// Установка прогресса HP и Стамины
|
// Установка прогресса HP и Стамины
|
||||||
const hpProgress = (user.hp / user.maxHp) * 100;
|
const hpProgress = (user.hp / user.maxHp) * 100;
|
||||||
@ -607,11 +355,7 @@ circle {
|
|||||||
const progress = (ent.currentResources / ent.warehouseCapacity) * 100;
|
const progress = (ent.currentResources / ent.warehouseCapacity) * 100;
|
||||||
const progressBar = document.createElement("div");
|
const progressBar = document.createElement("div");
|
||||||
progressBar.classList.add("progress-bar");
|
progressBar.classList.add("progress-bar");
|
||||||
<<<<<<< Updated upstream
|
|
||||||
progressBar.innerHTML = `<div class="progress-bar-inner" style="width: ${progress}%"></div>`;
|
progressBar.innerHTML = `<div class="progress-bar-inner" style="width: ${progress}%"></div>`;
|
||||||
=======
|
|
||||||
progressBar.innerHTML = `<div class="progress-hp" style="width: ${progress}%">${progress}%</div>`;
|
|
||||||
>>>>>>> Stashed changes
|
|
||||||
div.appendChild(progressBar);
|
div.appendChild(progressBar);
|
||||||
enterprisesDiv.appendChild(div);
|
enterprisesDiv.appendChild(div);
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user