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

Compare commits

base: michael:dca71f472993e9d358ed9899907db9c7de5d3b43
Branches Tags
michael:master
...
compare: michael:2618d9cc1489171b67981990a8924f0d3759e166
Branches Tags
michael:master

3 commits
dca71f4729 ... 2618d9cc14

Author SHA1 Message Date
Michael Maurakis
2618d9cc14 added tags to allow usage as a pwa 2025-01-19 23:30:59 -06:00
Michael Maurakis
2f2035bf35 portrait mode now hides logo and moves fumble to the bottom for 
reachablithy.
 2025-01-19 23:24:14 -06:00
Michael Maurakis
250617eb67 added basic mobile support 2025-01-19 23:21:32 -06:00
3 changed files with 196 additions and 7 deletions
Show stats Expand all files Collapse all files

55
index.html
View file

@ -2,10 +2,27 @@
<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">
<!-- 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>
@ -42,26 +59,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');

20
manifest.json
View file

@ -1,8 +1,26 @@
{
"manifest_version": 3,
"name": "FumbleUpon",
"name": "FumbleAround",
"short_name": "FumbleAround",
"version": "1.0",
"description": "Discover random websites, just like StumbleUpon used to do!",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "./Assets/smily.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./Assets/smily.png",
"sizes": "512x512",
"type": "image/png"
}
],
"permissions": [],
"content_scripts": [
{

128
styles.css
View file

@ -283,4 +283,132 @@ body {
.modal-content p {
margin-bottom: 15px;
line-height: 1.5;
}
@media (max-width: 768px) {
body {
flex-direction: column-reverse;
/* Add padding for iOS safe areas */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
header {
padding: 0.75rem 1rem;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.dark-mode header {
background-color: rgba(26, 26, 26, 0.95);
}
.logo {
display: none;
}
.header-buttons {
width: 100%;
justify-content: space-between;
margin: 0;
}
main {
height: 100vh;
}
#contentFrame {
height: calc(100% - 60px - env(safe-area-inset-bottom));
}
.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 adjustments for bottom header */
.modal-content {
width: 90%;
margin: -300px auto 0;
padding: 15px;
margin-bottom: 80px; /* Add space for bottom header */
}
.modal.show .modal-content {
margin-top: 60px;
}
.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;
}