-
-
Disclaimer
-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.
-This project is a homage to the classic StumbleUpon, reimagined for the modern web.
+
+
@@ -93,6 +128,7 @@
let lastFumbleTime = 0;
const cooldownPeriod = 5000; // 5 seconds cooldown
let cooldownTimer = null;
+ let currentPageUrl = null; // Add this to store the current URL
const fumble = () => {
const currentTime = Date.now();
@@ -132,20 +168,23 @@
// Wait for the page to load then focus
frame.onload = () => {
- // Check if we landed on a blocked/error page
try {
+ // Store the actual URL after redirect
+ currentPageUrl = frame.contentWindow.location.href;
+
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
+ currentPageUrl = null; // Reset if we hit an error
fumble();
return;
}
} catch (e) {
- // Can't access title due to CORS - assume page is OK
+ // Can't access due to CORS
+ currentPageUrl = null;
}
frame.focus();
@@ -191,17 +230,25 @@
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');
+ // Add settings button click handler
+ const settingsPanel = document.getElementById('settingsPanel');
+ const settingsButton = document.getElementById('settingsButton');
+ const closeSettings = document.querySelector('.close-settings');
+
+ settingsButton.addEventListener('click', () => {
+ settingsPanel.classList.add('show');
+ });
+
+ closeSettings.addEventListener('click', () => {
+ settingsPanel.classList.remove('show');
});
- closeButton.addEventListener('click', () => {
- modal.classList.remove('show');
+ // Update the open in new window handler
+ document.getElementById('openInNewWindow').addEventListener('click', () => {
+ if (currentPageUrl) {
+ window.open(currentPageUrl, '_blank');
+ settingsPanel.classList.remove('show');
+ }
});
// Update warning modal close handler
@@ -217,8 +264,8 @@
// Remove the click-outside-to-close functionality for warning modal
window.addEventListener('click', (event) => {
- if (event.target === modal) { // Only for help modal
- modal.classList.remove('show');
+ if (event.target === warningModal) { // Only for warning modal
+ warningModal.classList.remove('show');
}
});
@@ -283,15 +330,15 @@
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 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);
- modalContent.appendChild(permissionButton);
+ settingsContent.appendChild(permissionButton);
} else {
// Automatically start for non-iOS devices
initShakeDetection();
diff --git a/styles.css b/styles.css
index 5e7d2b2..f7355e0 100644
--- a/styles.css
+++ b/styles.css
@@ -507,4 +507,223 @@ button {
.dark-mode .warning-close-btn:not(:disabled):hover {
background-color: #ff7c5c;
+}
+
+.settings-panel {
+ position: fixed;
+ top: 0;
+ right: -400px;
+ width: 400px;
+ height: 100vh;
+ background-color: #ffffff;
+ box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+ transition: right 0.3s ease;
+ z-index: 2000;
+ overflow-y: auto;
+}
+
+.dark-mode .settings-panel {
+ background-color: #1a1a1a;
+ color: #ffffff;
+}
+
+.settings-panel.show {
+ right: 0;
+}
+
+.settings-content {
+ padding: 20px;
+}
+
+.settings-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eee;
+}
+
+.dark-mode .settings-header {
+ border-bottom-color: #333;
+}
+
+.close-settings {
+ background: none;
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ color: #666;
+ padding: 5px;
+}
+
+.dark-mode .close-settings {
+ color: #999;
+}
+
+.settings-section {
+ margin-bottom: 30px;
+}
+
+.settings-section h3 {
+ margin-bottom: 15px;
+ color: #ff4500;
+}
+
+.dark-mode .settings-section h3 {
+ color: #ff6b4a;
+}
+
+.setting-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+ padding: 10px;
+ background: #f5f5f5;
+ border-radius: 8px;
+}
+
+.dark-mode .setting-item {
+ background: #2a2a2a;
+}
+
+.settings-button {
+ width: 100%;
+ padding: 10px;
+ background-color: #ff4500;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.dark-mode .settings-button {
+ background-color: #ff6b4a;
+}
+
+.settings-button:hover {
+ background-color: #ff5722;
+}
+
+@media (max-width: 768px) {
+ .settings-panel {
+ width: 100%;
+ right: -100%;
+ }
+}
+
+#settingsButton {
+ padding: 8px;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.2s;
+}
+
+#settingsButton svg {
+ width: 24px;
+ height: 24px;
+ color: #333;
+ transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.dark-mode #settingsButton svg {
+ color: #fff;
+}
+
+#settingsButton:hover svg {
+ transform: rotate(30deg);
+}
+
+#settingsButton:active svg {
+ transform: rotate(180deg);
+}
+
+@media (hover: none) {
+ #settingsButton:hover svg {
+ transform: none;
+ }
+}
+
+.about-section {
+ flex-direction: column;
+ padding: 20px;
+}
+
+.about-content {
+ width: 100%;
+ text-align: center;
+}
+
+.about-logo {
+ margin-bottom: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+}
+
+.about-logo img {
+ width: 64px;
+ height: 64px;
+ border-radius: 12px;
+}
+
+.about-logo h4 {
+ font-size: 1.2em;
+ margin: 0;
+ color: #ff4500;
+}
+
+.dark-mode .about-logo h4 {
+ color: #ff6b4a;
+}
+
+.about-text {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.about-text p {
+ margin: 0;
+ line-height: 1.5;
+}
+
+.disclaimer {
+ background: rgba(255, 69, 0, 0.1);
+ padding: 15px;
+ border-radius: 8px;
+ margin: 10px 0;
+}
+
+.dark-mode .disclaimer {
+ background: rgba(255, 107, 74, 0.1);
+}
+
+.disclaimer h5 {
+ color: #ff4500;
+ margin: 0 0 10px 0;
+ font-size: 1em;
+}
+
+.dark-mode .disclaimer h5 {
+ color: #ff6b4a;
+}
+
+.tribute {
+ font-style: italic;
+ opacity: 0.8;
+ padding-top: 10px;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode .tribute {
+ border-top-color: rgba(255, 255, 255, 0.1);
}
\ No newline at end of file
+
+
+ Settings
+ +
+
+ Display
+
+
+
+
+
+
+ Actions
+
+
+
+
+
About
+
+
+
+
+
+ 
+
+
+ FumbleAround
+
+
+ Discover the hidden gems of the internet, powered by Wiby.me's search engine.
+
+
+ Disclaimer
+We are not responsible for the content that appears. Use at your own discretion.
+
+
+ A homage to the classic StumbleUpon, reimagined for the modern web.
+