From f2722b271320a7c81f28945b9d0e9aee11411286 Mon Sep 17 00:00:00 2001
From: James <james.ray0059@gmail.com>
Date: Tue, 30 Sep 2025 00:59:34 -0700
Subject: [PATCH] Add files via upload

---
 ASAservers.html | 190 ++++++++++++++++++++++++++++++++++++++++++++++++
 index.html      |   3 +-
 2 files changed, 192 insertions(+), 1 deletion(-)
 create mode 100644 ASAservers.html
diff --git a/ASAservers.html b/ASAservers.html
new file mode 100644
index 0000000..3b1ba2a
--- /dev/null
+++ b/ASAservers.html
@@ -0,0 +1,190 @@
+<!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">
+
+  <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);
+      }
+    :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 }
+    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;
+      }
+
+    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 }
+    .links a:hover{ color:var(--text) }
+      .hero {
+          padding: 64px 0 32px;
+      }
+    h1,h2{ font-family: Cinzel, Inter, serif }
+    h1{ margin:.35rem 0 .4rem; line-height:1.15; font-size: clamp(2rem, 1rem + 3vw, 3rem) }
+    .lead{ color:var(--muted); max-width:70ch }
+      .notice {
+          font-size: 0.9rem;
+          color: #cfd7e0;
+      }
+
+    /* Cards */
+    .grid{ display:grid; gap:18px }
+    @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);
+      }
+    .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>
+        <a href="https://www.oblistudios.com/roadmap.html">Roadmap</a>
+        <a href="https://www.oblistudios.com/ASAservers.html">ASA Servers</a>
+      </nav>
+    </div>
+  </header>
+
+  <section class="hero">
+    <div class="container">
+      <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>
+      <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>
diff --git a/index.html b/index.html
index 31552a6..a99a324 100644
--- a/index.html
+++ b/index.html
@@ -423,11 +423,12 @@
 
             <nav>
                 <ul>
-                    <li><a href="#home">Home</a></li>
+                    <li><a href="https://www.oblistudios.com/index.html">Home</a></li>
                     <li><a href="#game">Games</a></li>
                     <li><a href="#about">About</a></li>
                     <li><a href="#contact">Contact</a></li>
                     <a href="https://www.oblistudios.com/roadmap.html">Roadmap</a>
+                    <a href="https://www.oblistudios.com/ASAservers.html"> ASA Servers</a>
 
                 </ul>
             </nav>
