Michael Maurakis
1282bf2bda
settings panel handles things. Also removed open in new tab. CORS blocks any ability to do anything cool with iframes so it will likely have to be reserved for a extension or something of that kind.
466 lines
18 KiB
HTML
466 lines
18 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="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">
|
||
<button id="settingsButton">
|
||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||
<path
|
||
fill="currentColor"
|
||
d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<button id="fumbleButton">Fumble!</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="settingsPanel" class="settings-panel">
|
||
<div class="settings-content">
|
||
<div class="settings-header">
|
||
<h2>Settings</h2>
|
||
<button class="close-settings">×</button>
|
||
</div>
|
||
<div class="settings-section">
|
||
<h3>Display</h3>
|
||
<div class="setting-item" id="darkModeToggleArea">
|
||
<label>Dark Mode</label>
|
||
<button id="darkModeToggle">🌙</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-section">
|
||
<h3>Interactions</h3>
|
||
<div class="setting-item interactions-list">
|
||
<div class="interaction-item">
|
||
<div class="interaction-icon">🖱️</div>
|
||
<div class="interaction-details">
|
||
<h4>Fumble Button</h4>
|
||
<p>Click the "Fumble!" button to discover a new website</p>
|
||
</div>
|
||
</div>
|
||
<div class="interaction-item">
|
||
<div class="interaction-icon">🔄</div>
|
||
<div class="interaction-details">
|
||
<h4>Page Refresh</h4>
|
||
<p>Refresh the page to load a new website</p>
|
||
</div>
|
||
</div>
|
||
<div class="interaction-item">
|
||
<div class="interaction-icon">📱</div>
|
||
<div class="interaction-details">
|
||
<h4>Shake to Fumble</h4>
|
||
<p>
|
||
On mobile devices, shake your phone to discover a new site
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="settings-section">
|
||
<h3>About</h3>
|
||
<div class="setting-item about-section">
|
||
<div class="about-content">
|
||
<div class="about-logo">
|
||
<img src="/Assets/smily.png" alt="FumbleAround Logo" />
|
||
<h4>FumbleAround</h4>
|
||
</div>
|
||
<div class="about-text">
|
||
<p>
|
||
Discover the hidden gems of the internet, powered by Wiby.me's
|
||
search engine.
|
||
</p>
|
||
<div class="disclaimer">
|
||
<h5>Disclaimer</h5>
|
||
<p>
|
||
We are not responsible for the content that appears. Use at
|
||
your own discretion.
|
||
</p>
|
||
</div>
|
||
<div class="tribute">
|
||
<p>
|
||
A homage to the classic StumbleUpon, reimagined for the
|
||
modern web.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="settings-section">
|
||
<h3>License</h3>
|
||
<div class="setting-item license-section">
|
||
<div class="license-content">
|
||
<p>FumbleAround - A modern web discovery tool</p>
|
||
<p>Copyright (c) 2024 Michael Maurakis</p>
|
||
<p>Licensed under the MIT License</p>
|
||
<div class="license-details">
|
||
<button class="license-toggle">View Full License</button>
|
||
<div class="full-license" style="display: none">
|
||
<p>
|
||
Permission is hereby granted, free of charge, to any person
|
||
obtaining a copy of this software and associated
|
||
documentation files (the "Software"), to deal in the
|
||
Software without restriction, including without limitation
|
||
the rights to use, copy, modify, merge, publish, distribute,
|
||
sublicense, and/or sell copies of the Software, and to
|
||
permit persons to whom the Software is furnished to do so,
|
||
subject to the following conditions:
|
||
</p>
|
||
<p>
|
||
The above copyright notice and this permission notice shall
|
||
be included in all copies or substantial portions of the
|
||
Software.
|
||
</p>
|
||
<p>
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
|
||
KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
|
||
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
||
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
||
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="warningModal" class="modal warning-modal">
|
||
<div class="modal-content">
|
||
<span class="close-button" style="display: none">×</span>
|
||
<h2>⚠️ Slow Down!</h2>
|
||
<p>Clicking too quickly may get you flagged as spam by Wiby.me.</p>
|
||
<p>Please wait a moment between fumbles.</p>
|
||
<div id="cooldownTimer" class="cooldown-timer">
|
||
You can close this warning in: <span id="cooldownSeconds">5</span>s
|
||
</div>
|
||
<button id="warningCloseBtn" class="warning-close-btn" disabled>
|
||
I Understand
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<main>
|
||
<iframe
|
||
id="contentFrame"
|
||
src="landing.html"
|
||
title="Content"
|
||
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
||
></iframe>
|
||
</main>
|
||
|
||
<script>
|
||
if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
|
||
if (sessionStorage.getItem("hasVisited")) {
|
||
window.stop();
|
||
requestAnimationFrame(() => fumble());
|
||
}
|
||
} else if (!sessionStorage.getItem("hasVisited")) {
|
||
sessionStorage.setItem("hasVisited", "true");
|
||
}
|
||
|
||
let lastFumbleTime = 0;
|
||
const cooldownPeriod = 5000; // 5 seconds cooldown
|
||
let cooldownTimer = null;
|
||
|
||
const fumble = () => {
|
||
const currentTime = Date.now();
|
||
const timeSinceLastFumble = currentTime - lastFumbleTime;
|
||
|
||
if (timeSinceLastFumble < cooldownPeriod) {
|
||
// Show warning modal
|
||
const warningModal = document.getElementById("warningModal");
|
||
const cooldownSeconds = document.getElementById("cooldownSeconds");
|
||
const closeBtn = document.getElementById("warningCloseBtn");
|
||
warningModal.classList.add("show");
|
||
closeBtn.disabled = true;
|
||
|
||
// Update countdown timer
|
||
let remainingTime = 5; // 5 second countdown for closing
|
||
cooldownSeconds.textContent = remainingTime;
|
||
|
||
if (cooldownTimer) clearInterval(cooldownTimer);
|
||
cooldownTimer = setInterval(() => {
|
||
remainingTime--;
|
||
|
||
if (remainingTime <= 0) {
|
||
cooldownSeconds.textContent = "0";
|
||
closeBtn.disabled = false;
|
||
clearInterval(cooldownTimer);
|
||
} else {
|
||
cooldownSeconds.textContent = remainingTime;
|
||
}
|
||
}, 1000);
|
||
|
||
return;
|
||
}
|
||
|
||
lastFumbleTime = currentTime;
|
||
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 darkModeToggleArea = document.getElementById("darkModeToggleArea");
|
||
const body = document.body;
|
||
|
||
// Check for saved preference
|
||
if (localStorage.getItem("darkMode") === "true") {
|
||
body.classList.add("dark-mode");
|
||
darkModeToggle.textContent = "☀️";
|
||
}
|
||
|
||
const toggleDarkMode = () => {
|
||
body.classList.toggle("dark-mode");
|
||
const isDark = body.classList.contains("dark-mode");
|
||
darkModeToggle.textContent = isDark ? "☀️" : "🌙";
|
||
localStorage.setItem("darkMode", isDark);
|
||
};
|
||
|
||
darkModeToggle.addEventListener("click", toggleDarkMode);
|
||
darkModeToggleArea.addEventListener("click", toggleDarkMode);
|
||
|
||
// 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");
|
||
});
|
||
|
||
// Update the settings panel click handlers
|
||
const settingsPanel = document.getElementById('settingsPanel');
|
||
const settingsButton = document.getElementById('settingsButton');
|
||
const closeSettings = document.querySelector('.close-settings');
|
||
const settingsContent = settingsPanel.querySelector('.settings-content');
|
||
|
||
const closeSettingsPanel = () => {
|
||
settingsPanel.classList.remove('show');
|
||
};
|
||
|
||
settingsButton.addEventListener('click', (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
settingsPanel.classList.add('show');
|
||
});
|
||
|
||
closeSettings.addEventListener('click', closeSettingsPanel);
|
||
|
||
// Handle clicks on the document
|
||
document.addEventListener('click', (event) => {
|
||
if (settingsPanel.classList.contains('show') &&
|
||
!settingsContent.contains(event.target) &&
|
||
!settingsButton.contains(event.target)) {
|
||
closeSettingsPanel();
|
||
}
|
||
});
|
||
|
||
// Prevent clicks inside settings from closing
|
||
settingsContent.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
});
|
||
|
||
// Update warning modal close handler
|
||
const warningModal = document.getElementById("warningModal");
|
||
const warningCloseBtn = document.getElementById("warningCloseBtn");
|
||
|
||
warningCloseBtn.addEventListener("click", () => {
|
||
if (!warningCloseBtn.disabled) {
|
||
warningModal.classList.remove("show");
|
||
if (cooldownTimer) clearInterval(cooldownTimer);
|
||
}
|
||
});
|
||
|
||
// Remove the click-outside-to-close functionality for warning modal
|
||
window.addEventListener("click", (event) => {
|
||
if (event.target === warningModal) {
|
||
// Only for warning modal
|
||
warningModal.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 settingsPanel = document.getElementById("settingsPanel");
|
||
const settingsContent =
|
||
settingsPanel.querySelector(".settings-content");
|
||
|
||
const permissionButton = document.createElement("button");
|
||
permissionButton.textContent = "Enable Shake to Fumble";
|
||
permissionButton.className = "permission-button";
|
||
permissionButton.addEventListener("click", initShakeDetection);
|
||
|
||
settingsContent.appendChild(permissionButton);
|
||
} else {
|
||
// Automatically start for non-iOS devices
|
||
initShakeDetection();
|
||
}
|
||
}
|
||
|
||
const licenseToggle = document.querySelector(".license-toggle");
|
||
const fullLicense = document.querySelector(".full-license");
|
||
|
||
licenseToggle.addEventListener("click", () => {
|
||
const isHidden = fullLicense.style.display === "none";
|
||
fullLicense.style.display = isHidden ? "block" : "none";
|
||
licenseToggle.textContent = isHidden
|
||
? "Hide Full License"
|
||
: "View Full License";
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|