59 lines
3.0 KiB
HTML
59 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Onboarding — Vanguard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
:root{--bg:#141414;--fg:#e6e6e6;--mut:#9a9a9a;--acc:#5865F2;--ok:#2ecc71;--box:#1f1f1f;--line:#2e2e2e}
|
|
html,body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.5 system-ui,sans-serif}
|
|
main{max-width:560px;margin:0 auto;padding:36px 16px 48px}
|
|
header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
|
|
h1{font-size:26px;margin:0}
|
|
.right{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--mut);font-size:14px}
|
|
button{font:inherit;font-size:14px;border-radius:8px;border:1px solid #3a3a3a;background:#262626;color:var(--fg);padding:7px 14px;cursor:pointer}
|
|
button:hover{border-color:var(--acc)}
|
|
section{background:var(--box);border:1px solid var(--line);border-radius:14px;padding:8px 10px}
|
|
label{display:flex;gap:14px;align-items:center;padding:12px 10px;border-radius:10px;cursor:pointer;font-size:19px}
|
|
label:hover{background:#262626}
|
|
label input{width:22px;height:22px;margin:0;accent-color:var(--acc);flex:none}
|
|
label input:checked + span{color:var(--mut);text-decoration:line-through}
|
|
.done{display:none;color:var(--ok);margin-top:14px;font-size:15px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Onboarding</h1>
|
|
<div class="right"><span id="count"></span><button id="clear">Clear</button></div>
|
|
</header>
|
|
<section>
|
|
<label><input type="checkbox" data-id="who"><span>Who we are</span></label>
|
|
<label><input type="checkbox" data-id="about"><span>About / verify</span></label>
|
|
<label><input type="checkbox" data-id="community"><span>Community</span></label>
|
|
<label><input type="checkbox" data-id="vanguard"><span>Who Vanguard is</span></label>
|
|
<label><input type="checkbox" data-id="spartan"><span>Who Spartan are</span></label>
|
|
<label><input type="checkbox" data-id="comms"><span>Comms</span></label>
|
|
<label><input type="checkbox" data-id="training"><span>Training</span></label>
|
|
<label><input type="checkbox" data-id="ptt"><span>Push to mute / talk</span></label>
|
|
</section>
|
|
<div class="done" id="done">All covered. Clear for the next one.</div>
|
|
</main>
|
|
<script>
|
|
const KEY = 'vg.onboarding';
|
|
const boxes = [...document.querySelectorAll('input[type=checkbox]')];
|
|
const load = () => { try { return JSON.parse(localStorage.getItem(KEY) || '{}'); } catch { return {}; } };
|
|
const save = s => { try { localStorage.setItem(KEY, JSON.stringify(s)); } catch {} };
|
|
function render() {
|
|
const s = load(); let n = 0;
|
|
for (const b of boxes) { b.checked = !!s[b.dataset.id]; if (b.checked) n++; }
|
|
document.getElementById('count').textContent = `${n} / ${boxes.length}`;
|
|
document.getElementById('done').style.display = n === boxes.length ? 'block' : 'none';
|
|
}
|
|
for (const b of boxes) b.addEventListener('change', () => { const s = load(); s[b.dataset.id] = b.checked; save(s); render(); });
|
|
document.getElementById('clear').onclick = () => { save({}); render(); };
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|