Added Username support for navbar, fixed panel not working

This commit is contained in:
Thomas G 2022-06-20 14:08:29 +10:00
parent 2d176e2928
commit 41e148633d
13 changed files with 97 additions and 31 deletions

View File

@ -29,9 +29,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
@ -46,6 +49,7 @@
<div class="content">
<h1>404</h1>
<p>The page you have tried to visit does not exist, or it is missing!</p>
<p>You may have mistyped a URL.</p>
<img alt="Error Image" src="error.png" width="503" height="579">
</div>
<footer>

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">

13
home.js
View File

@ -102,4 +102,17 @@ window.onload = function() {
alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
alert.className = "";
}
var username = localStorage.getItem("username");
var navbarsignedincontainer = document.getElementById("navbarsignedincontainer");
var navbarusername = document.getElementById("navbarusername");
var navbarlogincontainer = document.getElementById("navbarlogincontainer");
if (username == null) {
username = ""
navbarsignedincontainer.className = "invisible"
navbarlogincontainer.className = ""
} else {
navbarsignedincontainer.className = ""
navbarlogincontainer.className = "invisible"
}
navbarusername.innerHTML = username
};

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">

View File

@ -107,8 +107,16 @@ window.onload = function() {
}
var usernamecontainer = document.getElementById("UsernameContainer");
var username = localStorage.getItem("username");
var navbarsignedincontainer = document.getElementById("navbarsignedincontainer");
var navbarusername = document.getElementById("navbarusername");
var navbarlogincontainer = document.getElementById("navbarlogincontainer");
if (username == null) {
username = ""
navbarsignedincontainer.className = "invisible"
navbarlogincontainer.className = ""
} else {
navbarsignedincontainer.className = ""
navbarlogincontainer.className = "invisible"
}
usernamecontainer.innerHTML = "Your username is: " + username
document.getElementById('UsernameButton').onclick = function() {
@ -116,5 +124,7 @@ window.onload = function() {
var usernamecontainer = document.getElementById("UsernameContainer");
localStorage.setItem("username",usernameset);
usernamecontainer.innerHTML = "Your username is: " + usernameset
navbarusername.innerHTML = username
};
navbarusername.innerHTML = username
};

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">

View File

@ -32,7 +32,7 @@
display: table-cell;
vertical-align: middle;
}
.navbarlogincontainer {
#navbarlogincontainer, #navbarsignedincontainer {
position: relative;
padding-right: 10px;
margin-right: 3%;
@ -114,7 +114,7 @@ footer {
p,h1 {
margin: 0px;
}
a {
a, #navbarusername {
color: white;
text-decoration: none;
font-weight: bolder;

13
main.js
View File

@ -93,4 +93,17 @@ window.onload = function() {
alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
alert.className = "";
}
var username = localStorage.getItem("username");
var navbarsignedincontainer = document.getElementById("navbarsignedincontainer");
var navbarusername = document.getElementById("navbarusername");
var navbarlogincontainer = document.getElementById("navbarlogincontainer");
if (username == null) {
username = ""
navbarsignedincontainer.className = "invisible"
navbarlogincontainer.className = ""
} else {
navbarsignedincontainer.className = ""
navbarlogincontainer.className = "invisible"
}
navbarusername.innerHTML = username
};

View File

@ -10,44 +10,49 @@
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<link rel="apple-touch-icon" href="../MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="../MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="../MORBLOX.ico">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body>
<div class="navbar">
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<a id="logo_full" href="../index.html"><img alt="MORBLOX Logo" src="../MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="../index.html"><img alt="MORBLOX Logo" src="../MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="../home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="../games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="../catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="../build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="../upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="../forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
<div id="navbarlogincontainer" class="">
<p><a href="../signup.html">Sign Up</a> or <a href="../login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="profile.html">Profile</a>
<a class="smallnavbarbutton" href="avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
<a class="smallnavbarbutton" href="../profile.html">Profile</a>
<a class="smallnavbarbutton" href="../avatar.html">Avatar</a>
<a class="smallnavbarbutton" href="../Settings.html">Settings</a>
</div>
</div>
<div class="invisible" id="alert">
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</div>
<div class="content">
<p>404 unauthorized</p>
<h1>401 Unauthorized</h1>
<p>You do not have access to this page.</p>
<img alt="Error Image" src="../error.png" width="503" height="579">
</div>
<footer>
<a href="privacy.html">Privacy Policy</a>
<a href="tos.html">Terms of Service</a>
<a href="../privacy.html">Privacy Policy</a>
<a href="../tos.html">Terms of Service</a>
</footer>
</body>
</html>

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">

View File

@ -28,9 +28,12 @@
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<div id="navbarlogincontainer" class="">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
</div>
<div id="navbarsignedincontainer" class="invisible">
<p id="navbarusername">nil</p>
</div>
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">