Spaces:
Running
Running
File size: 2,373 Bytes
8cf36e6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
// Enhanced connection status handler
function updateConnectionStatus() {
const isOnline = navigator.onLine;
const refreshBtn = document.querySelector('button');
if (isOnline) {
// Create confetti effect when connection is restored
import('https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js')
.then(() => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});
// Update UI
const icon = document.querySelector('[data-feather="wifi-off"]');
icon.setAttribute('data-feather', 'wifi');
feather.replace();
// Change button text temporarily
refreshBtn.innerHTML = `<i data-feather="check" class="w-6 h-6"></i> Connection Restored!`;
feather.replace();
setTimeout(() => {
refreshBtn.innerHTML = `<i data-feather="refresh-cw" class="w-6 h-6"></i> Refresh Adventure`;
feather.replace();
}, 3000);
});
}
}
// Add button click handler
document.querySelector('button').addEventListener('click', () => {
// Add ripple effect
const ripple = document.createElement('span');
ripple.classList.add('ripple');
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
updateConnectionStatus();
}, 300);
});
// Listen for connection changes
window.addEventListener('online', updateConnectionStatus);
window.addEventListener('offline', () => {
const icon = document.querySelector('[data-feather="wifi"]');
if (icon) {
icon.setAttribute('data-feather', 'wifi-off');
feather.replace();
}
});
// Initial check
updateConnectionStatus();
// Add ripple effect styles dynamically
const style = document.createElement('style');
style.textContent = `
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.7);
transform: scale(0);
animation: ripple 600ms linear;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);
|