114 lines
No EOL
4.7 KiB
HTML
114 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FumbleAround</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" type="image/png" href="./Assets/smily.png">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo">
|
|
<img src="./Assets/smily.png" alt="FumbleAround Logo" class="logo-icon">
|
|
FumbleAround
|
|
</div>
|
|
<div class="header-buttons">
|
|
<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>
|
|
</div>
|
|
</header>
|
|
|
|
<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>
|
|
|
|
<main>
|
|
<iframe id="contentFrame" src="about:blank" title="Content"></iframe>
|
|
</main>
|
|
|
|
<script>
|
|
document.getElementById('fumbleButton').addEventListener('click', async () => {
|
|
const frame = document.getElementById('contentFrame');
|
|
// Open wiby.me/surprise directly in the iframe
|
|
frame.src = 'https://wiby.me/surprise/';
|
|
|
|
// Wait for the page to load then focus
|
|
frame.onload = () => {
|
|
frame.focus();
|
|
// Try to focus the iframe content window if possible
|
|
try {
|
|
frame.contentWindow.focus();
|
|
} catch (e) {
|
|
// Ignore cross-origin errors
|
|
}
|
|
};
|
|
});
|
|
|
|
// 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);
|
|
});
|
|
|
|
// 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');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |