Upload files to "/"
This commit is contained in:
commit
ff90137a71
|
|
@ -0,0 +1,613 @@
|
|||
<!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" />
|
||||
<meta property="og:title" content="ObliStudios · ASA Servers — Live Status" />
|
||||
<meta property="og:description" content="Real‑time online status, map, players, and ping for every ObliStudios ASA server." />
|
||||
<meta property="og:type" content="website" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0b10;
|
||||
--panel: #111421;
|
||||
--panel-2: #0d1020;
|
||||
--text: #e8eef6;
|
||||
--muted: #9aa6b2;
|
||||
--line: rgba(255,255,255,.08);
|
||||
--accent: #10e39a;
|
||||
--accent2: #0dc07f;
|
||||
--warn: #f59e0b;
|
||||
--bad: #ff3b3b;
|
||||
--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;
|
||||
}
|
||||
/* Soft vignette */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient( rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.38) 60%, rgba(0,0,0,0.62) 100% );
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px
|
||||
}
|
||||
|
||||
/* Header (harmonized with other pages) */
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
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 */
|
||||
h1, h2 {
|
||||
font-family: Cinzel, Inter, serif
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 64px 0 24px;
|
||||
}
|
||||
|
||||
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: .9rem;
|
||||
color: #cfd7e0
|
||||
}
|
||||
|
||||
/* Controls bar */
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 12px;
|
||||
margin: 8px 0 18px;
|
||||
background: rgba(17,20,33,.75);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.controls input, .controls select, .controls button {
|
||||
background: #0a0c12;
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 10px;
|
||||
padding: .55rem .7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.controls button.primary {
|
||||
background: linear-gradient(135deg,var(--accent),var(--accent2));
|
||||
color: #00140d;
|
||||
border: none;
|
||||
box-shadow: 0 8px 22px rgba(16,227,154,.25);
|
||||
}
|
||||
|
||||
.controls .meta {
|
||||
color: var(--muted);
|
||||
font-size: .95rem;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
/* Grid & 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);
|
||||
border-radius: var(--radius);
|
||||
backdrop-filter: blur(6px);
|
||||
padding: 14px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.server-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
padding: .25rem .6rem;
|
||||
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
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.ephemeral {
|
||||
font-size: .9rem;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.copy {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: .35rem .55rem;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.kvs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 8px 14px;
|
||||
margin-top: .5rem
|
||||
}
|
||||
|
||||
.kv strong {
|
||||
display: block;
|
||||
font-size: .9rem;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.kv span {
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
/* Player capacity bar */
|
||||
.bar {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #0a0c12;
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.bar > i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,var(--accent),var(--accent2));
|
||||
width: 0%
|
||||
}
|
||||
|
||||
/* Ping chip */
|
||||
.ping {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
/* Skeletons */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255,255,255,.06);
|
||||
height: 110px;
|
||||
border: 1px solid rgba(255,255,255,.08)
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
|
||||
transform: translateX(-100%);
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%)
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
padding: 40px 0 64px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--line)
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important
|
||||
}
|
||||
</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 aria-current="page" href="https://www.oblistudios.com">Home</a>
|
||||
<a aria-current="page" href="https://www.oblistudios.com/ASAshop.html"> ASA Shop </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>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="container">
|
||||
<div class="controls" role="region" aria-label="Filters and actions">
|
||||
<input id="q" type="search" placeholder="Search by name or map…" aria-label="Search" />
|
||||
<select id="filter" aria-label="Filter by status">
|
||||
<option value="all">All</option>
|
||||
<option value="online">Online</option>
|
||||
<option value="offline">Offline</option>
|
||||
</select>
|
||||
<select id="sort" aria-label="Sort">
|
||||
<option value="status">Sort: Status</option>
|
||||
<option value="name">Sort: Name A→Z</option>
|
||||
<option value="players">Sort: Players</option>
|
||||
<option value="ping">Sort: Ping</option>
|
||||
</select>
|
||||
<button id="refreshBtn" class="primary" type="button" aria-label="Refresh now">Refresh</button>
|
||||
<div class="meta">
|
||||
<span id="summary" aria-live="polite">—</span>
|
||||
<span id="nextRefresh" class="muted">Next update: —</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container" style="padding:8px 0 42px">
|
||||
<h2 style="margin:0 0 10px">Cluster Status</h2>
|
||||
<div id="servers" class="grid" aria-live="polite">
|
||||
<!-- Skeletons while first load -->
|
||||
<div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div>
|
||||
<div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div>
|
||||
</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.
|
||||
Visit our <h1><a href="https://discord.gg/Dvkr3cK25U">Discord</a></h1> for planned maintenance windows and updates.
|
||||
</div>
|
||||
|
||||
<!-- Toast / a11y region for copy feedback -->
|
||||
<div id="toast" class="ephemeral" aria-live="polite" style="margin-top:10px"></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();
|
||||
|
||||
// === CONFIG (same API + servers as your current page) ===
|
||||
const API = "http://10.1.10.195:5317/api/servers/ark";
|
||||
|
||||
|
||||
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: 'test server', host: '10.1.10.64', port: 27023 }
|
||||
];
|
||||
|
||||
// === STATE ===
|
||||
let state = []; // { s, data, fetchedAt }
|
||||
let lastRefresh = 0;
|
||||
let nextTick = 30; // seconds
|
||||
const $list = document.getElementById('servers');
|
||||
const $toast = document.getElementById('toast');
|
||||
const $summary = document.getElementById('summary');
|
||||
const $next = document.getElementById('nextRefresh');
|
||||
|
||||
// === HELPERS ===
|
||||
function timeAgo(ts) {
|
||||
if (!ts) return '—';
|
||||
const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
|
||||
if (s < 5) return 'just now';
|
||||
const units = [['d', 86400], ['h', 3600], ['m', 60], ['s', 1]];
|
||||
for (const [u, v] of units) if (s >= v) return `${Math.floor(s / v)}${u} ago`;
|
||||
return '—';
|
||||
}
|
||||
function pct(a, b) { return (!a || !b) ? 0 : Math.max(0, Math.min(100, Math.round((a / b) * 100))); }
|
||||
function pingDot(p) {
|
||||
let c = '#b6f0dc'; // default
|
||||
if (typeof p === 'number') {
|
||||
if (p <= 60) c = '#20df9b';
|
||||
else if (p <= 120) c = '#f3c969';
|
||||
else c = '#ff6d6d';
|
||||
}
|
||||
return `<span class="dot" style="background:${c}"></span>`;
|
||||
}
|
||||
function clip(txt, msg = 'Copied') {
|
||||
navigator.clipboard.writeText(txt).then(() => {
|
||||
$toast.textContent = `${msg}: ${txt}`;
|
||||
setTimeout(() => { $toast.textContent = ''; }, 1800);
|
||||
}).catch(() => {
|
||||
$toast.textContent = 'Copy failed';
|
||||
setTimeout(() => { $toast.textContent = ''; }, 1800);
|
||||
});
|
||||
}
|
||||
|
||||
// === TEMPLATES ===
|
||||
function cardTemplate(s, data, ts) {
|
||||
const online = !!(data && data.online);
|
||||
const pill = online
|
||||
? '<span class="pill up">Online</span>'
|
||||
: '<span class="pill down">Offline</span>';
|
||||
|
||||
const map = data?.map || '—';
|
||||
const players = Number.isFinite(data?.players) ? data.players : 0;
|
||||
const maxPlayers = Number.isFinite(data?.maxPlayers) ? data.maxPlayers : null;
|
||||
const ping = Number.isFinite(data?.ping) ? data.ping : null;
|
||||
const endpoint = `${s.host}:${s.port}`;
|
||||
|
||||
const playerBar = Number.isFinite(maxPlayers) ? `
|
||||
<div class="bar" aria-hidden="true"><i style="width:${pct(players, maxPlayers)}%"></i></div>
|
||||
<span class="muted" style="font-size:.9rem">${pct(players, maxPlayers)}% capacity</span>
|
||||
` : '';
|
||||
|
||||
const details = online ? `
|
||||
<div class="kvs">
|
||||
<div class="kv"><strong>Map</strong><span>${map}</span></div>
|
||||
<div class="kv"><strong>Players</strong><span>${players}${maxPlayers ? `/${maxPlayers}` : ''}</span></div>
|
||||
<div class="kv"><strong>Ping</strong><span class="ping">${pingDot(ping)}${ping ?? '—'} ms</span></div>
|
||||
</div>
|
||||
${playerBar}
|
||||
` : `<div class="muted" style="margin-top:.3rem">${(data && data.error) ? data.error : 'No response from query port'}</div>`;
|
||||
|
||||
return `
|
||||
<article class="server-card" role="region" aria-label="${s.name} status">
|
||||
<div class="server-head">
|
||||
<h3 style="margin:.1rem 0 .2rem">${s.name}</h3>
|
||||
${pill}
|
||||
</div>
|
||||
|
||||
<div class="row muted" style="margin-bottom:.4rem">
|
||||
<strong>Query:</strong> <code>${endpoint}</code>
|
||||
<button class="copy" onclick="clip('${endpoint}','Copied endpoint')">Copy</button>
|
||||
</div>
|
||||
|
||||
${details}
|
||||
|
||||
<div class="muted" style="margin-top:.6rem;font-size:.9rem">
|
||||
Updated <span>${timeAgo(ts)}</span>
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const q = document.getElementById('q').value.trim().toLowerCase();
|
||||
const filter = document.getElementById('filter').value;
|
||||
const sort = document.getElementById('sort').value;
|
||||
|
||||
let rows = state.slice();
|
||||
|
||||
// Filter
|
||||
rows = rows.filter(({ s, data }) => {
|
||||
const hay = `${s.name} ${data?.map || ''}`.toLowerCase();
|
||||
const matchesQ = !q || hay.includes(q);
|
||||
const online = !!data?.online;
|
||||
const matchesF = filter === 'all' || (filter === 'online' ? online : !online);
|
||||
return matchesQ && matchesF;
|
||||
});
|
||||
|
||||
// Sort
|
||||
const by = {
|
||||
status: (a, b) => Number(b.data?.online || 0) - Number(a.data?.online || 0) || a.s.name.localeCompare(b.s.name),
|
||||
name: (a, b) => a.s.name.localeCompare(b.s.name),
|
||||
players: (a, b) => (b.data?.players || 0) - (a.data?.players || 0),
|
||||
ping: (a, b) => (a.data?.ping ?? 1e9) - (b.data?.ping ?? 1e9),
|
||||
}[sort] || ((a, b) => 0);
|
||||
rows.sort(by);
|
||||
|
||||
// Render
|
||||
$list.innerHTML = rows.map(r => cardTemplate(r.s, r.data, r.fetchedAt)).join('');
|
||||
|
||||
// Summary / meta
|
||||
const total = state.length;
|
||||
const onlineCount = state.filter(r => r.data?.online).length;
|
||||
$summary.textContent = `Online ${onlineCount} / ${total} · Last update ${timeAgo(lastRefresh)}`;
|
||||
}
|
||||
|
||||
// === DATA FETCH ===
|
||||
function fetchWithTimeout(url, ms = 7000) {
|
||||
const ctl = new AbortController();
|
||||
const id = setTimeout(() => ctl.abort(), ms);
|
||||
return fetch(url, { cache: 'no-store', signal: ctl.signal }).finally(() => clearTimeout(id));
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
lastRefresh = Date.now();
|
||||
nextTick = 30;
|
||||
|
||||
const results = await Promise.all(SERVERS.map(async s => {
|
||||
const url = `${API}?ip=${encodeURIComponent(s.host)}&port=${encodeURIComponent(s.port)}`;
|
||||
try {
|
||||
const r = await fetchWithTimeout(url, 7000);
|
||||
const data = await r.json();
|
||||
return { s, data, fetchedAt: Date.now() };
|
||||
} catch (e) {
|
||||
return { s, data: { online: false, error: String(e) }, fetchedAt: Date.now() };
|
||||
}
|
||||
}));
|
||||
|
||||
state = results;
|
||||
// Persist last successful for offline first‑paint
|
||||
try { localStorage.setItem('asa:last', JSON.stringify({ t: Date.now(), results })); } catch { }
|
||||
render();
|
||||
}
|
||||
|
||||
// Load cached (if present) for instant first paint
|
||||
(function bootFromCache() {
|
||||
try {
|
||||
const cached = JSON.parse(localStorage.getItem('asa:last') || 'null');
|
||||
if (cached && Array.isArray(cached.results)) {
|
||||
state = cached.results;
|
||||
lastRefresh = cached.t || Date.now();
|
||||
render();
|
||||
}
|
||||
} catch { }
|
||||
})();
|
||||
|
||||
// Polling and countdown
|
||||
setInterval(() => {
|
||||
if (nextTick > 0) nextTick--;
|
||||
$next.textContent = `Next update: ${nextTick}s`;
|
||||
if (nextTick === 0) refresh();
|
||||
}, 1000);
|
||||
|
||||
// Wire controls
|
||||
document.getElementById('q').addEventListener('input', render);
|
||||
document.getElementById('filter').addEventListener('change', render);
|
||||
document.getElementById('sort').addEventListener('change', render);
|
||||
document.getElementById('refreshBtn').addEventListener('click', refresh);
|
||||
|
||||
// First live refresh
|
||||
refresh();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,727 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ASA Shop</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
[data-add="server1"]:disabled, [data-add="server2"]:disabled, [data-add="server3"]:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
article.card:has([data-add="server1"]:disabled), article.card:has([data-add="server2"]:disabled), article.card:has([data-add="server3"]:disabled) {
|
||||
filter: grayscale(0.2);
|
||||
}
|
||||
:root {
|
||||
--bg: #0b1224;
|
||||
--card: #121b34;
|
||||
--stroke: #243053;
|
||||
--accent: #4aa3ff;
|
||||
--text: #e9f1ff;
|
||||
--muted: #9bb3d9;
|
||||
--chip: #1a2a50;
|
||||
--btn: #1e3566;
|
||||
--btn2: #244272;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font: 14px/1.5 system-ui,Segoe UI,Inter,Arial;
|
||||
background: var(--bg);
|
||||
color: var(--text)
|
||||
}
|
||||
|
||||
header, footer {
|
||||
border-bottom: 1px solid var(--stroke);
|
||||
background: #0c1530
|
||||
}
|
||||
|
||||
header .wrap, main .wrap, footer .wrap {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 14px 16px
|
||||
}
|
||||
|
||||
header .row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
margin: 0 8px 0 0
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
input, select {
|
||||
background: #0c1733;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--stroke);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
outline: none
|
||||
}
|
||||
|
||||
.cart-btn, .btn {
|
||||
background: var(--btn);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--stroke);
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--btn2)
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
|
||||
padding: 16px
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--stroke);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
.card .footer {
|
||||
background: #0d1b3a; /* dark blue footer */
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .footer h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .footer .meta {
|
||||
color: #cbd6f2;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card .footer .price {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .footer .chip {
|
||||
background: #1e3566;
|
||||
color: #fff;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card .footer .actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card .footer .btn {
|
||||
background: #1e3566;
|
||||
border: 1px solid #243053;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.card .img {
|
||||
background: #0c1630;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.card .img img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.card .body {
|
||||
padding: 12px
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.chip {
|
||||
background: var(--chip);
|
||||
color: #bcd0ff;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
display: inline-block;
|
||||
margin: 6px 0
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 16px 8px
|
||||
}
|
||||
/* Drawer */
|
||||
#drawer {
|
||||
position: fixed;
|
||||
inset: 0 0 0 auto;
|
||||
width: 380px;
|
||||
background: var(--card);
|
||||
border-left: 1px solid var(--stroke);
|
||||
transform: translateX(100%);
|
||||
transition: .25s;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#drawer.open {
|
||||
transform: none
|
||||
}
|
||||
|
||||
#drawer header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--stroke)
|
||||
}
|
||||
|
||||
#drawer .body {
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
flex: 1
|
||||
}
|
||||
|
||||
#drawer .row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--stroke)
|
||||
}
|
||||
|
||||
#drawer .qty {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
#drawer .qty button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--stroke);
|
||||
background: var(--btn)
|
||||
}
|
||||
|
||||
#exitCart {
|
||||
background: #8b0c0c;
|
||||
border-color: #5e0909;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.total {
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--stroke)
|
||||
}
|
||||
/* Modals */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,.5);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 60
|
||||
}
|
||||
|
||||
.modal.open {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.modal__dialog {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--stroke);
|
||||
border-radius: 16px;
|
||||
max-width: 720px;
|
||||
width: 92%;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.modal__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--stroke)
|
||||
}
|
||||
|
||||
.modal__body {
|
||||
padding: 16px
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
background: #24365e;
|
||||
color: #fff;
|
||||
border: 1px solid var(--stroke);
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--stroke)
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted)
|
||||
}
|
||||
nav.links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
nav.links a {
|
||||
color: #e9f1ff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
nav.links a:hover {
|
||||
color: #4aa3ff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<div class="row">
|
||||
<h1>BESTWCOAST Shop</h1>
|
||||
<a class="cart-btn" href="https://discord.gg/kQrAQSSrez" id="loginDiscord">Login to our Discord</a>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<nav class="links" aria-label="Primary">
|
||||
<a href="https://www.oblistudios.com">Home</a>
|
||||
</nav>
|
||||
<a href="#" class="cart-btn" id="openCart">🛒 Cart <span id="cartCount">0</span></a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<input id="search" placeholder="Search products…" />
|
||||
<select id="category" title="Category">
|
||||
<option value="all">All categories</option>
|
||||
<option value="servers">Servers</option>
|
||||
<option value="perks">Server Perks</option>
|
||||
<option value="maps">Custom Maps</option>
|
||||
<option value="bundles">Bundles</option>
|
||||
<option value="vip">VIP / Subscriptions</option>
|
||||
</select>
|
||||
<select id="sort" title="Sort">
|
||||
<option value="featured">Featured</option>
|
||||
<option value="price-asc">Price ↑</option>
|
||||
<option value="price-desc">Price ↓</option>
|
||||
<option value="name">Name A→Z</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="wrap">
|
||||
<section id="grid" class="grid"></section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Drawer (Cart) -->
|
||||
<aside id="drawer" aria-hidden="true">
|
||||
<header>
|
||||
<strong>Your Cart</strong>
|
||||
<button id="exitCart" title="Close cart">Exit</button>
|
||||
</header>
|
||||
<div class="body" id="cartItems"></div>
|
||||
<div class="total">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between">
|
||||
<div>Total</div>
|
||||
<div id="cartTotal">$0.00</div>
|
||||
</div>
|
||||
<button class="btn" id="checkoutBtn" style="width:100%; margin-top:10px">Checkout</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap">
|
||||
<div class="muted">© <span id="year"></span> Oblistudios LLC</div>
|
||||
<div class="muted">— Build anywhere, don’t block obelisks. Be kind.</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Info Modal: Server Class 1 -->
|
||||
<div id="infoModal" class="modal" aria-hidden="true">
|
||||
<div class="modal__dialog">
|
||||
<header class="modal__head">
|
||||
<h3 style="margin:0">🔒 Private Server Tier (Class 1)</h3>
|
||||
<button class="modal__close" data-close="infoModal">×</button>
|
||||
</header>
|
||||
<div class="modal__body">
|
||||
<p><strong>Exclusive to you and your tribe.</strong></p>
|
||||
<p>🏝 <strong>1 Server Setup:</strong> Mirrors main cluster (PVP, breeding, rates). <strong>20 slots</strong>, password-secured.</p>
|
||||
<p>⚙️ <strong>Tools & Perks:</strong> Creature Management Tool + <strong>10× Mutation Potions</strong> per tier.</p>
|
||||
<p>🎁 <strong>Starting Bonus:</strong> <strong>100,000 points</strong> at the start of each wipe.</p>
|
||||
<p>⏳ <strong>Setup:</strong> Usually <strong>≤ 2 business days</strong>. Never wipes while subscribed.</p>
|
||||
<p>🏗 <strong>Building:</strong> All standard rules; don’t block obelisks; otherwise build anywhere.</p>
|
||||
<p>📜 <strong>Ownership:</strong> Tribe-only access. No outsider storage/griefing. Maintain a base on at least one main server.</p>
|
||||
<p>🌐 <strong>Clustering:</strong> Linked within <strong>1 hour</strong> of any wipe.</p>
|
||||
<p>💬 <strong>Support:</strong> After purchase, open a Discord ticket for setup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Modal: Server Class 2 -->
|
||||
<div id="infoModal2" class="modal" aria-hidden="true">
|
||||
<div class="modal__dialog">
|
||||
<header class="modal__head">
|
||||
<h3 style="margin:0">🔒 Private Server Tier (Class 2)</h3>
|
||||
<button class="modal__close" data-close="infoModal2">×</button>
|
||||
</header>
|
||||
<div class="modal__body">
|
||||
<p><strong>Exclusive to you and your tribe.</strong></p>
|
||||
<p>🏝 <strong>2 Server Setup:</strong> Mirrors main cluster (PVP, breeding, rates). <strong>30 slots</strong>, password-secured.</p>
|
||||
<p>⚙️ <strong>Tools & Perks:</strong> Creature Management Tool + <strong>10× Mutation Potions</strong> per tier.</p>
|
||||
<p>🎁 <strong>Starting Bonus:</strong> <strong>200,000 points</strong> at the start of each wipe.</p>
|
||||
<p>⏳ <strong>Setup:</strong> Usually <strong>≤ 2 business days</strong>. Never wipes while subscribed.</p>
|
||||
<p>🏗 <strong>Building:</strong> All standard rules; don’t block obelisks; otherwise build anywhere.</p>
|
||||
<p>📜 <strong>Ownership:</strong> Tribe-only access. No outsider storage/griefing. Maintain a base on at least one main server.</p>
|
||||
<p>🌐 <strong>Clustering:</strong> Linked within <strong>1 hour</strong> of any wipe.</p>
|
||||
<p>💬 <strong>Support:</strong> After purchase, open a Discord ticket for setup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Modal: Server Class 3 -->
|
||||
<div id="infoModal3" class="modal" aria-hidden="true">
|
||||
<div class="modal__dialog">
|
||||
<header class="modal__head">
|
||||
<h3 style="margin:0">🔒 Private Server Tier (Class 3)</h3>
|
||||
<button class="modal__close" data-close="infoModal3">×</button>
|
||||
</header>
|
||||
<div class="modal__body">
|
||||
<p><strong>Exclusive to you and your tribe.</strong></p>
|
||||
<p>🏝 <strong>3 Server Setup:</strong> Mirrors main cluster (PVP, breeding, rates). <strong>30 slots</strong>, password-secured.</p>
|
||||
<p>⚙️ <strong>Tools & Perks:</strong> Creature Management Tool + <strong>10× Mutation Potions</strong> per tier.</p>
|
||||
<p>🎁 <strong>Starting Bonus:</strong> <strong>300,000 points</strong> at the start of each wipe.</p>
|
||||
<p>⏳ <strong>Setup:</strong> Usually <strong>≤ 2 business days</strong>. Never wipes while subscribed.</p>
|
||||
<p>🏗 <strong>Building:</strong> All standard rules; don’t block obelisks; otherwise build anywhere.</p>
|
||||
<p>📜 <strong>Ownership:</strong> Tribe-only access. No outsider storage/griefing. Maintain a base on at least one main server.</p>
|
||||
<p>🌐 <strong>Clustering:</strong> Linked within <strong>1 hour</strong> of any wipe.</p>
|
||||
<p>💬 <strong>Support:</strong> After purchase, open a Discord ticket for setup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// ========= CONFIG =========
|
||||
const API = "https://pay.oblistudios.com";
|
||||
|
||||
// Map your product IDs -> Stripe price IDs (from your Stripe Dashboard)
|
||||
// !!! REPLACE these placeholders with your real price IDs !!!
|
||||
const PRICE_IDS = {
|
||||
server1: "price_1SELDJDv9LGVOP85Tmvl29iG",
|
||||
server2: "price_1SELEGDv9LGVOP85f22Gldvc",
|
||||
server3: "price_1SELLTDv9LGVOP85tgk0E7a8",
|
||||
slot30: "price_1SPrq0Dv9LGVOP85TWi8As7L",
|
||||
mutants: "price_1SELMXDv9LGVOP85iEACTDNB",
|
||||
starter: "price_1SELMzDv9LGVOP851QbLAPv9",
|
||||
supporter1: "price_1SELNPDv9LGVOP85AbSjJjsq",
|
||||
supporter2: "price_1SELNkDv9LGVOP85UrZHPivA",
|
||||
supporter3: "price_1SELOCDv9LGVOP85eov30j3a",
|
||||
supporter4: "price_1SELOhDv9LGVOP858hO64GGr",
|
||||
supporter5: "price_1SELOzDv9LGVOP85P4xwgGI5",
|
||||
supporter6: "price_1SELPJDv9LGVOP85nnG60pr8",
|
||||
"map-small": "price_1SELPpDv9LGVOP854Dsizby3",
|
||||
"map-medium": "price_1SELQDDv9LGVOP859sA0XmwU",
|
||||
"map-large": "price_1SELQZDv9LGVOP85GNbTyOHH"
|
||||
};
|
||||
|
||||
// No capacity limits — all servers unlimited
|
||||
// Unlimited servers: no capacity accounting at all
|
||||
const SERVER_CAPACITY = {};
|
||||
const CAPACITY_IDS = new Set(); // no IDs are capacity-limited
|
||||
const CAPACITY_TOTAL = Infinity;
|
||||
|
||||
function capacityUsed() { return 0; }
|
||||
function canAddServers() { return true; }
|
||||
|
||||
// isServer will always be false with an empty set, which is fine
|
||||
const isServer = id => CAPACITY_IDS.has(id);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ===== products (unchanged from your file) =====
|
||||
const products = [
|
||||
{ id: 'server1', name: 'Server Class 1', price: 25.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS01.png' },
|
||||
{ id: 'server2', name: 'Server Class 2', price: 50.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS02.png' },
|
||||
{ id: 'server3', name: 'Server Class 3', price: 75.00, category: 'servers', tag: 'Server monthly', img: 'img/PrivateServerCLASS03.png' },
|
||||
|
||||
{ id: 'slot30', name: 'ASA Server Slot x30 days', price: 2.50, category: 'perks', tag: 'Server Perk monthly', img: 'img/ServerSlotX30.png' },
|
||||
{ id: 'mutants', name: 'Mutated Creatures', price: 1.50, category: 'bundles', tag: 'Dino Pack One Time Payment 10 non-breedable', img: 'img/MutatedCretures.png' },
|
||||
{ id: 'starter', name: 'Starter Pack', price: 1.50, category: 'bundles', tag: 'Starter Pack One Time Payment', img: 'img/StarterPack.png' },
|
||||
|
||||
{ id: 'supporter1', name: 'ASA Server Supporter Pack 1', price: 5.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 50,000 Points every week🎁 50,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP1.png' },
|
||||
{ id: 'supporter2', name: 'ASA Server Supporter Pack 2', price: 10.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 100,000 Points every week🎁 100,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP2.png' },
|
||||
{ id: 'supporter3', name: 'ASA Server Supporter Pack 3', price: 15.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 150,000 Points every week🎁 150,000 Bonus Points at the start of each wipe 🏅 Exclusive VIP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP3.png' },
|
||||
{ id: 'supporter4', name: 'ASA Server Supporter Pack 4', price: 20.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 500,000 Points every week🎁 500,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP4.png' },
|
||||
{ id: 'supporter5', name: 'ASA Server Supporter Pack 5', price: 25.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 1,000,000 Points every week🎁 1,000,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP5.png' },
|
||||
{ id: 'supporter6', name: 'ASA Server Supporter Pack 6', price: 35.00, category: 'vip', tag: 'Server Perk monthly <br> ✨ Perks Included ✨ 💎 1,500,000 Points every week🎁 1,500,000 Bonus Points at the start of each wipe 🏅 Exclusive MVP Role on Discord 🔒 Access to the Donator - Only Chat', img: 'img/SP6.png' },
|
||||
|
||||
{ id: 'map-small', name: 'Small Map manipulation', price: 5.00, category: 'maps', tag: 'Small Map manipulation Pack One Time Payment', img: 'img/SmallMap.png' },
|
||||
{ id: 'map-medium', name: 'Medium Map manipulation', price: 10.00, category: 'maps', tag: 'Medium Map manipulation Pack One Time Payment', img: 'img/MediumMap.png' },
|
||||
{ id: 'map-large', name: 'Large Map manipulation', price: 15.00, category: 'maps', tag: 'Large Map manipulation Pack One Time Payment', img: 'img/LargeMap.png' },
|
||||
];
|
||||
|
||||
// ===== state/helpers (trimmed & wired to your UI) =====
|
||||
const state = { q: '', cat: 'all', sort: 'featured', cart: loadCart() };
|
||||
const $ = s => document.querySelector(s);
|
||||
const fmt = n => `$${n.toFixed(2)}`;
|
||||
function saveCart() { localStorage.setItem('obli.cart', JSON.stringify(state.cart)); }
|
||||
function loadCart() { try { return JSON.parse(localStorage.getItem('obli.cart') || '{}'); } catch { return {}; } }
|
||||
function cartCount() { return Object.values(state.cart).reduce((a, b) => a + b, 0); }
|
||||
function cartTotal() { return Object.entries(state.cart).reduce((s, [id, q]) => { const p = products.find(p => p.id === id); return s + (p ? p.price * q : 0) }, 0); }
|
||||
|
||||
|
||||
function cardHtml(p) {
|
||||
const inCart = state.cart[p.id] || 0;
|
||||
const capRow = `<div class="rem-row text-muted">Unlimited</div>`;
|
||||
|
||||
let infoBtn = '';
|
||||
if (p.id === 'server1') infoBtn = `<button class="btn btn-secondary" data-info="server-class-1">Info</button>`;
|
||||
if (p.id === 'server2') infoBtn = `<button class="btn btn-secondary" data-info="server-class-2">Info</button>`;
|
||||
if (p.id === 'server3') infoBtn = `<button class="btn btn-secondary" data-info="server-class-3">Info</button>`;
|
||||
|
||||
return `<article class="card" data-product="${p.id}">
|
||||
<div class="img">${p.img ? `<img src="${p.img}" alt="${p.name}">` : `<canvas data-id="${p.id}" width="320" height="150"></canvas>`}</div>
|
||||
<div class="footer">
|
||||
<h3>${p.name}</h3>
|
||||
<div class="meta">${p.tag || ''}</div>
|
||||
<div class="price">${fmt(p.price)}</div>
|
||||
<div class="chip">${p.category}</div>
|
||||
${capRow}
|
||||
<div class="actions">
|
||||
<button class="btn" data-add="${p.id}">
|
||||
${inCart ? 'Add another' : 'Add to cart'}
|
||||
</button>
|
||||
${infoBtn}
|
||||
</div>
|
||||
</div>
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const grid = $('#grid');
|
||||
let list = products.filter(p => state.cat === 'all' || p.category === state.cat);
|
||||
if (state.q) {
|
||||
const q = state.q.toLowerCase();
|
||||
list = list.filter(p => p.name.toLowerCase().includes(q) || (p.tag || '').toLowerCase().includes(q) || (p.category || '').toLowerCase().includes(q));
|
||||
}
|
||||
if (state.sort === 'price-asc') list.sort((a, b) => a.price - b.price);
|
||||
if (state.sort === 'price-desc') list.sort((a, b) => b.price - a.price);
|
||||
if (state.sort === 'name') list.sort((a, b) => a.name.localeCompare(b.name));
|
||||
grid.innerHTML = list.map(cardHtml).join('');
|
||||
updateCartUi();
|
||||
}
|
||||
|
||||
function rowHtml(id, qty) {
|
||||
const p = products.find(x => x.id === id);
|
||||
return `<div class="row">
|
||||
<div class="title"><div style="font-weight:600">${p.name}</div><div class="meta">${fmt(p.price)} each</div></div>
|
||||
<div class="qty">
|
||||
<button data-dec="${id}">−</button>
|
||||
<div>${qty}</div>
|
||||
<button data-inc="${id}">+</button>
|
||||
</div>
|
||||
<div style="width:72px; text-align:right">${fmt(p.price * qty)}</div>
|
||||
</div>`;
|
||||
}
|
||||
function updateCartUi() {
|
||||
$('#cartCount').textContent = cartCount();
|
||||
$('#cartTotal').textContent = fmt(cartTotal());
|
||||
const rows = Object.entries(state.cart);
|
||||
$('#cartItems').innerHTML = rows.length ? rows.map(([id, qty]) => rowHtml(id, qty)).join('') : '<div class="muted">Cart is empty.</div>';
|
||||
// refresh remaining labels/buttons
|
||||
document.querySelectorAll('[data-rem-for]').forEach(el => {
|
||||
const id = el.dataset.remFor;
|
||||
if (isServer(id)) {
|
||||
const left = Math.max(0, CAPACITY_TOTAL - capacityUsed());
|
||||
|
||||
el.textContent = left;
|
||||
const card = el.closest('[data-product]');
|
||||
const btn = card?.querySelector(`[data-add="${id}"]`);
|
||||
if (btn) { btn.disabled = left <= 0; btn.textContent = left <= 0 ? 'Sold out' : 'Add to cart'; }
|
||||
} else {
|
||||
el.textContent = '∞';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// search/sort/category hooks
|
||||
$('#search').addEventListener('input', e => { state.q = e.target.value; render(); });
|
||||
$('#category').addEventListener('change', e => { state.cat = e.target.value; render(); });
|
||||
$('#sort').addEventListener('change', e => { state.sort = e.target.value; render(); });
|
||||
|
||||
// add/inc/dec
|
||||
document.body.addEventListener('click', e => {
|
||||
const add = e.target.closest('[data-add]');
|
||||
const inc = e.target.closest('[data-inc]');
|
||||
const dec = e.target.closest('[data-dec]');
|
||||
if (add) {
|
||||
const id = add.getAttribute('data-add');
|
||||
if (isServer(id) && !canAddServers(1))
|
||||
return alert(`Sold out or limit reached. Remaining: ${Math.max(0, CAPACITY_TOTAL - capacityUsed())}`);
|
||||
|
||||
state.cart[id] = (state.cart[id] || 0) + 1; saveCart(); render();
|
||||
}
|
||||
if (inc) {
|
||||
const id = inc.getAttribute('data-inc');
|
||||
if (isServer(id) && !canAddServers(1))
|
||||
return alert(`Sold out or limit reached. Remaining: ${Math.max(0, CAPACITY_TOTAL - capacityUsed())}`);
|
||||
|
||||
state.cart[id] = (state.cart[id] || 0) + 1; saveCart(); updateCartUi();
|
||||
}
|
||||
if (dec) {
|
||||
const id = dec.getAttribute('data-dec');
|
||||
state.cart[id] = Math.max(0, (state.cart[id] || 0) - 1);
|
||||
if (!state.cart[id]) delete state.cart[id];
|
||||
saveCart(); render();
|
||||
}
|
||||
});
|
||||
|
||||
// Drawer
|
||||
const drawer = document.getElementById('drawer');
|
||||
document.getElementById('openCart').addEventListener('click', e => { e.preventDefault(); drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); updateCartUi(); });
|
||||
document.getElementById('exitCart').addEventListener('click', () => { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); });
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') drawer.classList.remove('open'); });
|
||||
|
||||
// Info modals (use your existing markup ids)
|
||||
const modals = {
|
||||
'server-class-1': document.getElementById('infoModal'),
|
||||
'server-class-2': document.getElementById('infoModal2'),
|
||||
'server-class-3': document.getElementById('infoModal3'),
|
||||
};
|
||||
document.body.addEventListener('click', (e) => {
|
||||
const infoBtn = e.target.closest('[data-info]');
|
||||
if (infoBtn) { const k = infoBtn.getAttribute('data-info'); modals[k]?.classList.add('open'); modals[k]?.setAttribute('aria-hidden', 'false'); }
|
||||
const closeBtn = e.target.closest('.modal__close');
|
||||
if (closeBtn) { const id = closeBtn.getAttribute('data-close'); const m = id ? document.getElementById(id) : closeBtn.closest('.modal'); m?.classList.remove('open'); m?.setAttribute('aria-hidden', 'true'); }
|
||||
});
|
||||
Object.values(modals).forEach(m => m?.addEventListener('click', e => { if (e.target === m) { m.classList.remove('open'); m.setAttribute('aria-hidden', 'true'); } }));
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') { Object.values(modals).forEach(m => m?.classList.remove('open')); } });
|
||||
|
||||
// Placeholder canvases for missing images
|
||||
function paintPlaceholders() {
|
||||
document.querySelectorAll('canvas[data-id]').forEach(cv => {
|
||||
const id = cv.dataset.id, ctx = cv.getContext('2d');
|
||||
const g = ctx.createLinearGradient(0, 0, cv.width, cv.height); g.addColorStop(0, '#0f1b3a'); g.addColorStop(1, '#1b2f5d');
|
||||
ctx.fillStyle = g; ctx.fillRect(0, 0, cv.width, cv.height);
|
||||
ctx.strokeStyle = 'rgba(255,255,255,.12)';
|
||||
for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.moveTo(0, 22 * i); ctx.lineTo(cv.width, 22 * i); ctx.stroke(); }
|
||||
ctx.fillStyle = '#aad0ff'; ctx.font = 'bold 16px system-ui,Inter'; ctx.fillText(products.find(p => p.id === id)?.name || id, 12, cv.height - 12);
|
||||
});
|
||||
}
|
||||
|
||||
// Checkout → calls your existing /create-checkout-session with multiple line_items
|
||||
async function checkout() {
|
||||
const entries = Object.entries(state.cart || {});
|
||||
if (!entries.length) return alert('Your cart is empty.');
|
||||
|
||||
// Build Stripe line_items from cart
|
||||
const line_items = [];
|
||||
for (const [id, qty] of entries) {
|
||||
const price = PRICE_IDS[id];
|
||||
if (!price) {
|
||||
alert(`Missing Stripe price for: ${id}. Update PRICE_IDS in the page.`);
|
||||
return;
|
||||
}
|
||||
if (qty > 0) line_items.push({ price, quantity: Number(qty) });
|
||||
}
|
||||
if (!line_items.length) return alert('Nothing to checkout.');
|
||||
|
||||
// Create session
|
||||
const r = await fetch(`${API}/create-checkout-session`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
line_items,
|
||||
success_url: location.origin + location.pathname + '?ok=1',
|
||||
cancel_url: location.origin + location.pathname + '?cancel=1'
|
||||
})
|
||||
});
|
||||
const j = await r.json().catch(() => null);
|
||||
if (!r.ok || !j?.url) {
|
||||
console.error('create-checkout-session failed', j || await r.text());
|
||||
return alert(j?.error || 'Checkout failed.');
|
||||
}
|
||||
// Stripe hosted page
|
||||
location.href = j.url;
|
||||
}
|
||||
|
||||
document.getElementById('checkoutBtn').addEventListener('click', checkout);
|
||||
|
||||
// On successful return (?ok=1) clear cart
|
||||
(function () {
|
||||
const qp = new URLSearchParams(location.search);
|
||||
if (qp.get('ok') === '1') {
|
||||
try { localStorage.removeItem('obli.cart'); } catch { }
|
||||
state.cart = {};
|
||||
history.replaceState(null, '', location.pathname);
|
||||
}
|
||||
})();
|
||||
|
||||
// Boot
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
render();
|
||||
paintPlaceholders();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>ASA Config Admin</title>
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.45 system-ui,Segoe UI,Arial;
|
||||
margin: 0;
|
||||
background: #0b1220;
|
||||
color: #e8eeff
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 980px;
|
||||
margin: 24px auto;
|
||||
padding: 0 16px
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
input, button, textarea {
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,255,255,.15);
|
||||
background: #0f1730;
|
||||
color: #e8eeff
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px 10px;
|
||||
flex: 1;
|
||||
min-width: 240px
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 14px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
padding: 12px
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #97a4c0;
|
||||
font-size: 12px;
|
||||
margin-top: 6px
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #1fd4a0
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #ff6b6b
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>ASA Config Admin</h1>
|
||||
<div class="bar">
|
||||
<input id="api" placeholder="Service base URL" value="http://localhost:5317">
|
||||
<input id="token" placeholder="Admin Bearer token">
|
||||
<button id="load">Load</button>
|
||||
<button id="save">Save</button>
|
||||
<span id="msg"></span>
|
||||
</div>
|
||||
<textarea id="json">{}</textarea>
|
||||
<div class="hint">Edits the JSON that your ASAservers page consumes. Save, then refresh the public page.</div>
|
||||
</main>
|
||||
<script>
|
||||
const $ = s => document.querySelector(s);
|
||||
function msg(t, ok = true) { const el = $('#msg'); el.textContent = t; el.className = ok ? 'ok' : 'err'; }
|
||||
$('#load').onclick = async () => {
|
||||
try {
|
||||
const r = await fetch($('#api').value + '/admin/config', { headers: { Authorization: 'Bearer ' + $('#token').value } });
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
$('#json').value = await r.text();
|
||||
msg('Loaded');
|
||||
} catch (e) { msg('Load failed: ' + e.message, false); }
|
||||
};
|
||||
$('#save').onclick = async () => {
|
||||
try {
|
||||
JSON.parse($('#json').value);
|
||||
const r = await fetch($('#api').value + '/admin/config', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + $('#token').value },
|
||||
body: $('#json').value
|
||||
});
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
msg('Saved');
|
||||
} catch (e) { msg('Save failed: ' + e.message, false); }
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,535 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ObliStudios — Home of Shardwalker: The Mirror’s Edge</title>
|
||||
<meta name="description" content="ObliStudios — Home of Shardwalker: The Mirror’s Edge. News, trailer, and updates." />
|
||||
<meta property="og:title" content="ObliStudios — Shardwalker: The Mirror’s Edge" />
|
||||
<meta property="og:description" content="Explore Shardwalker: The Mirror’s Edge — a dark, atmospheric adventure by ObliStudios." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#12FF9D" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Cinzel:wght@600;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0b10; /* deep space */
|
||||
--bg-2: #0e1017; /* panels */
|
||||
--text: #e6eef5; /* primary text */
|
||||
--muted: #9aa6b2; /* secondary */
|
||||
--accent: #12FF9D; /* neon shard green */
|
||||
--accent-2: #00c978; /* darker green */
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.45);
|
||||
--radius: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||||
color: var(--text);
|
||||
background: radial-gradient(1200px 600px at 75% -10%, rgba(18,255,157,.12), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(18,255,157,.08), transparent 60%), var(--bg);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
backdrop-filter: saturate(180%) blur(8px);
|
||||
background: rgba(10,11,16,.6);
|
||||
border-bottom: 1px solid rgba(255,255,255,.06)
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 68px
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
filter: drop-shadow(0 0 10px rgba(18,255,157,.5))
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
font-weight: 800;
|
||||
letter-spacing: .2px
|
||||
}
|
||||
|
||||
.wordmark span {
|
||||
color: var(--accent)
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--muted);
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--text)
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
padding: .7rem 1rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg,var(--accent),var(--accent-2));
|
||||
color: #00110a;
|
||||
box-shadow: 0 6px 18px rgba(18,255,157,.25)
|
||||
}
|
||||
|
||||
/* Mobile menu */
|
||||
.menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--text);
|
||||
font-size: 1.2rem
|
||||
}
|
||||
|
||||
@media (max-width:840px) {
|
||||
nav ul {
|
||||
display: none
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
background: rgba(14,16,23,.96);
|
||||
border-top: 1px solid rgba(255,255,255,.06)
|
||||
}
|
||||
|
||||
.mobile-nav a {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.mobile-nav a:hover {
|
||||
background: rgba(255,255,255,.03);
|
||||
color: var(--text)
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 96px 0 72px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.hero:before { /* subtle vignette */
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(1200px 600px at 50% -20%, rgba(18,255,157,.15), rgba(0,0,0,.0) 45%), radial-gradient(900px 500px at 30% 120%, rgba(0,0,0,.35), transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr .9fr;
|
||||
gap: 48px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2em;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Cinzel,Inter,serif;
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
font-size: clamp(2.2rem, 3.5vw + 1rem, 4rem);
|
||||
margin: .4rem 0 1rem
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.1rem;
|
||||
color: var(--muted);
|
||||
max-width: 60ch
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 22px
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: .9rem 1.15rem;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
border-radius: 12px;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
border: none;
|
||||
background: linear-gradient(135deg,var(--accent),var(--accent-2));
|
||||
color: #00110a;
|
||||
box-shadow: 0 12px 36px rgba(18,255,157,.25)
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hero-art {
|
||||
position: relative;
|
||||
aspect-ratio: 16/16;
|
||||
border-radius: var(--radius);
|
||||
background: url('img/mainmenu.png') center/cover no-repeat;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(255,255,255,.06)
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
padding: .45rem .6rem;
|
||||
border-radius: 999px;
|
||||
font-size: .8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .06em;
|
||||
background: rgba(10,11,16,.7);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(18,255,157,.35);
|
||||
backdrop-filter: blur(6px)
|
||||
}
|
||||
|
||||
@media (max-width:980px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 80px 0 56px
|
||||
}
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.section {
|
||||
padding: 64px 0
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-family: Cinzel,Inter,serif;
|
||||
font-size: 2rem;
|
||||
margin: 0 0 12px
|
||||
}
|
||||
|
||||
.kicker {
|
||||
color: var(--muted);
|
||||
margin-bottom: 22px
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 22px
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-2);
|
||||
padding: 20px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(255,255,255,.06);
|
||||
box-shadow: var(--shadow)
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: .2rem 0 .4rem;
|
||||
font-size: 1.05rem
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--muted);
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media (max-width:900px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr 1fr
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:640px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr
|
||||
}
|
||||
}
|
||||
|
||||
/* Trailer / media */
|
||||
.media {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr .8fr;
|
||||
gap: 24px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.media .frame {
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: var(--radius);
|
||||
background: #05060a;
|
||||
border: 1px solid rgba(255,255,255,.06);
|
||||
box-shadow: var(--shadow);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.media .note {
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
@media (max-width:980px) {
|
||||
.media {
|
||||
grid-template-columns: 1fr
|
||||
}
|
||||
}
|
||||
|
||||
/* Newsletter */
|
||||
.newsletter {
|
||||
background: linear-gradient(180deg, rgba(18,255,157,.06), rgba(18,255,157,.0));
|
||||
border: 1px solid rgba(255,255,255,.06);
|
||||
border-radius: var(--radius);
|
||||
padding: 22px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.newsletter input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #0a0c12;
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 10px;
|
||||
padding: .8rem .9rem
|
||||
}
|
||||
|
||||
.newsletter button {
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 40px 0 60px;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 16px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.social a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #0a0c12;
|
||||
border: 1px solid rgba(255,255,255,.06);
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
/* Simple alien head mark (inline SVG usage) */
|
||||
.alien {
|
||||
width: 34px;
|
||||
height: 34px
|
||||
}
|
||||
|
||||
.glow {
|
||||
filter: drop-shadow(0 0 10px rgba(18,255,157,.55)) drop-shadow(0 0 24px rgba(18,255,157,.2))
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container nav" aria-label="Main">
|
||||
<a href="#" class="brand" aria-label="ObliStudios Home">
|
||||
<!-- Simple inline alien logo to avoid external assets -->
|
||||
<svg class="alien glow" 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="#12FF9D" />
|
||||
<stop offset="100%" stop-color="#00c978" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#g)" d="M32 6c11 0 20 8 20 20 0 12-9 22-20 22S12 38 12 26C12 14 21 6 32 6Z" />
|
||||
<ellipse cx="24" cy="28" rx="7" ry="5" fill="#091016" />
|
||||
<ellipse cx="40" cy="28" rx="7" ry="5" fill="#091016" />
|
||||
</svg>
|
||||
<div class="wordmark">Obli<span>Studios</span></div>
|
||||
</a>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<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/ASAshop.html"> ASA Shop</a>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="#game">Playtest Signup</a>
|
||||
<button class="menu-btn" aria-label="Open menu" onclick="document.querySelector('.mobile-nav').style.display = (document.querySelector('.mobile-nav').style.display==='block'?'none':'block')">☰</button>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<main id="home" class="container hero">
|
||||
<div class="hero-grid">
|
||||
<div>
|
||||
<div class="eyebrow">Home of Shardwalker</div>
|
||||
<h1>Shardwalker: <br /> <span style="color:var(--accent)">The Mirror’s Edge</span></h1>
|
||||
<p class="lead">Step through the wolrd of Eidralis and master the art of shard‑switching and uncover the truth behind the Edge.</p>
|
||||
<div class="actions">
|
||||
<a class="btn primary" href="#game">Learn More</a>
|
||||
<a class="btn" href="#trailer">Watch Trailer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-art" role="img" aria-label="Atmospheric key art for Shardwalker">
|
||||
<div class="badge">SHARDWALKER: THE MIRRORS EDGE</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<section id="game" class="container section">
|
||||
<h2>About the Game</h2>
|
||||
<p class="kicker">A fast, tactical, and atmospheric journey through broken worlds.</p>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3>Shard‑Switching</h3>
|
||||
<p>Phase between mirrored layers to bypass hazards, expose enemy weaknesses, and solve environmental puzzles.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Combat Mastery</h3>
|
||||
<p>Build attunements, chain abilities, and adapt to enemy factions hunting within the Mirror’s Edge.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>World & Lore</h3>
|
||||
<p>Explore ancient structures and living biomes fractured by the Void. Each shard reveals new paths and secrets.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="trailer" class="container section">
|
||||
<div class="media">
|
||||
<div class="frame">
|
||||
<!-- Replace the placeholder below with your YouTube/Vimeo embed -->
|
||||
<span>Trailer Embed Placeholder (16:9)</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Watch the Trailer</h2>
|
||||
<p class="note">
|
||||
Drop in your trailer iframe here. Example (YouTube):
|
||||
<code><iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></code>
|
||||
</p>
|
||||
<div class="newsletter" role="form" aria-label="Newsletter signup">
|
||||
<input type="email" placeholder="Enter your email for updates" aria-label="Email address" />
|
||||
<button class="btn primary" type="button">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="container section">
|
||||
<h2>About ObliStudios</h2>
|
||||
<p class="kicker">We craft atmospheric, mechanics‑driven games with striking identity.</p>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3>Indie at Heart</h3>
|
||||
<p>One man team, big worlds. We prototype fast and iterate with our community.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Technical Artistry</h3>
|
||||
<p>From dynamic lighting to systemic encounters, we push tools to serve player stories.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Community</h3>
|
||||
<p>Join playtests, shape balance, and help chart the roadmap across shards.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="contact" class="container">
|
||||
<div class="footer-grid">
|
||||
<small>© <span id="y"></span> ObliStudios LLC. All rights reserved.</small>
|
||||
<div class="social" aria-label="Social links">
|
||||
<a href="https://twitter.com/obli_studios" aria-label="X (Twitter)">
|
||||
<!-- Minimal X icon -->
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><path d="M3 3l18 18M21 3L3 21" /></svg>
|
||||
</a>
|
||||
<a href="https://discord.gg/ErRyqwKWfB" aria-label="Discord"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><circle cx="12" cy="12" r="9" /></svg></a>
|
||||
<a href="https://www.youtube.com/channel/UCcCZJy3AUMyZN8rFd2GpWNg" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><polygon points="10,8 16,12 10,16" /></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Year stamp
|
||||
document.getElementById('y').textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,533 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ObliStudios · Roadmap — Shardwalker</title>
|
||||
<meta name="description" content="ObliStudios roadmap for Shardwalker: milestones, phases, and status." />
|
||||
<meta name="theme-color" content="#10e39a" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!-- Inter for UI, Cinzel for headings (optional aesthetic) -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* Brandable palette */
|
||||
--bg: #0a0b10;
|
||||
--panel: #111421;
|
||||
--panel-2: #0e1220;
|
||||
--text: #e8eef6;
|
||||
--muted: #9aa6b2;
|
||||
--line: #21283a;
|
||||
--accent: #10e39a;
|
||||
--accent-2: #0dc07f;
|
||||
--planned: #3b82f6;
|
||||
--progress: #f59e0b;
|
||||
--done: #10b981;
|
||||
--radius: 14px;
|
||||
--shadow: 0 12px 28px rgba(0,0,0,.35);
|
||||
--ring: 0 0 0 3px rgba(16, 227, 154, .25);
|
||||
}
|
||||
|
||||
* {
|
||||
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: radial-gradient(1000px 500px at 80% -10%, rgba(16,227,154,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(16,227,154,.06), transparent 60%), var(--bg);
|
||||
}
|
||||
|
||||
/* Layout helpers */
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 22px
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--ring)
|
||||
}
|
||||
|
||||
/* Header / Nav */
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
backdrop-filter: saturate(180%) blur(8px);
|
||||
background: rgba(10,11,16,.6);
|
||||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: .6rem .9rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg,var(--accent),var(--accent-2));
|
||||
color: #02140d;
|
||||
box-shadow: 0 8px 22px rgba(16,227,154,.25);
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 56px 0 24px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
background: linear-gradient(180deg, rgba(16,227,154,.05), rgba(16,227,154,0) 60%);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .22em;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: .35rem 0 .6rem;
|
||||
font-family: Cinzel, Inter, serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
font-size: clamp(2rem, 1rem + 3.2vw, 3.2rem);
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--muted);
|
||||
max-width: 70ch
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
color: var(--muted);
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: inline-flex;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px
|
||||
}
|
||||
|
||||
.dot.planned {
|
||||
background: var(--planned)
|
||||
}
|
||||
|
||||
.dot.progress {
|
||||
background: var(--progress)
|
||||
}
|
||||
|
||||
.dot.done {
|
||||
background: var(--done)
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
padding: 42px 0 64px
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 22px;
|
||||
width: 2px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.phase {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 46px 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.node {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
.node svg {
|
||||
width: 22px;
|
||||
height: 22px
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 18px 18px 12px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: .1rem 0 .5rem;
|
||||
font-family: Cinzel, Inter, serif;
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--muted);
|
||||
font-size: .95rem;
|
||||
margin: -2px 0 10px
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
padding: .35rem .55rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
font-size: .82rem;
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
background: #0c1220;
|
||||
}
|
||||
|
||||
.chip.planned {
|
||||
background: rgba(59,130,246,.1);
|
||||
border-color: rgba(59,130,246,.35);
|
||||
color: #c9dafd
|
||||
}
|
||||
|
||||
.chip.progress {
|
||||
background: rgba(245,158,11,.1);
|
||||
border-color: rgba(245,158,11,.35);
|
||||
color: #ffe2b2
|
||||
}
|
||||
|
||||
.chip.done {
|
||||
background: rgba(16,185,129,.12);
|
||||
border-color: rgba(16,185,129,.35);
|
||||
color: #c6f3e3
|
||||
}
|
||||
|
||||
ul.feature-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
ul.feature-list li {
|
||||
position: relative;
|
||||
padding-left: 26px;
|
||||
margin: .28rem 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
ul.feature-list li:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: .45rem;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(16,227,154,.18);
|
||||
}
|
||||
|
||||
ul.feature-list li.planned:before {
|
||||
background: var(--planned);
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
ul.feature-list li.progress:before {
|
||||
background: var(--progress);
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
ul.feature-list li.done:before {
|
||||
background: var(--done);
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 40px 0 64px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid rgba(255,255,255,.06);
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #0a0c12;
|
||||
border: 1px solid rgba(255,255,255,.06);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width:720px) {
|
||||
.timeline:before {
|
||||
left: 18px
|
||||
}
|
||||
|
||||
.phase {
|
||||
grid-template-columns: 40px 1fr
|
||||
}
|
||||
|
||||
.node {
|
||||
width: 40px;
|
||||
height: 40px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container nav" aria-label="Main">
|
||||
<a class="brand" href="#" aria-label="ObliStudios Home">
|
||||
<!-- Minimal alien mark -->
|
||||
<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>
|
||||
<a class="cta" href="#subscribe">Follow updates</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="container stack">
|
||||
<span class="eyebrow">Roadmap</span>
|
||||
<h1>Shardwalker: The Mirror’s Edge</h1>
|
||||
<p class="lead">
|
||||
Track our progress across phases—from core systems to launch preparation. Status chips indicate what’s
|
||||
planned, in progress, or completed.
|
||||
</p>
|
||||
<div class="legend" role="list" aria-label="Status Legend">
|
||||
<span role="listitem"><span class="dot planned"></span>Planned</span>
|
||||
<span role="listitem"><span class="dot progress"></span>In Progress</span>
|
||||
<span role="listitem"><span class="dot done"></span>Done</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timeline -->
|
||||
<main class="container timeline" aria-labelledby="roadmap">
|
||||
<h2 id="roadmap" class="sr-only" style="position:absolute;left:-9999px;">Roadmap timeline</h2>
|
||||
|
||||
<!-- Phase 1 -->
|
||||
<article class="phase">
|
||||
<div class="node" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Phase 1: Core Systems <span class="meta">(Now–Q3 2026)</span></h3>
|
||||
<div class="chips">
|
||||
<span class="chip progress">In Progress</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li class="progress">Shard Core Mechanic (Shard-Switching & Attunement)</li>
|
||||
<li class="progress">Basic Combat Loop (PvE AI + Abilities)</li>
|
||||
<li class="progress">Prototype PvP Mode</li>
|
||||
<li class="progress">Environmental Interaction / Puzzle Drafts</li>
|
||||
<li class="progress">UI/UX Exploration (HUD, Menus, Codex)</li>
|
||||
<li class="planned">Open Alpha Signups</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Phase 2 -->
|
||||
<article class="phase">
|
||||
<div class="node" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
|
||||
<rect x="6" y="6" width="12" height="12" rx="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Phase 2: Campaign & PvP Integration <span class="meta">(Q4 2026)</span></h3>
|
||||
<div class="chips">
|
||||
<span class="chip progress">In Progress</span>
|
||||
<span class="chip planned">Planned</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li class="planned">Solo Campaign Chapter 1</li>
|
||||
<li class="planned">First Arena PvP Mode</li>
|
||||
<li class="planned">Multiplayer Backend Integration (Steam / EOS)</li>
|
||||
<li class="planned">Boss Encounter Design</li>
|
||||
<li class="planned">Invite-Only Alpha PvP Test</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Phase 3 -->
|
||||
<article class="phase">
|
||||
<div class="node" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
|
||||
<polygon points="12 5 19 19 5 19" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Phase 3: Polish & Scale <span class="meta">(Q1 2027)</span></h3>
|
||||
<div class="chips">
|
||||
<span class="chip progress">In Progress</span>
|
||||
<span class="chip planned">Planned</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li class="planned">Visual Effects, Animations, and Polish</li>
|
||||
<li class="planned">Inventory / Gear / Character Progression</li>
|
||||
<li class="planned">Cross-Shard Synergy System</li>
|
||||
<li class="planned">Leaderboards + Matchmaking Systems</li>
|
||||
<li class="planned">Public PvP Alpha</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Phase 4 -->
|
||||
<article class="phase">
|
||||
<div class="node" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
|
||||
<path d="M3 12h18M12 3v18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Phase 4: Marketing & Launch Prep <span class="meta">(Q2 2027)</span></h3>
|
||||
<div class="chips">
|
||||
<span class="chip progress">In Progress</span>
|
||||
<span class="chip planned">Planned</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li class="planned">Steam Page Live</li>
|
||||
<li class="planned">Demo Build / Free Prologue</li>
|
||||
<li class="planned">Content Creator Outreach</li>
|
||||
<li class="planned">Closed Beta Signups</li>
|
||||
<li class="planned">Feedback-driven balance iteration</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container foot">
|
||||
<small>© <span id="y"></span> ObliStudios LLC. All rights reserved.</small>
|
||||
<div class="social" id="subscribe" aria-label="Social links">
|
||||
<a href="https://twitter.com/obli_studios" title="Follow on X (Twitter)">
|
||||
<!-- simple X mark -->
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><path d="M3 3l18 18M21 3L3 21" /></svg>
|
||||
</a>
|
||||
<a href="https://discord.gg/ErRyqwKWfB" title="Discord">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><circle cx="12" cy="12" r="9" /></svg>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCcCZJy3AUMyZN8rFd2GpWNg" title="YouTube">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><polygon points="10,8 16,12 10,16" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('y').textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue