Add status bar

TrimSP.html

@@ -349,9 +349,7 @@
 	    </tr>
           </table>
 	  <p>
-	    For further details see:
-	  </p>
-	  <p>
+	    For further details see:<br>
 	    W. Eckstein, <i>Computer Simulation of Ion-Solid Interactions</i>,<br>
 	    Springer Series in Materials Science, Vol. 10 (Springer-Verlag, Berlin, 1991).<br>
 	    <a href="https://doi.org/10.1007/978-3-642-73513-4">
@@ -361,14 +359,18 @@
 	</div>
       </div>
   </td></tr>
-  <tr style="width: 100%;//visibility: hidden;">
-    <td>
-      <div class="w3-light-grey">
-	<div id="pBar" class="w3-container w3-green w3-center" style="width:0%">0%</div>
-      </div> 
-    </td>
-  </tr>
 </table>
+<div id="statusBar" class="status-bar">
+  <span class="status-item"><strong>Folder:</strong> <span id="statusWorkPath">-</span></span>
+  <span class="status-item"><strong>Backend:</strong> <span id="statusBackend">-</span></span>
+  <span class="status-item"><strong>Last save:</strong> <span id="statusLastSave">Not saved yet</span></span>
+  <span class="status-item"><strong>Run:</strong> <span id="statusRun">Idle</span></span>
+  <div class="status-progress">
+    <div class="status-progress-track">
+      <div id="pBar" class="status-progress-fill">0%</div>
+    </div>
+  </div>
+</div>
 </body>
 <script>
 
@@ -382,6 +384,9 @@
           workPath.value = process.cwd();
       }
   }
+  if (typeof syncStatusBar === 'function') {
+      syncStatusBar();
+  }
   // Open the default Layers tab
   document.getElementById("btnLayers").click();