sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

slight modification

Browse source
This commit is contained in:
Ruben 2025-02-27 14:43:41 -06:00
commit ee21a5c1cc
No known key found for this signature in database
GPG key ID: AE181294E97E4802
2 changed files with 36 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

66
script.js
View file

@ -2,62 +2,52 @@
// generated with ai i'm SORRY but i'm stupid and this works so its probably fiiiine
// i'll probably redo this when i can be assed to learn js myself
// Wait for DOM to be fully loaded before executing code (do we even need this. my site is just basic bitch html)
document.addEventListener('DOMContentLoaded', function() {
// Create popup element
let popup = document.getElementById('alt-popup');
// If popup doesn't exist, create it
if (!popup) {
popup = document.createElement('div');
popup.id = 'alt-popup';
popup.className = 'alt-popup';
document.body.appendChild(popup);
}
// Find all elements with alt attributes
document.addEventListener("DOMContentLoaded", function () {
let popup = document.getElementById("alt-popup");
// add popup to all elements with alt
function initializePopups() {
// Get all elements with alt attributes
const elementsWithAlt = document.querySelectorAll('[alt]');
// Add mouse events to each element
elementsWithAlt.forEach(element => {
element.addEventListener('mousemove', showPopup);
element.addEventListener('mouseout', hidePopup);
// find all elements with alt
const elementsWithAlt = document.querySelectorAll("[alt]");
// add mouse events to each element
elementsWithAlt.forEach((element) => {
element.addEventListener("mousemove", showPopup);
element.addEventListener("mouseout", hidePopup);
});
}
// show popup and position it near the cursor
function showPopup(event) {
// get alt text
const altText = event.target.getAttribute('alt');
const altText = event.target.getAttribute("alt");
if (altText) {
// use alt text in popup
popup.textContent = altText;
// correct popup positioning away from cursor and make it visible
popup.style.left = (event.clientX + 20) + 'px';
popup.style.top = (event.clientY + 20) + 'px';
popup.style.opacity = '1';
popup.style.left = event.clientX + 20 + "px";
popup.style.top = event.clientY + 20 + "px";
popup.style.opacity = "1";
}
}
function hidePopup() {
popup.style.opacity = '0';
popup.style.opacity = "0";
}
// Initialize popups on load
initializePopups();
if (window.MutationObserver) {
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
initializePopups();
}
});
});
if (document.body) {
observer.observe(document.body, { childList: true, subtree: true });
}
@ -69,6 +59,8 @@ observer.observe(document.body, { childList: true, subtree: true });
// snippet that copies the html for my button(s)
function copyButton() {
navigator.clipboard.writeText ('<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy" title="Sneexy"></a>');
navigator.clipboard.writeText(
'<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy" title="Sneexy"></a>'
);
alert("button html copied!");
};
}

13
style.css
View file

@ -364,11 +364,7 @@ details.styled[open] {
}
}
/* audio */
audio {
border-radius: 3rem;
}
/* alt text popup */
.alt-popup {
position: fixed;
background-color: color-mix(in srgb, var(--ayu-ui-bg) 85%, transparent);
@ -382,7 +378,12 @@ audio {
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
/* audio */
audio {
border-radius: 3rem;
}
/* footer/credits */