From 6800930ea0f9d6cf667bc04e1831751d4bebaf41 Mon Sep 17 00:00:00 2001 From: Bingus_Violet Date: Thu, 16 Nov 2023 20:56:07 -0600 Subject: [PATCH] New UI!!! --- index.js | 9 ++++----- resources/mainPage.html | 31 ++++++++++++++++--------------- static/style.css | 20 ++++++++++++-------- 3 files changed, 32 insertions(+), 28 deletions(-) diff --git a/index.js b/index.js index 94f2a19..11d0f73 100644 --- a/index.js +++ b/index.js @@ -31,11 +31,9 @@ app.get("/", (req, res) => { const activity = lanyardData.activities[index]; console.log(activity) if (activity.type == 2) { - addedHTML += `

Listening to on ${activity.name}: ${activity.details} (by ${activity.state})

` + addedHTML += `

Listening to on ${activity.name}: ${activity.details} (by ${activity.state})

` } else if (activity.type == 4) { addedHTML += `

"${lanyardData.activities[0].state}" - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}

` - } else if (activity.type == 0) { - addedHTML += `

Playing: ${activity.name}

` } } @@ -59,13 +57,14 @@ app.get("/", (req, res) => { } var statusData = statuses[lanyardData.discord_status] - addedHTML += `

${statusData.text}

` addedHTML += `` console.log(lanyardData.activities) } - html = html.replace("{LANYARD}", addedHTML + "

") + html = html.replace("{LANYARD_STATUS}", `

${statusData.text}

`) + + html = html.replace("{LANYARD}", addedHTML) res.send(html) }) diff --git a/resources/mainPage.html b/resources/mainPage.html index 407f2b3..a6ba5c6 100644 --- a/resources/mainPage.html +++ b/resources/mainPage.html @@ -5,8 +5,7 @@ - + Violet's Purgatory @@ -22,16 +21,18 @@ -
+

Welcome to Violet's Purgatory

+

Violet

-
+
-
-
-

Pronouns: They/Them

-

Gender: Non-binary

-

Game & web developer

+
+

They/Them

+

Non-binary

+

Game & web developer

+ {LANYARD_STATUS} +
@@ -39,15 +40,15 @@

Stuff i'm hosting!

Socials

Pronouns

-
- +
{LANYARD}
+

The world's worst developer

+
diff --git a/static/style.css b/static/style.css index b06c131..c58bf6c 100644 --- a/static/style.css +++ b/static/style.css @@ -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%; }