- added ESPAsyncWebServer as local source file

- firmware update impoved

Author: cotestatnt

built-in-webpages/setup/all.htm

@@ -1,14 +1,13 @@
-svgLogo ='<svg width=128px height=128px viewBox="0 0 40 40"><path d="M 19.707,7.707 18.293,6.293 8.586,15.998 h 9.999 L 14.293,20.292 12,18 v 6 h 6 L 15.708,21.708 23.413,14 H 13.414 L 19.707,7.707 z M 15.999,0 C 7.164,0.002 0.002,7.164 0,15.999 0.002,24.837 7.164,31.999 15.999,32 24.837,31.998 31.999,24.837 32,15.999 31.999,7.164 24.837,0.002 15.999,0 z m 10.57,25.153 -4.861,-4.862 -1.417,1.417 4.862,4.861 c -2.454,2.127 -5.647,3.424 -9.154,3.43 C 8.267,29.986 2.015,23.733 2,15.999 2.007,12.494 3.304,9.3 5.432,6.847 l 3.861,3.86 1.413,-1.413 -3.86,-3.861 C 9.3,3.304 12.494,2.007 15.999,2 c 7.734,0.015 13.987,6.267 14,13.999 -0.006,3.506 -1.303,6.7 -3.43,9.154 z" /></svg>';
-const svgMenu = '<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>';
-const svgLock =  '<svg height="16pt" viewBox="0 0 512 512"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"/><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"/></svg>';
-const svgUnlock = '<svg height="16pt" viewBox="0 0 512 512"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"/><path d="m80 224c-8.832031 0-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16zm0 0"/></svg>';
-const svgScan = '<path d="M12 12C9.97 12 8.1 12.67 6.6 13.8L4.8 11.4C6.81 9.89 9.3 9 12 9S17.19 9.89 19.2 11.4L18.74 12C18.66 12 18.58 12 18.5 12C17.43 12 16.42 12.26 15.53 12.72C14.45 12.26 13.26 12 12 12M21 9L22.8 6.6C19.79 4.34 16.05 3 12 3S4.21 4.34 1.2 6.6L3 9C5.5 7.12 8.62 6 12 6S18.5 7.12 21 9M12 15C10.65 15 9.4 15.45 8.4 16.2L12 21L12.34 20.54C12.13 19.9 12 19.22 12 18.5C12 17.24 12.36 16.08 13 15.08C12.66 15.03 12.33 15 12 15M18 14.5C15.79 14.5 14 16.29 14 18.5S15.79 22.5 18 22.5C19.68 22.5 21.12 21.47 21.71 20H20C19.54 20.61 18.82 21 18 21C16.62 21 15.5 19.88 15.5 18.5S16.62 16 18 16C18.69 16 19.32 16.28 19.77 16.73L18 18.5H22V14.5L20.83 15.67C20.11 14.95 19.11 14.5 18 14.5Z" />';
-const svgConnect = '<path d="M12 6C8.62 6 5.5 7.12 3 9L1.2 6.6C4.21 4.34 7.95 3 12 3S19.79 4.34 22.8 6.6L21 9C18.5 7.12 15.38 6 12 6M16.84 13.41C17.18 13.27 17.55 13.17 17.92 13.1L19.2 11.4C17.19 9.89 14.7 9 12 9S6.81 9.89 4.8 11.4L6.6 13.8C8.1 12.67 9.97 12 12 12C13.78 12 15.44 12.5 16.84 13.41M12 15C10.65 15 9.4 15.45 8.4 16.2L12 21L13.04 19.61C13 19.41 13 19.21 13 19C13 17.66 13.44 16.43 14.19 15.43C13.5 15.16 12.77 15 12 15M23 19L20 16V18H16V20H20V22L23 19Z" />';
+svgLogo = '<svg height=120px viewBox="0 0 200 200"><path d="M47.1,106.3c0,5.5-4.5,10-10,10c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10C42.6,96.3,47.1,100.8,47.1,106.3" transform="matrix(1, 0, 0, 1, 3.552713678800501e-15, 3.552713678800501e-15)"/><path d="M134.8,95.9C128.4,50.2,92.1,14,46.5,7.5c-5.3,2.8-10.2,6.4-14.6,10.5v9.7c45.6,0,82.6,37.1,82.6,82.6h9.7 C128.4,106.1,132,101.2,134.8,95.9" transform="matrix(1, 0, 0, 1, 3.552713678800501e-15, 3.552713678800501e-15)"/><path d="M142.3,65.4C142.3,29.3,113.1,0,77,0c-2.3,0-4.5,0.1-6.7,0.4l-1.5,4.3c32.1,11.2,57.6,36.7,68.9,68.8L142,72 C142.2,69.8,142.3,67.6,142.3,65.4" transform="matrix(1, 0, 0, 1, 3.552713678800501e-15, 3.552713678800501e-15)"/><path d="M77.7,143c-20.8,0-40.3-8.1-54.9-22.8C8.1,105.6,0,86.1,0,65.3C0,44.5,8.1,25,22.8,10.3l4.1,4.2 c-13.6,13.6-21,31.6-21,50.8s7.5,37.2,21,50.8c13.6,13.6,31.6,21,50.8,21c19.2,0,37.2-7.5,50.8-21l4.2,4.1 C118,134.9,98.5,143,77.7,143" transform="matrix(1, 0, 0, 1, 3.552713678800501e-15, 3.552713678800501e-15)"/><path d="M76.9,114.9c1.6-16.2-5.6-31.3-17.7-40.5c-6.4-4.8-14.2-8.1-22.7-8.9c-2.2-0.2-3.9-2.2-3.6-4.4 c0.3-2.4,2.3-3.9,4.4-3.6c9.3,0.9,17.8,4.2,24.9,9.2c15.4,10.7,24.8,29.2,22.8,49.1c-0.3,3.2-0.9,6.2-1.8,9.2l11.8,3.3 c3.5-1,7-2.3,10.2-3.8c0.8-4.5,1.3-9.2,1.3-14c0-37.4-27.6-68.4-63.6-73.7c-4.3-0.6-8.7-0.7-11.9,0.1c-5.1,1.3-9.5,4.1-12.9,7.9 c-4,4.5-6.3,10.4-6.3,16.8c0,11.4,7.4,21,17.7,24.3c1.9,0.6,4.9,0.9,6.4,1.1H36c11.2,1.9,19.8,11.8,19.8,23.5 c0,4.7-1.4,9.1-3.8,12.9l8.2,5.2c3.9,1,8,1.7,12.2,2C74.7,125.8,76.3,120.5,76.9,114.9" transform="matrix(1, 0, 0, 1, 3.552713678800501e-15, 3.552713678800501e-15)"/></svg>';
+const svgLock =  '<svg height="16pt" viewBox="0 0 24 24"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>';
+const svgUnlock = '<svgheight="16pt" viewBox="0 0 24 24"><path d="M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.89 2 10V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V10C18 8.9 17.11 8 16 8H15V6C15 4.34 16.34 3 18 3C19.66 3 21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17C8.9 17 8 16.11 8 15C8 13.9 8.9 13 10 13Z" /></svg>';
+const svgScan = '<path d="M12 20L8.4 15.2C9.4 14.45 10.65 14 12 14S14.6 14.45 15.6 15.2L12 20M4.8 10.4L6.6 12.8C8.1 11.67 9.97 11 12 11S15.9 11.67 17.4 12.8L19.2 10.4C17.19 8.89 14.7 8 12 8S6.81 8.89 4.8 10.4M12 2C7.95 2 4.21 3.34 1.2 5.6L3 8C5.5 6.12 8.62 5 12 5S18.5 6.12 21 8L22.8 5.6C19.79 3.34 16.05 2 12 2M7 24H9V22H7V24M15 24H17V22H15V24M11 24H13V22H11V24Z" /></svg>';
+const svgConnect = '<path d="M12,6C8.6,6 5.5,7.1 3,9L1.2,6.6C4.2,4.3 8,3 12,3C16,3 19.8,4.3 22.8,6.6L21,9C18.5,7.1 15.4,6 12,6M13,19C13,17.7 13.4,16.4 14.2,15.4C13.5,15.2 12.8,15 12,15C10.7,15 9.4,15.5 8.4,16.2L12,21L13,19.6C13,19.4 13,19.2 13,19M16.8,13.4C17.1,13.3 17.5,13.2 17.9,13.1L19.2,11.4C17.2,9.9 14.7,9 12,9C9.3,9 6.8,9.9 4.8,11.4L6.6,13.8C8.1,12.7 10,12 12,12C13.8,12 15.4,12.5 16.8,13.4M16.5,22.6L17.2,19.8L15,17.9L17.9,17.7L19,15L20.1,17.6L23,17.8L20.8,19.7L21.5,22.5L19,21.1L16.5,22.6Z" /></svg>';
 const svgSave = '<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />';
