2025-09-30 01:01:48 -07:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > ObliStudios · ASA Servers — Live Status< / title >
< meta name = "description" content = "Live status for ObliStudios' ARK: Survival Ascended servers." / >
< 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" >
2025-09-30 00:59:34 -07:00
< style >
body::before {
content: "";
position: fixed;
inset: 0;
background: linear-gradient( rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.6) 100% );
z-index: -1;
}
h1, h2, .lead {
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
2025-09-30 01:01:48 -07:00
}
:root{
--bg:#0a0b10; --panel:#111421; --text:#e8eef6; --muted:#9aa6b2;
--line:rgba(255,255,255,.08); --accent:#10e39a; --accent2:#0dc07f;
--radius:14px; --shadow:0 12px 28px rgba(0,0,0,.35);
}
*{ box-sizing:border-box }
2025-09-30 00:59:34 -07:00
html,body{ height:100% }
body {
margin: 0;
font: 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color: var(--text);
background: url('img/BestWCoast.png') no-repeat center center fixed;
background-size: cover;
}
2025-09-30 01:01:48 -07:00
a{ color:inherit; text-decoration:none }
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
header{
position:sticky; top:0; z-index:10;
backdrop-filter:saturate(180%) blur(8px);
background:rgba(10,11,16,.6); border-bottom:1px solid var(--line);
}
.nav{ height:68px; display:flex; align-items:center; justify-content:space-between }
.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)) }
.wordmark{ font-weight:800; letter-spacing:.2px }
.wordmark em{ color:var(--accent); font-style:normal }
.links{ display:flex; gap:18px; color:var(--muted); font-weight:600 }
2025-09-30 00:59:34 -07:00
.links a:hover{ color:var(--text) }
.hero {
padding: 64px 0 32px;
2025-09-30 01:01:48 -07:00
}
h1,h2{ font-family: Cinzel, Inter, serif }
h1{ margin:.35rem 0 .4rem; line-height:1.15; font-size: clamp(2rem, 1rem + 3vw, 3rem) }
2025-09-30 00:59:34 -07:00
.lead{ color:var(--muted); max-width:70ch }
.notice {
font-size: 0.9rem;
color: #cfd7e0;
2025-09-30 01:01:48 -07:00
}
/* Cards */
.grid{ display:grid; gap:18px }
2025-09-30 00:59:34 -07:00
@media (min-width:760px){ .grid{ grid-template-columns: 1fr 1fr } }
.server-card {
background: rgba(17, 20, 33, 0.85);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(6px);
2025-09-30 01:01:48 -07:00
}
.muted{ color:var(--muted) }
.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 }
.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 }
.footer{ padding:40px 0 64px; color:var(--muted); border-top:1px solid var(--line) }
< / style >
< / head >
< body >
< header >
< div class = "container nav" aria-label = "Main" >
< a class = "brand" href = "/index.html" aria-label = "Home" >
< svg viewBox = "0 0 64 64" aria-hidden = "true" role = "img" >
< defs > < linearGradient id = "g" x1 = "0" y1 = "0" x2 = "0" y2 = "1" >
< stop offset = "0%" stop-color = "#10e39a" / > < stop offset = "100%" stop-color = "#0dc07f" / >
< / 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" / >
< ellipse cx = "24" cy = "28" rx = "7" ry = "5" fill = "#06090f" / > < ellipse cx = "40" cy = "28" rx = "7" ry = "5" fill = "#06090f" / >
< / svg >
< div class = "wordmark" > Obli< strong > < em > Studios< / em > < / strong > < / div >
< / a >
< nav class = "links" aria-label = "Primary" >
< a href = "https://www.oblistudios.com" > Home< / a >
< / nav >
< / div >
< / header >
< section class = "hero" >
< div class = "container" >
< h1 > ARK: Survival Ascended — Live Server Status< / h1 >
< p class = "lead" > Real‑ < / p >
< div class = "notice" >
this is unofficial and not affiliated with Studio Wildcard
< / div >
< / div >
< / section >
< main class = "container" style = "padding:22px 20px 42px" >
< h2 > Cluster Status< / h2 >
< div id = "servers" class = "grid" > < / div >
< 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.
< / div >
< / main >
< footer class = "footer" >
< div class = "container" >
< small > © < span id = "y" > < / span > ObliStudios. All rights reserved.< / small >
< / div >
< / footer >
< script >
// Year stamp
document.getElementById('y').textContent = new Date().getFullYear();
const API = 'https://status.oblistudios.com/status';
const SERVERS = [
{ name: 'The Island (PvP)', host: '10.1.10.64', port: 27015 },
{ name: 'The Center (PvP)', host: '10.1.10.64', port: 27016 },
{ name: 'Scorched Earth (PvP)',host: '10.1.10.64', port: 27017 },
{ name: 'Aberration (PvP)', host: '10.1.10.64', port: 27018 },
{ name: 'Extinction (PvP)', host: '10.1.10.64', port: 27019 },
{ name: 'Ragnarok (PvP)', host: '10.1.10.64', port: 27020 },
{ name: 'Asteraeos (PvP)', host: '10.1.10.64', port: 27021 },
{ name: 'Ark Club', host: '10.1.10.64', port: 27022 },
{ name: 'Server 9', host: '10.1.10.64', port: 27023 }
];
// === RENDER ===
const $list = document.getElementById('servers');
function cardTemplate(s, data){
const online = data & & data.online;
const pill = online
? '< span class = "pill up" > Online< / span > '
: '< span class = "pill down" > Offline< / span > ';
const details = online ? `
< div > < strong > Map:< / strong > ${data.map || '—'}< / div >
< div > < strong > Players:< / strong > ${data.players}/${data.maxPlayers ?? '—'}< / div >
< div > < strong > Ping:< / strong > ${data.ping ?? '—'} ms< / div >
` : `< div class = "muted" > ${(data & & data.error) ? data.error : 'No response from query port'}< / div > `;
const endpoint = \`\${s.host}:\${s.port}\`;
return \`
< article class = "server-card" role = "region" aria-label = "\${s.name} status" >
< h3 style = "margin:.2rem 0 .6rem" > \${s.name} \${pill}< / h3 >
< div class = "muted" style = "margin-bottom:.5rem" >
< strong > Query:< / strong > < code > \${endpoint}< / code >
< button class = "copy" onclick = "navigator.clipboard.writeText('\${endpoint}')" > Copy< / button >
< / div >
\${details}
< div class = "muted" style = "margin-top:.6rem;font-size:.9rem" > Updated < span data-ts > just now< / span > < / div >
< / article >
\`;
}
async function refresh(){
const results = await Promise.all(SERVERS.map(async s => {
try{
const url = \`\${API}?ip=\${encodeURIComponent(s.host)}&port=\${encodeURIComponent(s.port)}\`;
const r = await fetch(url, { cache: 'no-store' });
const data = await r.json();
return { s, data };
}catch(e){
return { s, data: { online:false, error:String(e) } };
}
}));
$list.innerHTML = results.map(({s, data}) => cardTemplate(s, data)).join('');
}
refresh();
setInterval(refresh, 30000); // poll every 30s
< / script >
< / body >
< / html >
