forked from avi/signalelsewhere
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9e86ff94e9 | |||
| fc19f9a00a | |||
| 62ccf26c0e | |||
| 7eafd34e84 | |||
| 4650ff0eaf | |||
| 9b88861d0f | |||
| a3ee05acca | |||
| cef24e170c | |||
| 565c61600f | |||
| e8aef45cf3 |
144
index.html
144
index.html
@@ -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, user-scalable=no">
|
||||
<title>Signal Elsewhere</title>
|
||||
<style>
|
||||
* {
|
||||
@@ -975,55 +975,60 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile view overrides (tuned for large 2.5' x 4' display) */
|
||||
html[data-view="mobile"] .scene { font-size: 1.6rem; padding: 1.5rem; }
|
||||
html[data-view="mobile"] .scene4text { max-width: 100%; }
|
||||
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 100%; }
|
||||
html[data-view="mobile"] .s5visual { max-width: 100%; }
|
||||
html[data-view="mobile"] .s4tl { max-width: 100%; margin-bottom: 0.8rem; padding: 0.5rem 0; }
|
||||
html[data-view="mobile"] .comp-table { font-size: 1.1rem; max-width: 100%; }
|
||||
html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.6rem 0.8rem; }
|
||||
html[data-view="mobile"] .tl-year { font-size: 0.95rem; }
|
||||
html[data-view="mobile"] .tl-year::after { width: 8px; height: 8px; bottom: -0.4rem; }
|
||||
html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 12%; }
|
||||
html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
|
||||
/* Mobile view overrides (tuned for large 2.5' x 4' vertical display) */
|
||||
html[data-view="mobile"] .scene { font-size: 1.8rem; padding: 2rem; }
|
||||
html[data-view="mobile"] .scene4text { max-width: 90%; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] .s5visual { max-width: 90%; }
|
||||
html[data-view="mobile"] .s4tl { max-width: 90%; margin-bottom: 1rem; padding: 0.5rem 0; }
|
||||
html[data-view="mobile"] .comp-table { font-size: 1.2rem; max-width: 90%; }
|
||||
html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.5rem 0.6rem; }
|
||||
html[data-view="mobile"] .tl-year { font-size: 1rem; }
|
||||
html[data-view="mobile"] .tl-year::after { width: 10px; height: 10px; bottom: -0.4rem; }
|
||||
html[data-view="mobile"] .typewriter-line { white-space: normal; }
|
||||
html[data-view="mobile"] #textContainer { font-size: 1.8rem; overflow-wrap: break-word; width: 90vw; }
|
||||
html[data-view="mobile"] .btn-row { position: static; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; transform: none; width: 100%; }
|
||||
html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }
|
||||
html[data-view="mobile"] #scene10e .btnNext { padding: 1rem 2rem; }
|
||||
html[data-view="mobile"] #scene3Title { font-size: 2.8rem; top: 1.5rem; left: 1.5rem; }
|
||||
html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; }
|
||||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; }
|
||||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 20%; gap: 1rem; }
|
||||
html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.4rem; }
|
||||
html[data-view="mobile"] #scene3Title { font-size: 3rem; top: 1.5rem; left: 1.5rem; }
|
||||
html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem 12rem; }
|
||||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; position: static; gap: 1rem; width: 100%; align-items: center; margin-top: 2rem; transform: none; }
|
||||
html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.6rem; }
|
||||
html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.8rem; }
|
||||
html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.2rem; }
|
||||
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2rem; }
|
||||
html[data-view="mobile"] .scene4sub { padding: 1rem 1rem 8rem; }
|
||||
html[data-view="mobile"] #scene4a { padding-top: 0; }
|
||||
html[data-view="mobile"] .hub-title { font-size: 2.2rem; }
|
||||
html[data-view="mobile"] .hub-subtitle { font-size: 1.3rem; }
|
||||
html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.3rem; }
|
||||
html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.3rem; }
|
||||
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.2rem; }
|
||||
html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 16rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene4a { padding-top: 0; justify-content: flex-start; }
|
||||
html[data-view="mobile"] .hub-title { font-size: 2.4rem; }
|
||||
html[data-view="mobile"] .hub-subtitle { font-size: 1.4rem; }
|
||||
html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.4rem; }
|
||||
html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; }
|
||||
html[data-view="mobile"] #sceneRefs h2 { font-size: 1.6rem; }
|
||||
html[data-view="mobile"] #sceneRefs li { font-size: 1.1rem; }
|
||||
html[data-view="mobile"] #sceneRefs h2 { font-size: 1.8rem; }
|
||||
html[data-view="mobile"] #sceneRefs li { font-size: 1.2rem; }
|
||||
html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 1.2rem; max-height: 90vh; }
|
||||
html[data-view="mobile"] .callout-box { font-size: 1.2rem; padding: 1rem 1.2rem; }
|
||||
html[data-view="mobile"] .callout-box { font-size: 1.3rem; padding: 1rem 1.2rem; }
|
||||
html[data-view="mobile"] #foodOverlay .food-box { padding: 2rem; }
|
||||
html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.6rem; }
|
||||
html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.3rem; padding: 1rem 1.5rem; }
|
||||
html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.3rem; padding: 1rem 1.5rem; }
|
||||
html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 1.8rem; }
|
||||
html[data-view="mobile"] canvas { max-height: 350px; }
|
||||
html[data-view="mobile"] #scene2Line1 { font-size: 1.6rem; padding: 1.5rem; }
|
||||
html[data-view="mobile"] #scene2Message2 { font-size: 1.6rem; }
|
||||
html[data-view="mobile"] #textContainer { font-size: 1.6rem; }
|
||||
html[data-view="mobile"] .coin-grid { max-width: 20rem; gap: 5px; }
|
||||
html[data-view="mobile"] .scene5text { font-size: 1.4rem; }
|
||||
html[data-view="mobile"] .hash-bar { height: 3.5rem; }
|
||||
html[data-view="mobile"] #s7BtnRow { bottom: 12%; }
|
||||
html[data-view="mobile"] #s8BtnRow { bottom: 12%; }
|
||||
html[data-view="mobile"] #followBtn { bottom: 12%; font-size: 1.3rem; padding: 1rem 3rem; }
|
||||
html[data-view="mobile"] #whatIsLabBtn { bottom: 12%; font-size: 1.3rem; padding: 1rem 3rem; }
|
||||
html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
|
||||
html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
|
||||
html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.8rem; }
|
||||
html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; }
|
||||
html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; }
|
||||
html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 2rem; }
|
||||
html[data-view="mobile"] #meshCanvas,
|
||||
html[data-view="mobile"] #deskCanvas,
|
||||
html[data-view="mobile"] #phoneCanvas,
|
||||
html[data-view="mobile"] #exfilCanvas,
|
||||
html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
|
||||
html[data-view="mobile"] #scene2Line1 { font-size: 1.8rem; padding: 1.5rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene2Message2 { font-size: 1.8rem; }
|
||||
html[data-view="mobile"] .coin-grid { max-width: 24rem; gap: 5px; }
|
||||
html[data-view="mobile"] .scene5text { font-size: 1.5rem; }
|
||||
html[data-view="mobile"] .hash-bar { height: 4rem; }
|
||||
html[data-view="mobile"] #s7BtnRow { bottom: 8%; }
|
||||
html[data-view="mobile"] #s8BtnRow { bottom: 8%; }
|
||||
html[data-view="mobile"] #followBtn { bottom: 8%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||||
html[data-view="mobile"] #whatIsLabBtn { bottom: 8%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||||
html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }
|
||||
html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -1632,8 +1637,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Show view selector overlay on every page load
|
||||
document.getElementById('viewOverlay').classList.add('visible');
|
||||
// Auto-select mobile view in Android APK, otherwise show view selector
|
||||
const isCapacitor = typeof window.Capacitor !== 'undefined';
|
||||
const isAndroidApp = isCapacitor || /android/i.test(navigator.userAgent);
|
||||
if (isAndroidApp) {
|
||||
setView('mobile');
|
||||
viewChosen = true;
|
||||
document.getElementById('switchViewBtn').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('viewOverlay').classList.add('visible');
|
||||
}
|
||||
|
||||
// Matrix rain configuration
|
||||
const fontSize = window.innerWidth < 480 ? 10 : 14;
|
||||
let columns;
|
||||
let drops = [];
|
||||
|
||||
// Canvas setup for Matrix rain
|
||||
const canvas = document.getElementById('matrixCanvas');
|
||||
@@ -1642,14 +1660,17 @@
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
if (fontSize) {
|
||||
columns = Math.floor(canvas.width / fontSize);
|
||||
drops = Array(columns).fill(0).map(() => Math.floor(Math.random() * canvas.height / fontSize));
|
||||
}
|
||||
}
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
// Matrix rain configuration
|
||||
const fontSize = window.innerWidth < 480 ? 10 : 14;
|
||||
let columns = Math.floor(canvas.width / fontSize);
|
||||
let drops = [];
|
||||
|
||||
// Force an extra resize after fonts/viewport settle
|
||||
setTimeout(resizeCanvas, 100);
|
||||
setTimeout(resizeCanvas, 500);
|
||||
const chars = '0123456789@#$%^&*()';
|
||||
const rainDuration = 5000; // 5 seconds
|
||||
let rainActive = false;
|
||||
@@ -1707,7 +1728,7 @@
|
||||
if (y > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
drops[i] += 0.5;
|
||||
drops[i] += isAndroidApp ? 0.25 : 0.5;
|
||||
}
|
||||
|
||||
// End rain after duration
|
||||
@@ -5815,6 +5836,23 @@
|
||||
showTechHub();
|
||||
});
|
||||
|
||||
// Double-click/tap to skip scene (same as Escape on desktop)
|
||||
if (isAndroidApp) {
|
||||
let lastTapTime = 0;
|
||||
document.addEventListener('touchend', (e) => {
|
||||
const now = Date.now();
|
||||
if (lastTapTime > 0 && now - lastTapTime < 400) {
|
||||
e.preventDefault();
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
||||
}
|
||||
lastTapTime = now;
|
||||
});
|
||||
} else {
|
||||
document.addEventListener('dblclick', () => {
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard shortcuts for testing
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
../index.html
|
||||
6813
www/index.html
Normal file
6813
www/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user