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 nnCoRuler = "ColoradoCrusade";
const electionDate = "2025-6-30"; 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) { function calculateCountdown(endingDate) {
let current = new Date(); let current = new Date();
let end = new Date(endingDate); let end = new Date(endingDate);
@ -10,6 +26,28 @@ function calculateCountdown(endingDate) {
return daysDifference; 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() { function onPageLoad() {
console.log(nnRuler); console.log(nnRuler);
document.getElementById("ruler").innerText = nnRuler; document.getElementById("ruler").innerText = nnRuler;
@ -27,4 +65,11 @@ function onPageLoad() {
} else { } else {
document.getElementById("electionCountdown").innerText = "The next election is in " + Math.ceil(calculateCountdown(electionDate)) + " days!"; 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();
}
} }

68
assets/stylesheets/index.css
View File

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

25
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>New Nameful Election Info</title> <title>New Nameful</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Tellow approves!!!!!" /> <meta name="description" content="Tellow approves!!!!!" />
<meta name="keywords" content="lkarch, website, new nameful, election" /> <meta name="keywords" content="lkarch, website, new nameful, election" />
@ -11,6 +11,18 @@
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" />
</head> </head>
<body onload="onPageLoad()"> <body onload="onPageLoad()">
<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="section" id="placeholder1">
<p>placeholder</p>
</div>
<div class="section" id="election">
<div id="cardContainer">
<div class="card"> <div class="card">
<p>Ruler<hr></p> <p>Ruler<hr></p>
<p id="ruler">Steve</p> <p id="ruler">Steve</p>
@ -24,8 +36,19 @@
<div id="splash" class="pop">Totally&nbsp;not&nbsp;rigged</div> <div id="splash" class="pop">Totally&nbsp;not&nbsp;rigged</div>
</div> </div>
</div> </div>
</div>
<br> <br>
<p id="electionCountdown">Election Countdown</p> <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>
<script src="assets/javascript/index.js"></script> <script src="assets/javascript/index.js"></script>
</body> </body>
</html> </html>