<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: white;
      }
      .title {
        font-size: 24px;
      }
      .subtitle {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="title">User-Agent Client Hints Demo</div>
    <div id="brands" class="subtitle">Brands</div>
    <div id="mobile" class="subtitle">Mobile indicator</div>
    <div id="full" class="subtitle">Full User-Agent Data</div>

    <script type="text/javascript">
      // Enable User-Agent Client Hints API
      h5vcc.settings.set("NavigatorUAData", 1);

      if (navigator.userAgentData) {
        var brands_result = document.createElement("div");
        brands_result.innerHTML = JSON.stringify(navigator.userAgentData.brands, null, " ");
        brands_result.style.fontSize = "16px";
        var brands_element = document.getElementById("brands");
        brands_element.appendChild(brands_result);

        var mobile_result = document.createElement("div");
        mobile_result.innerHTML = navigator.userAgentData.mobile;
        mobile_result.style.fontSize = "16px";
        var mobile_element = document.getElementById("mobile");
        mobile_element.appendChild(mobile_result);

        navigator.userAgentData.getHighEntropyValues(
          ["architecture", "bitness", "model", "platformVersion",
           "uaFullVersion", "cobaltBuildNumber", "cobaltBuildConfiguration",
           "jsEngineVersion", "rasterizer", "evergreenVersion",
           "starboardVersion", "originalDesignManufacturer",
           "deviceType", "chipset", "modelYear", "deviceBrand",
           "connectionType", "aux"])
          .then(ua => {
            // Cobalt returns a CobaltUADataValuesInterface object instead of a
            // dictionary as dictionary promises are currently not supported.
            // Thus we must reconstruct the dictionary from the interface object
            // returned from getHighEntropyValues().
            var full_JSON = new Object();
            full_JSON.architecture = ua.architecture;
            full_JSON.bitness = ua.bitness;
            full_JSON.model = ua.model;
            full_JSON.platformVersion = ua.platformVersion;
            full_JSON.uaFullVersion = ua.uaFullVersion;
            full_JSON.cobaltBuildNumber = ua.cobaltBuildNumber;
            full_JSON.cobaltBuildConfiguration = ua.cobaltBuildConfiguration;
            full_JSON.jsEngineVersion = ua.jsEngineVersion;
            full_JSON.rasterizer = ua.rasterizer;
            full_JSON.evergreenVersion = ua.evergreenVersion;
            full_JSON.starboardVersion = ua.starboardVersion;
            full_JSON.originalDesignManufacturer = ua.originalDesignManufacturer;
            full_JSON.deviceType = ua.deviceType;
            full_JSON.chipset = ua.chipset;
            full_JSON.modelYear = ua.modelYear;
            full_JSON.deviceBrand = ua.deviceBrand;
            full_JSON.connectionType = ua.connectionType;
            full_JSON.aux = ua.aux;

            var full_result = document.createElement("div");
            full_result.innerHTML = JSON.stringify(full_JSON, null, " ");
            full_result.style.fontSize = "16px";
            var full_element = document.getElementById("full");
            full_element.appendChild(full_result);
          });
      } else {
        console.log("User-Agent Client Hints API not enabled");
      }
    </script>
  </body>
</html>