add: assets, some fixes, and build system
This commit is contained in:
Charles
+167
-31
@@ -1,5 +1,6 @@
|
||||
<!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" />
|
||||
@@ -9,6 +10,13 @@
|
||||
</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>
|
||||
@@ -17,56 +25,184 @@
|
||||
<button type="submit" class="cyberpunk purple">Submit_</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="cyberpunk black both hidden" id="jobs">
|
||||
<h1 class="cyberpunk">Orange's job board</h1>
|
||||
<p class="cyberpunk">
|
||||
Welcome, Choomba, to Orange's job board!
|
||||
You must be <a href="#">1337</a> to have been invited here.
|
||||
Unless you found this board without being invited?
|
||||
If that's the case, <i>choomba</i>, you deserve to be here even more.
|
||||
Take a look, share with friends, resist the <a href="#">corpos</a>!
|
||||
</p>
|
||||
<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="#" onclick="show('mission1')">$$ Crew needed to recover sensitive payload. 1/4 upfront</a></li>
|
||||
<li><a href="#/mission1">$$ Crew needed for urgent retrieval op - discretion paid handsomely</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="cyberpunk black both hidden" id="mission1">
|
||||
<h1 class="cyberpunk">$$ Crew needed to recover sensitive payload. 1/4 upfront</h1>
|
||||
|
||||
<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="" />
|
||||
Desperate need for help recovering sensitive assets from dangerous doll.
|
||||
Will pay 10_000$ for safe delivery with no questions asked.
|
||||
Urgent help needed.
|
||||
Find me at the NDA Lounge for more information.
|
||||
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.
|
||||
|
||||
This doll has some top notch security; a full crew, willing to go that extra mile, need apply.
|
||||
<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 elements = {
|
||||
'jobs': document.getElementById('jobs'),
|
||||
'mission1': document.getElementById('mission1'),
|
||||
'passwordPrompt': document.getElementById('passwordPrompt'),
|
||||
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'),
|
||||
};
|
||||
const passwordForm = document.getElementById("passwordForm");
|
||||
function show(target) {
|
||||
for (let el in elements) {
|
||||
elements[el].classList.add('hidden');
|
||||
}
|
||||
elements[target].classList.remove('hidden');
|
||||
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];
|
||||
}
|
||||
|
||||
passwordForm.addEventListener("submit", function (e) {
|
||||
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(passwordForm));
|
||||
if(formData['passwordInput'] == 'PLANET!!!') {
|
||||
var formData = Object.fromEntries(new FormData(el.passwordForm));
|
||||
if (formData['passwordInput'] == 'PLANET!!!') {
|
||||
show('jobs');
|
||||
}
|
||||
document.getElementById('passwordInput').setAttribute('value', '');
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user