From 8067ad79d5e0bf89a6aacd83107e2160ece34d87 Mon Sep 17 00:00:00 2001
From: Matthias Hertel <mathertel@hotmail.com>
Date: Sat, 15 Feb 2025 19:44:11 +0100
Subject: [PATCH] use sitelayout css

---
 board-templates.htm                           |  24 +-
 board.htm                                     |  49 +--
 ding.htm                                      |  36 ++-
 icons.svg                                     |   1 -
 index.htm                                     | 303 +++++++++---------
 microide.htm                                  |  45 ++-
 monitor.htm                                   |  34 +-
 portal.htm                                    |  87 ++---
 server/HomeDingServer.ts                      |   2 +-
 test/app_offline.htm                          |  47 +++
 test/index.htm                                |  48 +++
 dialogcheck.htm => test/test-dialog.htm       |  12 +-
 elementcheck.htm => test/test-element.htm     |  41 ++-
 .../test-gaugechart.htm                       |  16 +-
 test-iotstyle.htm => test/test-iotstyle.htm   |   0
 test-linechart.htm => test/test-linechart.htm |   0
 test/test-md.htm                              |  21 +-
 test-piechart.htm => test/test-piechart.htm   |   9 +-
 test/test-toast.htm                           |  75 +----
 test/test.time.htm                            |  21 +-
 20 files changed, 440 insertions(+), 431 deletions(-)
 create mode 100644 test/app_offline.htm
 create mode 100644 test/index.htm
 rename dialogcheck.htm => test/test-dialog.htm (91%)
 rename elementcheck.htm => test/test-element.htm (71%)
 rename test-gaugechart.htm => test/test-gaugechart.htm (92%)
 rename test-iotstyle.htm => test/test-iotstyle.htm (100%)
 rename test-linechart.htm => test/test-linechart.htm (100%)
 rename test-piechart.htm => test/test-piechart.htm (95%)

diff --git a/board-templates.htm b/board-templates.htm
index 07b14ba..1650fbe 100644
--- a/board-templates.htm
+++ b/board-templates.htm
@@ -1,7 +1,7 @@
 <div class="card" u-control="air" id="${id}" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
   <hr />
-  <div class="block" style="display: flex;flex-wrap: wrap;column-gap: 1rem;">
+  <div class="main" style="display: flex;flex-wrap: wrap;column-gap: 1rem;">
     <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="temperature">
       <div style="font-size: 2rem"><span u-text="temperature"></span>&deg;C</div>
       <div>Temperature</div>
@@ -28,7 +28,7 @@
 <div class="card" u-control="dallas" id="${id}" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
   <hr />
-  <div class="block" style="display: flex;">
+  <div class="main" style="display: flex;">
     <div style="flex: 1">
       <div style="font-size: 2rem"><span u-text="temperature"></span>&deg;C</div>
       <div>Temperature</div>
@@ -46,13 +46,13 @@
     <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
   </fieldset>
 
-  <div class="block">
+  <div class="main">
     <div class="u-bar">
       <span class="pulse"></span>
       <span class="current"></span>
     </div>
   </div>
-  <div class="block footer form-actions">
+  <div class="footer form-actions">
     <button u-action="start" value="1">Start</button>
     <button u-action="next" value="1">Next</button>
   </div>
@@ -60,12 +60,12 @@
 
 
 <div class="card" u-control="button" microID="${id}" u-is="button">
-  <div class="block"><button u-text="title"></button></div>
+  <div class="main"><button u-text="title"></button></div>
 </div>
 
 <div class="card" u-control="digitalvalue" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
-  <div class="block Element">
+  <div class="main">
     <span class="u-bool ux-value" u-active="value" style="position: absolute;top:0.5rem;right:0.5rem"></span>
     <div class="form-grid"><label>Value:</label><output u-text="value"></output></div>
   </div>
@@ -73,7 +73,7 @@
 
 <div class="card" u-control="reference" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
-  <div class="block Element">
+  <div class="main">
     <span class="u-bool ux-value" u-active="value" style="position: absolute;top:0.5rem;right:0.5rem"></span>
     <div class="form-grid">
       <label>Reference:</label><output u-text="reference"></output>
@@ -84,14 +84,14 @@
 
 <div class="card" u-control="pwmout" u-is="pwmout" microID="${id}">
   <div u-is="include" ref=".cHead"></div>
-  <div class="block" style="position: relative;min-height: 5rem">
+  <div class="main" style="position: relative;min-height: 5rem">
     <span class="ux-levelbar ux-value"></span>
     <div style="font-size: 2rem"><span u-text="value"></span> / <span u-text="range"></span></div>
   </div>
 </div>
 
 <div class="card" u-control="log" u-is="log" microID="${id}">
-  <div class="block header">
+  <div class="header">
     <svg class="icon">
       <use href="./icons.svg#${type}" />
     </svg>
@@ -104,13 +104,13 @@ <h4 u-text="description"></h4>
       <use href="./icons.svg#config" />
     </svg>
   </div>
-  <div class="block"><object data="chartline.svg" type="image/svg+xml" style="width:100%"></object></div>
+  <div class="main"><object data="chartline.svg" type="image/svg+xml" style="width:100%"></object></div>
 </div>
 
 <!-- Display -->
 
 <div class="card" u-control="display" u-is="display" microID="${id}">
-  <div class="block" style="display: flex;align-items: center;">
+  <div class="main" style="display: flex;align-items: center;">
     <svg class="setconfig">
       <use href="./icons.svg#config" />
     </svg>
@@ -125,7 +125,7 @@ <h4 u-text="description"></h4>
 </div>
 
 <div class="card" u-control="displaylcd" u-is="generic" microID="${id}">
-  <div class="block">
+  <div class="main">
     <div class="display" grid="10" style="height: 2em;width: 20ch;font-family: monospace"></div>
   </div>
 </div>
diff --git a/board.htm b/board.htm
index c58ec74..1309014 100644
--- a/board.htm
+++ b/board.htm
@@ -41,7 +41,7 @@
     }
 
     img,
-    .panel {
+    #panl {
       user-select: none;
     }
 
@@ -54,12 +54,12 @@
   <script src="u-toast.js"></script>
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/lifespy/css-and-js-hub/css/responsive.css">
</head>
 
-<body>
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
   <u-toast></u-toast>
-  <div class="u-header">
+  <header>
     <h1>Board</h1>
-  </div>
-  <div class="u-navbar">
+  </header>
+  <div class="navbar">
     <a href="/">Home</a>
     <a href="/board.htm">Board</a>
     <a href="/microide.htm">IDE</a>
@@ -69,7 +69,10 @@ <h1>Board</h1>
     <button id="addButton">+</button>
   </div>
 
-  <main class="panel"></main>
+  <main >
+    <div id="panl" class="card-container col365" style="--card-height: auto;">
+    </div>
+  </main>
 
   <div id="u-templates" style="display:none">
 
