DUNGEONS-30: add access gateway with Telegram and Discord approvals
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
73
public/app.js
Normal file
73
public/app.js
Normal file
@@ -0,0 +1,73 @@
|
||||
const form = document.querySelector('#access-form');
|
||||
const input = document.querySelector('#access-number');
|
||||
const button = document.querySelector('#enter-button');
|
||||
const label = document.querySelector('#button-label');
|
||||
const status = document.querySelector('#form-status');
|
||||
const codeLength = Number(form.dataset.codeLength);
|
||||
let waiting = false;
|
||||
let cooldown;
|
||||
|
||||
function announce(message, success = false) {
|
||||
status.textContent = message;
|
||||
status.classList.toggle('success', success);
|
||||
status.hidden = false;
|
||||
}
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
input.removeAttribute('aria-invalid');
|
||||
if (!waiting) status.hidden = true;
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async event => {
|
||||
event.preventDefault();
|
||||
if (waiting) return;
|
||||
const code = input.value.replace(/\s/g, '');
|
||||
if (!new RegExp(`^\\d{${codeLength}}$`).test(code)) {
|
||||
input.setAttribute('aria-invalid', 'true');
|
||||
announce(`Enter the ${codeLength}-digit number from your bot DM.`);
|
||||
input.focus();
|
||||
return;
|
||||
}
|
||||
waiting = true;
|
||||
button.disabled = true;
|
||||
form.setAttribute('aria-busy', 'true');
|
||||
label.textContent = 'CHECKING YOUR NUMBER…';
|
||||
status.hidden = true;
|
||||
let retryAfter = 0;
|
||||
let approved = false;
|
||||
try {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const next = location.pathname.startsWith('/_access') ? params.get('next') || '/' : location.pathname + location.search + location.hash;
|
||||
const response = await fetch('/_access/login', {
|
||||
method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ code, next }), signal: AbortSignal.timeout(15000),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
retryAfter = response.status === 429 ? Number(data.retryAfter) || 60 : 0;
|
||||
if (response.status === 401) input.setAttribute('aria-invalid', 'true');
|
||||
throw new Error(data.error || 'We could not check your number. Please try again.');
|
||||
}
|
||||
approved = true;
|
||||
input.value = '';
|
||||
announce('Access granted. Your next chapter is opening…', true);
|
||||
label.textContent = 'OPENING THE GROUND…';
|
||||
location.assign(data.next);
|
||||
} catch (error) {
|
||||
announce(error.name === 'TimeoutError' || error instanceof TypeError ? 'Connection interrupted. Check your connection and try again.' : error.message);
|
||||
status.focus();
|
||||
} finally {
|
||||
form.removeAttribute('aria-busy');
|
||||
if (retryAfter > 0) {
|
||||
const deadline = Date.now() + retryAfter * 1000;
|
||||
const tick = () => {
|
||||
const seconds = Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
|
||||
label.textContent = `TRY AGAIN IN ${seconds}s`;
|
||||
if (seconds === 0) { clearInterval(cooldown); waiting = false; button.disabled = false; label.textContent = 'ENTER THE ALPHA'; }
|
||||
};
|
||||
tick(); cooldown = setInterval(tick, 1000);
|
||||
} else if (!approved) {
|
||||
waiting = false; button.disabled = false; label.textContent = 'ENTER THE ALPHA';
|
||||
}
|
||||
}
|
||||
});
|
||||
69
public/index.html
Normal file
69
public/index.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#0a0a0a">
|
||||
<meta name="description" content="Your next chapter starts here. Request private-alpha access to Dungeons & Ground.">
|
||||
<title>Dungeons & Ground — Your next chapter</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/_access/assets/mark.svg">
|
||||
<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=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Unbounded:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/_access/assets/style.css">
|
||||
<script src="/_access/assets/app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#access-number">Skip to access number</a>
|
||||
<header class="nav">
|
||||
<a class="mark" href="/" aria-label="Dungeons & Ground home">
|
||||
<span class="mark-icon" aria-hidden="true">D<span>&</span>G</span>
|
||||
<span class="mark-copy"><strong>DUNGEONS</strong><small>& GROUND</small></span>
|
||||
</a>
|
||||
<span class="alpha-tag"><i></i> PRIVATE ALPHA <span class="tag-divider">/</span> INVITATION REQUIRED</span>
|
||||
</header>
|
||||
<main>
|
||||
<div class="hero">
|
||||
<section class="hero-copy" aria-labelledby="hero-title">
|
||||
<p class="eyebrow"><span></span> A WORLD WORTH GETTING INTO</p>
|
||||
<h1 id="hero-title">YOUR NEXT<br>CHAPTER<br><em>AWAITS.</em></h1>
|
||||
<p class="lede">Beyond this gate, a universe of your own. Real players. AI companions. Stories that keep moving, even when life gets in the way.</p>
|
||||
<div class="transmission">
|
||||
<div class="signal" aria-hidden="true"><i></i><i></i><b>D&G</b></div>
|
||||
<div><small>A MESSAGE FROM THE GROUNDKEEPER</small><p>“Every great adventure begins with<br>someone opening a door.”</p></div>
|
||||
</div>
|
||||
<div class="trust-row"><span>PRIVATE WORLDS</span><i></i><span>YOUR PACE</span><i></i><span>INFINITE POSSIBILITIES</span></div>
|
||||
</section>
|
||||
<section class="access-card" aria-labelledby="access-title">
|
||||
<div class="card-top"><span>THE GATE / ACCESS CONTROL</span><span class="lock" aria-hidden="true">◇</span></div>
|
||||
<div class="card-content">
|
||||
<p class="eyebrow acid">YOU’RE ONE STEP AWAY</p>
|
||||
<h2 id="access-title">ENTER THE<br>GROUND.</h2>
|
||||
<p class="card-lede">Already approved? Enter the number<br class="desktop-break"> our bot sent to your direct messages.</p>
|
||||
<form id="access-form" novalidate data-code-length="{{CODE_LENGTH}}">
|
||||
<label for="access-number">YOUR ACCESS NUMBER <span>{{CODE_LENGTH}} DIGITS</span></label>
|
||||
<input id="access-number" name="code" type="text" inputmode="numeric" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="32" placeholder="Paste your number" aria-describedby="code-hint form-status" required>
|
||||
<p id="code-hint" class="hint">Your number is reusable for {{CODE_DAYS}} days after approval.</p>
|
||||
<div id="form-status" class="form-status" role="status" aria-live="polite" tabindex="-1" hidden></div>
|
||||
<button id="enter-button" class="enter-button" type="submit"><span id="button-label">ENTER THE ALPHA</span><span aria-hidden="true">↗</span></button>
|
||||
</form>
|
||||
<noscript><p class="form-status">Enable JavaScript to submit your access number.</p></noscript>
|
||||
<div class="request-access">
|
||||
<div class="request-heading"><h3>DON’T HAVE A NUMBER?</h3><span>01 → 02 → 03</span></div>
|
||||
<p>Open a bot, choose <strong>Get access</strong>, and wait for an administrator to approve your request.</p>
|
||||
<div class="providers">{{PROVIDERS}}</div>
|
||||
<p class="dm-note">Keep your DMs open. Your invitation will arrive there.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-bottom"><i></i> ADMIN-APPROVED ACCESS <span>D&G / ALPHA</span></div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="steps" aria-label="How to get access">
|
||||
<article><span class="step-number">01</span><div><h2>MAKE CONTACT</h2><p>Find us on Telegram or Discord.<br>Press Get access in the bot.</p></div><span class="step-arrow" aria-hidden="true">↗</span></article>
|
||||
<article><span class="step-number">02</span><div><h2>GET THE GREEN LIGHT</h2><p>An administrator reviews your request.<br>Your number arrives in a private message.</p></div><span class="step-arrow" aria-hidden="true">↗</span></article>
|
||||
<article><span class="step-number">03</span><div><h2>WRITE YOUR NEXT CHAPTER</h2><p>Enter your number and step inside.<br>Request a new one after {{CODE_DAYS}} days.</p></div></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer"><span>STORIES THAT WAIT FOR NO ONE.</span><span>DUNGEONS & GROUND <i>©</i> PRIVATE ALPHA</span></footer>
|
||||
</body>
|
||||
</html>
|
||||
1
public/mark.svg
Normal file
1
public/mark.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#0a0a0a"/><path d="M12 4H60V52L52 60H4V12Z" fill="none" stroke="#d9f75f" stroke-width="2"/><text x="32" y="39" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="21" fill="#d9f75f">D&G</text></svg>
|
||||
|
After Width: | Height: | Size: 321 B |
94
public/style.css
Normal file
94
public/style.css
Normal file
@@ -0,0 +1,94 @@
|
||||
:root {
|
||||
--acid: #d9f75f; --ink: #eeeee7; --muted: #9a9a91; --line: #292926;
|
||||
--display: 'Unbounded', sans-serif; --body: 'Manrope', sans-serif; --mono: 'DM Mono', monospace;
|
||||
color-scheme: dark; font-family: var(--body); color: var(--ink); background: #0a0a0a;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); background-size: 34px 34px; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input { font: inherit; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
button:not(:disabled), a { cursor: pointer; }
|
||||
button, a, input { transition: background .2s, color .2s, border-color .2s; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
|
||||
::selection { background: var(--acid); color: #080808; }
|
||||
[hidden] { display: none !important; }
|
||||
.skip-link { position: fixed; top: -100px; left: 20px; padding: 15px; background: var(--acid); color: #080808; z-index: 5; }
|
||||
.skip-link:focus { top: 20px; }
|
||||
.nav { height: 98px; padding: 0 clamp(22px, 5vw, 80px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
|
||||
.mark { display: inline-flex; gap: 13px; align-items: center; }
|
||||
.mark-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--acid); font: 600 14px/1 var(--display); letter-spacing: -1px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
|
||||
.mark-icon span { color: var(--acid); font-size: 9px; }
|
||||
.mark-copy { display: flex; flex-direction: column; gap: 3px; font-family: var(--display); letter-spacing: .08em; }
|
||||
.mark-copy strong { font-size: 12px; }
|
||||
.mark-copy small { font-size: 8px; color: var(--muted); letter-spacing: .32em; }
|
||||
.alpha-tag { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
|
||||
.alpha-tag i, .card-bottom i { width: 5px; height: 5px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 10px #d9f75f40; }
|
||||
.tag-divider { color: #48483d; margin: 0 5px; }
|
||||
.hero { max-width: 1536px; margin: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(385px, .8fr); gap: clamp(40px, 7vw, 110px); padding: 72px clamp(22px, 5vw, 80px) 76px; align-items: center; }
|
||||
.eyebrow { font: 500 9px var(--mono); letter-spacing: .15em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
|
||||
.eyebrow > span { display: inline-block; width: 26px; height: 1px; background: var(--acid); }
|
||||
.hero h1 { font: 600 clamp(52px, 6.3vw, 98px)/1.04 var(--display); letter-spacing: -.065em; margin: 29px 0 27px; }
|
||||
.hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--acid); }
|
||||
.lede { max-width: 490px; color: #adada5; font-size: 15px; line-height: 1.85; margin: 0; }
|
||||
.transmission { display: flex; gap: 23px; align-items: center; margin-top: 38px; }
|
||||
.transmission small { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--acid); }
|
||||
.transmission p { font-size: 12px; line-height: 1.8; color: #bcbcb2; margin: 10px 0 0; }
|
||||
.signal { position: relative; flex: 0 0 83px; width: 83px; height: 83px; display: grid; place-items: center; border: 1px solid #36372c; border-radius: 50%; }
|
||||
.signal:before, .signal:after { content: ''; position: absolute; inset: 10px; border: 1px solid #2c2e22; border-radius: 50%; }
|
||||
.signal:after { inset: 23px; border-color: #464d27; }
|
||||
.signal b { font: 600 10px var(--display); color: var(--acid); }
|
||||
.signal i { position: absolute; background: var(--acid); border-radius: 50%; width: 4px; height: 4px; top: 12px; left: 11px; }
|
||||
.signal i:nth-child(2) { top: 61px; left: 69px; }
|
||||
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 38px; font: 400 8px var(--mono); color: var(--muted); letter-spacing: .07em; }
|
||||
.trust-row i { width: 3px; height: 3px; border-radius: 50%; background: #6b7545; }
|
||||
.access-card { border: 1px solid #383b2b; background: linear-gradient(140deg, #14150f, #0d0d0b 35%, #0b0b0a); box-shadow: 0 30px 100px #0006; position: relative; }
|
||||
.access-card:before { content: ''; position: absolute; height: 2px; width: 46px; background: var(--acid); top: -1px; left: -1px; }
|
||||
.card-top { display: flex; align-items: center; justify-content: space-between; min-height: 47px; padding: 0 25px; border-bottom: 1px solid var(--line); font: 400 8px var(--mono); letter-spacing: .12em; color: var(--muted); }
|
||||
.lock { color: var(--acid); font-size: 21px; }
|
||||
.card-content { padding: 28px 32px 27px; }
|
||||
.acid { color: var(--acid); font-size: 8px; }
|
||||
.access-card h2 { font: 600 clamp(29px, 3vw, 44px)/1.15 var(--display); letter-spacing: -.055em; margin: 17px 0 15px; }
|
||||
.card-lede { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0 0 27px; }
|
||||
form label { display: flex; justify-content: space-between; gap: 10px; font: 500 8px var(--mono); letter-spacing: .09em; margin-bottom: 10px; }
|
||||
form label span { color: var(--muted); }
|
||||
input { display: block; width: 100%; height: 59px; background: #090909; border: 1px solid #45473a; color: var(--ink); padding: 0 16px; font: 400 21px var(--mono); letter-spacing: .16em; border-radius: 0; }
|
||||
input::placeholder { color: #8a8c7c; font-size: 13px; letter-spacing: .05em; }
|
||||
input:focus { border-color: var(--acid); }
|
||||
input[aria-invalid="true"] { border-color: #f1a48a; }
|
||||
.hint { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 10px 0 20px; }
|
||||
.enter-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 53px; padding: 0 19px; background: var(--acid); color: #0c1002; border: 1px solid var(--acid); font: 500 10px var(--mono); letter-spacing: .09em; }
|
||||
.enter-button > span:last-child { font-size: 23px; }
|
||||
.enter-button:hover { background: #e6ff91; }
|
||||
.enter-button:disabled { opacity: .65; cursor: wait; }
|
||||
.form-status { margin: 0 0 15px; padding: 12px; font: 400 11px/1.7 var(--body); color: #ffc0a8; border: 1px solid #724b3b; background: #221813; }
|
||||
.form-status.success { color: var(--acid); border-color: #596522; background: #171b0c; }
|
||||
.request-access { border-top: 1px solid var(--line); margin-top: 27px; padding-top: 22px; }
|
||||
.request-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.request-heading h3 { font: 500 8px var(--mono); letter-spacing: .07em; margin: 0; }
|
||||
.request-heading > span { font: 400 8px var(--mono); color: #777e58; }
|
||||
.request-access p { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 12px 0 17px; }
|
||||
.request-access strong { color: #dbdcd1; font-weight: 500; }
|
||||
.providers { display: flex; gap: 10px; }
|
||||
.provider { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #35372e; min-height: 44px; padding: 0 12px; font: 500 9px var(--mono); letter-spacing: .04em; }
|
||||
.provider > span:first-child { font-size: 14px; color: var(--acid); }
|
||||
.provider > span:last-child { color: #90937e; }
|
||||
.provider:hover { background: #1a1e0f; border-color: var(--acid); }
|
||||
.request-access .dm-note { font-size: 9px; margin: 13px 0 0; }
|
||||
.providers .unavailable { border: 1px solid var(--line); padding: 12px; margin: 0; }
|
||||
.card-bottom { min-height: 37px; padding: 0 24px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); color: var(--muted); font: 400 7px var(--mono); letter-spacing: .05em; }
|
||||
.card-bottom > span { margin-left: auto; color: #888e6e; }
|
||||
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0b0af0; padding: 0 clamp(22px, 5vw, 80px); }
|
||||
.steps article { position: relative; display: flex; gap: 22px; padding: 31px 28px 33px 0; }
|
||||
.steps article + article { border-left: 1px solid var(--line); padding-left: 32px; }
|
||||
.step-number { font: 500 11px var(--mono); color: var(--acid); padding-top: 2px; }
|
||||
.steps h2 { font: 500 10px/1.6 var(--display); letter-spacing: -.02em; margin: 0 0 10px; }
|
||||
.steps p { font-size: 11px; line-height: 1.8; margin: 0; color: var(--muted); }
|
||||
.step-arrow { margin-left: auto; font: 20px var(--mono); color: #5b6144; }
|
||||
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(22px, 5vw, 80px); font: 400 7px var(--mono); letter-spacing: .11em; color: var(--muted); }
|
||||
.footer i { color: #737765; font-style: normal; padding: 0 7px; }
|
||||
@media (min-width: 1600px) { .hero { padding-top: 100px; padding-bottom: 100px; } }
|
||||
@media (max-width: 1000px) { .hero { gap: 35px; grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr); padding-top: 45px; padding-bottom: 50px; } .hero h1 { font-size: 54px; } .card-content { padding: 24px; } .trust-row { font-size: 7px; gap: 7px; } .steps article, .steps article + article { gap: 12px; padding: 25px 18px; } .steps article:first-child { padding-left: 0; } .step-arrow { display: none; } .steps h2 { font-size: 9px; } }
|
||||
@media (max-width: 760px) { .nav { height: 80px; } .alpha-tag { font-size: 8px; } .alpha-tag .tag-divider, .alpha-tag { gap: 7px; } .hero { grid-template-columns: 1fr; max-width: 620px; padding-top: 38px; gap: 35px; } .hero h1 { font-size: clamp(49px, 10vw, 70px); margin: 23px 0 22px; } .lede { font-size: 13px; } .transmission { margin-top: 24px; } .trust-row { margin-top: 25px; font-size: 7px; gap: 12px; } .card-content { padding: 27px; } .access-card h2 { font-size: 36px; } .steps { grid-template-columns: 1fr; } .steps article, .steps article + article { padding: 25px 0; border-left: 0; gap: 22px; } .steps article + article { border-top: 1px solid var(--line); } .steps h2 { font-size: 10px; } .steps br { display: none; } .step-arrow { display: block; } .footer { line-height: 1.9; } .footer > span:last-child { text-align: right; } }
|
||||
@media (max-width: 480px) { .alpha-tag { max-width: 105px; line-height: 1.6; } .tag-divider { display: none; } .alpha-tag i { flex: 0 0 5px; } .hero h1 { font-size: clamp(39px, 10vw, 49px); } .hero h1 br:first-child { display: initial; } .hero .eyebrow { font-size: 7px; gap: 8px; } .hero-copy .eyebrow > span { width: 17px; } .card-content { padding: 25px 20px; } .card-top { padding: 0 20px; } .card-bottom { padding: 0 16px; font-size: 6px; } .trust-row { font-size: 6px; gap: 8px; } .transmission { gap: 15px; } .transmission small { font-size: 7px; } .transmission p { font-size: 11px; } .desktop-break { display: none; } .footer { font-size: 6px; } }
|
||||
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition: none !important; scroll-behavior: auto !important; } }
|
||||
Reference in New Issue
Block a user