233 lines
No EOL
9.5 KiB
HTML
233 lines
No EOL
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>FumbleAround</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" type="image/png" href="./Assets/smily.png">
|
|
|
|
<!-- 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">
|
|
</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"
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
|
></iframe>
|
|
</main>
|
|
|
|
<script>
|
|
const fumble = () => {
|
|
const frame = document.getElementById('contentFrame');
|
|
frame.src = 'https://wiby.me/surprise/';
|
|
|
|
// Wait for the page to load then focus
|
|
frame.onload = () => {
|
|
// 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
|
|
}
|
|
|
|
frame.focus();
|
|
try {
|
|
frame.contentWindow.focus();
|
|
} catch (e) {
|
|
// Ignore cross-origin errors
|
|
}
|
|
};
|
|
|
|
// Handle load errors
|
|
frame.onerror = () => {
|
|
fumble(); // Try again if loading fails
|
|
};
|
|
};
|
|
|
|
document.getElementById('fumbleButton').addEventListener('click', fumble);
|
|
|
|
// 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');
|
|
}
|
|
});
|
|
|
|
// Add shake detection
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
let lastZ = 0;
|
|
let lastUpdate = 0;
|
|
const shakeThreshold = 15; // Adjust sensitivity
|
|
const shakeTimeout = 1000; // Prevent multiple shakes
|
|
let lastShake = 0;
|
|
|
|
function handleMotion(event) {
|
|
const current = event.accelerationIncludingGravity;
|
|
const currentTime = new Date().getTime();
|
|
const timeDiff = currentTime - lastUpdate;
|
|
|
|
if (timeDiff > 100) {
|
|
const deltaX = Math.abs(current.x - lastX);
|
|
const deltaY = Math.abs(current.y - lastY);
|
|
const deltaZ = Math.abs(current.z - lastZ);
|
|
|
|
if (((deltaX > shakeThreshold && deltaY > shakeThreshold) ||
|
|
(deltaX > shakeThreshold && deltaZ > shakeThreshold) ||
|
|
(deltaY > shakeThreshold && deltaZ > shakeThreshold)) &&
|
|
(currentTime - lastShake > shakeTimeout)) {
|
|
|
|
// Vibrate if available
|
|
if ('vibrate' in navigator) {
|
|
navigator.vibrate(200);
|
|
}
|
|
|
|
fumble();
|
|
lastShake = currentTime;
|
|
}
|
|
|
|
lastX = current.x;
|
|
lastY = current.y;
|
|
lastZ = current.z;
|
|
lastUpdate = currentTime;
|
|
}
|
|
}
|
|
|
|
// Request permission and start shake detection on mobile
|
|
function initShakeDetection() {
|
|
if (typeof DeviceMotionEvent.requestPermission === 'function') {
|
|
// iOS 13+ requires permission
|
|
DeviceMotionEvent.requestPermission()
|
|
.then(permissionState => {
|
|
if (permissionState === 'granted') {
|
|
window.addEventListener('devicemotion', handleMotion);
|
|
}
|
|
})
|
|
.catch(console.error);
|
|
} else {
|
|
// Non iOS 13+ devices
|
|
window.addEventListener('devicemotion', handleMotion);
|
|
}
|
|
}
|
|
|
|
// Initialize shake detection when page loads
|
|
if ('DeviceMotionEvent' in window) {
|
|
// Add a button to request permission on iOS
|
|
if (typeof DeviceMotionEvent.requestPermission === 'function') {
|
|
const modal = document.getElementById('helpModal');
|
|
const modalContent = modal.querySelector('.modal-content');
|
|
|
|
const permissionButton = document.createElement('button');
|
|
permissionButton.textContent = 'Enable Shake to Fumble';
|
|
permissionButton.className = 'permission-button';
|
|
permissionButton.addEventListener('click', initShakeDetection);
|
|
|
|
modalContent.appendChild(permissionButton);
|
|
} else {
|
|
// Automatically start for non-iOS devices
|
|
initShakeDetection();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |