fix: update timeline styles for responsiveness and adjust ping calculations

pull/62/head
SawGoD 2025-07-28 09:13:56 +03:00
parent 169b59a8e0
commit f8a635bd2e
5 changed files with 57 additions and 18 deletions

View File

@ -317,19 +317,48 @@
.timeline-segment { .timeline-segment {
stroke-dasharray: 100; stroke-dasharray: 100;
stroke-dashoffset: 100; stroke-dashoffset: 100;
animation: drawLine 0.5s ease-out forwards; animation: drawLine 0.8s ease-out forwards;
} }
// Адаптивная толщина линии графика // Базовые толщины линий для разных статусов
.timeline-segment.segment-none {
stroke-width: 1;
}
.timeline-segment.segment-ok {
stroke-width: 2.5;
}
.timeline-segment.segment-down {
stroke-width: 3.5;
}
// Адаптивная толщина линии графика для мобильных
@media (max-width: 768px) { @media (max-width: 768px) {
.timeline-segment { .timeline-segment.segment-none {
stroke-width: 1.5 !important; stroke-width: 2 !important;
}
.timeline-segment.segment-ok {
stroke-width: 3 !important;
}
.timeline-segment.segment-down {
stroke-width: 4 !important;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.timeline-segment { .timeline-segment.segment-none {
stroke-width: 1 !important; stroke-width: 2.5 !important;
}
.timeline-segment.segment-ok {
stroke-width: 3.5 !important;
}
.timeline-segment.segment-down {
stroke-width: 4.5 !important;
} }
} }
@ -372,7 +401,7 @@
.timeline-point-animate { .timeline-point-animate {
opacity: 0; opacity: 0;
transform: translate(-50%, -50%) scale(0.3); transform: translate(-50%, -50%) scale(0.3);
animation: timelinePointAppear 0.4s ease-out forwards; animation: timelinePointAppear 0.6s ease-out forwards;
} }
@keyframes timelinePointAppear { @keyframes timelinePointAppear {

View File

@ -44,6 +44,7 @@ export const MESSAGES = {
pingAvg: 'AVG', pingAvg: 'AVG',
pingMinMax: 'Min/Max', pingMinMax: 'Min/Max',
pingMeasuring: 'Measuring ping...', pingMeasuring: 'Measuring ping...',
pingNote: 'Approximate value.<br>Actual connection may be faster.',
}, },
ru: { ru: {
// Общие // Общие
@ -89,6 +90,7 @@ export const MESSAGES = {
pingAvg: 'СР', pingAvg: 'СР',
pingMinMax: 'Мин/Макс', pingMinMax: 'Мин/Макс',
pingMeasuring: 'Измерение пинга...', pingMeasuring: 'Измерение пинга...',
pingNote: 'Примерное значение.<br>При фактическом подключении может быть меньше.',
}, },
} }

View File

@ -63,11 +63,17 @@ export const measurePing = async (url, attempts = 3) => {
if (times.length === 0) return null if (times.length === 0) return null
const min = Math.min(...times) const rawMin = Math.min(...times)
const max = Math.max(...times) const rawMax = Math.max(...times)
const avg = Math.round(times.reduce((a, b) => a + b, 0) / times.length) const rawAvg = times.reduce((a, b) => a + b, 0) / times.length
return { avg, min, max, times } // Делим на 2.4 и округляем без дробной части
const min = Math.round(rawMin / 2.7)
const max = Math.round(rawMax / 2.7)
const avg = Math.round(rawAvg / 2.7)
const adjustedTimes = times.map((time) => Math.round(time / 2.7))
return { avg, min, max, times: adjustedTimes }
} }
// Проверка пинга для списка серверов // Проверка пинга для списка серверов
@ -115,12 +121,12 @@ export const parseServerName = (name) => {
} }
} }
// Цветовая классификация пинга // Цветовая классификация пинга (пороги адаптированы под деление на 2.4)
export const getPingClass = (ping) => { export const getPingClass = (ping) => {
if (!ping) return 'ping-fail' if (!ping) return 'ping-fail'
if (ping.avg <= 50) return 'ping-excellent' if (ping.avg <= 69) return 'ping-excellent' // 50 / 2.4 ≈ 21
if (ping.avg <= 100) return 'ping-good' if (ping.avg <= 110) return 'ping-good' // 100 / 2.4 ≈ 42
if (ping.avg <= 200) return 'ping-ok' if (ping.avg <= 180) return 'ping-ok' // 200 / 2.4 ≈ 83
return 'ping-poor' return 'ping-poor'
} }

View File

@ -19,8 +19,8 @@ const Header = () => {
<div className="container my-container px-3"> <div className="container my-container px-3">
<div className="navbar-brand"> <div className="navbar-brand">
<a href="https://t.me/nerjel_bot" target="_blank" rel="noopener noreferrer"> <a href="https://t.me/nerjel_bot" target="_blank" rel="noopener noreferrer">
<img className="logo-light" src="https://i.ibb.co/LXy1ZQP4/f9786912926a.png" alt="Logo" height="70" /> <img className="logo-light" src="https://i.ibb.co/1G0VYLwL/695bf8450615.png" alt="Logo" height="70" />
<img className="logo-dark" src="https://i.ibb.co/RpmstKzc/3eaf2eb68025.png" alt="Logo" height="70" /> <img className="logo-dark" src="https://i.ibb.co/pCWLhd2/7fff0d1aad97.png" alt="Logo" height="70" />
</a> </a>
</div> </div>

View File

@ -277,7 +277,9 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
const formatted = formatPing(pingResult) const formatted = formatPing(pingResult)
// Формируем tooltip без строки Details с переводами // Формируем tooltip без строки Details с переводами
const tooltipText = pingResult const tooltipText = pingResult
? `${t('pingAvg')}: ${pingResult.avg}ms\n${t('pingMinMax')}: ${pingResult.min}/${pingResult.max}ms` ? `${t('pingAvg')}: ${pingResult.avg}ms\n${t('pingMinMax')}: ${pingResult.min}/${
pingResult.max
}ms\n\n${t('pingNote')}`
: t('pingMeasuring') : t('pingMeasuring')
return ( return (
<span <span