Compare commits
3 commits
dca71f4729
...
2618d9cc14
| Author | SHA1 | Date | |
|---|---|---|---|
| 2618d9cc14 | |||
| 2f2035bf35 | |||
| 250617eb67 |
3 changed files with 196 additions and 7 deletions
55
index.html
55
index.html
|
|
@ -2,10 +2,27 @@
|
||||||
<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">
|
||||||
|
|
||||||
|
<!-- 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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -42,26 +59,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');
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,26 @@
|
||||||
{
|
{
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "FumbleUpon",
|
"name": "FumbleAround",
|
||||||
|
"short_name": "FumbleAround",
|
||||||
"version": "1.0",
|
"version": "1.0",
|
||||||
"description": "Discover random websites, just like StumbleUpon used to do!",
|
"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": [],
|
"permissions": [],
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
128
styles.css
128
styles.css
|
|
@ -284,3 +284,131 @@ body {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
line-height: 1.5;
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue