degradin/CampFirePlay
degradin/CampFirePlay
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

MiniApp updates

Browse Source
This commit is contained in:
Degradin 2025-01-21 00:30:10 +03:00
parent 5614002ce5
commit 8abec3f7c0
2 changed files with 365 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
public/index.html
View File

@ -4,7 +4,199 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Меню игрока</title> <title>Меню игрока</title>
<link rel="stylesheet" type="text/css" href="/styles.css"> <style>
/* Общие стили */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7fc;
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
/* Контейнер для контента */
.container {
max-width: 600px;
width: 100%;
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;
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: 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: 100%;
}
/* Профиль */
.profile-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.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-circle {
display: flex;
flex-direction: column;
align-items: center;
}
.circle-container {
position: relative;
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.circle {
stroke-width: 10;
fill: transparent;
transform-origin: center;
transform: rotate(-90deg);
}
.background-ring {
stroke: #ddd;
}
.progress-ring {
stroke: #e26f22;
stroke-dasharray: 251;
stroke-dashoffset: 251;
transition: stroke-dashoffset 1s;
}
.circle-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: bold;
}
/* Прогресс-бары */
.progress-bar {
background-color: #ddd;
border-radius: 10px;
height: 10px;
width: 100%;
margin-bottom: 10px;
overflow: hidden;
}
.progress-hp, .progress-stamina {
height: 100%;
border-radius: 10px;
transition: width 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 14px;
color: white;
}
.progress-hp {
background-color: #e26f22;
}
.progress-stamina {
background-color: #e26f22;
}
/* Статистика игрока */
.fire-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
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;
}
/* Предприятия */
.enterprise {
padding: 15px;
background-color: #f9f9f9;
border-radius: 10px;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.enterprise strong {
display: block;
margin-bottom: 5px;
}
.progress-bar-inner {
background-color: #e26f22;
height: 10px;
border-radius: 5px;
transition: width 0.5s ease;
}
</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>
<body> <body>
@ -136,13 +328,13 @@
characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100); characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100);
// Установка прогресса HP и Стамины // Установка прогресса HP и Стамины
const hpProgress = (user.hp / user.maxHp) * 100; const hpProgress = user.maxHp ? (user.hp / user.maxHp) * 100 : 0;
const staminaProgress = (user.stamina / user.maxStamina) * 100; const staminaProgress = user.maxStamina ? (user.stamina / user.maxStamina) * 100 : 0;
document.getElementById("hp-bar").style.width = `${hpProgress}%`;
document.getElementById("stamina-bar").style.width = `${staminaProgress}%`;
setInterval(() => {
document.getElementById("hp-bar").style.width = `${hpProgress}%`;
document.getElementById("stamina-bar").style.width = `${staminaProgress}%`;
}, 2000);
// Характеристики FIRE // Характеристики FIRE
document.getElementById("force").textContent = user.force; document.getElementById("force").textContent = user.force;
@ -240,7 +432,7 @@
// Обновляем сайт каждые 5 секунд для получения актуальных данных // Обновляем сайт каждые 5 секунд для получения актуальных данных
setInterval(() => { setInterval(() => {
window.location.reload(); window.location.reload();
}, 5000); }, 30000);
</script> </script>
</body> </body>
</html> </html>

341
public/styles.css
View File

@ -1,202 +1,191 @@
/* Общие стили */ /* Общие стили */
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f4f7fc; background-color: #f4f7fc;
color: #333; color: #333;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
/* Контейнер для контента */ /* Контейнер для контента */
.container { .container {
max-width: 600px; max-width: 600px;
width: 100%; width: 100%;
background: white; background: white;
padding: 20px; padding: 20px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
font-size: 16px; font-size: 16px;
} }
/* Заголовки */ /* Заголовки */
.title { .title {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
color: #e26f22; color: #e26f22;
} }
.section { .section {
margin-bottom: 20px; margin-bottom: 20px;
} }
.section h2 { .section h2 {
font-size: 20px; font-size: 20px;
margin-bottom: 10px; margin-bottom: 10px;
color: #e26f22; color: #e26f22;
} }
.section p { .section p {
margin: 5px 0; margin: 5px 0;
} }
.section span { .section span {
font-weight: bold; font-weight: bold;
} }
/* Кнопка */ /* Кнопка */
.button { .button {
display: block; display: block;
background-color: #e26f22; background-color: #e26f22;
color: white; color: white;
padding: 10px 20px; padding: 10px 20px;
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
/* Профиль */ /* Профиль */
.profile-section { .profile-section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.profile-img { .profile-img {
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.progress-circle { .progress-circle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.circle-container { .circle-container {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.circle { .circle {
stroke-width: 10; stroke-width: 10;
fill: transparent; fill: transparent;
transform-origin: center; transform-origin: center;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.background-ring { .background-ring {
stroke: #ddd; stroke: #ddd;
} }
.progress-ring { .progress-ring {
stroke: #e26f22; stroke: #e26f22;
stroke-dasharray: 251; stroke-dasharray: 251;
stroke-dashoffset: 251; stroke-dashoffset: 251;
transition: stroke-dashoffset 1s; transition: stroke-dashoffset 1s;
} }
.circle-text { .circle-text {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
/* Прогресс-бары */ /* Прогресс-бары */
.progress-bar { .progress-bar {
background-color: #ddd; background-color: #ddd;
border-radius: 10px; border-radius: 10px;
height: 10px; height: 10px;
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
width: 0; }
}
.progress-hp, .progress-stamina { .progress-hp, .progress-stamina, {
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
transition: width 0.5s ease; transition: width 0.5s ease;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: white; color: white;
} }
.progress-hp { .progress-hp {
background-color: #e26f22; background-color: #e26f22;
} }
.progress-stamina { .progress-stamina {
background-color: #4ba100; background-color: #e26f22;
} }
/* Статистика игрока */ /* Статистика игрока */
.fire-stats { .fire-stats {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 10px; gap: 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
padding: 10px; padding: 10px;
margin-top: 15px; margin-top: 15px;
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);
} }
.fire-stats .stat { .fire-stats .stat {
text-align: center; text-align: center;
} }
.fire-stats .stat span { .fire-stats .stat span {
font-weight: bold; font-weight: bold;
} }
/* Предприятия */ /* Предприятия */
.enterprise { .enterprise {
padding: 15px; padding: 15px;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 10px; border-radius: 10px;
margin-top: 10px; margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
.enterprise strong { .enterprise strong {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.progress-bar-inner {
background-color: #e26f22;
height: 10px;
border-radius: 5px;
transition: width 0.5s ease;
}
/* Анимация прогресс-бара от 100 до значений персонажа */
.progress-bar-inner.hp {
width: 100%;
}
.progress-bar-inner.stamina {
width: 100%;
}
.progress-bar-inner {
background-color: #e26f22;
height: 10px;
border-radius: 5px;
transition: width 0.5s ease;
}