Initial Commit
This commit is contained in:
BloxerHD
commit
c1c292c437
7 changed files with 261 additions and 0 deletions
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# SPFN Website
|
||||
|
||||
This is the website for spfn.net, an online restoration project for the Wii U that aims to restore splatfests to the game Splatoon
|
||||
32
account/accounts.js
Normal file
32
account/accounts.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
const requestAddr = "https://account.spfn.net/api/v2/oauth2/generate_token"
|
||||
|
||||
document.getElementById("login").addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
|
||||
const credentials = btoa(`${username} ${password}`);
|
||||
|
||||
fetch(requestAddr, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": credentials,
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error("Network Response was not okay");
|
||||
return response.json();
|
||||
})
|
||||
.then(data => { // Success - Hide Form and Show Info on Screen
|
||||
document.getElementById("username").value = `SFID: ${data["username"]}`
|
||||
|
||||
document.getElementById("email").value = data["email"];
|
||||
document.getElementById("dob").value = data["birthdate"];
|
||||
document.getElementById("tz").value = data["timezone"];
|
||||
document.getElementById("region").value = data["region"];
|
||||
|
||||
document.getElementById("login").style.display = "none";
|
||||
document.getElementById("user-info").style.display = "flex";
|
||||
})
|
||||
})
|
||||
57
account/index.html
Normal file
57
account/index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Account | SPFN</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<img rel="icon" href="/logo.ico" type="image/x-icon">
|
||||
<h1>SPFN</h1>
|
||||
</div>
|
||||
<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="/account"><button class="header-button">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Accounts</h2>
|
||||
|
||||
<form id="login">
|
||||
<h3 class="center">Please log in before viewing account information</h3>
|
||||
<div class="form-group">
|
||||
<label for="username">SFID:</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
</div>
|
||||
<button type="submit" style="font-size: 24px;">Login</button>
|
||||
<p class="center" style="font-size: 12px;">Please ask an SPFN Developer in the <a href="https://discord.gg/grMSxZf">discord server</a> for assistance with password resets</p>
|
||||
</form>
|
||||
|
||||
<div id="user-info" class="info" style="display: none;">
|
||||
<div id="user-display" class="info-container" style="width: 180px">
|
||||
<h3 id="display-name" style="margin: 2px;">Display Name</h3>
|
||||
<p id="username" style="margin: 2px;">SFID: Username</p>
|
||||
</div>
|
||||
<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>
|
||||
<p class="info-text" id="tz"><strong>Timezone: </strong>Europe/London</p>
|
||||
<p class="info-text" id="region"><strong>Country/Region: </strong>GB</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="accounts.js"></script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
80
css/style.css
Normal file
80
css/style.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
background-color: #b32d28;
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 64px;
|
||||
-webkit-text-stroke: 1px black;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
background-color: #9c100c;
|
||||
color: rgb(255, 255, 255);
|
||||
border-color: #b4b4b4;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
border-style: groove;
|
||||
border-radius: 10px;
|
||||
height: 64px;
|
||||
margin: 0px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:1rem;
|
||||
border: 2px;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
background-color: black;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
background-color: #dfdfdf;
|
||||
text-align: center;
|
||||
margin: 2px 2px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
text-align: left;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.guide-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.guide {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
}
|
||||
11
guides/guides.js
Normal file
11
guides/guides.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const guideContents = document.querySelectorAll(".guide-content");
|
||||
|
||||
function changeGuide(newID) {
|
||||
guideContents.forEach(content => {
|
||||
if (content.id == newID) {
|
||||
content.style.display = "block";
|
||||
} else {
|
||||
content.style.display = "none";
|
||||
}
|
||||
})
|
||||
}
|
||||
53
guides/index.html
Normal file
53
guides/index.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Guides | SPFN</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<img rel="icon" href="/logo.ico" type="image/x-icon">
|
||||
<h1>SPFN</h1>
|
||||
</div>
|
||||
<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="/account"><button class="header-button">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Guides</h2>
|
||||
<div class="guide-buttons">
|
||||
<button class="guide active" onclick="changeGuide('g-install')">Installation - Wii U</button>
|
||||
<button class="guide" onclick="changeGuide('g-install-cemu')">Installation - Cemu</button>
|
||||
<button class="guide" onclick="changeGuide('g-troubleshoot')">Troubleshooting - Wii U</button>
|
||||
</div>
|
||||
|
||||
<div class="guide-content" id="g-install">
|
||||
<h3>Installation - Wii U</h3>
|
||||
<p>Install Plugins</p>
|
||||
<p>Create Account</p>
|
||||
</div>
|
||||
<div class="guide-content" id="g-install-cemu" style="display: none;">
|
||||
<h3>Installation - Cemu</h3>
|
||||
<p>Install on Wii U first</p>
|
||||
<p>Create Account</p>
|
||||
<p>Dump SPFN account</p>
|
||||
<p>Transfer to Cemu</p>
|
||||
<p>Add network_services.xml to Cemu Folder</p>
|
||||
</div>
|
||||
<div class="guide-content" id="g-troubleshoot" style="display: none;">
|
||||
<h3>Troubleshooting - Wii U</h3>
|
||||
<p>Join the Discord</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="guides.js"></script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
25
index.html
Normal file
25
index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Home | SPFN</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<h1>SPFN</h1>
|
||||
</div>
|
||||
<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="/account"><button class="header-button">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<p>Splatfestival Network - Restoring Splatfests to Splatoon on the Wii U</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue