73 lines
3.0 KiB
HTML
73 lines
3.0 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 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>
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<section class="cyberpunk black both hidden" id="mission1">
|
||
|
|
<h1 class="cyberpunk">$$ Crew needed to recover sensitive payload. 1/4 upfront</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.
|
||
|
|
|
||
|
|
This doll has some top notch security; a full crew, willing to go that extra mile, need apply.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const elements = {
|
||
|
|
'jobs': document.getElementById('jobs'),
|
||
|
|
'mission1': document.getElementById('mission1'),
|
||
|
|
'passwordPrompt': document.getElementById('passwordPrompt'),
|
||
|
|
};
|
||
|
|
const passwordForm = document.getElementById("passwordForm");
|
||
|
|
function show(target) {
|
||
|
|
for (let el in elements) {
|
||
|
|
elements[el].classList.add('hidden');
|
||
|
|
}
|
||
|
|
elements[target].classList.remove('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
passwordForm.addEventListener("submit", function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
var formData = Object.fromEntries(new FormData(passwordForm));
|
||
|
|
if(formData['passwordInput'] == 'PLANET!!!') {
|
||
|
|
show('jobs');
|
||
|
|
}
|
||
|
|
document.getElementById('passwordInput').setAttribute('value', '');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|