Files

209 lines
8.3 KiB
HTML
Raw Permalink Normal View History

2025-10-12 21:30:25 -07:00
<!DOCTYPE html>
<html>
2025-10-12 23:38:44 -07:00
2025-10-12 21:30:25 -07:00
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="theme/cyberpunk-2077.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@100;200;300;400;500;600;700&display=swap" />
</head>
<body>
2025-10-12 23:38:44 -07:00
<section class="cyberpunk hidden" id="navBar">
<a class="cyberpunk" href="#/jobs">Jobs listing</a>
<a class="cyberpunk" style="--background-color: gray;"><s>Post job</s></a>
<a class="cyberpunk" href="#/tech" style="--background-color: var(--purple-color);">Cool shards</a>
<a class="cyberpunk" style="--background-color: gray;"><s>Sell tech</s>></a>
</section>
2025-10-12 21:30:25 -07:00
<section class="cyberpunk black both" id="passwordPrompt">
<img class="cyberpunk" src="img/qrcode.png" alt="" />
<h3>Prove yourself. Hack the ...</h3>
<form style="max-width: 500px" id="passwordForm">
<input class="cyberpunk" type="password" name="passwordInput" id="passwordInput" />
<button type="submit" class="cyberpunk purple">Submit_</button>
</form>
</section>
2025-10-12 23:38:44 -07:00
<div class="cyberpunk hack hidden" id="hackThePlanet">
HACK THE PLANET!
</div>
<section class="cyberpunk black both" id="jobs">
<h1 class="cyberpunk">Compilation of jobs from gonks who will asphyxiated on their own vomit</h1>
<div class="cyberpunk">
<p>
Welcome to the bleeding edge of opportunity, choom. In the neon-drenched streets of this city,
finding
the
right talent for the job can mean the difference between a fat payday and a flatline. You've got a
problem
that needs solving, a package that needs delivering, or a rival that needs disappearing, but the
usual
channels are a no-go. This is the place where whispers become contracts and desperate pleas find
their
answer in a storm of code and chrome.
<br />
Your humble host and fixer, CK--that's Cereal Killer to the uninitiated--curates this little corner
of
the
Net
from his haunt at the NDA Lounge. The system is simple: you have the eddies, and someone on this
board
has
the skills. From solos with itchy trigger fingers and netrunners who can dance through ICE, to techs
who
can
turn scrap into gold, you'll find your crew right here. No job is too dirty, too weird, or too
dangerous, as
long as the price is right.
<br />
So, step right up. Post your gig. Be specific, be clear, and be ready to pay. Or maybe you're the
one
with
the skills, looking for the next big score. Browse the listings, find your contract, and make a name
for
yourself on the Street. Just remember the first rule of the NDA Lounge, and by extension, this
board:
what
happens here, stays here. Now, let's get to business.
</p>
</div>
2025-10-12 21:30:25 -07:00
<h2 class="cyberpunk">Jobs</h2>
<ul class="cyberpunk">
2025-10-12 23:38:44 -07:00
<li><a href="#/mission1">$$ Crew needed for urgent retrieval op - discretion paid handsomely</a></li>
2025-10-12 21:30:25 -07:00
</ul>
</section>
2025-10-12 23:38:44 -07:00
<section class="cyberpunk black both" id="tech">
<h1>Data shards</h1>
<div class="boxtree">
<div class="children2 width1">
<h2>
Retro tabletop rulebook
<sub>$0</sub>
</h2>
This neat little shard was found in on old drives I scoured from kids computer, "Lucy".
Total gonk, but the game is fun.
<br />
Grab it <a href="assets/rule-book.pdf">here</a>
</div>
<div class="children0 width2">
<h2>
Templates for imagination
<sub>$0</sub>
</h2>
When you want to be in a BD but are too broke to do it. Use your "imagination".
<br />
Grab it <a href="assets/character-sheet.pdf">here</a>
</div>
<div class="children0 width2">
<h2>
Find your soul
<sub>$0</sub>
</h2>
Life is full of patterns. Everything, from the grid of the city to the flow of net, even
our souls. Some nova thinker put together this guide to help you find yourself.
<br />
Grab it <a href="assets/rule-book-roles.pdf">here</a>
</div>
</div>
</section>
<section class="cyberpunk black both" id="mission1">
<h1 class="cyberpunk">$$ Crew needed for urgent retrieval op - discretion paid handsomely</h1>
2025-10-12 21:30:25 -07:00
<p class="cyberpunk job-listing">
<img class="cyberpunk portrait" src="img/twitchy.png" alt="" />
2025-10-12 23:38:44 -07:00
I'm seeking a team of skilled professionals for an urgent retrieval operation. A sensitive "business"
arrangement has soured, and a former associate is now in possession of digital keycodes that are linked
to a
piece of personal hardware that is having... adverse effects on my physical and mental
well-being.
<br />
The codes within a secure private facility in an industrial part of town. Be advised, security has
recently
been upgraded to a professional-grade level. Discretion is absolutely paramount; this is a personal
matter,
and I need it handled quietly.
<br />
2025-10-12 21:30:25 -07:00
2025-10-12 23:38:44 -07:00
Job pays 10_000$, with some fraction available up-front to a convincing crew.
2025-10-12 21:30:25 -07:00
</p>
</section>
<script>
2025-10-12 23:38:44 -07:00
const navElements = {
'/': document.getElementById('passwordPrompt'),
'/jobs': document.getElementById('jobs'),
'/mission1': document.getElementById('mission1'),
'/passwordPrompt': document.getElementById('passwordPrompt'),
'/tech': document.getElementById('tech'),
'navBar': document.getElementById('navBar'),
2025-10-12 21:30:25 -07:00
};
2025-10-12 23:38:44 -07:00
let el = {
'passwordForm': document.getElementById("passwordForm"),
'passwordInput': document.getElementById('passwordInput'),
'hackThePlanet': document.getElementById('hackThePlanet')
};
let showNavBar = false;
// Merge navElements into el and verify everything exists
for (let key in navElements) {
if (key in el) {
console.log(`WARNING: overlapping navElement and el: ${key}`)
};
el[key] = navElements[key];
}
for (let key in el) {
if (el[key] == undefined) {
console.log(`WARNING: invalid key ${key}`);
2025-10-12 21:30:25 -07:00
}
}
2025-10-12 23:38:44 -07:00
function show(target) {
history.pushState({ pageID: target }, target, `#/${target}`);
updateForURL(target);
}
el.passwordForm.addEventListener("submit", function (e) {
2025-10-12 21:30:25 -07:00
e.preventDefault();
2025-10-12 23:38:44 -07:00
var formData = Object.fromEntries(new FormData(el.passwordForm));
if (formData['passwordInput'] == 'PLANET!!!') {
2025-10-12 21:30:25 -07:00
show('jobs');
}
2025-10-12 23:38:44 -07:00
el.passwordInput.setAttribute('value', '');
2025-10-12 21:30:25 -07:00
});
2025-10-12 23:38:44 -07:00
/// Parses the URL and renders a page
function updateForURL(event) {
let url = window.location.hash.replace(/^#*\/*/, '/');
for (let el in navElements) {
navElements[el].classList.add('hidden');
}
navElements[url].classList.remove('hidden');
if (url != '/') {
navElements['navBar'].classList.remove('hidden');
}
}
updateForURL();
window.addEventListener('hashchange', updateForURL);
setTimeout(() => {
el.hackThePlanet.classList.remove('hidden');
setTimeout(() => {
el.hackThePlanet.classList.add('hidden');
}, 2000)
}, 5000)
2025-10-12 21:30:25 -07:00
</script>
</body>
</html>