New UI!!!
This commit is contained in:
Bingus_Violet
parent
5a87559533
commit
6800930ea0
3 changed files with 32 additions and 28 deletions
9
index.js
9
index.js
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue