2025-06-06 00:16:40 +01:00
<!DOCTYPE html>
< head >
< title > Account | SPFN< / title >
2025-06-10 12:19:15 +01:00
< 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" >
2025-06-10 12:16:30 +01:00
< link rel = "stylesheet" href = "/css/style.css" >
< script type = "text/javascript" src = "/js/lang.js" > < / script >
2025-06-06 00:16:40 +01:00
< / head >
< body >
< header >
2025-06-06 13:03:02 +01:00
< div style = "display: flex;" >
< h1 style = "margin: 0 auto;" > SPFN< / h1 >
< h2 style = "font-size: 32px; margin: auto; padding: 12px" > Account< / h2 >
2025-06-06 00:16:40 +01:00
< / 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 >
2025-06-10 12:16:30 +01:00
< a href = "/account" > < button class = "header-button active" > Account< / button > < / a >
2025-06-06 00:16:40 +01:00
< / ul >
< / nav >
< / header >
< main >
2025-06-07 12:05:29 +01:00
< div id = "loading-screen" >
< h2 class = "center" > Loading...< / h2 >
< / div >
< div id = "login-error" class = "error-container" style = "display: none;" >
< h2 id = "error-text" > ERROR< / h2 >
< / div >
< form id = "login" style = "display: none;" >
2025-06-06 00:16:40 +01:00
< h3 class = "center" > Please log in before viewing account information< / h3 >
< div class = "form-group" >
2025-06-10 12:16:30 +01:00
< label for = "username" > SFID / Username:< / label >
2025-06-06 00:16:40 +01:00
< 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 >
2025-06-07 12:05:29 +01:00
< button type = "submit" style = "font-size: 24px; width: 100%;" > Login< / button >
2025-06-06 00:16:40 +01:00
< 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;" >
2025-06-10 12:16:30 +01:00
< div id = "user-display" class = "info-container" style = "width: 180px; align-items: center;" >
< img src = "/res/img/mii-placeholder.png" style = "width: 100%" >
2025-06-06 00:16:40 +01:00
< h3 id = "display-name" style = "margin: 2px;" > Display Name< / h3 >
2025-06-06 13:03:02 +01:00
< p id = "sfid" style = "margin: 2px;" > SFID: Username< / p >
2025-06-10 12:16:30 +01:00
< button style = "font-size: 24px; width: 160px;" onclick = "logOut()" > Log Out< / button >
2025-06-06 00:16:40 +01:00
< / div >
2025-06-10 12:16:30 +01:00
< div id = "user-details" class = "info-container" style = "flex: 1;" >
2025-06-06 00:16:40 +01:00
< 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 >
2025-06-07 12:05:29 +01:00
< hr style = "margin: 1rem 0; border: none; height: 1px; background: #aaa;" >
< p class = "info-text" id = "created-at" > < strong > Created: < / strong > dd/mm/yyyy hh:mm< / p >
< hr style = "margin: 1rem 0; border: none; height: 1px; background: #aaa;" >
2025-06-06 00:16:40 +01:00
< 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 >
2025-06-10 12:16:30 +01:00
< script type = "text/javascript" src = "/js/accounts.js" > < / script >
2025-06-06 00:16:40 +01:00
< / main >
< footer >
2025-06-07 12:05:29 +01:00
< p class = "center" > Need assistance? < a href = "https://discord.gg/grMSxZf" target = "_blank" > Join the Discord< / a > < / p >
2025-06-06 00:16:40 +01:00
< / footer >
< / body >
