Improved Website Design and Home Page
This commit is contained in:
BloxerHD
parent
882d005e8c
commit
a23bc61efe
16 changed files with 360 additions and 36 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.vscode
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Account | SPFN</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<script type="text/javascript" src="/js/lang.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
<ul class="nav-links">
|
||||
<a href="/"><button class="header-button">Home</button></a>
|
||||
<a href="/guides"><button class="header-button">Guides</button></a>
|
||||
<a href="/account"><button class="header-button">Account</button></a>
|
||||
<a href="/account"><button class="header-button active">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -30,7 +32,7 @@
|
|||
<form id="login" style="display: none;">
|
||||
<h3 class="center">Please log in before viewing account information</h3>
|
||||
<div class="form-group">
|
||||
<label for="username">SFID:</label>
|
||||
<label for="username">SFID / Username:</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -42,12 +44,13 @@
|
|||
</form>
|
||||
|
||||
<div id="user-info" class="info" style="display: none;">
|
||||
<div id="user-display" class="info-container" style="width: 180px">
|
||||
<div id="user-display" class="info-container" style="width: 180px; align-items: center;">
|
||||
<img src="/res/img/mii-placeholder.png" style="width: 100%">
|
||||
<h3 id="display-name" style="margin: 2px;">Display Name</h3>
|
||||
<p id="sfid" style="margin: 2px;">SFID: Username</p>
|
||||
<button style="font-size: 24px; width: 180px;" onclick="logOut()">Log Out</button>
|
||||
<button style="font-size: 24px; width: 160px;" onclick="logOut()">Log Out</button>
|
||||
</div>
|
||||
<div id="user-details" class="info-container", style="flex: 1;">
|
||||
<div id="user-details" class="info-container" style="flex: 1;">
|
||||
<p class="info-text" id="email"><strong>Email: </strong>name@domain.com</p>
|
||||
<p class="info-text" id="dob"><strong>Date of Birth: </strong>dd/mm/yyyy</p>
|
||||
<hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
|
||||
|
|
@ -58,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="accounts.js"></script>
|
||||
<script type="text/javascript" src="/js/accounts.js"></script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
194
css/style.css
194
css/style.css
|
|
@ -1,31 +1,83 @@
|
|||
body {
|
||||
background-color: #610707;
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: 2px solid #a00b0b;
|
||||
border-radius: 10px;
|
||||
background-color: #6d0606;
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 15px;
|
||||
margin: 8px 8px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem;
|
||||
padding: 1rem 2rem;
|
||||
background-color: #b32d28;
|
||||
background-color: #940b0b;
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1rem 2rem;
|
||||
background-color: #940b0b;
|
||||
border-radius: 15px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00afff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 64px;
|
||||
-webkit-text-stroke: 1px black;
|
||||
-webkit-text-stroke: 2px black;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #5f0808;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
background-color: #9c100c;
|
||||
color: rgb(255, 255, 255);
|
||||
border-color: #b4b4b4;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-style: groove;
|
||||
border-radius: 10px;
|
||||
height: 64px;
|
||||
margin: 0px;
|
||||
font-size: 32px;
|
||||
|
|
@ -38,37 +90,46 @@ h1 {
|
|||
form {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:1rem;
|
||||
border: 2px solid black;
|
||||
border: 4px solid #a00b0b;
|
||||
border-radius: 15px;
|
||||
background: #6d0606;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 70%;
|
||||
min-width: 40%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background-color: black;
|
||||
background-color: #a00b0b;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
background-color: #dfdfdf;
|
||||
background-color: #6d0606;
|
||||
text-align: center;
|
||||
margin: 2px 2px;
|
||||
margin: 2px;
|
||||
border-radius: 15px;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
text-align: left;
|
||||
margin: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.guide-buttons {
|
||||
|
|
@ -82,34 +143,35 @@ form {
|
|||
font-size: 20px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
border-style: groove;
|
||||
border: 2px solid #a00b0b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #afafaf;
|
||||
background-color: #6d0606;
|
||||
color: white;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.guide-content {
|
||||
padding: 0.5rem;
|
||||
flex: 1;
|
||||
border: 2px solid black;
|
||||
border: 4px solid #a00b0b;
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.guide-container {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
background-color: #dfdfdf;
|
||||
background-color: #770505;
|
||||
border-radius: 15px;
|
||||
padding: 8px
|
||||
}
|
||||
|
||||
.filepath {
|
||||
background-color: #bfbfbf;
|
||||
color: black;
|
||||
background-color: #610707;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
|
|
@ -118,5 +180,91 @@ form {
|
|||
margin: 0 auto;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border: 2px solid white;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #770505;
|
||||
border-radius: 25px;
|
||||
border: 4px solid #a00b0b;
|
||||
}
|
||||
|
||||
.title-main {
|
||||
font-size: 84px;
|
||||
margin: 0 auto;
|
||||
-webkit-text-stroke: 2px black;
|
||||
}
|
||||
|
||||
.title-desc {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #770505;
|
||||
border-radius: 25px;
|
||||
margin: 2rem 0;
|
||||
padding: 24px;
|
||||
border: 4px solid #a00b0b;
|
||||
}
|
||||
|
||||
.team-members {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
max-width: 2000px;
|
||||
margin: 0 auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
background-color: #a00b0b;
|
||||
margin: 8px 8px;
|
||||
padding: 8px 8px;
|
||||
border-radius: 15px;
|
||||
max-width: 600px;
|
||||
height: 10rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
flex: 0 1 30%;
|
||||
}
|
||||
|
||||
.team-link {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.splatfest-active {
|
||||
background-color: #00af00;
|
||||
border: 2px solid #00ff00;
|
||||
border-radius: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.splatfest-notfound {
|
||||
background-color: #6d0606;
|
||||
border: 2px solid #a00b0b;
|
||||
border-radius: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #a00b0b;
|
||||
border-color: #6d0606;
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Guides | SPFN</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<script type="text/javascript" src="/js/lang.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -12,7 +14,7 @@
|
|||
<nav>
|
||||
<ul class="nav-links">
|
||||
<a href="/"><button class="header-button">Home</button></a>
|
||||
<a href="/guides"><button class="header-button">Guides</button></a>
|
||||
<a href="/guides"><button class="header-button active">Guides</button></a>
|
||||
<a href="/account"><button class="header-button">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -129,7 +131,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="guides.js"></script>
|
||||
<script type="text/javascript" src="/js/guides.js"></script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
92
index.html
92
index.html
|
|
@ -1,7 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Home | SPFN</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<script type="text/javascript" src="/js/lang.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -10,14 +14,96 @@
|
|||
</div>
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<a href="/"><button class="header-button">Home</button></a>
|
||||
<a href="/"><button class="header-button active">Home</button></a>
|
||||
<a href="/guides"><button class="header-button">Guides</button></a>
|
||||
<a href="/account"><button class="header-button">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<p>Splatfestival Network - Restoring Splatfests to Splatoon on the Wii U</p>
|
||||
<div class="title">
|
||||
<h2 class="title-main">Splatfestival Network</h2>
|
||||
<p class="title-desc">Restoring Splatfests to Splatoon on the Wii U</p>
|
||||
<a href="https://github.com/Splatfestival-Network" target="_blank">Find us on Github</a>
|
||||
</div>
|
||||
<div class="home-container">
|
||||
<h2 style="margin: 4px;">Splatfest Information</h2>
|
||||
<p style="margin: 4px;">Check here for information about current or upcoming splatfests</p>
|
||||
<div id="splatfest-active" class="splatfest-active", style="display: none;">
|
||||
<h3 style="margin: 0px;">Splatfest is Active!</h3>
|
||||
</div>
|
||||
<div id="splatfest-notfound" class="splatfest-notfound">
|
||||
<h3 style="margin: 0px;">No splatfests currently active or upcoming</h3>
|
||||
</div>
|
||||
<div id="splatfest-info" style="text-align: center; display: none;">
|
||||
<h3 id="splatfest-title"><strong style="background-color: #e25604;">Team Kid</strong> vs. <strong style="background-color: #0438e2;">Team Squid</strong></h3>
|
||||
<p id="splatfest-starts"><strong>Starts: </strong>dd/mm/yyyy hh/mm</p>
|
||||
<p id="splatfest-ends"><strong>Ends: </strong>dd/mm/yyyy hh/mm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-container">
|
||||
<h2 style="margin: 0 auto;">Credits</h2>
|
||||
<p>Members or Groups that made Splatfestival Network what it is today</p>
|
||||
<div class="team-members">
|
||||
<div class="member-row">
|
||||
<div class="team-member">
|
||||
<img src="/res/img/pretendo.png">
|
||||
<div style="display: block;">
|
||||
<a href="https://github.com/PretendoNetwork/" target="_blank" class="team-link"><h2>Pretendo Network</h2></a>
|
||||
<p>Original Server Code and Reverse Engineering</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<img src="/res/img/tv.png">
|
||||
<div style="display: block;">
|
||||
<a href="https://github.com/DJMrTV" target="_blank" class="team-link"><h2>TV</h2></a>
|
||||
<p>Owner and Server Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<img src="/res/img/ceantix.png">
|
||||
<div style="display: block;">
|
||||
<a href="https://github.com/ceantixdev" target="_blank" class="team-link"><h2>Ceantix</h2></a>
|
||||
<p>Server Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-row">
|
||||
<div class="team-member">
|
||||
<img src="/res/img/bloxerhd.png">
|
||||
<div style="display: block;">
|
||||
<a href="https://github.com/BloxerHD018" target="_blank" class="team-link"><h2>BloxerHD</h2></a>
|
||||
<p>Website Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<img src="/res/img/kinnay.png">
|
||||
<div style="display: block;">
|
||||
<a href="https://github.com/kinnay" target="_blank" class="team-link"><h2>Kinnay</h2></a>
|
||||
<p>Documentation of PRUDP and RMC</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<img src="/res/img/purplepote.png">
|
||||
<div style="display: block;">
|
||||
<h2>PurplePote</h2>
|
||||
<p>Splatfestival Admin who Supported Development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-row">
|
||||
<div class="team-member">
|
||||
<img src="/res/img/splatfestival.png">
|
||||
<div style="display: block;">
|
||||
<a href="https://discord.gg/grMSxZf" target="_blank" class="team-link"><h2>Splatfestival Staff</h2></a>
|
||||
<p>Supported Development and Deployment of SPFN</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/js/home.js"></script>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a></p>
|
||||
|
|
|
|||
84
js/home.js
Normal file
84
js/home.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
async function requestFestInfo() {
|
||||
// DO NOT USE THIS - USE ROUTE https://boss-info.spfn.net/api/v2/fest-info
|
||||
const response = await fetch("https://account.spfn.net/api/v2/fest-info", { // ROUTE NOT IMPLEMENTED
|
||||
method: "GET"
|
||||
})
|
||||
|
||||
if (!response.ok) return;
|
||||
|
||||
/*
|
||||
{
|
||||
"active",
|
||||
"a-name",
|
||||
"a-hex",
|
||||
"b-name",
|
||||
"b-hex",
|
||||
"start",
|
||||
"end"
|
||||
}
|
||||
*/
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
window.onload = async function() {
|
||||
// Verify Fest Information
|
||||
let data = localStorage.getItem("fest-info");
|
||||
if (data) { // Fest data previously stored
|
||||
const end = new Date(data["end"] + "Z")
|
||||
const now = new Date()
|
||||
if (end < now) { // Fest is over - Remove and check for new fest
|
||||
localStorage.removeItem("fest-info");
|
||||
|
||||
data = await requestFestInfo();
|
||||
|
||||
if (data) {
|
||||
localStorage.setItem("fest-info", data);
|
||||
}
|
||||
} else { // Fest is either Upcoming or Active - Update active state
|
||||
const start = new Date(data["start"] + "Z");
|
||||
const active = start > now && end < now;
|
||||
if (data["active"] != active) {
|
||||
data["active"] = active;
|
||||
localStorage.setItem("fest-data", data);
|
||||
}
|
||||
}
|
||||
} else { // No saved data - Check for any
|
||||
data = await requestFestInfo();
|
||||
|
||||
if (data) {
|
||||
localStorage.setItem("fest-info", data);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (data) { // Active or Upcoming Fest Found
|
||||
document.getElementById("splatfest-notfound").style.display = "none";
|
||||
|
||||
let festTitle = `<strong style="background-color: ${data["a-hex"]};">${data["a-name"]}</strong> vs. <strong style="background-color: ${data["b-hex"]};">${data["b-name"]}</strong>`;
|
||||
document.getElementById("splatfest-title").innerHTML = festTitle;
|
||||
|
||||
|
||||
let start = new Date(data["start"] + "Z");
|
||||
let startStr = `<strong>Starts: </strong>${start.toLocaleString()}`;
|
||||
document.getElementById("splatfest-starts").innerHTML = startStr;
|
||||
|
||||
let end = new Date(data["end"] + "Z");
|
||||
let endStr = `<strong>Ends: </strong>${end.toLocaleString()}`;
|
||||
document.getElementById("splatfest-ends").innerHTML = endStr;
|
||||
|
||||
let now = new Date();
|
||||
if (start > now && end < now) { // Fest is Active
|
||||
console.log("Active fest found!")
|
||||
|
||||
} else { // Fest is Upcoming
|
||||
console.log("Upcoming fest found!")
|
||||
}
|
||||
} else { // No fest
|
||||
document.getElementById("splatfest-info").style.display = "none";
|
||||
console.log("No fests currently planned or active")
|
||||
}
|
||||
}
|
||||
BIN
res/img/bloxerhd.png
Normal file
BIN
res/img/bloxerhd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
res/img/ceantix.png
Normal file
BIN
res/img/ceantix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
res/img/kinnay.png
Normal file
BIN
res/img/kinnay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
res/img/mii-placeholder.png
Normal file
BIN
res/img/mii-placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
res/img/pretendo.png
Normal file
BIN
res/img/pretendo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
res/img/purplepote.png
Normal file
BIN
res/img/purplepote.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
res/img/splatfestival.png
Normal file
BIN
res/img/splatfestival.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
res/img/tv.png
Normal file
BIN
res/img/tv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Loading…
Add table
Add a link
Reference in a new issue