From 11b3210dccf02292f8c1fb0de22b453b234df2c0 Mon Sep 17 00:00:00 2001
From: zyqunix <fabiovanek2008@gmail.com>
Date: Wed, 29 Jan 2025 14:43:31 +0100
Subject: [PATCH] add discord status/activity yippe
---
bio/index.html | 12 ++++++++----
bio/index.js | 2 +-
bio/lanyard.js | 24 ++++++++++++++++++++++++
bio/style.css | 46 ++++++++++++++++++++++++++++++++++++++--------
4 files changed, 71 insertions(+), 13 deletions(-)
create mode 100644 bio/lanyard.js
diff --git a/bio/index.html b/bio/index.html
index 6cefd1c..b940e09 100644
--- a/bio/index.html
+++ b/bio/index.html
@@ -16,16 +16,19 @@
</head>
<body>
-
- <script disable-devtool-auto="" src="htps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
+ <script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
+ <script disable-devtool-auto="" src="ttps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
<div class="video-container">
<video id="videoPlayer"></video>
</div>
<div class="player" id="player">
- <img class="pfp" src="https://easyfiles.cc/2024/12/a3046d6f-a1b1-415a-8f55-8981a8e45ddb/3ccc13a2825eb8c98b5371fa0706e450.webp">
- <h1>zyqunix</h1>
+ <div>
+ <img class="pfp" id="pfp" src="https://easyfiles.cc/2024/12/a3046d6f-a1b1-415a-8f55-8981a8e45ddb/3ccc13a2825eb8c98b5371fa0706e450.webp">
+ <div id="status"></div>
+ </div>
+ <div data-tooltip="" class="tooltip" id="name">zyqunix</div>
<span class="desc" id="typewriter"></span>
<div class="icons">
@@ -128,6 +131,7 @@
<script src="index.js"></script>
<script src="audio.js"></script>
<script src="particle.js"></script>
+ <script src="lanyard.js"></script>
</body>
diff --git a/bio/index.js b/bio/index.js
index 39ab643..964c6d5 100644
--- a/bio/index.js
+++ b/bio/index.js
@@ -120,7 +120,7 @@ function copyToClipboard(text) {
}
document.addEventListener("DOMContentLoaded", () => {
- const tooltips = document.querySelectorAll('[class*="tooltip"]');
+ const tooltips = document.querySelectorAll('[class*="tooltip"]:not([id="name"])');
tooltips.forEach(tooltip => {
tooltip.addEventListener('mouseenter', () => {
diff --git a/bio/lanyard.js b/bio/lanyard.js
new file mode 100644
index 0000000..37427e5
--- /dev/null
+++ b/bio/lanyard.js
@@ -0,0 +1,24 @@
+lanyard({
+ userId: "1201415921802170388",
+}).then(data => {
+ const status = document.getElementById('status');
+ const nameDiv = document.getElementById('name');
+ const customStatus = data.activities.find(activity => activity.type === 4);
+
+ const statusColors = {
+ online: "#23a55a",
+ idle: "#f0b232",
+ dnd: "#f23f43",
+ offline: "#80848e"
+ };
+
+ const borderColor = statusColors[data.discord_status] || offline;
+ status.style.background = `${borderColor}`;
+
+ if (customStatus) {
+ nameDiv.setAttribute("data-tooltip", customStatus.state);
+ } else {
+ nameDiv.setAttribute("data-tooltip", "No custom status");
+ }
+
+})
\ No newline at end of file
diff --git a/bio/style.css b/bio/style.css
index ca75bf1..50f0b29 100644
--- a/bio/style.css
+++ b/bio/style.css
@@ -109,14 +109,6 @@ body {
margin-top: 200px;
}
-.player h1 {
- font-family: 'PF Tempesta Five', monospace;
- margin: 0;
- font-size: 24px;
- color: white;
- text-shadow: #000000 3px 2px 7px !important;
-}
-
.player p {
color: #ffffff;
font-size: 16px;
@@ -152,6 +144,23 @@ body {
border: 3px solid rgba(150, 150, 150, 0.25);
}
+#status {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ position: absolute;
+ right: 39%;
+ top: 7.5%;
+}
+
+#name {
+ font-family: 'PF Tempesta Five', monospace;
+ margin: 0;
+ font-size: 24px;
+ color: white;
+ text-shadow: #000000 3px 2px 7px !important;
+}
+
.video-container {
position: fixed;
top: 0;
@@ -427,6 +436,27 @@ svg {
font-family: monospace;
}
+div[id="name"]::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ transform: translateX(-50%);
+ background-color: rgb(51, 51, 51, 0.5);
+ border: 2px solid rgba(150, 150, 150, 0.1);
+ color: #fff;
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-size: 16px;
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s, visibility 0.3s;
+ font-family: monospace;
+ bottom: 87% !important;
+ backdrop-filter: blur(5px);
+ left: 50%;
+ text-wrap: pretty;
+}
+
.tooltip[data-tooltip*="big"]::after {
content: attr(data-tooltip);
position: absolute;