Add files via upload
This commit is contained in:
GitHub
parent
80a81b4e0e
commit
23d0d1b6d9
|
|
@ -427,6 +427,8 @@
|
||||||
<li><a href="#game">Games</a></li>
|
<li><a href="#game">Games</a></li>
|
||||||
<li><a href="#about">About</a></li>
|
<li><a href="#about">About</a></li>
|
||||||
<li><a href="#contact">Contact</a></li>
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
<a href="https://www.oblistudios.com/roadmap.html">Roadmap</a>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<a class="cta" href="#game">Playtest Signup</a>
|
<a class="cta" href="#game">Playtest Signup</a>
|
||||||
|
|
@ -440,7 +442,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="eyebrow">Home of Shardwalker</div>
|
<div class="eyebrow">Home of Shardwalker</div>
|
||||||
<h1>Shardwalker: <br /> <span style="color:var(--accent)">The Mirror’s Edge</span></h1>
|
<h1>Shardwalker: <br /> <span style="color:var(--accent)">The Mirror’s Edge</span></h1>
|
||||||
<p class="lead">Step through the fracture and master the art of shard‑switching. Fight across mirrored realms, bend environments to your will, and uncover the truth behind the Edge.</p>
|
<p class="lead">Step through the wolrd of Laim and master the art of shard‑switching. Fight across mirrored realms and uncover the truth behind the Edge.</p>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<a class="btn primary" href="#game">Learn More</a>
|
<a class="btn primary" href="#game">Learn More</a>
|
||||||
<a class="btn" href="#trailer">Watch Trailer</a>
|
<a class="btn" href="#trailer">Watch Trailer</a>
|
||||||
|
|
|
||||||
608
roadmap.html
608
roadmap.html
|
|
@ -1,148 +1,534 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>Obli.Studios Roadmap</title>
|
<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>
|
<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 {
|
body {
|
||||||
font-family: sans-serif;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
color: #333;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
/* Layout helpers */
|
||||||
background-color: #111;
|
|
||||||
color: white;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 40px;
|
max-width: 1100px;
|
||||||
max-width: 1200px;
|
margin: 0 auto;
|
||||||
margin: auto;
|
padding: 0 20px
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
.stack {
|
||||||
color: #00bfff;
|
display: grid;
|
||||||
margin-top: 60px;
|
gap: 22px
|
||||||
}
|
}
|
||||||
|
|
||||||
.roadmap-section {
|
a {
|
||||||
margin-bottom: 60px;
|
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 {
|
.phase {
|
||||||
margin-bottom: 30px;
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 46px 1fr;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase h3 {
|
.node {
|
||||||
background-color: #00bfff;
|
width: 46px;
|
||||||
color: white;
|
height: 46px;
|
||||||
padding: 10px;
|
border-radius: 999px;
|
||||||
border-radius: 5px;
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.features {
|
.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;
|
list-style: none;
|
||||||
padding-left: 20px;
|
padding-left: 0;
|
||||||
|
margin: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.features li::before {
|
ul.feature-list li {
|
||||||
content: "\2714\0020";
|
position: relative;
|
||||||
color: green;
|
padding-left: 26px;
|
||||||
|
margin: .28rem 0;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.inprogress li::before {
|
ul.feature-list li:before {
|
||||||
content: "\26A0\0020";
|
content: "";
|
||||||
color: orange;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.planned li::before {
|
.foot {
|
||||||
content: "\1F4C5\0020";
|
display: flex;
|
||||||
color: blue;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
<header>
|
<header>
|
||||||
<h1>Obli.Studios Roadmap</h1>
|
<div class="container nav" aria-label="Main">
|
||||||
<p>Track our development progress for Shardwalker</p>
|
<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>
|
||||||
|
<a href="#">Roadmap</a>
|
||||||
|
</nav>
|
||||||
|
<a class="cta" href="#subscribe">Follow updates</a>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<nav class="navbar">
|
|
||||||
<a href="https://www.oblistudios.com">🏠 Home</a> |
|
|
||||||
<a href="https://www.oblistudios.com/shardwalker.html">⚔️ Shardwalker</a> |
|
|
||||||
<a href="https://www.oblistudios.com/roadmap.html">🔄️ Roadmap</a>
|
|
||||||
</nav>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="roadmap-section">
|
<!-- Hero -->
|
||||||
<h2>⚔️ Shardwalker</h2>
|
<section class="hero">
|
||||||
|
<div class="container stack">
|
||||||
<div class="phase">
|
<span class="eyebrow">Roadmap</span>
|
||||||
<h3>Phase 1: Core Systems (Now–Q3 2026)</h3>
|
<h1>Shardwalker: The Mirror’s Edge</h1>
|
||||||
<ul class="inprogress">
|
<p class="lead">
|
||||||
<li>Shard Core Mechanic (Shard-Switching & Attunement)</li>
|
Track our progress across phases—from core systems to launch preparation. Status chips indicate what’s
|
||||||
<li>Basic Combat Loop (PvE AI + Abilities)</li>
|
planned, in progress, or completed.
|
||||||
</ul>
|
</p>
|
||||||
<ul class="inprogress">
|
<div class="legend" role="list" aria-label="Status Legend">
|
||||||
<li>Prototype PvP Mode</li>
|
<span role="listitem"><span class="dot planned"></span>Planned</span>
|
||||||
<li>Environmental Interaction / Puzzle Drafts</li>
|
<span role="listitem"><span class="dot progress"></span>In Progress</span>
|
||||||
<li>UI/UX Exploration (HUD, Menus, Codex)</li>
|
<span role="listitem"><span class="dot done"></span>Done</span>
|
||||||
</ul>
|
|
||||||
<ul class="planned">
|
|
||||||
<li>Open Alpha Signups</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="phase">
|
|
||||||
<h3>Phase 2: Campaign & PvP Integration (Q4 2026)</h3>
|
|
||||||
<ul class="inprogress">
|
|
||||||
<li>Solo Campaign Chapter 1</li>
|
|
||||||
<li>First Arena PvP Mode</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="inprogress">
|
|
||||||
<li>Multiplayer Backend Integration (Steam / EOS)</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="planned">
|
|
||||||
<li>Boss Encounter Design</li>
|
|
||||||
<li>Invite-Only Alpha PvP Test</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="phase">
|
|
||||||
<h3>Phase 3: Polish & Scale (Q1 2027)</h3>
|
|
||||||
<ul class="inprogress">
|
|
||||||
<li>Visual Effects, Animations, and Polish</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="inprogress">
|
|
||||||
<li>Inventory / Gear / Character Progression</li>
|
|
||||||
<li>Cross-Shard Synergy System</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="planned">
|
|
||||||
<li>Leaderboards + Matchmaking Systems</li>
|
|
||||||
<li>Public PvP Alpha</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="phase">
|
|
||||||
<h3>Phase 4: Marketing & Launch Prep (Q2 2027)</h3>
|
|
||||||
<ul class="inprogress">
|
|
||||||
<li>Steam Page Live</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="inprogress">
|
|
||||||
<li>Demo Build / Free Prologue</li>
|
|
||||||
<li>Content Creator Outreach</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="planned">
|
|
||||||
<li>Closed Beta Signups</li>
|
|
||||||
<li>Feedback-driven balance iteration</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</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="progress">Solo Campaign Chapter 1</li>
|
||||||
|
<li class="progress">First Arena PvP Mode</li>
|
||||||
|
<li class="progress">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="progress">Visual Effects, Animations, and Polish</li>
|
||||||
|
<li class="progress">Inventory / Gear / Character Progression</li>
|
||||||
|
<li class="progress">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="progress">Steam Page Live</li>
|
||||||
|
<li class="progress">Demo Build / Free Prologue</li>
|
||||||
|
<li class="progress">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. 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="#" title="Discord (coming soon)">
|
||||||
|
<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="#" title="YouTube (coming soon)">
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue