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 @@ Меню игрока - + @@ -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); \ 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