- zyqunix
+
+
+
+
+
+
+ zyqunix
@@ -128,6 +131,7 @@
+
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;