update UI OTA template with late copy changes based on device (#21957)

for #19448

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Manual QA for all new/changed functionality

frontend/templates/enroll-ota.html

@@ -116,10 +116,15 @@
       <img src="{{.URLPrefix}}/assets/images/fleet-logo.svg" />
     </header>
     <section id="main-content">
-      <h1>Enroll your device to Fleet</h1>
+      <h1>
+        Enroll your
+        <span data-attribute="dynamic-device-type">iPhone or iPad</span> to
+        Fleet
+      </h1>
       <p class="page-description">
-        Follow the instructions below to download and install the Fleet profile
-        on your device.
+        On your
+        <span data-attribute="dynamic-device-type">iPhone or iPad</span>, follow
+        the instructions below to download and install the Fleet profile.
       </p>
       <ol>
         <li>
@@ -159,22 +164,33 @@ <h1>Enroll your device to Fleet</h1>
       </ol>
     </section>
     <script>
-      const os = navigator.userAgent.includes("iPhone") ? "ios" : "iPadOS";
-
-      const profileDownloadedImg = document.querySelector(
-        ".profile-downloaded-img"
-      );
-      const installProfileImg = document.querySelector(".install-profile-img");
-
-      // setting image src based on OS
-      profileDownloadedImg.setAttribute(
-        "src",
-        `{{.URLPrefix}}/assets/images/${os}-profile-downloaded.png`
-      );
-      installProfileImg.setAttribute(
-        "src",
-        `{{.URLPrefix}}/assets/images/${os}-install-profile.png`
-      );
+      document.addEventListener("DOMContentLoaded", function () {
+        const userAgent = navigator.userAgent;
+        const isIPhone = /iPhone/.test(userAgent);
+        const isIPad = /iPad/.test(userAgent);
+
+        // update text content for device type
+        let deviceType = "iPhone or iPad";
+        if (isIPhone) {
+          deviceType = "iPhone";
+        } else if (isIPad) {
+          deviceType = "iPad";
+        }
+        document
+          .querySelectorAll('[data-attribute="dynamic-device-type"]')
+          .forEach((el) => {
+            el.textContent = deviceType;
+          });
+
+        // update image src based on OS
+        const osImagePrefix = isIPhone ? "ios" : "iPadOS";
+        document.querySelector(
+          ".profile-downloaded-img"
+        ).src = `{{.URLPrefix}}/assets/images/${osImagePrefix}-profile-downloaded.png`;
+        document.querySelector(
+          ".install-profile-img"
+        ).src = `{{.URLPrefix}}/assets/images/${osImagePrefix}-install-profile.png`;
+      });
     </script>
   </body>
 </html>