536 lines
18 KiB
HTML
536 lines
18 KiB
HTML
|
<!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>
|