2025-01-19 17:35:31 -06:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2025-01-19 23:21:32 -06:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
2025-01-19 22:37:40 -06:00
< title > FumbleAround< / title >
2025-01-19 17:35:31 -06:00
< link rel = "stylesheet" href = "styles.css" >
2025-01-19 22:37:40 -06:00
< link rel = "icon" type = "image/png" href = "./Assets/smily.png" >
2025-01-19 23:30:59 -06:00
<!-- PWA Meta Tags -->
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
< meta name = "apple-mobile-web-app-title" content = "FumbleAround" >
< meta name = "mobile-web-app-capable" content = "yes" >
< meta name = "theme-color" content = "#ffffff" >
< meta name = "application-name" content = "FumbleAround" >
<!-- Apple Touch Icons -->
< link rel = "apple-touch-icon" href = "./Assets/smily.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "./Assets/smily.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "./Assets/smily.png" >
< link rel = "apple-touch-icon" sizes = "167x167" href = "./Assets/smily.png" >
<!-- Web Manifest -->
< link rel = "manifest" href = "manifest.json" >
2025-01-19 17:35:31 -06:00
< / head >
< body >
< header >
2025-01-19 22:37:40 -06:00
< div class = "logo" >
< img src = "./Assets/smily.png" alt = "FumbleAround Logo" class = "logo-icon" >
FumbleAround
< / div >
2025-01-19 19:30:51 -06:00
< div class = "header-buttons" >
2025-01-19 22:37:40 -06:00
< div class = "social-buttons" >
< button id = "helpButton" > ❓< / button >
< button id = "donateButton" > 💝< / button >
< button id = "githubButton" >
< svg viewBox = "0 0 24 24" width = "24" height = "24" >
< path fill = "currentColor" d = "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" / >
< / svg >
< / button >
< / div >
< div class = "app-controls" >
< div class = "theme-toggle" >
< button id = "darkModeToggle" > 🌙< / button >
< / div >
< button id = "fumbleButton" > Fumble!< / button >
< / div >
2025-01-19 19:30:51 -06:00
< / div >
2025-01-19 17:35:31 -06:00
< / header >
2025-01-19 22:37:40 -06:00
< div id = "helpModal" class = "modal" >
< div class = "modal-content" >
< span class = "close-button" > × < / span >
< h2 > Disclaimer< / h2 >
< p > FumbleAround uses Wiby.me's search engine to provide random web pages. We are not responsible for the content that appears. Use at your own discretion.< / p >
< p > This project is a homage to the classic StumbleUpon, reimagined for the modern web.< / p >
< / div >
< / div >
2025-01-19 17:35:31 -06:00
< main >
2025-01-19 23:21:32 -06:00
< iframe
id="contentFrame"
src="about:blank"
title="Content"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
>< / iframe >
2025-01-19 17:35:31 -06:00
< / main >
< script >
2025-01-19 23:21:32 -06:00
const fumble = () => {
2025-01-19 17:35:31 -06:00
const frame = document.getElementById('contentFrame');
frame.src = 'https://wiby.me/surprise/';
2025-01-19 23:05:49 -06:00
// Wait for the page to load then focus
frame.onload = () => {
2025-01-19 23:21:32 -06:00
// Check if we landed on a blocked/error page
try {
const title = frame.contentWindow.document.title.toLowerCase();
if (title.includes('blocked') ||
title.includes('error') ||
title.includes('refused') ||
title.includes('cannot') ||
title.includes('denied')) {
// Try again if we hit an error page
fumble();
return;
}
} catch (e) {
// Can't access title due to CORS - assume page is OK
}
2025-01-19 23:05:49 -06:00
frame.focus();
try {
frame.contentWindow.focus();
} catch (e) {
// Ignore cross-origin errors
}
};
2025-01-19 23:21:32 -06:00
// Handle load errors
frame.onerror = () => {
fumble(); // Try again if loading fails
};
};
document.getElementById('fumbleButton').addEventListener('click', fumble);
2025-01-19 19:30:51 -06:00
// Dark mode toggle
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
// Check for saved preference
if (localStorage.getItem('darkMode') === 'true') {
body.classList.add('dark-mode');
darkModeToggle.textContent = '☀️';
}
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
const isDark = body.classList.contains('dark-mode');
darkModeToggle.textContent = isDark ? '☀️' : '🌙';
localStorage.setItem('darkMode', isDark);
});
2025-01-19 22:37:40 -06:00
// Add GitHub button click handler
document.getElementById('githubButton').addEventListener('click', () => {
window.open('https://git.mauix.bio/michael/FumbleAround', '_blank');
});
// Add donate button click handler
document.getElementById('donateButton').addEventListener('click', () => {
window.open('https://wiby.me/donate/', '_blank');
});
// Add help button click handler
const modal = document.getElementById('helpModal');
const helpButton = document.getElementById('helpButton');
const closeButton = document.querySelector('.close-button');
helpButton.addEventListener('click', () => {
modal.classList.add('show');
});
closeButton.addEventListener('click', () => {
modal.classList.remove('show');
});
// Close modal when clicking outside
window.addEventListener('click', (event) => {
if (event.target === modal) {
modal.classList.remove('show');
}
});
2025-01-19 17:35:31 -06:00
< / script >
< / body >
< / html >