@@ -78,7 +81,7 @@ <h1>Board</h1>
       <div class="modalFrame" class="modal-object"></div>
     </div>
 
-    <div class="cHead block header">
+    <div class="cHead header">
       <svg class="icon">
         <use href="./icons.svg#${type}" />
       </svg>
@@ -91,7 +94,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="generic" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div class="form-grid"><label>Value:</label><output u-text="value"></output></div>
       </div>
     </div>
@@ -105,7 +108,7 @@ <h4 u-text="description"></h4>
         <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
         <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
       </fieldset>
-      <div class="block">
+      <div class="main">
         <div class="form-grid">
           <label>Start:</label><output u-text="ontime"></output>
           <label>End:</label><output u-text="offtime"></output>
@@ -115,13 +118,13 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="dstime" id="${id}" u-is="dstime" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div class="form-grid">
           <label>ReadTime:</label><input u-value="readtime" type="time" step="1" />
           <label>Now:</label><output u-text="now"></output>
           <label>set Time:</label><output class="now"></output>
         </div>
-        <div class="block footer">
+        <div class="footer">
           <button style="float:right">set</button>
         </div>
       </div>
@@ -129,7 +132,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="switch" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value border" u-active="value"></span>
         <div u-is="input">
           <span class="down">off</span>
@@ -150,7 +153,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="logic" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value" u-active="value"></span>
         <div class="form-grid"><label>value:</label><output u-text="value"></output></div>
       </div>
@@ -158,14 +161,14 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="select" id="${id}" u-is="select" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <select></select>
       </div>
     </div>
 
     <div class="card" u-control="rfcodes" microID="${id}" u-is="generic">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block Element">
+      <div class="main">
         <div><label>Last Code:</label></div>
         <pre>[<span u-text="value" style="user-select: text;"></span>]</pre>
       </div>
@@ -183,7 +186,7 @@ <h4 u-text="description"></h4>
         <label>duration:</label>
         <div><input type="range" max="12000" step="100" name="duration"><output name="duration"></output></div>
       </div>
-      <div class="block footer form-actions">
+      <div class="footer form-actions">
         <button u-action="mode" value="fade">fade</button>
         <button u-action="mode" value="fix">fix</button>
         <button u-action="mode" value="pulse">pulse</button>
@@ -200,14 +203,14 @@ <h4 u-text="description"></h4>
         <label>Effect Length:</label>
         <div><input type="range" max="255" u-value="effectlength"><output u-value="effectlength"></output></div>
       </div>
-      <div class="block footer form-actions">
+      <div class="footer form-actions">
         <button u-action="mode" value="flow">flow</button>
       </div>
     </div>
 
     <div class="card" u-control="light" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span u-color="value" class="border" style="width:4rem;height:4rem;float:right;border-radius:50%;"></span>
         <div class="form-grid"><label>value:</label><output u-text="value"></output>
           <label>brightness:</label><output u-text="brightness"></output>
@@ -217,7 +220,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="tm1637" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div style="text-align: center;"><span u-text="value" style="font-size:4rem;font-style: italic;"></span></div>
         <div class="form-grid"><label>brightness:</label><output u-text="brightness"></output></div>
       </div>
@@ -234,7 +237,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="bl0937" id="${id}" u-is="bl0937" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <table style="width:100%;font-size:2rem">
           <tr>
             <td>
@@ -269,7 +272,7 @@ <h4 u-text="description"></h4>
         <label>SNR:</label><output u-text="snr"></output>
         <label>station:</label><output u-text="stationname"></output>
       </div>
-      <div class="block footer form-actions">
+      <div class="footer form-actions">
         <button u-action="frequency" value="9440">hr1</button>
         <button u-action="frequency" value="8930">hr3</button>
         <button u-action="frequency" value="10300">AB</button>
@@ -279,7 +282,7 @@ <h4 u-text="description"></h4>
     </div>
 
     <div class="card" u-control="scene" microID="${id}" u-is="scene">
-      <div class="cHead block header">
+      <div class="cHead header">
         <h3>Scenes</h3>
       </div>
       <div class="block form-actions"></div>
