MiniApp Updates
This commit is contained in:
Degradin 2025-01-18 03:09:35 +03:00
parent ab6d6c2ac9
commit 3271d464c6
3 changed files with 175 additions and 402 deletions

View File

@ -1,94 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Bonus</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7fc;
color: #333;
text-align: center;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin: 20px auto;
width: 90%;
max-width: 400px;
}
.day {
padding: 15px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.day.today {
background-color: #e26f22;
color: #fff;
font-weight: bold;
}
.day.claimed {
background-color: #4caf50;
color: white;
}
</style>
</head>
<body>
<h1>Ежедневный бонус</h1>
<div class="calendar" id="calendar"></div>
<script>
const tg = window.Telegram.WebApp;
const today = new Date().getDate();
// Фиктивные данные (замените запросом к вашему серверу)
const rewards = [
{ day: 1, reward: '100 монет' },
{ day: 2, reward: '200 монет' },
{ day: 3, reward: '50 опыта' },
// Добавьте остальные дни...
];
const claimedDays = []; // Дни, в которые пользователь уже получил награду (серверные данные)
const calendar = document.getElementById('calendar');
for (let i = 1; i <= 31; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'day';
dayElement.innerText = i;
const reward = rewards.find(r => r.day === i);
if (reward) {
dayElement.title = `🎁 ${reward.reward}`;
}
if (i === today) {
dayElement.classList.add('today');
}
if (claimedDays.includes(i)) {
dayElement.classList.add('claimed');
}
dayElement.addEventListener('click', () => {
if (i === today && !claimedDays.includes(i)) {
claimedDays.push(i);
dayElement.classList.add('claimed');
tg.sendData(JSON.stringify({ day: i })); // Отправляем данные на сервер
alert(`Вы получили награду: ${reward ? reward.reward : 'Награда не найдена'}`);
}
});
calendar.appendChild(dayElement);
}
tg.ready();
</script>
</body>
</html>

View File

@ -4,199 +4,7 @@
<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>
<style> <link rel="stylesheet" type="text/css" href="/styles.css">
/* Общие стили */
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: #4ba100;
}
/* Статистика игрока */
.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>

View File

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