From 3af9706f87d1d79f2bfeb069578d2b5e03bc629f Mon Sep 17 00:00:00 2001 From: Alex Hope-O'Connor Date: Sat, 2 May 2026 21:11:35 +1000 Subject: [PATCH] Portal UI: design tokens, cards, nav, WiFi scan rows - Replace legacy centered stylesheet with CSS variables, layout shell, pill navigation with active state, cards, form fields, buttons. - Restructure SPA markup (hero, page heads, scan list as tap rows). - Shell dialog buttons use wm-btn classes for consistent styling. --- lib/WiFiManager/include/templates/CSS.h | 194 ++++++++++++++---- .../include/templates/PortalAppJS.h | 149 ++++++++------ lib/WiFiManager/include/templates/RootShell.h | 4 +- 3 files changed, 249 insertions(+), 98 deletions(-) diff --git a/lib/WiFiManager/include/templates/CSS.h b/lib/WiFiManager/include/templates/CSS.h index 3345e5e..76eb2f5 100644 --- a/lib/WiFiManager/include/templates/CSS.h +++ b/lib/WiFiManager/include/templates/CSS.h @@ -14,51 +14,169 @@ #include const char CSS_STYLE[] PROGMEM = ""; #endif // _CSS_TEMPLATES_H_ - diff --git a/lib/WiFiManager/include/templates/PortalAppJS.h b/lib/WiFiManager/include/templates/PortalAppJS.h index 9193087..02db9f3 100644 --- a/lib/WiFiManager/include/templates/PortalAppJS.h +++ b/lib/WiFiManager/include/templates/PortalAppJS.h @@ -77,7 +77,7 @@ function setView(html){ if(!a)return; stopWifiScanPolling(); stopWifiConnectPolling(); - a.innerHTML="
"+html+"
"; + a.innerHTML="
"+html+"
"; bindPortalChromeEvents(); bindFormSubmitHandlers(); } @@ -90,13 +90,15 @@ function renderMetaField(f){ var nm=f.name||f.id||''; var domId=(id==='s')?'wm-s':(id==='p')?'wm-p':('wm-f-'+id); var t=f.type||'text'; - var h=''; + var h='
'; + h+=''; h+='Info";} - if(f.showUpdate){h+=" · Update";} - if(boot.showBack){h+=" · Back";} - h+="

"; + var h=""; return h; } function deviceActionsHtml(){ var f=boot.features||{}; var h='', ok=false; - if(f.showRestart){h+="

";ok=true;} - if(f.showExitPortal){h+="

";ok=true;} - if(f.showCloseCaptive){h+="

";ok=true;} + if(f.showRestart){h+="";ok=true;} + if(f.showExitPortal){h+="";ok=true;} + if(f.showCloseCaptive){h+="";ok=true;} if(!ok)return''; - return "

Device actions

"+h+"
"; + return "

Device

"+h+"
"; } function viewHome(){ var sub=esc(boot.subtitle||''); var t=esc(boot.title||'WiFiManager'); - var html=navBar(); - html+="

"+t+"

"+sub+"

"; - if(boot.initialStatus)html+="

"+esc(boot.initialStatus)+"

"; - html+="

Use the links above to configure WiFi, view device info, or update firmware.

"; + var html=navBar('home'); + html+="

"+t+"

"; + if(sub)html+="

"+sub+"

"; + html+="
"; + if(boot.initialStatus){ + html+="

"+esc(boot.initialStatus)+"

"; + } + html+="

Get started

"; + html+="

Use WiFi to scan networks and connect. Open Info for addresses and firmware actions"; + html+=".

"; html+=deviceActionsHtml(); setView(html); } @@ -171,27 +180,38 @@ function startWifiScanPolling(box){ } function renderScanList(data){ - if(!data||data.scanning){return '

Scanning for networks...

';} - if(data.error==='timeout')return '

Scan timed out. Try Refresh.

'; - if(data.error==='failed')return '

Scan failed.

'; - if(!data.networks||data.count===0)return '

No networks found.

'; - var html='',i,n,q,pct,qi,enc; + if(!data||data.scanning){ + return "

Scanning for networks…

"; + } + if(data.error==='timeout'){ + return "

Scan timed out. Try Scan again.

"; + } + if(data.error==='failed'){ + return "

Scan failed.

"; + } + if(!data.networks||data.count===0){ + return "

No networks found.

"; + } + var html="
",i,n,pct,qi,enc; for(i=0;i4)qi=4; enc=n.encrypted?'l':''; - html+="
"+esc(n.ssid)+""; - html+=""; - html+="
"+pct+"
"; + html+=""; + html+=""+esc(n.ssid)+""; + html+=""; + html+=""+pct+""; + html+=""; } + html+="
"; return html; } function wifiRefresh(){ var box=document.getElementById('wm-scan-results'); if(!box)return; - box.innerHTML='

Starting scan...

