From a56d534964c82a880ee1623d74df53715464aff5 Mon Sep 17 00:00:00 2001 From: avi Date: Mon, 18 May 2026 10:52:58 -0500 Subject: [PATCH] Save point: add dedicated desktop view CSS with explicit data-view='desktop' --- index.html | 40 +++++++++++++++++++++++++++++++++++----- www/index.html | 40 +++++++++++++++++++++++++++++++++++----- 2 files changed, 70 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 96bbf09..b92b30f 100644 --- a/index.html +++ b/index.html @@ -1029,6 +1029,40 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; } 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; } + + /* Desktop view overrides */ + html[data-view="desktop"] .scene { font-size: 1.4rem; padding: 3rem; } + html[data-view="desktop"] .scene4text, + html[data-view="desktop"] .scene5text, + html[data-view="desktop"] .scene7text, + html[data-view="desktop"] .scene8text, + html[data-view="desktop"] .s4visual, + html[data-view="desktop"] .s5visual, + html[data-view="desktop"] .s4tl { max-width: 60rem; } + html[data-view="desktop"] .comp-table { font-size: 1rem; max-width: 60rem; } + html[data-view="desktop"] .comp-table th, + html[data-view="desktop"] .comp-table td { padding: 0.6rem 1rem; } + html[data-view="desktop"] .scene4sub { padding: 3rem 3rem 7rem; } + html[data-view="desktop"] #scene3 { padding: 4rem 3rem; } + html[data-view="desktop"] #scene3Title { font-size: 3.5rem; top: 2.5rem; left: 2.5rem; } + html[data-view="desktop"] #scene3Text, + html[data-view="desktop"] #textContainer { max-width: 60rem; } + html[data-view="desktop"] #textContainer { font-size: 1.6rem; } + html[data-view="desktop"] .hub-title { font-size: 2.5rem; } + html[data-view="desktop"] .callout-box { font-size: 1.3rem; padding: 1.5rem 2rem; } + html[data-view="desktop"] #scene2Line1, + html[data-view="desktop"] #scene2Message2 { font-size: 1.4rem; } + html[data-view="desktop"] .scene3ChoiceBtn { font-size: 1.1rem; padding: 1.2rem 2.5rem; } + html[data-view="desktop"] #meshCanvas, + html[data-view="desktop"] #deskCanvas, + html[data-view="desktop"] #phoneCanvas, + html[data-view="desktop"] #exfilCanvas, + html[data-view="desktop"] #exfilDeskCanvas { max-height: 480px; } + html[data-view="desktop"] .punch-card { font-size: 0.95rem; padding: 1.2rem; } + html[data-view="desktop"] .punch-card .punch-icon { font-size: 1.8rem; } + html[data-view="desktop"] .scene3ChoiceBtn:hover, + html[data-view="desktop"] .btnNext:hover, + html[data-view="desktop"] .hub-btn:hover { box-shadow: 0 0 12px rgba(0,255,0,0.2); } @@ -1613,11 +1647,7 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; } let introStarted = false; function setView(mode) { - if (mode === 'mobile') { - document.documentElement.setAttribute('data-view', 'mobile'); - } else { - document.documentElement.removeAttribute('data-view'); - } + document.documentElement.setAttribute('data-view', mode); sessionStorage.setItem('signalView', mode); } diff --git a/www/index.html b/www/index.html index 96bbf09..b92b30f 100644 --- a/www/index.html +++ b/www/index.html @@ -1029,6 +1029,40 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; } 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; } + + /* Desktop view overrides */ + html[data-view="desktop"] .scene { font-size: 1.4rem; padding: 3rem; } + html[data-view="desktop"] .scene4text, + html[data-view="desktop"] .scene5text, + html[data-view="desktop"] .scene7text, + html[data-view="desktop"] .scene8text, + html[data-view="desktop"] .s4visual, + html[data-view="desktop"] .s5visual, + html[data-view="desktop"] .s4tl { max-width: 60rem; } + html[data-view="desktop"] .comp-table { font-size: 1rem; max-width: 60rem; } + html[data-view="desktop"] .comp-table th, + html[data-view="desktop"] .comp-table td { padding: 0.6rem 1rem; } + html[data-view="desktop"] .scene4sub { padding: 3rem 3rem 7rem; } + html[data-view="desktop"] #scene3 { padding: 4rem 3rem; } + html[data-view="desktop"] #scene3Title { font-size: 3.5rem; top: 2.5rem; left: 2.5rem; } + html[data-view="desktop"] #scene3Text, + html[data-view="desktop"] #textContainer { max-width: 60rem; } + html[data-view="desktop"] #textContainer { font-size: 1.6rem; } + html[data-view="desktop"] .hub-title { font-size: 2.5rem; } + html[data-view="desktop"] .callout-box { font-size: 1.3rem; padding: 1.5rem 2rem; } + html[data-view="desktop"] #scene2Line1, + html[data-view="desktop"] #scene2Message2 { font-size: 1.4rem; } + html[data-view="desktop"] .scene3ChoiceBtn { font-size: 1.1rem; padding: 1.2rem 2.5rem; } + html[data-view="desktop"] #meshCanvas, + html[data-view="desktop"] #deskCanvas, + html[data-view="desktop"] #phoneCanvas, + html[data-view="desktop"] #exfilCanvas, + html[data-view="desktop"] #exfilDeskCanvas { max-height: 480px; } + html[data-view="desktop"] .punch-card { font-size: 0.95rem; padding: 1.2rem; } + html[data-view="desktop"] .punch-card .punch-icon { font-size: 1.8rem; } + html[data-view="desktop"] .scene3ChoiceBtn:hover, + html[data-view="desktop"] .btnNext:hover, + html[data-view="desktop"] .hub-btn:hover { box-shadow: 0 0 12px rgba(0,255,0,0.2); } @@ -1613,11 +1647,7 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; } let introStarted = false; function setView(mode) { - if (mode === 'mobile') { - document.documentElement.setAttribute('data-view', 'mobile'); - } else { - document.documentElement.removeAttribute('data-view'); - } + document.documentElement.setAttribute('data-view', mode); sessionStorage.setItem('signalView', mode); }