forked from spacebar/SplatNet
PR #5: Add equipment screen functionality (merges main with dev)
This commit is contained in:
parent
ce38573ad7
commit
429a1eb6ff
411 changed files with 17956 additions and 779 deletions
|
|
@ -5,8 +5,7 @@
|
|||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -26,83 +25,21 @@
|
|||
<div id="header-container"></div>
|
||||
|
||||
<div class="content">
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
<img class="icon-layer" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
|
||||
<img class="label-layer" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-info-text">
|
||||
Use the stage information to guide your weapon strategy and battle strategy!
|
||||
</div>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
<img class="icon-layer" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
|
||||
<img class="label-layer" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
|
||||
</div>
|
||||
<div class="stage-info-text">
|
||||
Use the stage information to guide your weapon strategy and battle strategy!
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) {
|
||||
headerContainer.innerHTML = html;
|
||||
const friendButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (friendButton) friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
logoutForm.addEventListener('submit', () => sessionStorage.removeItem('user_cache'));
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err => console.error("Failed to load header:", err));
|
||||
</script>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="stages.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
309
stages/stages.js
309
stages/stages.js
|
|
@ -1,12 +1,112 @@
|
|||
const API_URL = `${CONFIG.API_BASE_URL}/api/v1/boss`;
|
||||
let allRotations = [];
|
||||
let currentIndex = 0;
|
||||
const ITEMS_PER_PAGE = 5;
|
||||
let observer;
|
||||
|
||||
window.loadHeader(async function(headerContainer) {
|
||||
const stageButton = headerContainer.querySelector('.menu-item.stage');
|
||||
if (stageButton) {
|
||||
stageButton.classList.add('active');
|
||||
}
|
||||
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
if (logoutForm) {
|
||||
logoutForm.action = "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const extractMiiName = (miiDataB64) => {
|
||||
try {
|
||||
const binaryString = atob(miiDataB64.replace(/-/g, '+').replace(/_/g, '/'));
|
||||
const data = new Uint8Array(binaryString.length);
|
||||
for (let i = 0; i < binaryString.length; i++) {
|
||||
data[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
const size = data.length;
|
||||
let offset = -1;
|
||||
let isBE = false;
|
||||
if ([92, 96, 104, 106, 108, 336, 72].includes(size)) offset = 0x1A;
|
||||
else if ([74, 76].includes(size)) { offset = 0x02; isBE = true; }
|
||||
else if (size === 88) offset = 0x10;
|
||||
else if ([48, 68].includes(size)) offset = 0x1C;
|
||||
if (offset === -1) return null;
|
||||
const decoder = new TextDecoder(isBE ? 'utf-16be' : 'utf-16le');
|
||||
let end = offset;
|
||||
while (end < offset + 20 && end + 1 < data.length && (data[end] !== 0 || data[end + 1] !== 0)) {
|
||||
end += 2;
|
||||
}
|
||||
return decoder.decode(data.slice(offset, end));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const renderData = async (data) => {
|
||||
if (!data) return;
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
|
||||
if (nameEl) {
|
||||
const parsedName = miiBlob ? extractMiiName(miiBlob) : null;
|
||||
nameEl.textContent = parsedName || (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
|
||||
if (imgEl && miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
const overlay = document.getElementById("loading-overlay");
|
||||
let cacheReady = false;
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) {
|
||||
try {
|
||||
await renderData(cached);
|
||||
cacheReady = true;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
try {
|
||||
const [profileRes, rotationsData] = await Promise.all([
|
||||
fetch("/api/v1/me", { credentials: 'include' }).then(res => res.ok ? res.json() : {}),
|
||||
renderStages()
|
||||
]);
|
||||
|
||||
await renderData(profileRes);
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(profileRes));
|
||||
} catch (err) {
|
||||
if (!cacheReady) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
} finally {
|
||||
if (overlay) overlay.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
});
|
||||
|
||||
const API_URL = "/api/v1/boss";
|
||||
|
||||
function stageNames(stages, lang = "en-US") {
|
||||
return stages.map(s => s.translatedNames[lang]);
|
||||
return stages.map(s => s.translatedNames[lang]);
|
||||
}
|
||||
|
||||
function getStageClass(stageName) {
|
||||
const name = stageName.toLowerCase();
|
||||
|
||||
if (name.includes("ancho-v")) return "sprite-ancho-v";
|
||||
if (name.includes("arowana")) return "sprite-arowana";
|
||||
if (name.includes("blackbelly")) return "sprite-blackbelly";
|
||||
|
|
@ -23,8 +123,7 @@ function getStageClass(stageName) {
|
|||
if (name.includes("saltspray")) return "sprite-saltspray";
|
||||
if (name.includes("urchin")) return "sprite-urchin";
|
||||
if (name.includes("walleye")) return "sprite-walleye";
|
||||
|
||||
return "sprite"; // fallback
|
||||
return "sprite";
|
||||
}
|
||||
|
||||
async function fetchRotations() {
|
||||
|
|
@ -34,101 +133,143 @@ async function fetchRotations() {
|
|||
const data = await res.json();
|
||||
const rotations = data?.pretendo?.rotations ?? {};
|
||||
const now = new Date();
|
||||
const timestamps = Object.keys(rotations).sort((a, b) => Number(a) - Number(b));
|
||||
|
||||
const result = [];
|
||||
|
||||
for (const ts of timestamps) {
|
||||
let allData = Object.keys(rotations).map(ts => {
|
||||
const start = new Date(Number(ts));
|
||||
const end = new Date(start.getTime() + 2 * 60 * 60 * 1000);
|
||||
if (end < now) continue;
|
||||
|
||||
const r = rotations[ts];
|
||||
|
||||
result.push({
|
||||
return {
|
||||
turf: stageNames(r.turfStages),
|
||||
ranked: stageNames(r.rankedStages),
|
||||
ranked_mode: r.rankedMode.replace(/([a-z])([A-Z])/g, "$1 $2"),
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
isExpired: end < now
|
||||
};
|
||||
});
|
||||
const active = allData.filter(r => !r.isExpired).sort((a, b) => a.startTime - b.startTime);
|
||||
const past = allData.filter(r => r.isExpired).sort((a, b) => b.startTime - a.startTime);
|
||||
return [...active, ...past];
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch rotations:", error);
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function renderStages() {
|
||||
const loadingOverlay = document.getElementById("loading-overlay");
|
||||
const container = document.getElementById("stages-container");
|
||||
let rotations = [];
|
||||
try {
|
||||
rotations = await fetchRotations();
|
||||
} catch (err) {
|
||||
console.error("Error in renderStages:", err);
|
||||
} finally {
|
||||
loadingOverlay.style.display = "none";
|
||||
}
|
||||
const container = document.getElementById("stages-container");
|
||||
|
||||
try {
|
||||
allRotations = await fetchRotations();
|
||||
if (!allRotations.length) {
|
||||
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page.</h2>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
|
||||
const trigger = document.createElement('div');
|
||||
trigger.id = 'scroll-trigger';
|
||||
trigger.style.height = '10px';
|
||||
trigger.style.display = 'none';
|
||||
container.after(trigger);
|
||||
|
||||
if (!rotations.length) {
|
||||
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page.</h2>`;
|
||||
return;
|
||||
}
|
||||
loadMore(true);
|
||||
|
||||
let html = "";
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && currentIndex > 0 && currentIndex < allRotations.length) {
|
||||
loadMore(false);
|
||||
}
|
||||
}, { rootMargin: '0px 0px 100px 0px' });
|
||||
|
||||
observer.observe(trigger);
|
||||
|
||||
for (const rotation of rotations) {
|
||||
const optionsDate = { day: "2-digit", month: "2-digit" };
|
||||
const optionsTime = { hour: "numeric", minute: "2-digit", hour12: true };
|
||||
const timeZone = "Europe/Paris";
|
||||
const formattedTime = `${rotation.startTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.startTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST) ~ ${rotation.endTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.endTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST)`;
|
||||
|
||||
html += `
|
||||
<div class="rotation-time">${formattedTime}</div>
|
||||
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
|
||||
</div>
|
||||
|
||||
<div class="stages">
|
||||
${rotation.turf.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
|
||||
</div>
|
||||
|
||||
<div class="ranked-mode-labels">
|
||||
<div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
|
||||
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
|
||||
</div>
|
||||
|
||||
<div class="stages">
|
||||
${rotation.ranked.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
renderStages();
|
||||
function loadMore(isInitial) {
|
||||
const container = document.getElementById("stages-container");
|
||||
const loadingOverlay = document.getElementById("loading-overlay");
|
||||
const trigger = document.getElementById('scroll-trigger');
|
||||
|
||||
if (!isInitial && loadingOverlay) {
|
||||
loadingOverlay.style.display = 'flex';
|
||||
if (typeof window.animateLoadingCanvas === 'function') {
|
||||
window.animateLoadingCanvas();
|
||||
}
|
||||
}
|
||||
|
||||
const waitTime = isInitial ? 0 : 800;
|
||||
|
||||
setTimeout(() => {
|
||||
const nextBatch = allRotations.slice(currentIndex, currentIndex + ITEMS_PER_PAGE);
|
||||
const now = new Date();
|
||||
let html = "";
|
||||
|
||||
nextBatch.forEach((rotation, index) => {
|
||||
const isFirstItem = isInitial && index === 0;
|
||||
const isAboutToExpire = !rotation.isExpired && (rotation.endTime - now) < (15 * 60 * 1000);
|
||||
const optionsDate = { day: "2-digit", month: "2-digit" };
|
||||
if (rotation.isExpired) optionsDate.year = "numeric";
|
||||
const optionsTime = { hour: "numeric", minute: "2-digit", hour12: true };
|
||||
const timeZone = "Europe/Paris";
|
||||
const formattedTime = `${rotation.startTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.startTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST) ~ ${rotation.endTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.endTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST)`;
|
||||
|
||||
if (isFirstItem) {
|
||||
if (isAboutToExpire) {
|
||||
html += `<div class="expiring-warning" style="background: #ffcc00; color: #000; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px;">NOTICE: This rotation is about to expire!</div>`;
|
||||
} else if (rotation.isExpired) {
|
||||
html += `<div class="expiring-warning" style="background: #ff4444; color: #fff; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px;">NOTICE: This rotation has expired!</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="rotation-time">${formattedTime}</div>
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.turf.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
|
||||
</div>
|
||||
<div class="ranked-mode-labels">
|
||||
<div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
|
||||
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.ranked.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
container.insertAdjacentHTML('beforeend', html);
|
||||
currentIndex += ITEMS_PER_PAGE;
|
||||
|
||||
if (!isInitial && loadingOverlay) loadingOverlay.style.display = 'none';
|
||||
if (trigger) trigger.style.display = 'block';
|
||||
|
||||
if (currentIndex >= allRotations.length) {
|
||||
if (observer) observer.disconnect();
|
||||
if (trigger) trigger.remove();
|
||||
}
|
||||
}, waitTime);
|
||||
}
|
||||
|
|
@ -49,13 +49,13 @@ body {
|
|||
|
||||
.logo-left-align {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#stage-header-logo {
|
||||
|
|
@ -95,14 +95,14 @@ body {
|
|||
|
||||
.stage-info-text {
|
||||
margin: 0;
|
||||
padding-top: 0px;
|
||||
padding-top: 20px;
|
||||
padding-right: 100px;
|
||||
max-width: 1200px;
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-family: "Regular", sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
margin-right: 270px;
|
||||
}
|
||||
|
||||
.stages-container {
|
||||
|
|
@ -220,24 +220,23 @@ body {
|
|||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: rgba(0,0,0);
|
||||
border-radius: 20px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#squid-container {
|
||||
|
|
|
|||
Loading…
Reference in a new issue