zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add discord status/activity yippe

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
bio/index.html
View file

@ -16,16 +16,19 @@
</head> </head>
<body> <body>
<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
<script disable-devtool-auto="" src="htps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script> <script disable-devtool-auto="" src="ttps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
<div class="video-container"> <div class="video-container">
<video id="videoPlayer"></video> <video id="videoPlayer"></video>
</div> </div>
<div class="player" id="player"> <div class="player" id="player">
<img class="pfp" src="https://easyfiles.cc/2024/12/a3046d6f-a1b1-415a-8f55-8981a8e45ddb/3ccc13a2825eb8c98b5371fa0706e450.webp"> <div>
<h1>zyqunix</h1> <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> <span class="desc" id="typewriter"></span>
<div class="icons"> <div class="icons">
@ -128,6 +131,7 @@
<script src="index.js"></script> <script src="index.js"></script>
<script src="audio.js"></script> <script src="audio.js"></script>
<script src="particle.js"></script> <script src="particle.js"></script>
<script src="lanyard.js"></script>
</body> </body>

2
bio/index.js
View file

@ -120,7 +120,7 @@ function copyToClipboard(text) {
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const tooltips = document.querySelectorAll('[class*="tooltip"]'); const tooltips = document.querySelectorAll('[class*="tooltip"]:not([id="name"])');
tooltips.forEach(tooltip => { tooltips.forEach(tooltip => {
tooltip.addEventListener('mouseenter', () => { 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");
}
})

46
bio/style.css
View file

@ -109,14 +109,6 @@ body {
margin-top: 200px; 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 { .player p {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
@ -152,6 +144,23 @@ body {
border: 3px solid rgba(150, 150, 150, 0.25); 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 { .video-container {
position: fixed; position: fixed;
top: 0; top: 0;
@ -427,6 +436,27 @@ svg {
font-family: monospace; 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 { .tooltip[data-tooltip*="big"]::after {
content: attr(data-tooltip); content: attr(data-tooltip);
position: absolute; position: absolute;