.status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 20px;
background-color: #3c3c5c;
font-weight: bold;
font-size: 16px;
color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
width: fit-content; /* 💡 배경색 영역을 딱 글자 너비로 */
max-width: 100%;
}
.status-badge .label {
margin-right: 8px;
}
.status-badge .status-value.on {
color: #4caf50;
}
.status-badge .status-value.off {
color: #ff4d4d;
}
서버상태
로딩중...
function updateServerStatus() {
fetch('/pvpgn-status/status.php?mode=json')
.then(res => res.json())
.then(data => {
const statusSpan = document.querySelector('.status-badge .status-value');
if (data.status === 'ON') {
statusSpan.textContent = 'ON';
statusSpan.classList.remove('off');
statusSpan.classList.add('on');
} else {
statusSpan.textContent = 'OFF';
statusSpan.classList.remove('on');
statusSpan.classList.add('off');
}
})
.catch(() => {
const statusSpan = document.querySelector('.status-badge .status-value');
statusSpan.textContent = '오류';
statusSpan.classList.remove('on');
statusSpan.classList.add('off');
});
}
updateServerStatus(); // 최초 실행
setInterval(updateServerStatus, 5000); // 5초마다 갱신