@@ -313,7 +316,7 @@ <h3>Scenes</h3>
 
     (function() { // allows variable names to be packed by minifier
       const REFRESH_INTERVAL = 4000;
-      var panelObj = document.querySelector('.panel');
+      var panelObj = document.querySelector('#panl');
       var addObj = document.getElementById('addButton');
       var sysObj = document.getElementById('sysButton');
       var params = { sys: false };
diff --git a/ding.htm b/ding.htm
index 8595758..b8825a0 100644
--- a/ding.htm
+++ b/ding.htm
@@ -19,11 +19,14 @@
   <script src="/micro.js" defer></script>
 </head>
 
-<body>
-  <main class="panel" style="user-select: none"></main>
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
+  <main>
+    <div id="panl" class="card-container col365" style="--card-height: auto;">
+    </div>
+  </main>
 
   <div id="u-templates" style="display:none">
-    <div class="cHead block header">
+    <div class="cHead header">
       <h3 u-text="title"></h3>
       <h4 u-text="description"></h4>
     </div>
@@ -35,14 +38,14 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="generic" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div class="form-grid"><label>Value:</label><span u-text="value"></span></div>
       </div>
     </div>
 
     <div class="card" u-control="switch" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value border" u-active="value"></span>
         <div u-is="input">
           <span class="down">off</span>
@@ -76,13 +79,13 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
         <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
         <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
       </fieldset>
-      <div class="block">
+      <div class="main">
         <div class="u-bar">
           <span class="pulse"></span>
           <span class="current"></span>
         </div>
       </div>
-      <div class="block">
+      <div class="main">
         <button u-action="start" value="1">Start</button>
         <button u-action="next" value="1">Next</button>
       </div>
@@ -101,7 +104,7 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="dht" microID="${id}" u-is="generic">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block" style="display: grid; grid-template-columns: auto auto; grid-column-gap: 5px;">
+      <div class="main" style="display: grid; grid-template-columns: auto auto; grid-column-gap: 5px;">
         <span style="font-size:2em"><span u-text="temperature">__.__</span>&deg;C</span>
         <span style="font-size:2em"><span u-text="humidity">__.__</span>%</span>
         <span>Temperature</span><span>Humidity</span>
@@ -110,7 +113,7 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="and" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value" u-active="value"></span>
         <div class="form-grid"><label>value:</label><output u-text="value"></output></div>
       </div>
@@ -118,7 +121,7 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="bl0937" id="${id}" u-is="bl0937" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <table style="width:100%;font-size:2rem">
           <tr>
             <td>
@@ -150,17 +153,18 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
         <label>brightness:</label>
         <div><input type="range" max="100" name="brightness"><output u-text="brightness"></output></div>
       </div>
-      <div class="block footer form-actions">
-        <button u-action="mode" value="fade">fade</button><button u-action="mode" value="fix">fix</button><button u-action="mode" value="pulse">pulse</button><button u-action="mode" value="wheel">wheel</button>
+      <div class="footer form-actions">
+        <button u-action="mode" value="fade">fade</button><button u-action="mode" value="fix">fix</button><button
+          u-action="mode" value="pulse">pulse</button><button u-action="mode" value="wheel">wheel</button>
       </div>
     </div>
 
     <div class="card small" u-control="webbutton" microID="${id}" u-is="button">
-      <div class="block"><button u-text="description">.</button></div>
+      <div class="main"><button u-text="description">.</button></div>
     </div>
 
     <div class="card" u-control="scene" microID="${id}" u-is="scene">
-      <div class="block header">
+      <div class="header">
         <h3>Scenes</h3>
       </div>
       <div class="block form-actions"></div>
@@ -171,9 +175,9 @@ <h3>Scenes</h3>
   <a style="position:absolute;top:1em;right:1em" href="/microide.htm">IDE</a>
 
   <script>
-    (function () { // allows variable names to be packed by minifier
+    (function() { // allows variable names to be packed by minifier
       const REFRESH_INTERVAL = 4000;
-      var panelObj = document.querySelector('.panel');
+      var panelObj = document.querySelector('#panl');
       var timer;
       var _title = undefined;
       var _name = undefined;
diff --git a/icons.svg b/icons.svg
index 169430f..bbe68ed 100644
--- a/icons.svg
+++ b/icons.svg
@@ -32,7 +32,6 @@
 <symbol id="element" viewBox="0 0 48 48"><path fill="currentColor" d="M18 8c-4.087.003-5.537 5.413-2 7.46V18h-6c-2.216 0-4 1.784-4 4v16c0 2.216 1.784 4 4 4h16c2.216 0 4-1.784 4-4v-6h2.54c2.047 3.537 7.457 2.087 7.46-2-.003-4.087-5.413-5.537-7.46-2H30v-6c0-2.216-1.784-4-4-4h-6v-2.541A4 4 0 0 0 22 12a4 4 0 0 0-4-4zm0 2c2.667 0 2.667 4 0 4s-2.667-4 0-4zm-6 12h12c1.108 0 2 .892 2 2v12c0 1.108-.892 2-2 2H12c-1.108 0-2-.892-2-2V24c0-1.108.892-2 2-2zm24 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/></symbol>
 <symbol id="fan" viewBox="0 0 48 48"><path fill="currentColor" d="M24 4A20 20 0 004 24a20 20 0 0020 20 20 20 0 0020-20A20 20 0 0024 4zm-.09 2A18 18 0 0124 6a18 18 0 0118 18 18 18 0 01-18 18A18 18 0 016 24 18 18 0 0123.91 6zm6.451 4.025c-2.367 0-3.382 1.055-4.14 2.26-.509.809-.68 2.303.156 4.283.529 1.253.628 1.669.643 2.707.01.7-.157 1.155-.403 1.7A4 4 0 0024 20a4 4 0 00-.576.041c-.593-.8-1.456-1.736-2.79-2.645-2.42-1.642-5.749-3.238-7.585-2.845-1.351.289-2.162.776-3.147 1.885-1.236 1.391-1.959 3.269-2 5.197-.02 1.004-.09 2.305.834 3.906 1.184 2.05 2.605 2.403 4.028 2.457.954.036 2.333-.563 3.63-2.277.821-1.085 1.132-1.379 2.024-1.91.591-.353 1.061-.439 1.643-.498A4 4 0 0020 24a4 4 0 00.803 2.404c-.367.877-.685 2.089-.819 3.873-.211 2.919.07 6.599 1.328 7.993.927 1.025 1.754 1.484 3.206 1.783 1.823.374 3.81.061 5.5-.867.88-.484 2.042-1.075 2.966-2.676 1.184-2.05.778-3.458.114-4.717-.446-.845-1.654-1.738-3.787-2.004-1.35-.168-1.76-.292-2.666-.799-.622-.347-.935-.729-1.291-1.226a4 4 0 002.33-2.207c1.001-.126 2.276-.432 3.779-1.157 2.633-1.275 5.68-3.36 6.258-5.146.425-1.315.409-2.26-.059-3.666-.587-1.766-1.85-3.333-3.5-4.332-.86-.52-1.951-1.23-3.8-1.23z"/></symbol>
 <symbol id="fullscreen" viewBox="0 0 48 48"><path fill="currentColor" d="M28 4v4h9.172L27.029 18.143l2.828 2.828L40 10.828V20h4V4zm-9.857 23.172L8 37.314V28H4v16h16v-4h-9.03l10-10z"/></symbol>
-<symbol id="github"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></symbol>
 <symbol id="ide" viewBox="0 0 48 48"><path fill="currentColor" d="M44 24.712L29.8 30.61v-3.05l9.938-4.061-9.938-4.06v-3.05L44 22.287z"/><path fill="currentColor" d="M18.2 30.61L4 24.713v-2.424l14.2-5.899v3.05l-9.938 4.072 9.938 4.05z"/><path fill="currentColor" d="M30.351 13.5l-8.436 20h-3.266l8.404-20z"/></symbol>
 <symbol id="led" viewBox="0 0 48 48"><path fill="currentColor" d="M24 6c-6.648 0-12 5.352-12 12v12h-2c-1.108 0-2 .892-2 2s.892 2 2 2h8v7c0 .554.446 1 1 1s1-.446 1-1v-7h8v7c0 .554.446 1 1 1s1-.446 1-1v-7h8c1.108 0 2-.892 2-2s-.892-2-2-2h-2V18c0-6.648-5.352-12-12-12z"/></symbol>
 <symbol id="light" viewBox="0 0 48 48"><path fill="currentColor" d="M24 4c-2.473 0-3.603.254-5.717 1.29-2.03.993-3.885 2.842-4.847 4.83-.9 1.856-1.286 3.77-1.153 5.71.186 2.706.904 4.636 3.31 8.918 1.882 3.347 2.617 5.041 2.776 6.389.06.508.064 1.245.1 1.361h3.394l-.103-1.252c-.19-2.24-.798-3.68-4.051-9.61-1.829-3.333-2.408-5.711-1.955-8.019.734-3.74 4.124-6.351 8.246-6.351 4.122 0 7.512 2.611 8.246 6.351.453 2.308-.126 4.686-1.955 8.02-3.255 5.933-3.861 7.37-4.05 9.617l-.106 1.244h3.33l.133-1.184c.17-1.517.878-3.132 2.808-6.566 2.407-4.282 3.125-6.212 3.31-8.918.134-1.94-.252-3.854-1.152-5.71-.962-1.988-2.818-3.837-4.847-4.83C27.603 4.253 26.473 4 24 4zm-5.531 29.912v2.018h11.097v-2.018H18.47zm0 4.035v2.018h11.097v-2.018H18.47zm1.888 4.035c.88 1.01 1.612 1.798 1.914 2.018h3.606l.762-.842c.36-.398.7-.801 1.017-1.176h-7.299z"/></symbol>
diff --git a/index.htm b/index.htm
index 09b4261..a86c7c8 100644
--- a/index.htm
+++ b/index.htm
@@ -25,185 +25,188 @@
   </script>
 </head>
 
-<body>
-  <div class="u-header">
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
+  <header>
     <img class="icon" src="/favicon.svg" />
     <h1>Device</h1>
-  </div>
+  </header>
 
-  <div class="u-navbar">
+  <div class="navbar">
     <a href="/">Home</a>
     <a href="/board.htm">Board</a>
     <a href="/microide.htm">IDE</a>
     <a href="/log.htm">Log</a>
   </div>
 
-  <div class="panel">
-    <div class="card">
-      <div class="block header">
-        <h3>Build-in Setup Pages</h3>
-      </div>
-      <div class="block">
-        <p><a href="$setup.htm">WiFi Setup</a></p>
-        <p><a href="$update.htm">Web Update</a></p>
-        <p><a href="$upload.htm">File Upload</a></p>
-        <p><a href="updateicons.htm">Update FavIcons</a></p>
-        <p><a href="/panel.htm">Panel</a></p>
+  <main>
+    <div class="card-container col365" style="--card-height: auto;">
+
+      <div class="card">
+        <div class="header">
+          <h3>Build-in Setup Pages</h3>
+        </div>
+        <div class="main">
+          <p><a href="$setup.htm">WiFi Setup</a></p>
+          <p><a href="$update.htm">Web Update</a></p>
+          <p><a href="$upload.htm">File Upload</a></p>
+          <p><a href="updateicons.htm">Update FavIcons</a></p>
+          <p><a href="/panel.htm">Panel</a></p>
+        </div>
       </div>
-    </div>
 
-    <div class="card">
-      <div class="block header">
-        <h3>Insights</h3>
-      </div>
+      <div class="card">
+        <div class="header">
+          <h3>Insights</h3>
+        </div>
 
-      <div class="block">
-        <p><a href="/env.json">Env file</a></p>
-        <p><a href="/config.json">Config file</a></p>
+        <div class="main">
+          <p><a href="/env.json">Env file</a></p>
+          <p><a href="/config.json">Config file</a></p>
 
-        <p><a href="/api/state">State of elements</a></p>
-        <p><a href="/api/list">current files</a></p>
-        <p><a href="/ssdp.xml">SSDP description</a></p>
-        <p><a href="/api/reboot">reboot</a></p>
+          <p><a href="/api/state">State of elements</a></p>
+          <p><a href="/api/list">current files</a></p>
+          <p><a href="/ssdp.xml">SSDP description</a></p>
+          <p><a href="/api/reboot">reboot</a></p>
+        </div>
       </div>
-    </div>
 
-    <div class="card">
-      <div class="block header">
-        <h3>File System Memory</h3>
-      </div>
+      <div class="card">
+        <div class="header">
+          <h3>File System Memory</h3>
+        </div>
 
-      <div class="block">
-        <u-piechart id="meminfo" style="float:left;width:220px;margin-right: 1rem;"></u-piechart>
+        <div class="main">
+          <u-piechart id="meminfo" style="float:left;width:220px;margin-right: 1rem;"></u-piechart>
 
-        <p><span id="memTotal"></span> bytes available.</p>
-        <p><span id="memUsed"></span> bytes in use</p>
+          <p><span id="memTotal"></span> bytes available.</p>
+          <p><span id="memUsed"></span> bytes in use</p>
+        </div>
       </div>
-    </div>
 
-    <div class="card">
-      <div class="block header">
-        <h3>SysInfo</h3>
-      </div>
-      <div class="block">
-        <pre id="sysinfo"></pre>
+      <div class="card">
+        <div class="header">
+          <h3>SysInfo</h3>
+        </div>
+        <div class="main">
+          <pre id="sysinfo"></pre>
+        </div>
       </div>
-    </div>
 
-    <div class="card">
-      <div class="block header">
-        <h3>State</h3>
+      <div class="card">
+        <div class="header">
+          <h3>State</h3>
+        </div>
+        <div class="main">
+          <pre id="stateInfo"></pre>
+        </div>
       </div>
-      <div class="block">
-        <pre id="stateInfo"></pre>
-      </div>
-    </div>
 
-    <div class="card">
-      <div class="block header">
-        <h3>Available Elements</h3>
-      </div>
-      <div class="block">
-        <p id="elementsInfo"></p>
+      <div class="card">
+        <div class="header">
+          <h3>Available Elements</h3>
+        </div>
+        <div class="main">
+          <p id="elementsInfo"></p>
+        </div>
       </div>
-    </div>
 
-    <div class="card">
-      <div class="block">
-        <h3>Dev-Links</h3>
-        <p><a href="portal.htm">portal.htm</a></p>
-        <p><a href="portalconfig.htm">portalConfig.htm</a></p>
-        <p><a href="monitor.htm">monitor.htm</a></p>
-        <p><a href="test-iotstyle.htm">test-iotstyle</a></p>
-        <p><a href="test-piechart.htm">test-piechart</a></p>
-        <p><a href="test-gaugechart.htm">test-gaugechart</a></p>
-        <p><a href="test-linechart.htm">test-linecharttest</a></p>
-
-        <p><a href="elementcheck.htm">elementcheck</a></p>
+      <div class="card">
+        <div class="main">
+          <h3>Dev-Links</h3>
+          <p><a href="portal.htm">portal.htm</a></p>
+          <p><a href="portalconfig.htm">portalConfig.htm</a></p>
+          <p><a href="monitor.htm">monitor.htm</a></p>
+          <p><a href="test-iotstyle.htm">test-iotstyle</a></p>
+          <p><a href="test-piechart.htm">test-piechart</a></p>
+          <p><a href="test-gaugechart.htm">test-gaugechart</a></p>
+          <p><a href="test-linechart.htm">test-linecharttest</a></p>
+
+          <p><a href="elementcheck.htm">elementcheck</a></p>
+        </div>
       </div>
-    </div>
 
-    <div class="card">
-      <div class="block">
-        <h3>Diag</h3>
-        <p><a href="/diag">diag</a></p>
-        <p><a href="/chipinfo">chipinfo</a></p>
-        <p><a href="/profile">profile</a></p>
+      <div class="card">
+        <div class="main">
+          <h3>Diag</h3>
+          <p><a href="/diag">diag</a></p>
+          <p><a href="/chipinfo">chipinfo</a></p>
+          <p><a href="/profile">profile</a></p>
+        </div>
       </div>
-    </div>
 
-  </div>
-
-  <script>
-    window.onerror = function(msg, url, lineNo, columnNo, error) {
-      var string = msg.toLowerCase();
-      var substring = 'script error';
-      if (string.indexOf(substring) > -1) {
-        alert('Script Error: See Browser Console for Detail');
-      } else {
-        var message = [
-          'Message: ' + msg,
-          'URL: ' + url,
-          'Line: ' + lineNo,
-          'Column: ' + columnNo,
-          'Error object: ' + JSON.stringify(error)
-        ].join(' - ');
-
-        alert(message);
-      }
-
-      return false;
-    };
-  </script>
-
-  <script>
-    var memObj = document.querySelector('#meminfo');
-    window.addEventListener('load', function() {
-      fetchJSON('/api/sysinfo')
-        .then(async (d) =>  {
-          var o = document.getElementById('sysinfo');
-          o.innerText = JSON.stringify(d, null, 1)
-            .replace('{\n', '')
-            .replace('\n}', '')
-            .replace(/^\s*/gm, '');
-
-          document.getElementById('memTotal').textContent = d.fsTotalBytes;
-          document.getElementById('memUsed').textContent = d.fsUsedBytes;
-
-          await allComponentsLoaded;
-
-          memObj.setOptions({ showPercentage: true });
-          memObj.draw([
-            {
-              color: '#223355',
-              title: "Used",
-              value: Number(d['fsUsedBytes'])
-            },
-            {
-              color: 'silver',
-              title: "Available",
-              value: Number(d.fsTotalBytes) - Number(d.fsUsedBytes)
-            }
-          ]);
-        });
-
-      fetchJSON('/api/state')
-        .then(function(d) {
-          var o = document.querySelector('#stateInfo');
-          o.innerText = JSON.stringify(d, null, 1)
-            .replace('{\n', '')
-            .replace('\n}', '')
-            .replace(/^\s*/gm, '');
-
-        });
-
-      fetchJSON('/api/elements')
-        .then(function(d) {
-          var o = document.querySelector('#elementsInfo');
-          o.innerText = d.join(', ');
-        });
-    });
-  </script>
+    </div>
+  </main>
+
+    <script>
+      window.onerror = function(msg, url, lineNo, columnNo, error) {
+        var string = msg.toLowerCase();
+        var substring = 'script error';
+        if (string.indexOf(substring) > -1) {
+          alert('Script Error: See Browser Console for Detail');
+        } else {
+          var message = [
+            'Message: ' + msg,
+            'URL: ' + url,
+            'Line: ' + lineNo,
+            'Column: ' + columnNo,
+            'Error object: ' + JSON.stringify(error)
+          ].join(' - ');
+
+          alert(message);
+        }
+
+        return false;
+      };
+    </script>
+
+    <script>
+      var memObj = document.querySelector('#meminfo');
+      window.addEventListener('load', function() {
+        fetchJSON('/api/sysinfo')
+          .then(async (d) => {
+            var o = document.getElementById('sysinfo');
+            o.innerText = JSON.stringify(d, null, 1)
+              .replace('{\n', '')
+              .replace('\n}', '')
+              .replace(/^\s*/gm, '');
+
+            document.getElementById('memTotal').textContent = d.fsTotalBytes;
+            document.getElementById('memUsed').textContent = d.fsUsedBytes;
+
+            await allComponentsLoaded;
+
+            memObj.setOptions({ showPercentage: true });
+            memObj.draw([
+              {
+                color: '#223355',
+                title: "Used",
+                value: Number(d['fsUsedBytes'])
+              },
+              {
+                color: 'silver',
+                title: "Available",
+                value: Number(d.fsTotalBytes) - Number(d.fsUsedBytes)
+              }
+            ]);
+          });
+
+        fetchJSON('/api/state')
+          .then(function(d) {
+            var o = document.querySelector('#stateInfo');
+            o.innerText = JSON.stringify(d, null, 1)
+              .replace('{\n', '')
+              .replace('\n}', '')
+              .replace(/^\s*/gm, '');
+
+          });
+
+        fetchJSON('/api/elements')
+          .then(function(d) {
+            var o = document.querySelector('#elementsInfo');
+            o.innerText = d.join(', ');
+          });
+      });
+    </script>
 <script src="//cdn.jsdelivr.net/gh/lifespy/css-and-js-hub/js/polish.js" type="text/javascript"></script>
</body>
 
 </html>
\ No newline at end of file
diff --git a/microide.htm b/microide.htm
index d92e56d..9c666ab 100644
--- a/microide.htm
+++ b/microide.htm
@@ -98,40 +98,33 @@
 
     .grid-container {
       display: grid;
-      height: 100vh;
 
       grid-template-columns: minmax(32ch, max-content) minmax(32ch, auto);
-      grid-template-rows: min-content min-content min-content 1fr;
+      grid-template-rows: min-content calc(100vh - 8em);
       column-gap: 0.5rem;
     }
-
-    .grid-container>div {
-      grid-column: 1/-1;
-    }
   </style>
 </head>
 
-<body style="margin: 0; padding: 0">
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
   <u-toast></u-toast>
-  <div class="grid-container" style="padding: 1rem">
-    <div class="u-header">
-      <svg class="icon">
-        <use href="./icons.svg#ide" />
-      </svg>
-      <h1>HomeDing IDE</h1>
-
-      <span style="flex-grow: 1"></span>
-    </div>
-
-    <div class="u-navbar">
-      <a href="/">Home</a>
-      <a href="/board.htm">Board</a>
-      <a href="/microide.htm">IDE</a>
-      <a href="/log.htm">Log</a>
-      <span class="gap"></span>
-      <button class="once" id="doReboot">reboot</button>
-    </div>
+  <header>
+    <svg class="icon">
+      <use href="./icons.svg#ide" />
+    </svg>
+    <h1>HomeDing IDE</h1>
+  </header>
+
+  <div class="navbar">
+    <a href="/">Home</a>
+    <a href="/board.htm">Board</a>
+    <a href="/microide.htm">IDE</a>
+    <a href="/log.htm">Log</a>
+    <span class="gap"></span>
+    <button class="once" id="doReboot">reboot</button>
+  </div>
 
+  <main class="grid-container">
     <div style="grid-column: 1">
       <h3 style="display: inline-block; margin: 0">Files</h3>
       <button style="float: right" onclick="handleReloadFS()">reload</button>
@@ -155,7 +148,7 @@ <h3 style="display: inline-block; margin: 0">
 
     <pre style="grid-column: 2" class="code" contenteditable id="content" autocomplete="off" autocorrect="off"
       autocapitalize="off" spellcheck="false"></pre>
-  </div>
+  </main>
 
   <script>
     const filesObj = document.getElementById('files');
diff --git a/monitor.htm b/monitor.htm
index d31c36d..09dde2a 100644
--- a/monitor.htm
+++ b/monitor.htm
@@ -48,14 +48,15 @@
   </style>
 </head>
 
-<body>
-  <div class="u-header">
-    <a href="/" title="Startpage"><svg class="icon">
-        <use href="./icons.svg#device" />
-      </svg></a>
+<body class="sitelayout">
+  <header>
+    <svg class="icon">
+      <use href="./icons.svg#device" />
+    </svg>
     <h1>IoT HomeDing Monitor</h1>
-  </div>
+  </header>
 
+  <main>
   <table is="table-sortable" id="devices" class="dataTab">
     <thead>
       <tr>
@@ -74,9 +75,10 @@ <h1>IoT HomeDing Monitor</h1>
     </thead>
     <tbody></tbody>
   </table>
+</main>
 
   <script>
-    window.onerror = function (msg, url, lineNo, columnNo, error) {
+    window.onerror = function(msg, url, lineNo, columnNo, error) {
       var string = msg.toLowerCase();
       var substring = 'script error';
       if (string.indexOf(substring) > -1) {
@@ -173,10 +175,10 @@ <h1>IoT HomeDing Monitor</h1>
 
     function loadDevices() {
       fetch('/api/discovery')
-        .then(function (result) {
+        .then(function(result) {
           return result.json();
         })
-        .then(function (json) {
+        .then(function(json) {
 
           // all discovered devices are active
           for (a in json) { json[a].active = true; }
@@ -240,15 +242,15 @@ <h1>IoT HomeDing Monitor</h1>
         } else {
           statImg.src = 'i/config.svg';
           const controller = new AbortController();
-          window.setTimeout(function () { controller.abort(); }, param.FETCHTIMEOUT);
+          window.setTimeout(function() { controller.abort(); }, param.FETCHTIMEOUT);
 
           fetch('http://' + host + '/api/sysinfo', { signal: controller.signal })
-            .then(function (response) {
+            .then(function(response) {
               if (response.status === 200) {
                 return response.json();
               }
             })
-            .then(function (si) {
+            .then(function(si) {
               statImg.src = 'i/start.svg';
               obj.querySelector('.memory').textContent = si.freeHeap;
               obj.querySelector('.core').textContent = (si.coreVersion || '').replace('.ino', '') + ' ' + (si.coreBuild || '');
@@ -257,14 +259,14 @@ <h1>IoT HomeDing Monitor</h1>
               obj.querySelector('.flash').textContent = si.flashSize;
               obj.querySelector('.safemode').textContent = si.safemode;
             })
-            .catch(function (err) {
+            .catch(function(err) {
               statImg.src = 'i/stop.svg';
               obj.querySelector('.memory').textContent = '-';
               obj.querySelector('.uptime').textContent = '-';
               obj.querySelector('.safemode').textContent = '-';
               t.active = false;
             })
-            .finally(function () {
+            .finally(function() {
               remoteIndex++;
               window.setTimeout(updateNext, 200);
             });
@@ -272,10 +274,10 @@ <h1>IoT HomeDing Monitor</h1>
       } // if
     } // updateNext()
 
-    window.addEventListener('load', function () {
+    window.addEventListener('load', function() {
       state = 'l'; // load devices
       window.setTimeout(updateNext, 400);
-      window.setInterval(function () {
+      window.setInterval(function() {
         needLoadDevices = true;
       }, param.REFRESHLIST);
     });
diff --git a/portal.htm b/portal.htm
index b1641a5..6f87e06 100644
--- a/portal.htm
+++ b/portal.htm
@@ -19,63 +19,40 @@
   <script src="/micro.js"></script>
 
   <style>
-    html,
-    body {
-      height: 100%;
-      width: 100%;
-      overflow-y: hidden;
-    }
-
-    #ppage {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      min-height: 100%;
-    }
-
-    #pbody {
-      flex: 1;
-      display: flex;
-      flex-direction: row;
-    }
-
-    main {
-      flex: 1;
-    }
-
-    ul>hr {
+    ul.devices>hr {
       border: 0
     }
 
-    ul>li {
+    ul.devices>li {
       margin-bottom: 0.3em;
     }
   </style>
 </head>
 
-<body>
-  <div id="ppage">
-    <div class="row u-navbar">
-      <svg class="button" id="menuButton" tabindex=0>
-        <use href="./icons.svg#menu" />
-      </svg>
-      <a href="#/board.htm">HomePortal</a>
-      <span class="gap"></span>
-      <a href="#/monitor.htm">Monitor</a>
-      <svg class="button" id="reload" tabindex=0>
-        <use href="./icons.svg#reload" />
-      </svg>
-    </div>
-
-    <div id="pbody">
-      <nav>
-        <ul id="devices" style="padding-inline-start: 1rem;list-style-type: none;">
-        </ul>
-      </nav>
-      <main>
-        <iframe id="content" name="content" style="width: 100%;height:100%;border:0" src="about:blank"></iframe>
-      </main>
-    </div>
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
+  <header>
+    <h1>HomeDing Portal</h1>
+  </header>
+
+  <div class="navbar">
+    <svg class="button" id="menuButton" tabindex=0>
+      <use href="./icons.svg#menu" />
+    </svg>
+    <a href="#/board.htm">HomePortal</a>
+    <span class="gap"></span>
+    <a href="#/monitor.htm">Monitor</a>
+    <svg class="button" id="reload" tabindex=0>
+      <use href="./icons.svg#reload" />
+    </svg>
+  </div>
+
+  <nav>
+    <ul id="devices" style="padding-inline-start: 1rem;list-style-type: none;">
+    </ul>
+  </nav>
+  <main style="min-height:800px">
+    <iframe id="content" name="content" style="width: 100%;height:100%;border:0" src="about:blank"></iframe>
+  </main>
   </div>
 
   <script>
@@ -105,18 +82,10 @@
       var mbObj = document.querySelector('#menuButton');
       var navObj = document.querySelector('nav');
 
-      if (window.innerWidth > param.MENU_MIN_WIDTH) {
-        // menu is inside the page
-        navObj.classList.add('open');
-        navObj.classList.add('inpage');
-      } else {
-        // menu is over the page and closed intially
-        navObj.classList.remove('open');
-      }
+      navObj.classList.remove('open');
 
       navObj.addEventListener('click', function(e) {
-        if (!navObj.classList.contains('inpage'))
-          navObj.classList.remove('open');
+        navObj.classList.remove('open');
         resetTimeout();
       });
 
diff --git a/server/HomeDingServer.ts b/server/HomeDingServer.ts
index cd8e0e8..d36319f 100644
--- a/server/HomeDingServer.ts
+++ b/server/HomeDingServer.ts
@@ -328,7 +328,7 @@ export class HomeDingServer {
       // serve case specific files preferred over general files. 
       this._app.use(express.static(process.cwd() + '/' + this._caseFolder, { index: false }));
     }
-    this._app.use(express.static(process.cwd(), { index: false }));
+    this._app.use(express.static(process.cwd(), { index: ['index.htm'] }));
 
 
     if (!options.secure) {
diff --git a/test/app_offline.htm b/test/app_offline.htm
new file mode 100644
index 0000000..35ecb57
--- /dev/null
+++ b/test/app_offline.htm
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+
+<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Maintenance Mode</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      font-family: Arial, sans-serif;
+      background-color: #f3f4f6;
+      color: #333;
+    }
+    .container {
+      text-align: center;
+      padding: 20px;
+      border: 2px solid #ccc;
+      border-radius: 10px;
+      background-color: #fff;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+      font-size: 2.5em;
+      margin-bottom: 0.5em;
+    }
+    p {
+      font-size: 1.2em;
+      margin-top: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <h1>Maintenance Mode</h1>
+    <p>This website is currently under maintenance.</p>
+    <p>We apologize for any inconvenience and appreciate your understanding.</p>
+    <p>We will be back online soon. Please check back later.</p>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/index.htm b/test/index.htm
new file mode 100644
index 0000000..2232144
--- /dev/null
+++ b/test/index.htm
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <title>Test Pages</title>
+
+  <link rel="icon" type="image/png" href="/favicon48.png" sizes="48x48">
+  <meta name="application-name" content="Ding" />
+  <meta name="msapplication-config" content="/browserconfig.xml" />
+  <meta name="msapplication-TileColor" content="#2b5797" />
+  <meta name="msapplication-TileImage" content="/favicon144.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon180.png" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <link rel="manifest" href="/site.webmanifest" />
+  <meta name="theme-color" content="#ffffff" />
+
+  <link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" />
+
+</head>
+
+<body class="sitelayout">
+  <header>
+    <h1>Test Pages</h1>
+  </header>
+
+  <main>
+    <ul>
+      <li><a href="./app_offline.htm">app_offline</a></li>
+      <li><a href="./test-cards.htm">test-cards</a></li>
+      <li><a href="./test-dialog.htm">test-dialog</a></li>
+      <li><a href="./test-element.htm">test-element</a></li>
+      <li><a href="./test-gaugechart.htm">gaugechart</a></li>
+      <li><a href="./test-piechart.htm">piechart</a></li>
+      <li><a href="./test-md.htm">test-md</a></li>
+      <li><a href="./test-md1.md">test-md1</a></li>
+      <li><a href="./test-md2.md">test-md2</a></li>
+      <li><a href="./test-toast.htm">test-toast</a></li>
+      <li><a href="./test.time.htm">test.time</a></li>
+    </ul>
+  </main>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/dialogcheck.htm b/test/test-dialog.htm
similarity index 91%
rename from dialogcheck.htm
rename to test/test-dialog.htm
index 6a92ca2..639674b 100644
--- a/dialogcheck.htm
+++ b/test/test-dialog.htm
@@ -37,8 +37,7 @@
       background-size: 1.4rem;
     }
 
-    img,
-    .panel {
+    img {
       user-select: none;
     }
 
@@ -49,11 +48,12 @@
   </style>
 </head>
 
-<body>
-  <div class="u-header">
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
+  <header>
     <h1>Testing Dialogs...</h1>
-  </div>
-  <div class="u-navbar">
+  </header>
+
+  <div class="navbar">
     <a href="/">Home</a>
   </div>
 
diff --git a/elementcheck.htm b/test/test-element.htm
similarity index 71%
rename from elementcheck.htm
rename to test/test-element.htm
index 9e4e4aa..ad7ba86 100644
--- a/elementcheck.htm
+++ b/test/test-element.htm
@@ -22,29 +22,24 @@
   <script src="/micro.js"></script>
 </head>
 
-<body>
-  <div class="container-fluid">
-    <div class="row u-header">
-      <h1>Element Meta data check</h1>
-    </div>
+<body class="sitelayout">
+  <header>
+    <h1>Element Meta data check</h1>
+  </header>
 
-    <div class="card">
-      <div class="block">
-        <div class="form-grid">
-          <label for="elemsel">Element Type:</label>
-          <select id="elemsel">
-            <option disabled>select...</option>
-          </select>
-        </div>
-      </div>
-      <div class="block">
-        <object id="elemsvg" data="element.svg" type="image/svg+xml"></object>
-      </div>
+  <main>
+    <div class="form-grid">
+      <label for="elemsel">Element Type:</label>
+      <select id="elemsel">
+        <option disabled>select...</option>
+      </select>
     </div>
-  </div>
+    <object id="elemsvg" data="/element.svg" type="image/svg+xml"></object>
+
+  </main>
 
   <script>
-    window.onerror = function (msg, url, lineNo, columnNo, error) {
+    window.onerror = function(msg, url, lineNo, columnNo, error) {
       var string = msg.toLowerCase();
       var substring = 'script error';
       if (string.indexOf(substring) > -1) {
@@ -76,12 +71,12 @@ <h1>Element Meta data check</h1>
       elemsvgObj.getSVGDocument().api.create(d);
     }
 
-    window.addEventListener('load', function () {
-      fetch('elements.json')
-        .then(function (result) {
+    window.addEventListener('load', function() {
+      fetch('/elements.json')
+        .then(function(result) {
           return result.json();
         })
-        .then(function (elList) {
+        .then(function(elList) {
           elementsData = elList;
           selObj.innerHTML = '';
           for (e in elList) {
diff --git a/test-gaugechart.htm b/test/test-gaugechart.htm
similarity index 92%
rename from test-gaugechart.htm
rename to test/test-gaugechart.htm
index fce4862..ddc8241 100644
--- a/test-gaugechart.htm
+++ b/test/test-gaugechart.htm
@@ -27,9 +27,11 @@
   </script>
 </head>
 
-<body>
-  <div class="container">
+<body class="sitelayout">
+  <header>
     <h1>Gauge Chart Test Page</h1>
+  </header>
+  <main>
     <p>
       <button id="doClear">clear</button>
       <button id="doCase1a">Room</button>
@@ -61,7 +63,7 @@ <h3>Pie Chart Data</h3>
     <h3>Pie Chart Options</h3>
     <p>The current options:</p>
     <pre id="theOptions" class="code"></pre>
-  </div>
+  </main>
 
   <script>
     var chartObj = document.getElementById('testChart');
@@ -76,7 +78,7 @@ <h3>Pie Chart Options</h3>
     function case1a() {
       var opts = {
         title: "Room Temperature",
-        strokeWidth:0.4,
+        strokeWidth: 0.4,
         fontSize: '8px',
         units: "°C",
         minimum: 5,
@@ -98,7 +100,7 @@ <h3>Pie Chart Options</h3>
 
     function case1b() {
       var opts = {
-        strokeWidth:0,
+        strokeWidth: 0,
         title: "Outside Temperature",
         units: "°C",
         minimum: -20,
@@ -143,7 +145,7 @@ <h3>Pie Chart Options</h3>
     }
 
     function case3() {
-      var opts ={
+      var opts = {
         title: "Height",
         units: "mm",
         minimum: 0,
@@ -157,7 +159,7 @@ <h3>Pie Chart Options</h3>
       document.querySelector('#theData').textContent = JSON.stringify(data, null, 2);
     }
 
-    window.addEventListener('load', async function () {
+    window.addEventListener('load', async function() {
       await allSFCLoaded;
       case1a();
 
diff --git a/test-iotstyle.htm b/test/test-iotstyle.htm
similarity index 100%
rename from test-iotstyle.htm
rename to test/test-iotstyle.htm
diff --git a/test-linechart.htm b/test/test-linechart.htm
similarity index 100%
rename from test-linechart.htm
rename to test/test-linechart.htm
diff --git a/test/test-md.htm b/test/test-md.htm
index cf70912..3416bd5 100644
--- a/test/test-md.htm
+++ b/test/test-md.htm
@@ -50,15 +50,18 @@
   <script src="/sfc/loader.js"></script>
 </head>
 
-<body>
-
-  <h2>MD</h2>
-
-  <button id="load1">load</button>
-  <button id="text1">text</button>
-  <hr />
-  <u-markdown src="./test-md1.md" style="  background-color: azure; "></u-markdown>
-
+<body class="sitelayout">
+
+  <header>
+    <h1>MD</h1>
+  </header>
+  <main>
+
+    <button id="load1">load</button>
+    <button id="text1">text</button>
+    <hr />
+    <u-markdown src="./test-md1.md" style="  background-color: azure; "></u-markdown>
+  </main>
   <script>
     loadComponent('u-markdown').then(() => {
       console.log('Page', "all components loaded.");
diff --git a/test-piechart.htm b/test/test-piechart.htm
similarity index 95%
rename from test-piechart.htm
rename to test/test-piechart.htm
index 74ca497..89dacd0 100644
--- a/test-piechart.htm
+++ b/test/test-piechart.htm
@@ -27,9 +27,12 @@
   </script>
 </head>
 
-<body>
-  <div class="container">
+<body class="sitelayout">
+  <header>
     <h1>Pie Chart Test Page</h1>
+  </header>
+
+  <main>
 
     <p> <button id="doClear">clear</button> <button id="doDraw1">draw1</button> <button id="doDraw2">draw2</button>
       <button id="doDraw3">draw3</button> <button id="doDraw4">draw4</button>
@@ -54,7 +57,7 @@ <h3>Pie Chart Data</h3>
     <h3>Pie Chart Options</h3>
     <p>The current options:</p>
     <pre id="theOptions" class="code"></pre>
-  </div>
+  </main>
 
   <script>
     var chartElement = document.querySelector('#mypie');
diff --git a/test/test-toast.htm b/test/test-toast.htm
index baa0232..bf75bbf 100644
--- a/test/test-toast.htm
+++ b/test/test-toast.htm
@@ -27,77 +27,14 @@
   </script>
 </head>
 
-<body>
+<body class="sitelayout">
   <u-toast></u-toast>
-
-  <div class="container">
+  <header>
     <h1>Toast Test Page</h1>
+  </header>
+  <main>
 
-    <p>
-      <button id="doLog">Log</button>
-      <button id="doError">Error</button>
-    </p>
-    <p>API Documentation available at <a
-        href="https://homeding.github.io/#page=microchart-pie.md">https://homeding.github.io/#page=microchart-pie.md</a>
-    </p>
-  </div>
-
-  <script>
-    var toastElement = document.querySelector('u-toast');
-
-    window.addEventListener('DOMContentLoaded', async function() {
-      document.querySelector('#doLog').addEventListener('click', evt => {
-        toastElement.log('log text...');
-      });
-
-      document.querySelector('#doError').addEventListener('click', evt => {
-        toastElement.error('log text...');
-      });
-
-      await allSFCLoaded;
-      toastElement.log('Hello Toaster!');
-      toastElement.error('Failed !');
-      window.setTimeout(() => {
-        toastElement.info('progress...');
-      }, 2000);
-    });
-  </script>
-</body>
-
-</html><!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <title>Pie Chart Test</title>
-
-  <link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" />
-  <style>
-    pre.code {
-      display: block;
-      margin: 0.5em 0;
-      border: solid 1px black;
-      padding: 0.2em;
-      font-family: Courier New, Courier, monospace;
-      font-size: 0.75em;
-      line-height: 1.2;
-      color: black;
-      background-color: rgb(255, 255, 240);
-    }
-  </style>
-  <script src="/sfc/loader.js"></script>
-  <script>
-    var allSFCLoaded = window.loadComponent('u-toast', '/sfc');
-  </script>
-</head>
-
-<body>
-  <u-toast></u-toast>
-
-  <div class="container">
-    <h1>Toast Test Page</h1>
+  <main>
 
     <p>
       <button id="doLog">Log</button>
@@ -106,7 +43,7 @@ <h1>Toast Test Page</h1>
     <p>API Documentation available at <a
         href="https://homeding.github.io/#page=microchart-pie.md">https://homeding.github.io/#page=microchart-pie.md</a>
     </p>
-  </div>
+  </main>
 
   <script>
     var toastElement = document.querySelector('u-toast');
diff --git a/test/test.time.htm b/test/test.time.htm
index 8b03951..4cf0ba5 100644
--- a/test/test.time.htm
+++ b/test/test.time.htm
@@ -13,24 +13,25 @@
       background-color: lightgoldenrodyellow;
       padding: 0 0.2em;
     }
-
   </style>
   <script src="/sfc/loader.js"></script>
 </head>
 
-<body>
-
-  <h1>Date and Time</h1>
+<body class="sitelayout">
+  <header>
+    <h1>Date and Time</h1>
+  </header>
 
-  <div style="background-color: azure;padding:0.2em">
+  <main>
     values: <button id="b1">noon</button> <button id="b2">now</button>
     formatting: <button id="fd">date</button> <button id="ft">time</button> <button id="f1">short</button> <button
       id="f4">full</button>
-  </div>
-  <hr>
-  <p>The time is: <time id="t1" is="u-time" datetime="2025-01-28 14:02" datestyle="long" timestyle="short"></time> </p>
-  <p>The time is: <time is="u-time" datetime="2025-01-28" datestyle="short" timestyle="none">2025-01-28</time></p>
-  <p>The time is: <time datetime="2025-01-28" datestyle="short" timestyle="none">2025-01-28</time></p>
+    <hr>
+    <p>The time is: <time id="t1" is="u-time" datetime="2025-01-28 14:02" datestyle="long" timestyle="short"></time>
+    </p>
+    <p>The time is: <time is="u-time" datetime="2025-01-28" datestyle="short" timestyle="none">2025-01-28</time></p>
+    <p>The time is: <time datetime="2025-01-28" datestyle="short" timestyle="none">2025-01-28</time></p>
+  </main>
 
   <script>
     const tObj = document.querySelector('#t1');