michael/FumbleAround
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added basic mobile support

Browse source
This commit is contained in:
Michael Andrew Maurakis 2025-01-19 23:21:32 -06:00
parent dca71f4729
commit 250617eb67
2 changed files with 139 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
@ -42,26 +42,52 @@
</div>
<main>
<iframe id="contentFrame" src="about:blank" title="Content"></iframe>
<iframe
id="contentFrame"
src="about:blank"
title="Content"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
></iframe>
</main>
<script>
document.getElementById('fumbleButton').addEventListener('click', async () => {
const fumble = () => {
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 = () => {
// 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 to focus the iframe content window if possible
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');

107
styles.css
View file

@ -283,4 +283,111 @@ body {
.modal-content p {
margin-bottom: 15px;
line-height: 1.5;
}
@media (max-width: 768px) {
header {
padding: 0.75rem 1rem;
flex-direction: column;
gap: 1rem;
}
.header-buttons {
width: 100%;
justify-content: space-between;
}
.logo {
font-size: 20px;
}
.logo-icon {
width: 36px;
height: 36px;
}
.social-buttons {
gap: 0.5rem;
}
#fumbleButton {
padding: 8px 20px;
font-size: 14px;
}
.app-controls {
padding: 3px;
}
#darkModeToggle, #helpButton, #donateButton, #githubButton {
padding: 6px;
font-size: 16px;
}
#githubButton svg {
width: 20px;
height: 20px;
}
.modal-content {
width: 90%;
margin: -300px auto 0;
padding: 15px;
}
.modal.show .modal-content {
margin-top: 80px;
}
.modal-content h2 {
font-size: 1.5rem;
}
.modal-content p {
font-size: 0.9rem;
}
.close-button {
right: 15px;
top: 8px;
}
}
/* Add touch-specific improvements */
@media (hover: none) {
#fumbleButton:hover {
transform: none;
background-color: #ff4500;
}
.dark-mode #fumbleButton:hover {
background-color: #ff6b4a;
}
#darkModeToggle:hover,
#helpButton:hover,
#donateButton:hover,
#githubButton:hover {
transform: none;
}
/* Active states for touch devices */
#fumbleButton:active,
#darkModeToggle:active,
#helpButton:active,
#donateButton:active,
#githubButton:active {
transform: scale(0.95);
}
}
/* Prevent pull-to-refresh on mobile */
html, body {
overscroll-behavior-y: contain;
}
/* Improve tap target sizes */
button {
min-width: 44px;
min-height: 44px;
}