110 lines
2.8 KiB
JavaScript
110 lines
2.8 KiB
JavaScript
// ping
|
|
async function checkStatus() {
|
|
const cards = document.querySelectorAll(".card");
|
|
|
|
cards.forEach(async (card) => {
|
|
const url = card.getAttribute("data-url");
|
|
const dot = card.querySelector(".card__decor.card__decor--tr");
|
|
|
|
try {
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(() => controller.abort(), 5000);
|
|
|
|
await fetch(url, {
|
|
mode: "no-cors",
|
|
cache: "no-cache",
|
|
signal: controller.signal,
|
|
});
|
|
|
|
dot.classList.remove("status-offline");
|
|
dot.classList.add("status-online");
|
|
clearTimeout(timeoutId);
|
|
} catch (e) {
|
|
dot.classList.remove("status-online");
|
|
dot.classList.add("status-offline");
|
|
}
|
|
});
|
|
}
|
|
|
|
checkStatus();
|
|
setInterval(checkStatus, 300000);
|
|
|
|
// 🔴 테스트 ON
|
|
// const TEST_ONLY_SECOND_CARD = true;
|
|
// 🟢 테스트 OFF
|
|
const TEST_ONLY_SECOND_CARD = false;
|
|
|
|
// bolt animation
|
|
function startBoltAction() {
|
|
let allBolts = [];
|
|
|
|
if (TEST_ONLY_SECOND_CARD) {
|
|
// 🔧 2번째 카드만 선택 (0-based index)
|
|
const secondCard = document.querySelectorAll(".card")[1];
|
|
if (!secondCard) return;
|
|
|
|
allBolts = secondCard.querySelectorAll(".card__decor");
|
|
} else {
|
|
// 🔹 전체 카드 대상
|
|
allBolts = document.querySelectorAll(".card__decor");
|
|
}
|
|
|
|
if (allBolts.length === 0) return;
|
|
|
|
const availableBolts = Array.from(allBolts).filter(
|
|
(bolt) => !bolt.classList.contains("card__decor-acting")
|
|
);
|
|
|
|
if (availableBolts.length > 0) {
|
|
const randomBolt =
|
|
availableBolts[Math.floor(Math.random() * availableBolts.length)];
|
|
|
|
const baseRot =
|
|
randomBolt.style.getPropertyValue("--r") || "0deg";
|
|
|
|
randomBolt.style.setProperty("--r", baseRot);
|
|
|
|
const BOLT_ANIMATION_DURATION = 16000; // CSS와 반드시 일치
|
|
|
|
randomBolt.classList.add("card__decor-acting");
|
|
|
|
setTimeout(() => {
|
|
randomBolt.classList.remove("card__decor-acting");
|
|
}, BOLT_ANIMATION_DURATION);
|
|
}
|
|
|
|
const nextInterval = Math.random() * 4000 + 3000;
|
|
setTimeout(startBoltAction, nextInterval);
|
|
}
|
|
|
|
window.addEventListener("load", () => {
|
|
setTimeout(startBoltAction, 2000);
|
|
});
|
|
|
|
// 나사 랜덤 각도 부연
|
|
document.querySelectorAll('.card').forEach((card, cardIndex) => {
|
|
card.querySelectorAll('.card__decor').forEach((decor, decorIndex) => {
|
|
|
|
// -30 ~ 150 정도가 나사 느낌 제일 안정적
|
|
const angle = Math.floor(Math.random() * 180) - 30;
|
|
|
|
decor.style.setProperty('--r', `${angle}deg`);
|
|
});
|
|
});
|
|
|
|
window.addEventListener('keydown', (e) => {
|
|
const isMac = navigator.platform.toUpperCase().includes('MAC');
|
|
|
|
if (
|
|
isMac &&
|
|
e.metaKey &&
|
|
e.shiftKey &&
|
|
e.code === 'KeyD' &&
|
|
!['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)
|
|
) {
|
|
e.preventDefault();
|
|
document.body.classList.toggle('is-nova');
|
|
}
|
|
});
|
|
|