Charles
209 lines
8.3 KiB
HTML
209 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<h2 class="cyberpunk">Jobs</h2>
|
|
<ul class="cyberpunk">
|
|
<li><a href="#/mission1">$$ Crew needed for urgent retrieval op - discretion paid handsomely</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<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>
|
|
<p class="cyberpunk job-listing">
|
|
<img class="cyberpunk portrait" src="img/twitchy.png" alt="" />
|
|
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 />
|
|
|
|
Job pays 10_000$, with some fraction available up-front to a convincing crew.
|
|
</p>
|
|
</section>
|
|
|
|
<script>
|
|
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'),
|
|
};
|
|
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}`);
|
|
}
|
|
}
|
|
|
|
function show(target) {
|
|
history.pushState({ pageID: target }, target, `#/${target}`);
|
|
updateForURL(target);
|
|
}
|
|
|
|
el.passwordForm.addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
|
|
var formData = Object.fromEntries(new FormData(el.passwordForm));
|
|
if (formData['passwordInput'] == 'PLANET!!!') {
|
|
show('jobs');
|
|
}
|
|
el.passwordInput.setAttribute('value', '');
|
|
});
|
|
|
|
/// 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)
|
|
</script>
|
|
</body>
|
|
|
|
</html> |