Added more stuff to home, added debug settings to index to test usernames.

This commit is contained in:
Thomas G 2022-06-20 13:44:28 +10:00
parent e9ea87568c
commit 4b81bc8d1d
5 changed files with 227 additions and 8 deletions

View File

@ -14,7 +14,7 @@
<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>
<script type="text/javascript" src="home.js"></script>
</head>
<body>
<div class="navbar">
@ -43,9 +43,14 @@
<p class="alerttext" id="alerttext">ALERT TEXT</p>
</div>
<div class="content">
<h1>Hello, OnlyTwentyCharacters!</h1>
<div class="leftcolumn">
<h1 id="usernameframe">Hello, !</h1>
<h2>Friends</h2>
<div class="friendslist">
<p>You have no friends! Why not make some?</p>
</div>
<h2>Recently Played</h2>
<div class="gamelist">
<p>You haven't played any games yet.</p>
</div>
</div>
<footer>

105
home.js Normal file
View File

@ -0,0 +1,105 @@
window.addEventListener('resize', function() {
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var smallbtn = document.getElementById("smallbtn1")
var smallbtn0 = document.getElementById("smallbtn0")
var smallbtn2 = document.getElementById("smallbtn2")
var smallbtn3 = document.getElementById("smallbtn3")
var smallbtn1 = document.getElementById("smallbtn4")
var smallbtn5 = document.getElementById("smallbtn5")
var viewport_width = window.innerWidth;
if (viewport_width < 900) {
logo_full.className = "invisible";
logo_small.className = "";
} else {
logo_small.className = "invisible";
logo_full.className = "";
}
if (viewport_width < 600) {
smallbtn.className = "invisible";
smallbtn2.className = "invisible";
smallbtn3.className = "invisible";
} else {
smallbtn.className = "navbarbutton";
smallbtn2.className = "navbarbutton";
smallbtn3.className = "navbarbutton";
}
if (viewport_width < 425) {
smallbtn0.className = "invisible";
smallbtn1.className = "invisible";
} else {
smallbtn0.className = "navbarbutton";
smallbtn1.className = "navbarbutton";
}
if (viewport_width < 280) {
smallbtn5.className = "invisible";
} else {
smallbtn5.className = "navbarbutton";
}
});
window.onload = function() {
var username = localStorage.getItem("username");
var usernamecontainer = document.getElementById("usernameframe")
if (username == null) {
usernamecontainer.innerHTML = `Not signed in.`
} else if (username == "") {
usernamecontainer.innerHTML = `Not signed in.`
} else {
usernamecontainer.innerHTML = `Hello, ${username}!`
}
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var smallbtn = document.getElementById("smallbtn1")
var smallbtn0 = document.getElementById("smallbtn0")
var smallbtn2 = document.getElementById("smallbtn2")
var smallbtn3 = document.getElementById("smallbtn3")
var smallbtn1 = document.getElementById("smallbtn4")
var smallbtn5 = document.getElementById("smallbtn5")
var viewport_width = window.innerWidth;
if (viewport_width < 900) {
logo_full.className = "invisible";
logo_small.className = "";
} else {
logo_small.className = "invisible";
logo_full.className = "";
}
if (viewport_width < 600) {
smallbtn.className = "invisible";
smallbtn2.className = "invisible";
smallbtn3.className = "invisible";
} else {
smallbtn.className = "navbarbutton";
smallbtn2.className = "navbarbutton";
smallbtn3.className = "navbarbutton";
}
if (viewport_width < 425) {
smallbtn0.className = "invisible";
smallbtn1.className = "invisible";
} else {
smallbtn0.className = "navbarbutton";
smallbtn1.className = "navbarbutton";
}
if (viewport_width < 280) {
smallbtn5.className = "invisible";
} else {
smallbtn5.className = "navbarbutton";
}
var alert = document.getElementById("alert")
var alerttext = document.getElementById("alerttext")
if (window.location.hostname == "") {
alerttext.innerHTML = "You are using this locally.";
alert.className = "";
} else if (window.location.hostname == "thomasluigi07.github.io") {
alerttext.innerHTML = "You are using this on the github pages site.";
alert.className = "";
} else if (window.location.hostname == "MORBLOX.com") {
alerttext.innerHTML = "You are using MORBLOX.com";
alert.className = "";
} else if (window.location.hostname == "morblox.us") {
alerttext.innerHTML = "You are using morblox.us";
alert.className = "";
} else {
alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
alert.className = "";
}
};

View File

