Composer page payload field update and info

Author: tjvandam

composer.html

@@ -48,6 +48,15 @@
     </div>
   </div>
 
+  <div id="composer-instructions" class="commands-section page-section">
+    <details class="section section-card" open>
+      <summary class="section-card-title"><span class="icon circle-info" aria-hidden="true"></span>Instructions</summary>
+      <div class="section-card-body">
+        <p>Select a settings file, review or adjust values, then choose a payload type at the bottom to copy/export the payload.</p>
+      </div>
+    </details>
+  </div>
+
   <div id="settings-area" class="settings-section page-section">
     <details class="section section-card">
       <summary class="section-card-title"><span class="icon gear" aria-hidden="true"></span>Settings</summary>
@@ -115,12 +124,14 @@
       <option value="ble">BLE custom command</option>
       <option value="file_export">File export</option>
     </select>
-    <input type="text" id="hex-output" readonly value="(no settings selected)" />
-    <button id="copy-button" onclick="copyToClipboard()" aria-label="Copy or export">
-      <svg id="payload-icon" class="payload-icon" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false">
-        <path d="M224 0c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l160 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L224 0zM64 128l64 0 0 64-64 0c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l192 0c17.7 0 32-14.3 32-32l0-64 64 0 0 64c0 53-43 96-96 96L64 576c-53 0-96-43-96-96l0-256c0-53 43-96 96-96z"/>
-      </svg>
-    </button>
+    <div class="payload-row">
+      <input type="text" id="hex-output" readonly value="(no settings selected)" />
+      <button id="copy-button" onclick="copyToClipboard()" aria-label="Copy or export">
+        <svg id="payload-icon" class="payload-icon" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false">
+          <path d="M224 0c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l160 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L224 0zM64 128l64 0 0 64-64 0c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l192 0c17.7 0 32-14.3 32-32l0-64 64 0 0 64c0 53-43 96-96 96L64 576c-53 0-96-43-96-96l0-256c0-53 43-96 96-96z"/>
+        </svg>
+      </button>
+    </div>
   </div>
 
   <div id="import-preview-overlay" class="import-preview-overlay hidden" role="dialog" aria-modal="true"

style.css

@@ -1374,7 +1374,8 @@ h2 {
     color: white;
     padding: 10px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: stretch;
     gap: 8px;
     justify-content: center;
     font-family: monospace;
@@ -1392,6 +1393,7 @@ h2 {
 }
 
 #payload-type {
+    width: 100%;
     height: 40px;
     padding: 0 10px;
     border-radius: var(--radius-sm);
@@ -1402,7 +1404,7 @@ h2 {
 }
 
 #hex-output {
-    width: 70%;
+    width: 100%;
     height: 40px;
     padding: 0 10px;
     font-family: monospace;
@@ -1412,6 +1414,17 @@ h2 {
     color: #000;
 }
 
+.payload-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.payload-row #hex-output {
+    flex: 1;
+}
+
 #copy-button {
     background: linear-gradient(145deg, #1f6feb, #1952b8);
     color: #fff;
@@ -2642,6 +2655,10 @@ body.dfu-active .bottom-nav .dfu-only-nav {
     background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M480%20576L192%20576C139%20576%2096%20533%2096%20480L96%20160C96%20107%20139%2064%20192%2064L496%2064C522.5%2064%20544%2085.5%20544%20112L544%20400C544%20420.9%20530.6%20438.7%20512%20445.3L512%20512C529.7%20512%20544%20526.3%20544%20544C544%20561.7%20529.7%20576%20512%20576L480%20576zM192%20448C174.3%20448%20160%20462.3%20160%20480C160%20497.7%20174.3%20512%20192%20512L448%20512L448%20448L192%20448zM224%20216C224%20229.3%20234.7%20240%20248%20240L424%20240C437.3%20240%20448%20229.3%20448%20216C448%20202.7%20437.3%20192%20424%20192L248%20192C234.7%20192%20224%20202.7%20224%20216zM248%20288C234.7%20288%20224%20298.7%20224%20312C224%20325.3%20234.7%20336%20248%20336L424%20336C437.3%20336%20448%20325.3%20448%20312C448%20298.7%20437.3%20288%20424%20288L248%20288z%22/%3E%3C/svg%3E');
 }
 
+.icon.circle-info {
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20fill=%22black%22%20d=%22M256%20512C114.6%20512%200%20397.4%200%20256S114.6%200%20256%200s256%20114.6%20256%20256S397.4%20512%20256%20512zm0-384c-26.5%200-48%2021.5-48%2048s21.5%2048%2048%2048%2048-21.5%2048-48-21.5-48-48-48zm64%20264c0%208.8-7.2%2016-16%2016h-32v-96c0-8.8-7.2-16-16-16h-32c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016h16v80h-16c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016h80c8.8%200%2016-7.2%2016-16z%22/%3E%3C/svg%3E');
+}
+
 .icon.envelope {
     background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202026%20Fonticons,%20Inc.--%3E%3Cpath%20d=%22M112%20128C85.5%20128%2064%20149.5%2064%20176C64%20191.1%2071.1%20205.3%2083.2%20214.4L291.2%20370.4C308.3%20383.2%20331.7%20383.2%20348.8%20370.4L556.8%20214.4C568.9%20205.3%20576%20191.1%20576%20176C576%20149.5%20554.5%20128%20528%20128L112%20128zM64%20260L64%20448C64%20483.3%2092.7%20512%20128%20512L512%20512C547.3%20512%20576%20483.3%20576%20448L576%20260L377.6%20408.8C343.5%20434.4%20296.5%20434.4%20262.4%20408.8L64%20260z%22/%3E%3C/svg%3E');
 }