lkarch/newnameful.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added primitive navbar

Browse Source
This commit is contained in:
lkarch 2025-05-20 20:18:46 -04:00
parent 5cb1ba0e68
commit 4fc221da00
3 changed files with 141 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/javascript/index.js
View File

@ -2,6 +2,22 @@ const nnRuler = "cool_tellow";
const nnCoRuler = "ColoradoCrusade";
const electionDate = "2025-6-30";
function getCookie(cookieName) {
var name = cookieName + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var splitCookies = decodedCookie.split(';');
for(var i = 0; i < splitCookies.length; i++) {
let cookie = splitCookies[i];
while (cookie.charAt(0) == ' ') {
cookie = cookie.substring(1);
}
if (cookie.indexOf(name) == 0) {
return cookie.substring(name.length, cookie.length);
}
}
return "";
}
function calculateCountdown(endingDate) {
let current = new Date();
let end = new Date(endingDate);
@ -10,6 +26,28 @@ function calculateCountdown(endingDate) {
return daysDifference;
}
function switchSection(sectionName, button) {
var i, section, navButton;
section = document.getElementsByClassName("section");
for (i = 0; i < section.length; i++) {
section[i].style.display = "none";
}
navButton = document.getElementsByClassName("navButton");
for (i = 0; i < navButton.length; i++) {
navButton[i].style.backgroundColor = "black";
navButton[i].style.color = "white";
}
document.title = button.innerHTML;
document.cookie = "section=" + sectionName;
document.getElementById(sectionName).style.display = "block";
button.style.backgroundColor = "white";
button.style.color = "black";
}
function onPageLoad() {
console.log(nnRuler);
document.getElementById("ruler").innerText = nnRuler;
@ -27,4 +65,11 @@ function onPageLoad() {
} else {
document.getElementById("electionCountdown").innerText = "The next election is in " + Math.ceil(calculateCountdown(electionDate)) + " days!";
}
console.log(document.cookie);
if (getCookie("section") === "") {
document.getElementById("electionButton").click();
} else {
document.getElementById(getCookie("section") + "Button").click();
}
}

74
assets/stylesheets/index.css
View File

@ -1,21 +1,48 @@
@media(max-width:1400px) {
.navButton {
}
}
@font-face {
font-family: 'minecraft';
src: url('/assets/fonts/MinecraftRegular.otf') format('opentype');
}
* {box-sizing: border-box}
@keyframes pop {
from {
transform:scale(0.95)
}
50% {
transform:scale(1)
}
to {
transform:scale(0.95)
}
}
html, body {
* {
box-sizing: border-box;
font-family: 'minecraft';
}
html {
padding: 0;
margin: 0;
}
body {
margin: 0;
height: 100%;
font-family: 'minecraft';
background-color: #1a1a1a;
color: #eee;
padding: 10px;
text-align: center;
overflow-x: hidden;
}
.card {
margin: auto;
border-left: 6px solid #eee;
@ -36,6 +63,10 @@ html, body {
margin: auto;
}
#cardContainer {
padding-top: 20px;
}
#splash {
color: #FFFF00;
font-size: 1.3em;
@ -54,14 +85,29 @@ html, body {
animation: pop 0.58s infinite;
}
@keyframes pop {
from {
transform:scale(0.95)
}
50% {
transform:scale(1)
}
to {
transform:scale(0.95)
}
.section {
display: none;
padding: 75px 20px;
}
#navbar {
position: fixed;
width: 100%;
}
.navButton {
float: left;
padding: 10px 20px;
border: none;
border-top: 3px solid black;
cursor: pointer;
font-size: 2.4vw;
width: 20%;
background-color: black;
color: white;
}
.navButton:hover {
background-color: white !important;
color: black !important;
}

49
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>New Nameful Election Info</title>
<title>New Nameful</title>
<meta charset="UTF-8" />
<meta name="description" content="Tellow approves!!!!!" />
<meta name="keywords" content="lkarch, website, new nameful, election" />
@ -11,21 +11,44 @@
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" />
</head>
<body onload="onPageLoad()">
<div class="card">
<p>Ruler<hr></p>
<p id="ruler">Steve</p>
<img id="rulerImage" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
<div id="navbar">
<button class="navButton" id="placeholder1Button" onclick="switchSection('placeholder1', this)">Placeholder1</button>
<button class="navButton" id="electionButton" onclick="switchSection('election', this)">Election</button>
<button class="navButton" id="placeholder2Button" onclick="switchSection('placeholder2', this)">Placeholder2</button>
<button class="navButton" id="placeholder3Button" onclick="switchSection('placeholder3', this)">Placeholder3</button>
<button class="navButton" id="placeholder4Button" onclick="switchSection('placeholder4', this)">Placeholder4</button>
</div>
<div class="card">
<p>Co-Ruler<hr></p>
<p id="coRuler">Steve</p>
<img id="coRulerImage" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
<div class="tilt">
<div id="splash" class="pop">Totally&nbsp;not&nbsp;rigged</div>
<div class="section" id="placeholder1">
<p>placeholder</p>
</div>
<div class="section" id="election">
<div id="cardContainer">
<div class="card">
<p>Ruler<hr></p>
<p id="ruler">Steve</p>
<img id="rulerImage" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
</div>
<div class="card">
<p>Co-Ruler<hr></p>
<p id="coRuler">Steve</p>
<img id="coRulerImage" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
<div class="tilt">
<div id="splash" class="pop">Totally&nbsp;not&nbsp;rigged</div>
</div>
</div>
</div>
<br>
<p id="electionCountdown">Election Countdown</p>
</div>
<div class="section" id="placeholder2">
<p>placeholder</p>
</div>
<div class="section" id="placeholder3">
<p>placeholder</p>
</div>
<div class="section" id="placeholder4">
<p>placeholder</p>
</div>
<br>
<p id="electionCountdown">Election Countdown</p>
<script src="assets/javascript/index.js"></script>
</body>
</html>