Small UI improvements.

Views/Config/Index.cshtml

@@ -9,18 +9,18 @@
 <h1>@ViewData["Title"]</h1>
 
 <form method="post" enctype="multipart/form-data" asp-controller="Config" asp-action="LocalCertOpen">
-    <div class="container-fluid browser_connect_container">
-        <br />
-        By default, the OPC UA client cert is also used as the MQTT client cert, but a custom MQTT cert can also be provided here:
-        <br />
-        <p>
-            <input class="btn btn-primary" type="file" name="file" accept=".pfx,.der">
-            <input class="btn btn-primary" type="submit" value="Open">
-        </p>
-    </div>
+    <br />
+    By default, the OPC UA client cert is also used as the MQTT client cert, but a custom MQTT cert can also be provided here:
+    <br />
+    <p>
+        <input class="btn btn-primary" type="file" name="file" accept=".pfx,.der">
+        <input class="btn btn-primary" type="submit" value="Open">
+    </p>
 </form>
+<br />
+<hr style="border-top: 1px solid blue" />
+<br />
 <form action="/Config/Apply" method="post">
-    <br />
     <p>
         Apply Changes<br />
         <input class="btn btn-primary" type="submit" name="Apply" value="Apply" />

Views/Published/Index.cshtml

@@ -64,7 +64,7 @@
                         <form method="post" enctype="multipart/form-data" asp-controller="Published" asp-action="DeleteNode">
                             <input name="@node" class="btn btn-primary" type="submit" value="Delete">
                         </form>
-                        <hr style="border-top: 1px solid blue" />
+                        <br />
                     </li>
                 }
             }

Views/Translator/Index.cshtml

@@ -12,27 +12,41 @@
 <div class="container-fluid browser_connect_container">
     <p>
        You can use the <b>Azure OpenAI</b> service to generate and download a Web of Things (WoT) Thing Description for the asset you want to configure automatically.<br />
-       <a href ="https://eclipse.github.io/editdor/">Here</a> is a good online editor for WoT files. After validating its contents, choose the file below.<br />
+       <a href ="https://eclipse.github.io/editdor/">Here</a> is a good online editor for WoT files.<br />
+       After validating its contents, choose the file below.<br />
        Finally, send it to UA Edge Translator via OPC UA to configure the asset.
     </p>
+    <br />
     <hr style="border-top: 1px solid blue" />
+    <br />
     <form method="post" enctype="multipart/form-data" asp-controller="Translator" asp-action="Generate">
         <p>
-            ChatGPT prompt to automatically generate the description file for your asset (e.g. enter "Siemens Sentron PAC4200")<br />
+            1. ChatGPT prompt to automatically generate the description file for your asset (e.g. enter "Siemens Sentron PAC4200"):<br />
+        </p>
+        <p>
             @Html.TextBox("chatprompt", null, new { style = "width:50%;background-color:grey;color:white;" })
         </p>
         <p>
             <input id="chatButton" class="btn btn-primary btn_browser" type="submit" value="Generate & Download File">
         </p>
     </form>
+    <br />
     <hr style="border-top: 1px solid blue" />
+    <br />
     <form method="post" enctype="multipart/form-data" asp-controller="Translator" asp-action="Load">
+        <p>
+            2. Load the manually validated asset description file:<br />
+        </p>
         <p>
             <input class="btn btn-primary" type="file" name="file">
         </p>
+        <br />
         <hr style="border-top: 1px solid blue" />
+        <br />
+        <p>
+            3. Send the loaded asset description file to UA Edge Translator. UA Translator address format: opc.tcp://ipaddress:port <br />
+        </p>
         <p>
-            UA Edge Translator address. Format: opc.tcp://ipaddress:port <br />
             @Html.TextBox("endpointUrl", null, new { style = "width:50%;background-color:grey;color:white;" })
         </p>
         <p>