add discord status/activity yippe

This commit is contained in:
zyqunix 2025-01-29 14:43:31 +01:00
parent 4dc7824f7e
commit 11b3210dcc
4 changed files with 71 additions and 13 deletions

View file

@ -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>

View file

@ -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', () => {

24
bio/lanyard.js Normal file
View file

@ -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");
}
})

View file

@ -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;