added basic mobile support
This commit is contained in:
parent
dca71f4729
commit
250617eb67
2 changed files with 139 additions and 6 deletions
38
index.html
38
index.html
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<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>
|
<title>FumbleAround</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link rel="icon" type="image/png" href="./Assets/smily.png">
|
<link rel="icon" type="image/png" href="./Assets/smily.png">
|
||||||
|
|
@ -42,26 +42,52 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<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>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById('fumbleButton').addEventListener('click', async () => {
|
const fumble = () => {
|
||||||
const frame = document.getElementById('contentFrame');
|
const frame = document.getElementById('contentFrame');
|
||||||
// Open wiby.me/surprise directly in the iframe
|
|
||||||
frame.src = 'https://wiby.me/surprise/';
|
frame.src = 'https://wiby.me/surprise/';
|
||||||
|
|
||||||
// Wait for the page to load then focus
|
// Wait for the page to load then focus
|
||||||
frame.onload = () => {
|
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();
|
frame.focus();
|
||||||
// Try to focus the iframe content window if possible
|
|
||||||
try {
|
try {
|
||||||
frame.contentWindow.focus();
|
frame.contentWindow.focus();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Ignore cross-origin errors
|
// Ignore cross-origin errors
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
|
||||||
|
// Handle load errors
|
||||||
|
frame.onerror = () => {
|
||||||
|
fumble(); // Try again if loading fails
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById('fumbleButton').addEventListener('click', fumble);
|
||||||
|
|
||||||
// Dark mode toggle
|
// Dark mode toggle
|
||||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||||
|
|
|
||||||
107
styles.css
107
styles.css
|
|
@ -284,3 +284,110 @@ body {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
line-height: 1.5;
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue