Add files via upload
This commit is contained in:
GitHub
parent
00a1796631
commit
c61814377e
319
ASAservers.html
319
ASAservers.html
|
|
@ -1,13 +1,13 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>ObliStudios · ASA Servers — Live Status</title>
|
<title>ObliStudios · ASA Servers — Live Status</title>
|
||||||
<meta name="description" content="Live status for ObliStudios' ARK: Survival Ascended servers." />
|
<meta name="description" content="Live status for ObliStudios' ARK: Survival Ascended servers." />
|
||||||
<meta name="theme-color" content="#10e39a" />
|
<meta name="theme-color" content="#10e39a" />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body::before {
|
body::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -18,13 +18,13 @@
|
||||||
}
|
}
|
||||||
h1, h2, .lead {
|
h1, h2, .lead {
|
||||||
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
||||||
}
|
}
|
||||||
:root{
|
:root{
|
||||||
--bg:#0a0b10; --panel:#111421; --text:#e8eef6; --muted:#9aa6b2;
|
--bg:#0a0b10; --panel:#111421; --text:#e8eef6; --muted:#9aa6b2;
|
||||||
--line:rgba(255,255,255,.08); --accent:#10e39a; --accent2:#0dc07f;
|
--line:rgba(255,255,255,.08); --accent:#10e39a; --accent2:#0dc07f;
|
||||||
--radius:14px; --shadow:0 12px 28px rgba(0,0,0,.35);
|
--radius:14px; --shadow:0 12px 28px rgba(0,0,0,.35);
|
||||||
}
|
}
|
||||||
*{ box-sizing:border-box }
|
*{ box-sizing:border-box }
|
||||||
html,body{ height:100% }
|
html,body{ height:100% }
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -33,158 +33,157 @@
|
||||||
background: url('img/BestWCoast.png') no-repeat center center fixed;
|
background: url('img/BestWCoast.png') no-repeat center center fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
a{ color:inherit; text-decoration:none }
|
a{ color:inherit; text-decoration:none }
|
||||||
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
|
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
|
||||||
header{
|
header{
|
||||||
position:sticky; top:0; z-index:10;
|
position:sticky; top:0; z-index:10;
|
||||||
backdrop-filter:saturate(180%) blur(8px);
|
backdrop-filter:saturate(180%) blur(8px);
|
||||||
background:rgba(10,11,16,.6); border-bottom:1px solid var(--line);
|
background:rgba(10,11,16,.6); border-bottom:1px solid var(--line);
|
||||||
}
|
}
|
||||||
.nav{ height:68px; display:flex; align-items:center; justify-content:space-between }
|
.nav{ height:68px; display:flex; align-items:center; justify-content:space-between }
|
||||||
.brand{ display:flex; gap:.65rem; align-items:center }
|
.brand{ display:flex; gap:.65rem; align-items:center }
|
||||||
.brand svg{ width:30px; height:30px; filter: drop-shadow(0 0 10px rgba(16,227,154,.4)) }
|
.brand svg{ width:30px; height:30px; filter: drop-shadow(0 0 10px rgba(16,227,154,.4)) }
|
||||||
.wordmark{ font-weight:800; letter-spacing:.2px }
|
.wordmark{ font-weight:800; letter-spacing:.2px }
|
||||||
.wordmark em{ color:var(--accent); font-style:normal }
|
.wordmark em{ color:var(--accent); font-style:normal }
|
||||||
.links{ display:flex; gap:18px; color:var(--muted); font-weight:600 }
|
.links{ display:flex; gap:18px; color:var(--muted); font-weight:600 }
|
||||||
.links a:hover{ color:var(--text) }
|
.links a:hover{ color:var(--text) }
|
||||||
.hero {
|
.hero {
|
||||||
padding: 64px 0 32px;
|
padding: 64px 0 32px;
|
||||||
}
|
}
|
||||||
h1,h2{ font-family: Cinzel, Inter, serif }
|
h1,h2{ font-family: Cinzel, Inter, serif }
|
||||||
h1{ margin:.35rem 0 .4rem; line-height:1.15; font-size: clamp(2rem, 1rem + 3vw, 3rem) }
|
h1{ margin:.35rem 0 .4rem; line-height:1.15; font-size: clamp(2rem, 1rem + 3vw, 3rem) }
|
||||||
.lead{ color:var(--muted); max-width:70ch }
|
.lead{ color:var(--muted); max-width:70ch }
|
||||||
.notice {
|
.notice {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: #cfd7e0;
|
color: #cfd7e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards */
|
/* Cards */
|
||||||
.grid{ display:grid; gap:18px }
|
.grid{ display:grid; gap:18px }
|
||||||
@media (min-width:760px){ .grid{ grid-template-columns: 1fr 1fr } }
|
@media (min-width:760px){ .grid{ grid-template-columns: 1fr 1fr } }
|
||||||
.server-card {
|
.server-card {
|
||||||
background: rgba(17, 20, 33, 0.85);
|
background: rgba(17, 20, 33, 0.85);
|
||||||
border: 1px solid rgba(255,255,255,0.12);
|
border: 1px solid rgba(255,255,255,0.12);
|
||||||
backdrop-filter: blur(6px);
|
backdrop-filter: blur(6px);
|
||||||
}
|
}
|
||||||
.muted{ color:var(--muted) }
|
.muted{ color:var(--muted) }
|
||||||
.pill{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-weight:800; font-size:.8rem }
|
.pill{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-weight:800; font-size:.8rem }
|
||||||
.up{ background:#0dc07f22; border:1px solid #0dc07f66; color:#b6f0dc }
|
.up{ background:#0dc07f22; border:1px solid #0dc07f66; color:#b6f0dc }
|
||||||
.down{ background:#ff3b3b22; border:1px solid #ff3b3b66; color:#ffc9c9 }
|
.down{ background:#ff3b3b22; border:1px solid #ff3b3b66; color:#ffc9c9 }
|
||||||
.copy{ cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:.35rem .55rem; font-weight:700 }
|
.copy{ cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:.35rem .55rem; font-weight:700 }
|
||||||
.footer{ padding:40px 0 64px; color:var(--muted); border-top:1px solid var(--line) }
|
.footer{ padding:40px 0 64px; color:var(--muted); border-top:1px solid var(--line) }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="container nav" aria-label="Main">
|
<div class="container nav" aria-label="Main">
|
||||||
<a class="brand" href="/index.html" aria-label="Home">
|
<a class="brand" href="/index.html" aria-label="Home">
|
||||||
<svg viewBox="0 0 64 64" aria-hidden="true" role="img">
|
<svg viewBox="0 0 64 64" aria-hidden="true" role="img">
|
||||||
<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
|
<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
|
||||||
<stop offset="0%" stop-color="#10e39a"/><stop offset="100%" stop-color="#0dc07f"/>
|
<stop offset="0%" stop-color="#10e39a"/><stop offset="100%" stop-color="#0dc07f"/>
|
||||||
</linearGradient></defs>
|
</linearGradient></defs>
|
||||||
<path fill="url(#g)" d="M32 6c11 0 20 8 20 20s-9 22-20 22S12 38 12 26 21 6 32 6Z"/>
|
<path fill="url(#g)" d="M32 6c11 0 20 8 20 20s-9 22-20 22S12 38 12 26 21 6 32 6Z"/>
|
||||||
<ellipse cx="24" cy="28" rx="7" ry="5" fill="#06090f"/><ellipse cx="40" cy="28" rx="7" ry="5" fill="#06090f"/>
|
<ellipse cx="24" cy="28" rx="7" ry="5" fill="#06090f"/><ellipse cx="40" cy="28" rx="7" ry="5" fill="#06090f"/>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="wordmark">Obli<strong><em>Studios</em></strong></div>
|
<div class="wordmark">Obli<strong><em>Studios</em></strong></div>
|
||||||
</a>
|
</a>
|
||||||
<nav class="links" aria-label="Primary">
|
<nav class="links" aria-label="Primary">
|
||||||
<a href="https://www.oblistudios.com">Home</a>
|
<a href="https://www.oblistudios.com">Home</a>
|
||||||
<a href="https://www.oblistudios.com/roadmap.html">Roadmap</a>
|
|
||||||
<a href="https://www.oblistudios.com/ASAservers.html">ASA Servers</a>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</header>
|
|
||||||
|
<section class="hero">
|
||||||
<section class="hero">
|
<div class="container">
|
||||||
<div class="container">
|
<h1>ARK: Survival Ascended — Live Server Status</h1>
|
||||||
<h1>ARK: Survival Ascended — Live Server Status</h1>
|
<p class="lead">Real‑time online status, map, players, and ping for every ObliStudios ASA server.</p>
|
||||||
<p class="lead">Real‑time online status, map, players, and ping for every ObliStudios ASA server.</p>
|
<div class="notice">
|
||||||
<div class="notice">
|
this is unofficial and not affiliated with Studio Wildcard
|
||||||
this is unofficial and not affiliated with Studio Wildcard
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
<main class="container" style="padding:22px 20px 42px">
|
||||||
<main class="container" style="padding:22px 20px 42px">
|
<h2>Cluster Status</h2>
|
||||||
<h2>Cluster Status</h2>
|
<div id="servers" class="grid"></div>
|
||||||
<div id="servers" class="grid"></div>
|
|
||||||
|
<div class="notice" style="margin-top:22px">
|
||||||
<div class="notice" style="margin-top:22px">
|
the servers are running on a best-effort basis, 24/7. occasional downtime may occur for maintenance, updates, or unexpected issues. please refer to our <a href="https://discord.gg/Dvkr3cK25U">discord</a> for planned maintenance windows and updates.
|
||||||
the servers are running on a best-effort basis, 24/7. occasional downtime may occur for maintenance, updates, or unexpected issues. please refer to our <a href="https://discord.gg/Dvkr3cK25U">discord</a> for planned maintenance windows and updates.
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</main>
|
|
||||||
|
<footer class="footer">
|
||||||
<footer class="footer">
|
<div class="container">
|
||||||
<div class="container">
|
<small>© <span id="y"></span> ObliStudios. All rights reserved.</small>
|
||||||
<small>© <span id="y"></span> ObliStudios. All rights reserved.</small>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</footer>
|
|
||||||
|
<script>
|
||||||
<script>
|
// Year stamp
|
||||||
// Year stamp
|
document.getElementById('y').textContent = new Date().getFullYear();
|
||||||
document.getElementById('y').textContent = new Date().getFullYear();
|
|
||||||
|
const API = 'https://status.oblistudios.com/status';
|
||||||
const API = 'https://status.oblistudios.com/status';
|
|
||||||
|
|
||||||
|
const SERVERS = [
|
||||||
const SERVERS = [
|
{ name: 'The Island (PvP)', host: '10.1.10.64', port: 27015 },
|
||||||
{ name: 'The Island (PvP)', host: '10.1.10.64', port: 27015 },
|
{ name: 'The Center (PvP)', host: '10.1.10.64', port: 27016 },
|
||||||
{ name: 'The Center (PvP)', host: '10.1.10.64', port: 27016 },
|
{ name: 'Scorched Earth (PvP)',host: '10.1.10.64', port: 27017 },
|
||||||
{ name: 'Scorched Earth (PvP)',host: '10.1.10.64', port: 27017 },
|
{ name: 'Aberration (PvP)', host: '10.1.10.64', port: 27018 },
|
||||||
{ name: 'Aberration (PvP)', host: '10.1.10.64', port: 27018 },
|
{ name: 'Extinction (PvP)', host: '10.1.10.64', port: 27019 },
|
||||||
{ name: 'Extinction (PvP)', host: '10.1.10.64', port: 27019 },
|
{ name: 'Ragnarok (PvP)', host: '10.1.10.64', port: 27020 },
|
||||||
{ name: 'Ragnarok (PvP)', host: '10.1.10.64', port: 27020 },
|
{ name: 'Asteraeos (PvP)', host: '10.1.10.64', port: 27021 },
|
||||||
{ name: 'Asteraeos (PvP)', host: '10.1.10.64', port: 27021 },
|
{ name: 'Ark Club', host: '10.1.10.64', port: 27022 },
|
||||||
{ name: 'Ark Club', host: '10.1.10.64', port: 27022 },
|
{ name: 'Server 9', host: '10.1.10.64', port: 27023 }
|
||||||
{ name: 'Server 9', host: '10.1.10.64', port: 27023 }
|
];
|
||||||
];
|
|
||||||
|
// === RENDER ===
|
||||||
// === RENDER ===
|
const $list = document.getElementById('servers');
|
||||||
const $list = document.getElementById('servers');
|
|
||||||
|
function cardTemplate(s, data){
|
||||||
function cardTemplate(s, data){
|
const online = data && data.online;
|
||||||
const online = data && data.online;
|
const pill = online
|
||||||
const pill = online
|
? '<span class="pill up">Online</span>'
|
||||||
? '<span class="pill up">Online</span>'
|
: '<span class="pill down">Offline</span>';
|
||||||
: '<span class="pill down">Offline</span>';
|
|
||||||
|
const details = online ? `
|
||||||
const details = online ? `
|
<div><strong>Map:</strong> ${data.map || '—'}</div>
|
||||||
<div><strong>Map:</strong> ${data.map || '—'}</div>
|
<div><strong>Players:</strong> ${data.players}/${data.maxPlayers ?? '—'}</div>
|
||||||
<div><strong>Players:</strong> ${data.players}/${data.maxPlayers ?? '—'}</div>
|
<div><strong>Ping:</strong> ${data.ping ?? '—'} ms</div>
|
||||||
<div><strong>Ping:</strong> ${data.ping ?? '—'} ms</div>
|
` : `<div class="muted">${(data && data.error) ? data.error : 'No response from query port'}</div>`;
|
||||||
` : `<div class="muted">${(data && data.error) ? data.error : 'No response from query port'}</div>`;
|
|
||||||
|
const endpoint = \`\${s.host}:\${s.port}\`;
|
||||||
const endpoint = \`\${s.host}:\${s.port}\`;
|
return \`
|
||||||
return \`
|
<article class="server-card" role="region" aria-label="\${s.name} status">
|
||||||
<article class="server-card" role="region" aria-label="\${s.name} status">
|
<h3 style="margin:.2rem 0 .6rem">\${s.name} \${pill}</h3>
|
||||||
<h3 style="margin:.2rem 0 .6rem">\${s.name} \${pill}</h3>
|
<div class="muted" style="margin-bottom:.5rem">
|
||||||
<div class="muted" style="margin-bottom:.5rem">
|
<strong>Query:</strong> <code>\${endpoint}</code>
|
||||||
<strong>Query:</strong> <code>\${endpoint}</code>
|
<button class="copy" onclick="navigator.clipboard.writeText('\${endpoint}')">Copy</button>
|
||||||
<button class="copy" onclick="navigator.clipboard.writeText('\${endpoint}')">Copy</button>
|
</div>
|
||||||
</div>
|
\${details}
|
||||||
\${details}
|
<div class="muted" style="margin-top:.6rem;font-size:.9rem">Updated <span data-ts>just now</span></div>
|
||||||
<div class="muted" style="margin-top:.6rem;font-size:.9rem">Updated <span data-ts>just now</span></div>
|
</article>
|
||||||
</article>
|
\`;
|
||||||
\`;
|
}
|
||||||
}
|
|
||||||
|
async function refresh(){
|
||||||
async function refresh(){
|
const results = await Promise.all(SERVERS.map(async s => {
|
||||||
const results = await Promise.all(SERVERS.map(async s => {
|
try{
|
||||||
try{
|
const url = \`\${API}?ip=\${encodeURIComponent(s.host)}&port=\${encodeURIComponent(s.port)}\`;
|
||||||
const url = \`\${API}?ip=\${encodeURIComponent(s.host)}&port=\${encodeURIComponent(s.port)}\`;
|
const r = await fetch(url, { cache: 'no-store' });
|
||||||
const r = await fetch(url, { cache: 'no-store' });
|
const data = await r.json();
|
||||||
const data = await r.json();
|
return { s, data };
|
||||||
return { s, data };
|
}catch(e){
|
||||||
}catch(e){
|
return { s, data: { online:false, error:String(e) } };
|
||||||
return { s, data: { online:false, error:String(e) } };
|
}
|
||||||
}
|
}));
|
||||||
}));
|
$list.innerHTML = results.map(({s, data}) => cardTemplate(s, data)).join('');
|
||||||
$list.innerHTML = results.map(({s, data}) => cardTemplate(s, data)).join('');
|
}
|
||||||
}
|
|
||||||
|
refresh();
|
||||||
refresh();
|
setInterval(refresh, 30000); // poll every 30s
|
||||||
setInterval(refresh, 30000); // poll every 30s
|
</script>
|
||||||
</script>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue