Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

New UI!!!

Browse source
This commit is contained in:
Bingus_Violet 2023-11-16 20:56:07 -06:00
parent 5a87559533
commit 6800930ea0
3 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.js
View file

@ -31,11 +31,9 @@ app.get("/", (req, res) => {
const activity = lanyardData.activities[index]; const activity = lanyardData.activities[index];
console.log(activity) console.log(activity)
if (activity.type == 2) { if (activity.type == 2) {
addedHTML += `<p>Listening to on <span style="color: limegreen">${activity.name}</span>: ${activity.details} (by ${activity.state})</p>` addedHTML += `<p class="chip">Listening to on <span style="color: limegreen">${activity.name}</span>: ${activity.details} (by ${activity.state})</p>`
} else if (activity.type == 4) { } else if (activity.type == 4) {
addedHTML += `<p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>` addedHTML += `<p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>`
} else if (activity.type == 0) {
addedHTML += `<p>Playing: ${activity.name}</p>`
} }
} }
@ -59,13 +57,14 @@ app.get("/", (req, res) => {
} }
var statusData = statuses[lanyardData.discord_status] var statusData = statuses[lanyardData.discord_status]
addedHTML += `<p style="color: ${statusData.color}">${statusData.text}</p>`
addedHTML += `<style>.pfp { border-color: ${statusData.color} !important }</style>` addedHTML += `<style>.pfp { border-color: ${statusData.color} !important }</style>`
console.log(lanyardData.activities) console.log(lanyardData.activities)
} }
html = html.replace("{LANYARD}", addedHTML + "</p>") html = html.replace("{LANYARD_STATUS}", `<p style="color: ${statusData.color}">${statusData.text}</p>`)
html = html.replace("{LANYARD}", addedHTML)
res.send(html) res.send(html)
}) })

29
resources/mainPage.html
View file

@ -5,8 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<title>Violet's Purgatory</title> <title>Violet's Purgatory</title>
@ -22,16 +21,18 @@
</head> </head>
<body> <body>
<div class="fadediv" style="display: flex; justify-content: center; align-items: center; width: 100%; height: 85%;"> <h1>Welcome to Violet's Purgatory</h1>
<div class="fadediv">
<div class="container-fluid row" id="card"> <div class="container-fluid row" id="card">
<h2>Violet</h2> <h2>Violet</h2>
<div class="col-sm-6" style="display: flex; justify-content: center; align-items: center;"> <div class="col-sm-12" style="display: flex; justify-content: center; align-items: center;">
<img src="https://api.lanyard.rest/534132311781015564.png" class="pfp"> <img src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
</div> <div>
<div class="col-sm-6"> <p>They/Them</p>
<p>Pronouns: They/Them</p> <p>Non-binary</p>
<p>Gender: Non-binary</p>
<p>Game & web developer</p> <p>Game & web developer</p>
{LANYARD_STATUS}
</div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<hr> <hr>
@ -39,15 +40,15 @@
<p class="chip"><a href="/hosted">Stuff i'm hosting!</a></p> <p class="chip"><a href="/hosted">Stuff i'm hosting!</a></p>
<p class="chip"><a href="/socials">Socials</a></p> <p class="chip"><a href="/socials">Socials</a></p>
<p class="chip"><a href="/pronouns">Pronouns</a></p> <p class="chip"><a href="/pronouns">Pronouns</a></p>
<br> <hr>
<!-- <p class="d-sm-inline-block d-none">Fediverse: <a rel="me"
href="https://tech.lgbt/@Bingus_Violet">@Bingus_Violet@tech.lgbt</a></p>
<p class="d-sm-inline-block d-none" style="border-color: red;">Ko-Fi: <a
href="https://ko-fi.com/bingus_violet" style="color: rgb(255, 0, 0)">bingus_violet</a> - Please
donate!</p> -->
{LANYARD} {LANYARD}
</div> </div>
</div> </div>
<p><em>The world's worst developer</em></p>
<noscript>
<p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done
server-side, so enjoy :D <br> P.S. Your really cool, I look up to people like u :> (Atleast, assuming you disabled javascript urself...)</p>
</noscript>
</div> </div>
</body> </body>

20
static/style.css
View file

@ -1,9 +1,10 @@
/* @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap'); */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');
:root { * {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
padding: 0; padding: 0;
text-align: center; text-align: center;
line-height: 1.5rem;
} }
h1 { h1 {
@ -14,19 +15,23 @@ h1 {
h2 { h2 {
color: white; color: white;
font-size: 2rem;
} }
body, html { body, html {
overflow-x: hidden; overflow-x: hidden;
margin: auto; margin: auto;
background-color: rgb(20, 5, 60); background-color: rgb(20, 5, 60);
background: linear-gradient(rgb(25, 5, 75), black);
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body {
padding: 5%;
}
.fadediv { .fadediv {
animation-name: fade-in; animation-name: fade-in;
animation-duration: .75s; animation-duration: .75s;
@ -90,16 +95,15 @@ hr {
color: white; color: white;
opacity: 0.25; opacity: 0.25;
border-width: 2px; border-width: 2px;
margin: 20px 10%; margin: 15px 10%;
} }
#card { #card {
background-color: rgb(75, 25, 100); background-color: rgb(75, 25, 100);
padding: 15px; padding: 15px;
border: 2px white solid; border: 2px white solid;
margin: auto; margin: 25px auto;
max-width: 1000px; width: 95%;
width: 98%;
} }