Works with QF list in MD

works-with-hardware.html

@@ -22,6 +22,10 @@
   <link href="css/qfield.css?ver=3" rel="stylesheet" media="screen">
   <script src="js/jquery-1.11.0.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
+  <script
+    type="module"
+    src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"
+  ></script>
 
 </head>
 
@@ -176,69 +180,52 @@ <h1>Works with QField hardware program</h1>
     <div class="container" style="max-width:1140px;">
       <div class="row">
         <div class="col-lg-9">
-            <p>The "Works with QField" badge, is designed to showcase hardware devices are compatible
-              with QField. Testing is performed by the manufacturers according to our program checklist.</p>
-            <p>Devices bering the "Works with QField" badge are guaranteed to work with QField and are supported by
-              the manufacturer. </p>
-            <p>To request this badge, a manufacturer must ensure the device works flawlessly with the latest version
-              of QField.</p>
-          </div>
+          <p>The "Works with QField" badge, is designed to showcase hardware devices are compatible
+            with QField. Testing is performed by the manufacturers according to our program checklist.</p>
+          <p>Devices bering the "Works with QField" badge are guaranteed to work with QField and are supported by
+            the manufacturer. </p>
+          <p>To request this badge, a manufacturer must ensure the device works flawlessly with the latest version
+            of QField.</p>
+        </div>
         <div class="col-lg-3">
-            <img src="images/logo_work-with.png">
+          <img src="images/logo_work-with.png">
 
         </div>
       </div>
       <div class="row">
-        <div class="col-lg-12"><h2>Devices</h2>
-        <p>
-          By using the <em>Buy now</em> referral links provided below, you are directly supporting the development of
-          QField.
-          Your contribution helps us to continue improving and expanding this project.</p>
+        <div class="col-lg-12 text-center">
+          <a href="#join" class="btn btn-primary btn-lg">Join the program</a>
         </div>
-        <div class="row feature">
-          <div class="col-lg-12">
-          <table >
-            <thead>
-              <th>Device</th>
-              <th>QField Version</th>
-              <th>Android</th>
-              <th>iOS</th>
-              <th>Windows</th>
-              <th>MacOS</th>
-              <th>Linux</th>
-              <th>Notes</th>
-              <th>Date</th>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Happy Monch 2</td>
-                <td>2.8</td>
-                <td>x</td>
-                <td>-</td>
-                <td>-</td>
-                <td>-</td>
-                <td>-</td>
-                <td>Using UDP socket</td>
-                <td>30.09.2023</td>
-              </tr>
-              <tr>
-                <td>Happy Mini 2</td>
-                <td>2.8</td>
-                <td>x</td>
-                <td>-</td>
-                <td>-</td>
-                <td>-</td>
-                <td>-</td>
-                <td>Using UDP socket</td>
-                <td>30.09.2023</td>
-              </tr>
-            </tbody>
-          </table>
-          x: Supported&nbsp;&nbsp;-: Not supported&nbsp;&nbsp;?: Unknown
+      </div>
+      <div class="row">
+        <div class="col-lg-12">
+          <h2>Devices</h2>
+          <p>
+            By using the <em>Buy now</em> referral links provided below, you are directly supporting the development of
+            QField.
+            Your contribution helps us to continue improving and expanding this project.</p>
         </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-12">
+          <zero-md src="/works-with-hardware.md"></zero-md>
+
+          x: Supported&nbsp;&nbsp;-: Not supported&nbsp;&nbsp;?: Unknown
         </div>
       </div>
     </div>
+
+    <div class="row">
+      <div class="col-lg-12 text-center">
+        <h2 id="join">Interested?</h2>
+        <iframe class="clickup-embed clickup-dynamic-height"
+          src="https://forms.clickup.com/2192114/f/22wqj-23547/ZO7VGCA00RX5DKM61N" onwheel="" width="100%" height="100%"
+          style="background: transparent; border: 1px solid #ccc;"></iframe>
+        <script async src="https://app-cdn.clickup.com/assets/js/forms-embed/v1.js"></script>
+
+      </div>
+    </div>
+    </div>
   </section>
 
   <!-- Section #3: fine lines -->

works-with-hardware.md

@@ -0,0 +1,4 @@
+| Device        | QField Version | Android | iOS | Windows | MacOS | Linux | Notes          | Date     |
+| ------------- | -------------- | ------- | --- | ------- | ----- | ----- | -------------- | -------- |
+| Happy Mini 2  | 2.8            | x       |     |         |       |       | Use UDP socket | 26.09.23 |
+| Happy Monch 2 | 2.9            | x       |     |         |       |       | Use UDP socket | 26.09.23 |