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];
console.log(activity)
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) {
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]
addedHTML += `<p style="color: ${statusData.color}">${statusData.text}</p>`
addedHTML += `<style>.pfp { border-color: ${statusData.color} !important }</style>`
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)
})

31
resources/mainPage.html
View file

@ -5,8 +5,7 @@
<meta charset="UTF-8">
<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"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">
<title>Violet's Purgatory</title>
@ -22,16 +21,18 @@
</head>
<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">
<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">
</div>
<div class="col-sm-6">
<p>Pronouns: They/Them</p>
<p>Gender: Non-binary</p>
<p>Game & web developer</p>
<div>
<p>They/Them</p>
<p>Non-binary</p>
<p>Game & web developer</p>
{LANYARD_STATUS}
</div>
</div>
<div class="col-sm-12">
<hr>
@ -39,15 +40,15 @@
<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="/pronouns">Pronouns</a></p>
<br>
<!-- <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> -->
<hr>
{LANYARD}
</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>
</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;
text-align: center;
line-height: 1.5rem;
}
h1 {
@ -14,19 +15,23 @@ h1 {
h2 {
color: white;
font-size: 2rem;
}
body, html {
overflow-x: hidden;
margin: auto;
background-color: rgb(20, 5, 60);
background: linear-gradient(rgb(25, 5, 75), black);
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
body {
padding: 5%;
}
.fadediv {
animation-name: fade-in;
animation-duration: .75s;
@ -90,16 +95,15 @@ hr {
color: white;
opacity: 0.25;
border-width: 2px;
margin: 20px 10%;
margin: 15px 10%;
}
#card {
background-color: rgb(75, 25, 100);
padding: 15px;
border: 2px white solid;
margin: auto;
max-width: 1000px;
width: 98%;
margin: 25px auto;
width: 95%;
}