From 8abec3f7c002c6b116d30722b282d5d50a72ed9e Mon Sep 17 00:00:00 2001
From: Degradin <42292046+Degradin@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:30:10 +0300
Subject: [PATCH] MiniApp updates

---
 public/index.html | 208 ++++++++++++++++++++++++++--
 public/styles.css | 341 ++++++++++++++++++++++------------------------
 2 files changed, 365 insertions(+), 184 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3bf58d4..d48cd76 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,199 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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>
 </head>
 <body>
@@ -136,13 +328,13 @@
                 characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100);
 
                 // Установка прогресса HP и Стамины
-                const hpProgress = (user.hp / user.maxHp) * 100;
-                const staminaProgress = (user.stamina / user.maxStamina) * 100;
+                const hpProgress = user.maxHp ? (user.hp / user.maxHp) * 100 : 0;
+                const staminaProgress = user.maxStamina ? (user.stamina / user.maxStamina) * 100 : 0;
 
-                setInterval(() => {
-                    document.getElementById("hp-bar").style.width = `${hpProgress}%`;
-                    document.getElementById("stamina-bar").style.width = `${staminaProgress}%`;
-                }, 2000);
+                
+                document.getElementById("hp-bar").style.width = `${hpProgress}%`;
+                document.getElementById("stamina-bar").style.width = `${staminaProgress}%`;
+                
 
                 // Характеристики FIRE
                 document.getElementById("force").textContent = user.force;
@@ -240,7 +432,7 @@
         // Обновляем сайт каждые 5 секунд для получения актуальных данных
         setInterval(() => {
             window.location.reload();
-        }, 5000);
+        }, 30000);
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 19decb3..4fa5808 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,202 +1,191 @@
 /* Общие стили */
-        body {
-            font-family: 'Arial', sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f4f7fc;
-            color: #333;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
+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;
-        }
+/* Контейнер для контента */
+.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;
-        }
+/* Заголовки */
+.title {
+    font-size: 28px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #e26f22;
+}
 
-        .section {
-            margin-bottom: 20px;
-        }
+.section {
+    margin-bottom: 20px;
+}
 
-        .section h2 {
-            font-size: 20px;
-            margin-bottom: 10px;
-            color: #e26f22;
-        }
+.section h2 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #e26f22;
+}
 
-        .section p {
-            margin: 5px 0;
-        }
+.section p {
+    margin: 5px 0;
+}
 
-        .section span {
-            font-weight: bold;
-        }
+.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%;
-        }
+/* Кнопка */
+.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-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);
-        }
+.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;
-        }
+.progress-circle {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
-        .circle-container {
-            position: relative;
-            width: 100px;
-            height: 100px;
-            margin-bottom: 10px;
-        }
+.circle-container {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 10px;
+}
 
-        .circle {
-            stroke-width: 10;
-            fill: transparent;
-            transform-origin: center;
-            transform: rotate(-90deg);
-        }
+.circle {
+    stroke-width: 10;
+    fill: transparent;
+    transform-origin: center;
+    transform: rotate(-90deg);
+}
 
-        .background-ring {
-            stroke: #ddd;
-        }
+.background-ring {
+    stroke: #ddd;
+}
 
-        .progress-ring {
-            stroke: #e26f22;
-            stroke-dasharray: 251;
-            stroke-dashoffset: 251;
-            transition: stroke-dashoffset 1s;
-        }
+.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;
-        }
+.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;
-            width: 0;
-        }
+/* Прогресс-бары */
+.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, .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-hp {
+    background-color: #e26f22;
+}
 
-        .progress-stamina {
-            background-color: #4ba100;
-        }
+.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 {
+    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 {
+    text-align: center;
+}
 
-        .fire-stats .stat span {
-            font-weight: bold;
-        }
+.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 {
+    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;
-        }
+.enterprise strong {
+    display: block;
+    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%;
-        }
-        
\ No newline at end of file
+.progress-bar-inner {
+    background-color: #e26f22;
+    height: 10px;
+    border-radius: 5px;
+    transition: width 0.5s ease;
+}
\ No newline at end of file