zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

lil update

Browse source
This commit is contained in:
zyqunix 2025-06-06 01:23:16 +02:00
parent 149db42518
commit c6a234489d
2 changed files with 221 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

438
assets/js/index.js
View file

@ -1,254 +1,243 @@
const timeElem = document.getElementById('time'); const timeElem = document.getElementById('time');
const timezone = 'Europe/Berlin'; const timezone = 'Europe/Berlin';
timeElem.setAttribute('data-tooltip',timezone); timeElem.setAttribute('data-tooltip', timezone);
function getTime(timezone) { function getTime(timezone) {
const now = new Date(); const now = new Date();
return now.toLocaleString("en-US", { return now.toLocaleString("en-US", {
timezone, timezone,
hour12: false, hour12: false,
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
second: '2-digit' second: '2-digit'
}); });
}; };
timeElem.innerHTML = getTime(timezone); timeElem.innerHTML = getTime(timezone);
setInterval(() => { setInterval(() => {
timeElem.innerHTML = getTime(timezone); timeElem.innerHTML = getTime(timezone);
}, 1000); }, 1000);
const ageElem = document.getElementById('age'); const ageElem = document.getElementById('age');
let birthday = new Date('2008-12-13'); let birthday = new Date('2008-12-13');
let age = 0; let age = 0;
const updateAge = () => { function updateAge(elem, fix, text) {
const now = new Date(); const now = new Date();
const diff = now.getTime() - birthday.getTime(); const diff = now.getTime() - birthday.getTime();
age = diff / (1000 * 60 * 60 * 24 * 365.25); const age = diff / (1000 * 60 * 60 * 24 * 365.25);
ageElem.innerHTML = `${age.toFixed(10)} years old`; const str = `${age.toFixed(fix)} ${text}`;
} if (elem) elem.innerHTML = str;
updateAge(); return str;
};
updateAge(ageElem, 2, "years old");
setInterval(() => {
updateAge(ageElem, 2, "years old");
}, 3600 * 1000);
setInterval(() => {
ageElem.setAttribute("data-tooltip", updateAge(null, 10, "years old"));
}, 10);
const timeInterval = setInterval(() => {
updateAge();
}, 100);
function lan() { function lan() {
lanyard({ lanyard({userId: "1201415921802170388"}).then(data => {
userId: "1201415921802170388", const statusElem = document.getElementById('status');
}).then(data => { const pfpElem = document.getElementById('profile-picture');
const statusElem = document.getElementById('status'); const activity = document.querySelector('.activity');
const pfpElem = document.getElementById('profile-picture'); const activityNameElem = document.getElementById('activity-name');
const activity = document.querySelector('.activity'); const activityImageElem = document.getElementById('activity-image');
const activityNameElem = document.getElementById('activity-name');
const activityImageElem = document.getElementById('activity-image');
const gameActivity = data.activities.find(activity => activity.type === 0);
const status = data.activities.find(activity => activity.type === 4);
const statusColors = {
online: "#23a55a",
idle: "#f0b232",
dnd: "#f23f43",
offline: "#80848e"
};
const borderColor = statusColors[data.discord_status] || statusColors.offline;
pfpElem.style.borderColor = borderColor;
if (status) { const gameActivity = data.activities.find(activity => activity.type === 0);
statusElem.innerHTML = `<strong class="quote">"${status.state}"</strong> - zyqunix`; const status = data.activities.find(activity => activity.type === 4);
} else { const statusColors = {
statusElem.innerHTML = `<strong class="quote">Empty void. Nothingness.</strong>`; online: "#23a55a",
} idle: "#f0b232",
dnd: "#f23f43",
if (gameActivity) { offline: "#80848e"
};
const parts = [];
if (gameActivity.name) parts.push(`<strong>Playing</strong> ${gameActivity.name}`); const borderColor = statusColors[data.discord_status] || statusColors.offline;
if (gameActivity.details) parts.push(gameActivity.details); pfpElem.style.borderColor = borderColor;
if (gameActivity.state) parts.push(gameActivity.state);
activityNameElem.innerHTML = parts.join(': '); if (status) {
statusElem.innerHTML = `<strong class="quote">"${
if (gameActivity.assets && gameActivity.assets.large_image) { status.state
const imgId = gameActivity.assets.large_image; }"</strong> - zyqunix`;
const imageUrl = imgId.startsWith("mp:external/") } else {
? `https://media.discordapp.net/${imgId.replace("mp:", "")}` statusElem.innerHTML = `<strong class="quote">Empty void. Nothingness.</strong>`;
: `https://cdn.discordapp.com/app-assets/${gameActivity.application_id}/${imgId}.png`; }
activityImageElem.src = imageUrl;
activityImageElem.style.display = "block"; if (gameActivity) {
} else {
activityImageElem.style.display = "none"; const parts = [];
} if (gameActivity.name)
} else activity.style.display = "none"; parts.push(`<strong>Playing</strong> ${
}); gameActivity.name
}`);
if (gameActivity.details)
parts.push(gameActivity.details);
if (gameActivity.state)
parts.push(gameActivity.state);
activityNameElem.innerHTML = parts.join(': ');
if (gameActivity.assets && gameActivity.assets.large_image) {
const imgId = gameActivity.assets.large_image;
const imageUrl = imgId.startsWith("mp:external/") ? `https://media.discordapp.net/${
imgId.replace("mp:", "")
}` : `https://cdn.discordapp.com/app-assets/${
gameActivity.application_id
}/${imgId}.png`;
activityImageElem.src = imageUrl;
activityImageElem.style.display = "block";
} else {
activityImageElem.style.display = "none";
}
} else
activity.style.display = "none";
});
} }
window.onload = (event) => { window.onload = (event) => {
lan(); lan();
}; };
setInterval(() => { setInterval(() => {
lan(); lan();
}, 6000); }, 6000);
function generateLanguageCards(languagesData) { function generateLanguageCards(languagesData) {
const container = document.querySelector('.languages'); const container = document.querySelector('.languages');
languagesData.languages.forEach(language => {
const languageItem = document.createElement('div');
languageItem.classList.add('language-item');
const namePercentContainer = document.createElement('div'); languagesData.languages.forEach(language => {
namePercentContainer.classList.add('name-percent-container'); const languageItem = document.createElement('div');
languageItem.classList.add('language-item');
const languageImage = document.createElement('img'); const namePercentContainer = document.createElement('div');
languageImage.classList.add('image'); namePercentContainer.classList.add('name-percent-container');
languageImage.src = language.img;
const languageName = document.createElement('div'); const languageImage = document.createElement('img');
languageName.classList.add('language-name', 'tooltip'); languageImage.classList.add('image');
languageName.textContent = language.name; languageImage.src = language.img;
languageName.id = language.id;
languageName.setAttribute('data-tooltip', language.tooltip);
const languagePercentage = document.createElement('span'); const languageName = document.createElement('div');
languagePercentage.classList.add('percent'); languageName.classList.add('language-name', 'tooltip');
languagePercentage.textContent = `${language.percentage}%`; languageName.textContent = language.name;
languageName.id = language.id;
languageName.setAttribute('data-tooltip', language.tooltip);
namePercentContainer.appendChild(languageImage); const languagePercentage = document.createElement('span');
namePercentContainer.appendChild(languageName); languagePercentage.classList.add('percent');
namePercentContainer.appendChild(languagePercentage); languagePercentage.textContent = `${
language.percentage
}%`;
const percentageBar = document.createElement('div'); namePercentContainer.appendChild(languageImage);
percentageBar.classList.add('percentage-bar'); namePercentContainer.appendChild(languageName);
const barAfter = document.createElement('div'); namePercentContainer.appendChild(languagePercentage);
barAfter.classList.add('bar-after');
barAfter.style.width = `${language.percentage}%`;
percentageBar.appendChild(barAfter);
languageItem.appendChild(namePercentContainer); const percentageBar = document.createElement('div');
languageItem.appendChild(percentageBar); percentageBar.classList.add('percentage-bar');
const barAfter = document.createElement('div');
barAfter.classList.add('bar-after');
barAfter.style.width = `${
language.percentage
}%`;
percentageBar.appendChild(barAfter);
container.appendChild(languageItem); languageItem.appendChild(namePercentContainer);
}); languageItem.appendChild(percentageBar);
container.appendChild(languageItem);
});
} }
function generateSkillCards(skillData) { function generateSkillCards(skillData) {
const skillContainer = document.querySelector('.skills'); const skillContainer = document.querySelector('.skills');
skillData.skills.forEach(skill => { skillData.skills.forEach(skill => {
const skillItem = document.createElement('a'); const skillItem = document.createElement('a');
skillItem.classList.add('skill-item', 'tooltip'); skillItem.classList.add('skill-item', 'tooltip');
skillItem.id = skill.id; skillItem.id = skill.id;
skillItem.href = skill.url; skillItem.href = skill.url;
skillItem.target = '_blank'; skillItem.target = '_blank';
const skillImage = document.createElement('img');
skillImage.classList.add('image');
skillImage.src = skill.img;
const skillName = document.createElement('span'); const skillImage = document.createElement('img');
skillName.classList.add('skill-name'); skillImage.classList.add('image');
skillName.textContent = skill.name; skillImage.src = skill.img;
skillItem.setAttribute('data-tooltip', skill.tooltip);
skillItem.appendChild(skillImage); const skillName = document.createElement('span');
skillItem.appendChild(skillName); skillName.classList.add('skill-name');
skillName.textContent = skill.name;
skillContainer.appendChild(skillItem); skillItem.setAttribute('data-tooltip', skill.tooltip);
});
skillItem.appendChild(skillImage);
skillItem.appendChild(skillName);
skillContainer.appendChild(skillItem);
});
} }
fetch('assets/js/lang.json') fetch('assets/js/lang.json').then(response => response.json()).then(generateLanguageCards).catch(error => console.error('Error fetching lang.json:', error));
.then(response => response.json())
.then(generateLanguageCards)
.catch(error => console.error('Error fetching lang.json:', error));
fetch('assets/js/skills.json')
.then(response => response.json())
.then(generateSkillCards)
.catch(error => console.error('Error fetching skills.json', error));
document.querySelectorAll('.tooltip').forEach(elem => {
elem.addEventListener('mouseenter', () => {
const tooltipText = elem.getAttribute('data-tooltip');
if (!tooltipText) return;
const dummy = document.createElement('div');
dummy.style.position = 'absolute';
dummy.style.visibility = 'hidden';
dummy.style.whiteSpace = 'nowrap';
dummy.style.padding = '5px 10px';
dummy.style.fontSize = '14px';
dummy.innerText = tooltipText;
document.body.appendChild(dummy);
const elemRect = elem.getBoundingClientRect();
const tipRect = dummy.getBoundingClientRect();
const leftEdge = elemRect.left + (elemRect.width / 2) - (tipRect.width / 2);
const rightEdge = elemRect.left + (elemRect.width / 2) + (tipRect.width / 2);
elem.classList.remove('slide-left', 'slide-right');
if (rightEdge > window.innerWidth) {
elem.classList.add('slide-left');
} else if (leftEdge < 0) {
elem.classList.add('slide-right');
}
dummy.remove();
});
});
fetch('assets/js/skills.json').then(response => response.json()).then(generateSkillCards).catch(error => console.error('Error fetching skills.json', error));
const LASTFM_API_KEY = "04f747e38bebf69efbbfab7b20612bac"; const LASTFM_API_KEY = "04f747e38bebf69efbbfab7b20612bac";
const LASTFM_USERNAME = "zyqunix"; const LASTFM_USERNAME = "zyqunix";
const params = new URLSearchParams({ const params = new URLSearchParams({
method: "user.getrecenttracks", method: "user.getrecenttracks",
user: LASTFM_USERNAME, user: LASTFM_USERNAME,
api_key: LASTFM_API_KEY, api_key: LASTFM_API_KEY,
format: "json", format: "json",
limit: "1" limit: "1"
}); });
const url = `https://ws.audioscrobbler.com/2.0/?${params.toString()}`; const url = `https://ws.audioscrobbler.com/2.0/?${
params.toString()
}`;
function fetchSong() { function fetchSong() {
fetch(url) fetch(url).then(response => response.json()).then(data => {
.then(response => response.json()) const track = data ?. recenttracks ?. track ?. [0];
.then(data => { if (! track)
const track = data?.recenttracks?.track?.[0]; return;
if (!track) return;
const artist = track.artist["#text"];
const title = track.name;
const image = track.image.find(img => img.size === "extralarge")?.["#text"] || "";
document.getElementById("artist").innerText = artist; const artist = track.artist["#text"];
document.getElementById("artist").href = `https://duckduckgo.com/?q=${artist}`; const title = track.name;
document.getElementById("song-name").innerText = title; const image = track.image.find(img => img.size === "extralarge") ?. ["#text"] || "";
document.getElementById("song-cover").src = !image ? "https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg" : image;
document.getElementById("song-url").href = track.url; document.getElementById("artist").innerText = artist;
}) document.getElementById("artist").href = `https://duckduckgo.com/?q=${artist}`;
.catch(error => { document.getElementById("song-name").innerText = title;
console.error("Error:", error); document.getElementById("song-cover").src = ! image ? "https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg" : image;
}); document.getElementById("song-url").href = track.url;
}).catch(error => {
console.error("Error:", error);
});
} }
function fetchWeather(location) { function fetchWeather(location) {
const target = document.getElementById('weather'); const target = document.getElementById('weather');
const query = location ? location : "muc"; const query = location ? location : "munich";
fetch(`https://wttr.in/${query}?format=%t | %C`) fetch(`https://wttr.in/${query}?format=%t | %C`).then(response => response.text()).then(data => {
.then(response => response.text()) target.innerText = data;
.then(data => { }).catch(() => {
target.innerText = data; target.innerText = "Weather unavailable";
}) });
.catch(() => {
target.innerText = "Weather unavailable";
});
} }
const messages = [ const messages = [
@ -256,9 +245,8 @@ const messages = [
"Listening to Music", "Listening to Music",
"Reverse Engineering", "Reverse Engineering",
"Playing Counter-Strike", "Playing Counter-Strike",
"Visual Artistry", "Visual Artistry",
"swagman", "swagman"
]; ];
let currentMessageIndex = 0; let currentMessageIndex = 0;
@ -275,12 +263,10 @@ function typeWriter() {
} else { } else {
displayText = currentMessage.substring(0, currentCharIndex + 1); displayText = currentMessage.substring(0, currentCharIndex + 1);
currentCharIndex++; currentCharIndex++;
} } displayText += "<span id='typewriter-line'>|</span>";
displayText += "<span id='typewriter-line'>|</span>";
document.getElementById('hobbies').innerHTML = displayText; document.getElementById('hobbies').innerHTML = displayText;
if (!isDeleting && currentCharIndex === currentMessage.length + 1) { if (! isDeleting && currentCharIndex === currentMessage.length + 1) {
isDeleting = true; isDeleting = true;
setTimeout(typeWriter, 1000); setTimeout(typeWriter, 1000);
} else if (isDeleting && currentCharIndex === 0) { } else if (isDeleting && currentCharIndex === 0) {
@ -315,33 +301,49 @@ fetchSong();
let countdown = 60; let countdown = 60;
setInterval(() => { setInterval(() => {
countdown--; countdown--;
if (countdown <= 0) { if (countdown <= 0) {
countdown = 60; countdown = 60;
fetchSong(); fetchSong();
} }
const refreshElem = document.getElementById('refresh'); const refreshElem = document.getElementById('refresh');
if (refreshElem) refreshElem.dataset.tooltip = `Refresh in ${countdown}`; if (refreshElem)
refreshElem.dataset.tooltip = `Refresh in ${countdown}`;
}, 1000); }, 1000);
function closeOverlay(popupId, overlayId) { function closeOverlay(popupId, overlayId) {
document.getElementById(`${popupId}`).style.opacity = '0'; document.getElementById(`${popupId}`).style.opacity = '0';
document.getElementById(`${overlayId}`).style.opacity = '0'; document.getElementById(`${overlayId}`).style.opacity = '0';
document.getElementById(`${popupId}`).style.visibility = 'hidden'; document.getElementById(`${popupId}`).style.visibility = 'hidden';
document.getElementById(`${overlayId}`).style.visibility = 'hidden'; document.getElementById(`${overlayId}`).style.visibility = 'hidden';
} }
function openOverlay(popupId, overlayId) { function openOverlay(popupId, overlayId) {
const popup = document.getElementById(popupId); const popup = document.getElementById(popupId);
const overlay = document.getElementById(overlayId); const overlay = document.getElementById(overlayId);
popup.style.visibility = 'visible'; popup.style.visibility = 'visible';
overlay.style.visibility = 'visible'; overlay.style.visibility = 'visible';
popup.style.opacity = '1'; popup.style.opacity = '1';
overlay.style.opacity = '1'; overlay.style.opacity = '1';
} }
document.getElementById('banan').addEventListener('click', () => { openOverlay("music-pop", "overlay")}); document.getElementById('banan').addEventListener('click', () => {
document.getElementById('close').addEventListener('click', () => { closeOverlay("music-pop", "overlay")}); openOverlay("music-pop", "overlay")
document.getElementById('overlay').addEventListener('click', () => { closeOverlay("music-pop", "overlay")}); });
document.getElementById('close').addEventListener('click', () => {
closeOverlay("music-pop", "overlay")
});
document.getElementById('overlay').addEventListener('click', () => {
closeOverlay("music-pop", "overlay")
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") closeOverlay("music-pop", "overlay");
});
document.getElementById('refresh').addEventListener('click', fetchSong); document.getElementById('refresh').addEventListener('click', fetchSong);

2
index.html
View file

@ -125,7 +125,7 @@
</div> </div>
</div> </div>
<div id="overlay"></div> <div id="overlay" tabindex="0"></div>
<footer class="cards"> <footer class="cards">
<p id="copyright">© 2025 zyqunix - all rights reserved</p> <p id="copyright">© 2025 zyqunix - all rights reserved</p>