@ -14,8 +14,7 @@
<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>
<script src="index.html"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="navbar">
@ -49,6 +48,13 @@
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>
<p id="morblox" class=""><a href="https://morblox.us">Click Here</a> to go to the published site.</p>
<p id="discord"><a href="https://discord.gg/nudzQ7hkWY">Click Here</a> to join our discord!</p>
<h2>DEBUG Settings</h2>
<form>
<p>Set Username:</p>
<input id="UsernameSet" type="text" name="username" placeholder="">
<button id="UsernameButton">Save...</button>
<p id="UsernameContainer">Your username is:</p>
</form>
</div>
<footer>
<a href="privacy.html">Privacy Policy</a>

105
index.js
View File

@ -1,3 +1,42 @@
window.addEventListener('resize', function() {
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var smallbtn = document.getElementById("smallbtn1")
var smallbtn0 = document.getElementById("smallbtn0")
var smallbtn2 = document.getElementById("smallbtn2")
var smallbtn3 = document.getElementById("smallbtn3")
var smallbtn1 = document.getElementById("smallbtn4")
var smallbtn5 = document.getElementById("smallbtn5")
var viewport_width = window.innerWidth;
if (viewport_width < 900) {
logo_full.className = "invisible";
logo_small.className = "";
} else {
logo_small.className = "invisible";
logo_full.className = "";
}
if (viewport_width < 600) {
smallbtn.className = "invisible";
smallbtn2.className = "invisible";
smallbtn3.className = "invisible";
} else {
smallbtn.className = "navbarbutton";
smallbtn2.className = "navbarbutton";
smallbtn3.className = "navbarbutton";
}
if (viewport_width < 425) {
smallbtn0.className = "invisible";
smallbtn1.className = "invisible";
} else {
smallbtn0.className = "navbarbutton";
smallbtn1.className = "navbarbutton";
}
if (viewport_width < 280) {
smallbtn5.className = "invisible";
} else {
smallbtn5.className = "navbarbutton";
}
});
window.onload = function() {
var morblox = document.getElementById("morblox")
if (window.location.hostname == "") {
@ -11,4 +50,68 @@ window.onload = function() {
} else {
morblox.className = "";
}
};
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var smallbtn = document.getElementById("smallbtn1")
var smallbtn0 = document.getElementById("smallbtn0")
var smallbtn2 = document.getElementById("smallbtn2")
var smallbtn3 = document.getElementById("smallbtn3")
var smallbtn1 = document.getElementById("smallbtn4")
var smallbtn5 = document.getElementById("smallbtn5")
var viewport_width = window.innerWidth;
if (viewport_width < 900) {
logo_full.className = "invisible";
logo_small.className = "";
} else {
logo_small.className = "invisible";
logo_full.className = "";
}
if (viewport_width < 600) {
smallbtn.className = "invisible";
smallbtn2.className = "invisible";
smallbtn3.className = "invisible";
} else {
smallbtn.className = "navbarbutton";
smallbtn2.className = "navbarbutton";
smallbtn3.className = "navbarbutton";
}
if (viewport_width < 425) {
smallbtn0.className = "invisible";
smallbtn1.className = "invisible";
} else {
smallbtn0.className = "navbarbutton";
smallbtn1.className = "navbarbutton";
}
if (viewport_width < 280) {
smallbtn5.className = "invisible";
} else {
smallbtn5.className = "navbarbutton";
}
var alert = document.getElementById("alert")
var alerttext = document.getElementById("alerttext")
if (window.location.hostname == "") {
alerttext.innerHTML = "You are using this locally.";
alert.className = "";
} else if (window.location.hostname == "thomasluigi07.github.io") {
alerttext.innerHTML = "You are using this on the github pages site.";
alert.className = "";
} else if (window.location.hostname == "MORBLOX.com") {
alerttext.innerHTML = "You are using MORBLOX.com";
alert.className = "";
} else if (window.location.hostname == "morblox.us") {
alerttext.innerHTML = "You are using morblox.us";
alert.className = "";
} else {
alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
alert.className = "";
}
var usernamecontainer = document.getElementById("UsernameContainer");
var username = localStorage.getItem("username");
usernamecontainer.innerHTML = "Your username is: " + username
document.getElementById('UsernameButton').onclick = function() {
var usernameset = document.getElementById("UsernameSet").value;
var usernamecontainer = document.getElementById("UsernameContainer");
localStorage.setItem("username",usernameset);
usernamecontainer.innerHTML = "Your username is: " + usernameset
};
};

View File

@ -97,7 +97,7 @@ body {
padding-bottom: 5px;
padding-top: 5px;
}
.content p a {
.content p a, .content a {
color: black
}
footer {