'; + box.innerHTML="

Starting scan…

"; api('/api/wifi/scan',{method:'POST'}).then(function(){ startWifiScanPolling(box); }); @@ -229,11 +249,15 @@ function bindWifiViewEvents(){ } function viewWifi(){ - setView(navBar()+"

WiFi

Loading...

"); + setView(navBar('wifi')+"

Loading WiFi options…

"); api('/api/wifi/meta').then(function(res){ try{var m=JSON.parse(res.body);}catch(e){m={};} - var html=navBar()+"

WiFi

"; + var html=navBar('wifi'); + html+="

WiFi

Pick a network below, confirm SSID and password, then connect.

"; + html+="

Networks nearby

"; html+="
"; + html+="
"; + html+="

Network details

"; html+="
"; html+=renderFieldList(m.wifiFields||[]); var wf=m.wifiFields||[]; @@ -241,13 +265,12 @@ function viewWifi(){ var i; for(i=0;iLoading info...

"); + setView(navBar('info')+"

Loading device info…

"); api('/api/info').then(function(res){ try{var d=JSON.parse(res.body);}catch(e){d={};} - var html=navBar()+"

Info

"; + var html=navBar('info'); + html+="

Device info

Connection status, hardware, and actions.

"; function section(title,rows){ if(!rows||!rows.length)return''; - var h="

"+esc(title)+"

"; + var h="

"+esc(title)+"

"; for(var i=0;i
"+rows[i].value+"
"; } - h+="
"; + h+="
"; return h; } var st=d.status; if(st && typeof st==='object' && !Array.isArray(st)){ - html+="

Status

"; + html+="

Status

"; html+="
Connected
"+esc(String(st.connected))+"
"; if(st.ssid!==undefined)html+="
SSID
"+esc(st.ssid)+"
"; if(st.stationIp)html+="
Station IP
"+esc(st.stationIp)+"
"; if(st.apIp)html+="
AP IP
"+esc(st.apIp)+"
"; if(st.summary)html+="
Summary
"+esc(st.summary)+"
"; - html+="
"; + html+="
"; } else { html+=section('Status',d.status||[]); } @@ -340,12 +364,13 @@ function viewInfo(){ html+=section('WiFi',d.wifi||[]); html+=section('About',d.about||[]); var act=d.actions||{}; - html+="

Actions

"; - if(act.showRestart)html+="

"; - if(act.showExitPortal)html+="

"; - if(act.showCloseCaptive)html+="

"; - if(act.showUpdate)html+="

Firmware update

"; - if(act.showErase)html+="

"; + html+="

Actions

"; + if(act.showRestart)html+=""; + if(act.showExitPortal)html+=""; + if(act.showCloseCaptive)html+=""; + if(act.showUpdate)html+="Firmware update"; + if(act.showErase)html+=""; + html+="
"; setView(html); }); } @@ -375,14 +400,15 @@ window.portalErase=function(){ // --- Params / OTA --- function viewSetup(){ - setView(navBar()+"

Loading...

"); + setView(navBar('setup')+"

Loading parameters…

"); api('/api/params').then(function(res){ try{var d=JSON.parse(res.body);}catch(e){d={};} - var html=navBar()+"

Parameters

"; - html+=""; + var html=navBar('setup'); + html+="

Setup

Custom parameters stored on this device.

"; + html+="
"; html+=renderFieldList(d.params||[]); - html+=""; - html+="
"; + html+="
"; + html+="
"; setView(html); }); } @@ -401,13 +427,20 @@ window.portalParamSave=function(ev){ function viewUpdate(){ var f=boot.features||{}; - var html=navBar()+"

Firmware update

"; - if(!f.showUpdate){html+="

Firmware update is disabled.

";setView(html);return;} - html+="
"; - html+=""; - html+="
"; - html+="

Upload a .bin firmware. The device restarts after a successful update.

"; - html+="
";
+  var html=navBar('update');
+  html+="
Firmware update
Flash a new firmware build (.bin). The device reboots when done.
";
+  if(!f.showUpdate){
+    html+="
Firmware update is disabled for this configuration.
";
+    setView(html);
+    return;
+  }
+  html+="
";
+  html+="
";
+  html+="
";
+  html+="
";
+  html+="
";
+  html+="
Choose the correct binary for this chip. Upload progress appears below.
";
+  html+="
";
   setView(html);
 }
 
diff --git a/lib/WiFiManager/include/templates/RootShell.h b/lib/WiFiManager/include/templates/RootShell.h
index 757689d..fc5f433 100644
--- a/lib/WiFiManager/include/templates/RootShell.h
+++ b/lib/WiFiManager/include/templates/RootShell.h
@@ -34,8 +34,8 @@ const char WM_ROOT_SHELL_TEMPLATE[] PROGMEM =
     "
"
     "
"
     "
"
-    ""
-    ""
+    ""
+    ""
     "
"
     "
"
     ""