forked from avi/signalelsewhere
Save point: fix word breaking, button overlap, auto-select mobile in APK
This commit is contained in:
36
index.html
36
index.html
@@ -977,8 +977,8 @@
|
||||
|
||||
/* 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; word-break: break-word; }
|
||||
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; overflow-wrap: break-word; word-break: break-word; }
|
||||
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%; }
|
||||
@@ -986,19 +986,19 @@
|
||||
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; word-break: break-word; max-width: 95vw; }
|
||||
html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 10%; }
|
||||
html[data-view="mobile"] #textContainer { font-size: 1.8rem; overflow-wrap: break-word; width: 90vw; }
|
||||
html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 8%; }
|
||||
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: 3rem; top: 1.5rem; left: 1.5rem; }
|
||||
html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; }
|
||||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; word-break: break-word; }
|
||||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 18%; gap: 1rem; }
|
||||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 14%; gap: 1rem; }
|
||||
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.3rem; }
|
||||
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.2rem; }
|
||||
html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 10rem; overflow-wrap: break-word; word-break: break-word; }
|
||||
html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 14rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene4a { padding-top: 0; }
|
||||
html[data-view="mobile"] .hub-title { font-size: 2.4rem; }
|
||||
html[data-view="mobile"] .hub-subtitle { font-size: 1.4rem; }
|
||||
@@ -1018,15 +1018,15 @@ 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; word-break: break-word; }
|
||||
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: 10%; }
|
||||
html[data-view="mobile"] #s8BtnRow { bottom: 10%; }
|
||||
html[data-view="mobile"] #followBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||||
html[data-view="mobile"] #whatIsLabBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||||
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>
|
||||
@@ -1637,8 +1637,16 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
@@ -977,8 +977,8 @@
|
||||
|
||||
/* 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; word-break: break-word; }
|
||||
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; overflow-wrap: break-word; word-break: break-word; }
|
||||
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%; }
|
||||
@@ -986,19 +986,19 @@
|
||||
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; word-break: break-word; max-width: 95vw; }
|
||||
html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 10%; }
|
||||
html[data-view="mobile"] #textContainer { font-size: 1.8rem; overflow-wrap: break-word; width: 90vw; }
|
||||
html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 8%; }
|
||||
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: 3rem; top: 1.5rem; left: 1.5rem; }
|
||||
html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; }
|
||||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; word-break: break-word; }
|
||||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 18%; gap: 1rem; }
|
||||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 14%; gap: 1rem; }
|
||||
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.3rem; }
|
||||
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.2rem; }
|
||||
html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 10rem; overflow-wrap: break-word; word-break: break-word; }
|
||||
html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 14rem; overflow-wrap: break-word; }
|
||||
html[data-view="mobile"] #scene4a { padding-top: 0; }
|
||||
html[data-view="mobile"] .hub-title { font-size: 2.4rem; }
|
||||
html[data-view="mobile"] .hub-subtitle { font-size: 1.4rem; }
|
||||
@@ -1018,15 +1018,15 @@ 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; word-break: break-word; }
|
||||
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: 10%; }
|
||||
html[data-view="mobile"] #s8BtnRow { bottom: 10%; }
|
||||
html[data-view="mobile"] #followBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||||
html[data-view="mobile"] #whatIsLabBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||||
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>
|
||||
@@ -1637,8 +1637,16 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
Reference in New Issue
Block a user