charles/orangepunk-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: assets, some fixes, and build system

Browse Source
This commit is contained in:
Charles
2025-10-12 23:38:44 -07:00
parent 4ab17e5872
commit 167fc33f8c
9 changed files with 244 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+4 -1
View File
@@ -1,3 +1,6 @@
FROM nginx 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
Makefile
+14
View File
@@ -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
assets/character-sheet.pdf
BIN
View File
Binary file not shown.
assets/rule-book-roles.pdf
BIN
View File
Binary file not shown.
assets/rule-book.pdf
BIN
View File
Binary file not shown.
index.html
+165 -29
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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="theme/cyberpunk-2077.css" />
@@ -9,6 +10,13 @@
</head> </head>
<body> <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"> <section class="cyberpunk black both" id="passwordPrompt">
<img class="cyberpunk" src="img/qrcode.png" alt="" /> <img class="cyberpunk" src="img/qrcode.png" alt="" />
<h3>Prove yourself. Hack the ...</h3> <h3>Prove yourself. Hack the ...</h3>
@@ -17,56 +25,184 @@
<button type="submit" class="cyberpunk purple">Submit_</button> <button type="submit" class="cyberpunk purple">Submit_</button>
</form> </form>
</section> </section>
<section class="cyberpunk black both hidden" id="jobs"> <div class="cyberpunk hack hidden" id="hackThePlanet">
<h1 class="cyberpunk">Orange's job board</h1> HACK THE PLANET!
<p class="cyberpunk"> </div>
Welcome, Choomba, to Orange's job board! <section class="cyberpunk black both" id="jobs">
You must be <a href="#">1337</a> to have been invited here. <h1 class="cyberpunk">Compilation of jobs from gonks who will asphyxiated on their own vomit</h1>
Unless you found this board without being invited? <div class="cyberpunk">
If that's the case, <i>choomba</i>, you deserve to be here even more. <p>
Take a look, share with friends, resist the <a href="#">corpos</a>! 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> </p>
</div>
<h2 class="cyberpunk">Jobs</h2> <h2 class="cyberpunk">Jobs</h2>
<ul class="cyberpunk"> <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> </ul>
</section> </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"> <p class="cyberpunk job-listing">
<img class="cyberpunk portrait" src="img/twitchy.png" alt="" /> <img class="cyberpunk portrait" src="img/twitchy.png" alt="" />
Desperate need for help recovering sensitive assets from dangerous doll. I'm seeking a team of skilled professionals for an urgent retrieval operation. A sensitive "business"
Will pay 10_000$ for safe delivery with no questions asked. arrangement has soured, and a former associate is now in possession of digital keycodes that are linked
Urgent help needed. to a
Find me at the NDA Lounge for more information. 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> </p>
</section> </section>
<script> <script>
const elements = { const navElements = {
'jobs': document.getElementById('jobs'), '/': document.getElementById('passwordPrompt'),
'mission1': document.getElementById('mission1'), '/jobs': document.getElementById('jobs'),
'passwordPrompt': document.getElementById('passwordPrompt'), '/mission1': document.getElementById('mission1'),
'/passwordPrompt': document.getElementById('passwordPrompt'),
'/tech': document.getElementById('tech'),
'navBar': document.getElementById('navBar'),
}; };
const passwordForm = document.getElementById("passwordForm"); let el = {
function show(target) { 'passwordForm': document.getElementById("passwordForm"),
for (let el in elements) { 'passwordInput': document.getElementById('passwordInput'),
elements[el].classList.add('hidden'); 'hackThePlanet': document.getElementById('hackThePlanet')
} };
elements[target].classList.remove('hidden');
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(); e.preventDefault();
var formData = Object.fromEntries(new FormData(passwordForm)); var formData = Object.fromEntries(new FormData(el.passwordForm));
if (formData['passwordInput'] == 'PLANET!!!') { if (formData['passwordInput'] == 'PLANET!!!') {
show('jobs'); 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> </script>
</body> </body>
kubernetes.yaml
+1 -1
View File
@@ -15,7 +15,7 @@ spec:
spec: spec:
containers: containers:
- name: orangepunk-container - 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: ports:
- containerPort: 80 - containerPort: 80
--- ---
kubernetes.yaml.tmpl
+34
View File
@@ -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
style.css
+24
View File
@@ -12,3 +12,27 @@
.job-listing { .job-listing {
min-height: 250px; 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;
}