add: assets, some fixes, and build system
This commit is contained in:
Charles
+4
-1
@@ -1,3 +1,6 @@
|
||||
FROM nginx
|
||||
|
||||
COPY . /usr/share/nginx/html
|
||||
COPY index.html style.css /usr/share/nginx/html/
|
||||
COPY img /usr/share/nginx/html/img
|
||||
COPY theme /usr/share/nginx/html/theme
|
||||
COPY assets /usr/share/nginx/html/assets
|
||||
@@ -0,0 +1,14 @@
|
||||
MAJOR_VERSION = 0
|
||||
MINOR_VERSION = 0
|
||||
PATH_VERSION = 8
|
||||
|
||||
TAG = $(MAJOR_VERSION).$(MINOR_VERSION).$(PATH_VERSION)
|
||||
|
||||
build:
|
||||
docker build . -t orangepunk-html:$(TAG)
|
||||
docker tag orangepunk-html:$(TAG) us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:$(TAG)
|
||||
|
||||
deploy: build
|
||||
docker push us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:$(TAG)
|
||||
cat kubernetes.yaml.tmpl | sed 's/TAG/$(TAG)/' > kubernetes.yaml
|
||||
kubectl apply -f kubernetes.yaml
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
+165
-29
@@ -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>!
|
||||
<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));
|
||||
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>
|
||||
|
||||
|
||||
+1
-1
@@ -15,7 +15,7 @@ spec:
|
||||
spec:
|
||||
containers:
|
||||
- name: orangepunk-container
|
||||
image: us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:0.0.3
|
||||
image: us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:0.0.8
|
||||
ports:
|
||||
- containerPort: 80
|
||||
---
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
apiVersion: apps/v1
|
||||
kind: Deployment
|
||||
metadata:
|
||||
name: orangepunk-deployment
|
||||
spec:
|
||||
replicas: 1
|
||||
selector:
|
||||
matchLabels:
|
||||
app: orangepunk
|
||||
template:
|
||||
metadata:
|
||||
labels:
|
||||
app: orangepunk
|
||||
app.kubernetes.io/name: orangepunk
|
||||
spec:
|
||||
containers:
|
||||
- name: orangepunk-container
|
||||
image: us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:TAG
|
||||
ports:
|
||||
- containerPort: 80
|
||||
---
|
||||
apiVersion: v1
|
||||
kind: Service
|
||||
metadata:
|
||||
name: orangepunk-service
|
||||
spec:
|
||||
selector:
|
||||
app.kubernetes.io/name: orangepunk
|
||||
ports:
|
||||
- protocol: TCP
|
||||
port: 80
|
||||
targetPort: 80
|
||||
nodePort: 30014
|
||||
type: NodePort
|
||||
@@ -12,3 +12,27 @@
|
||||
.job-listing {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
#navBar {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#navBar a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.hack {
|
||||
position: absolute;
|
||||
top:45%;
|
||||
left: 35%;
|
||||
background-color: #ff9800;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
font-size: 64px;
|
||||
border: medium solid green;
|
||||
|
||||
padding: 20px 20px 20px 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user