-const svgRestart = '<path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" />';
+const svgRestart = '<path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" /></svg>';
 const svgEye = '<path d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z" />';
 const svgNoEye = '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>';
-const svgCloseModal = '<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />';
+const svgMenu = '<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>';
 
 var options = {};
 var configFile;
@@ -22,25 +21,6 @@ var newEl = function(el) {
 	return document.createElement(el);
 };
 
-// Start a websocket client and set event callbacks
-var ws;
-function ws_connect() {
-  ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']);
-  ws.onopen = function() { ws.send('Connected - ' + new Date());};
-  ws.onmessage = function(e) {
-    $('update-log').innerHTML = e.data;
-  };
-  ws.onclose = function(e) {
-      setTimeout(function() {
-      ws_connect();
-      }, 1000);
-  };
-  ws.onerror = function(err) {
-      ws.close();
-  };
-}
-
-
 function showHidePassword() {
   var inp = $("password");
   if (inp.type === "password") {
@@ -172,31 +152,22 @@ function getParameters() {
 }
 
 
-
 function createNewBox(cont, lbl) {
   var box = newEl('div');
   box.setAttribute('id', 'option-box' + cont);
   box.classList.add('ctn', 'opt-box', 'hide');
-
   var h = newEl('h2');
   h.classList.add('heading-2');
   h.innerHTML = lbl;
   box.appendChild(h);
-
-  var form  = newEl('form');
-  form.classList.add('form');
-
-  box.appendChild(form);
   $('main-box').appendChild(box);
-
   // Add new voice in menu and relatvie listener
   var lnk = newEl('a');
   lnk.setAttribute('id', 'set-opt' + cont);
   lnk.setAttribute('data-box', 'option-box' + cont);
   lnk.classList.add('a-link');
   lnk.innerHTML = lbl;
   lnk.addEventListener('click', switchPage);
-
   $('nav-link').appendChild(lnk);
   return box;
 }
@@ -465,7 +436,6 @@ function closeModalMessage(do_cb) {
     closeCallback();
 }
 
-
 function restartESP() {
   var url = new URL("http://" + `${window.location.hostname}` + "/reset");
   fetch(url)
@@ -476,35 +446,42 @@ function restartESP() {
   });
 }
 
-
 function handleSubmit() {
-  ws_connect();
-  $('loader').classList.remove('hide');
-  $('update-log').innerHTML = 'AGGIORNAMENTO IN CORSO';
   let fileElement = $('file-input');
   // check if user had selected a file
   if (fileElement.files.length === 0) {
     alert('please choose a file');
     return;
   }
-  let file = fileElement.files[0]
+  var update = $('update-log');
+  var loader = $('loader');
+  var prg = $('progress-wrap');
+  loader.classList.remove('hide');
+  prg.classList.add('active')
+  update.innerHTML = 'Update in progress';
+  
   let formData = new FormData();
-  formData.set('MD5', 'caf1eaeac27d3dd016118ad6a1434aca');
-  formData.set('file', file);
-
-  const fetchOptions = {
-      method: "POST",
-      body: formData
+  formData.set('update', fileElement.files[0]);
+  var fsize = fileElement.files[0].size;
+  var req = new XMLHttpRequest();
+  req.open('POST', '/update?size=' + fsize);  
+  req.onload = function(d) {
+    loader.classList.add('hide');
+    prg.classList.remove('active');
+    if (req.status != 200) 
+      update.innerHTML = `Error ${req.status}: ${req.statusText}`; 
+    else 
+      update.innerHTML = req.response;
   };
-  fetch('/update', fetchOptions)
-  .then(response => response.text())
-  .then(data => {
-      $('update-log').innerHTML = data;
-      $('loader').classList.add('hide');
-	  ws.close();
+  req.upload.addEventListener('progress', (p) => {
+    let w = Math.round(p.loaded/p.total*100) + '%';
+    if (p.lengthComputable) {
+      $('progress-anim').style.width = w;
+      update.innerHTML = 'Update in progress: ' + w;
+    }
   });
+  req.send(formData);
 }
-$('update-btn').addEventListener('click', handleSubmit);
 
 // Initializes the app.
 $('svg-menu').innerHTML = svgMenu;
@@ -514,10 +491,7 @@ $('svg-scan').innerHTML = svgScan;
 $('svg-connect').innerHTML = svgConnect;
 $('svg-save').innerHTML = svgSave;
 $('svg-restart').innerHTML = svgRestart;
-$('svg-close-modal').innerHTML = svgCloseModal;
-$('img-logo').innerHTML = svgLogo
-$('img-logo').setAttribute('title', 'Click to upload your logo file')
-
+$('img-logo').innerHTML = svgLogo;
 $('hum-btn').addEventListener('click', showMenu);
 $('scan-wifi').addEventListener('click', getWiFiList);
 $('connect-wifi').addEventListener('click', doConnection);
@@ -527,6 +501,11 @@ $('set-wifi').addEventListener('click', switchPage);
 $('set-update').addEventListener('click', switchPage);
 $('about').addEventListener('click', switchPage);
 $('restart').addEventListener('click', restartESP);
+$('update-btn').addEventListener('click', handleSubmit);
+$('file-input').addEventListener('change', () => {
+  $('fw-label').innerHTML = $('file-input').files.item(0).name +' (' + $('file-input').files.item(0).size + ' bytes)' ;
+  $('fw-label').style.background = 'brown';
+});
 
 window.addEventListener('load', getParameters);
 
@@ -538,4 +517,3 @@ $('password').addEventListener('input', (event) => {
   else
     $('connect-wifi').disabled = false;
 });
-

built-in-webpages/setup/all.htm.c

@@ -2,26 +2,23 @@
 <html>
 <head>
     <meta charset=utf-8>
-    <title>Async ESP FS WebServer</title>
+    <title>Async ESP FS WebServerr</title>
     <meta content="width=device-width, initial-scale=1" name=viewport>
     <link href=style.css rel=stylesheet type=text/css>
 </head>
 <body class=body>
     <main id=main-box>
         <header class="ctn header">
             <div class=title>
-                <input type="file" onchange="uploadLogo()" class="inputfile" id="logo-file">
-                <label for="logo-file" class="svg-button">
-                    <span id=img-logo title='Click to upload your logo file'></span>
-                </label>
+                <div id=img-logo title='Click to upload your logo file'></div>
                 <h1 id=name-logo class=heading>Async ESP FS WebServer</h1>
             </div>
             <div class=topnav id=top-nav>
                 <span id="nav-link"><a id=set-wifi class="a-link active" data-box="wifi-box">WiFi Setup</a></span>
                 <span id="upd-link"><a id=set-update class="a-link" data-box="update-box">Update</a></span>
                 <a class="a-link icon" id=hum-btn>
-                    <div class=svg style=margin:-2px>
-                        <svg id=svg-menu fill=currentColor viewBox="0 0 20 18"></svg>
+                    <div class=svg style=margin:-2px >
+                        <svg id=svg-menu height="16pt" fill=currentColor viewBox="0 0 20 18"></svg>
                     </div>
                 </a>
             </div>
@@ -39,26 +36,24 @@ <h2 class=heading-2>Connect to WiFi</h2>
                 </table>
                 <br>
             </div>
-            <div class=wifi-connect>
-                <form class=form>
-                    <div class=tf-wrapper>
-                        <label for=ssid class=input-label>SSID</label>
-                        <input type=text placeholder="Enter your WiFI SSID name" id="ssid">
-                    </div>
-                    <div class=tf-wrapper>
-                        <label for=password class=input-label>Password</label>
-                        <div class=show-hide-wrap id=show-hide-password>
-                            <a class="show-hide w--current" id=show-pass>
-                                <div class=svg><svg class=svg-e id=svg-eye viewBox="0 0 24 24"></svg></div>
-                            </a>
-                            <a class="show-hide" id=hide-pass>
-                                <div class=svg><svg class=svg-e id=svg-no-eye viewBox="0 0 24 24"></svg></div>
-                            </a>
-                        </div>
-                        <input type=password placeholder="Enter your WiFi password"
-                            id=password autocomplete=current-password data-ms-member="password">
+            <div id=wifi>
+                <div class=tf-wrapper>
+                    <label for=ssid class=input-label>SSID</label>
+                    <input type=text placeholder="Enter your WiFI SSID name" id="ssid">
+                </div>
+                <div class=tf-wrapper>
+                    <label for=password class=input-label>Password</label>
+                    <div class=show-hide-wrap id=show-hide-password>
+                        <a class="show-hide w--current" id=show-pass>
+                            <div class=svg><svg class=svg-e id=svg-eye viewBox="0 0 24 24"></svg></div>
+                        </a>
+                        <a class="show-hide" id=hide-pass>
+                            <div class=svg><svg class=svg-e id=svg-no-eye viewBox="0 0 24 24"></svg></div>
+                        </a>
                     </div>
-                </form>
+                    <input type=password placeholder="Enter your WiFi password"
+                        id=password autocomplete=current-password data-ms-member="password">
+                </div>
                 <label class="toggle lbl-wifi">
                     <span class=toggle-label>Store WiFi credentials</span>
                     <input id=persistent type=checkbox class="t-check" checked>
@@ -80,18 +75,26 @@ <h2 class=heading-2>Connect to WiFi</h2>
 
         <div id="update-box" class="ctn opt-box hide">
           <h2 class="heading-2">Update Firmware</h2>
+          <div class=tf-wrapper>
             <form id=update-form class=form action="/update" method="post" enctype="multipart/form-data">
-              <label class="file">
-              <input type="file" id="file-input" aria-label="File browser">
-              <span class="file-custom"></span>
-              </label>
-              <a id=update-btn class=btn><span>Submit new firmware</span></a><br>
-              <p id=update-log style="text-align:center"></p>
+              <div class=firmware>
+                <label for="file-input" id="fw-label" class="fw-upload">Select firmware binary file</label>
+                <input id="file-input" type="file"/>
+                <a id=update-btn class="btn submit">
+                  <div class=svg><svg fill=currentColor viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg></div>
+                  <span>Submit!</span>
+                </a><br>
+              </div>
+            	<div class="progress-wrap" id="progress-wrap" data-progress-style="fill-back">
+            	  <div id="update-log"></div>
+            	  <div class="progress" id='progress-anim'></div>
+            	</div>
             </form>
+          </div>
         </div>
 
         <div id=btn-box class="btn-bar hide">
-            <span class="toggle"><hr></span>
+            <span><hr></span>
             <a id=restart class="btn">
                 <div class=svg><svg id=svg-restart fill=currentColor viewBox="0 0 24 24"></svg></div>
                 <span>Restart ESP</span>
@@ -101,18 +104,12 @@ <h2 class="heading-2">Update Firmware</h2>
                 <span>Save configuration</span>
             </a>
         </div>
-
     </main>
 
     <div class="loader hide" id=loader>Loading...</div>
     <details id=modal-message>
         <summary></summary>
         <div class=d-modal>
-            <a onclick=closeModalMessage()>
-                <div class=d-modal-close>
-                    <svg id=svg-close-modal width=14 height=14 viewBox="0 0 14 14" fill=none></svg>
-                </div>
-            </a>
             <div class=d-modal-title><h2 id=message-title>t</h2></div>
             <div class=d-modal-content><p id=message-body></p></div>
             <div class=btn-bar>