t.html

<uiView>
   <div id="suuntoplus">
      <!-- Topmost: title field -->
      <div class="cm-fg sp-t-l" style="width:100%;height:30%;text-align:center;">
         <div style="left:calc(50% - 50%e);width:60%;bottom:-4%;">CYCLING CLIMBING</div>
      </div>
      <!-- vertical separator -->
      <div class="cm-fg p-hc" style="top:32%;width:2px;height:43%;opacity:0.6"></div>
      <!-- Field just under the title, left side -->
      <!-- Ascent -->
      <div class="sp-vertical-center" style="top:31%;left:calc(26% - 50%e);">
         <span class="f-ico cm-mid" style="padding-right:5px">&#xF112;</span>
         <span class="f-num sp-d-m">
            <!-- Eval element is replaced by the value from the input resource from the native duration resource. -->
            <eval input="/Zapp/{zapp_index}/Output/climbAttemptAscent" outputFormat="Count_Fourdigits" default="--" />
         </span>
      </div>
      <!-- Field just under the title, right side -->
      <!-- Time Duration of Ascent -->
      <div class="sp-vertical-center" style="top:31%;left:calc(80% - 50%e);">
         <span class="f-num sp-d-m">
            <!-- Eval element is replaced by the value from the input resource from the native duration resource. -->
            <eval input="/Zapp/{zapp_index}/Output/climbSpeedAscent" outputFormat="Speed_Threedigits" default="--" />
         </span>
         <span class="cm-bg cm-mid sp-t-s" style="margin-top:10%;left:calc(56% - 50%e)">km/h</span>
         <span class="f-ico cm-mid" style="margin-top:-8%;left:calc(30% - 50%e)">&#xF103;</span>
      </div>
      <!-- middle left side -->
      <!-- Number of Ascents -->
      <div class="sp-vertical-center" style="top:52%;left:calc(25% - 50%e);">
         <span class="f-ico cm-mid" style="padding-right:5px">&#xF265;</span>
         <span class="f-num sp-d-m">
            <!-- Eval element is replaced by the value from the input resource from the native duration resource. -->
            <eval input="/Zapp/{zapp_index}/Output/climbAttempts" outputFormat="Count_Threedigits" default="--" />
         </span>
      </div>
      <!-- middle right side -->
      <!-- Angle Ascent -->
      <div class="sp-vertical-center" style="top:52%;left:calc(74% - 50%e);">
         <span class="f-num sp-d-m">
            <!-- Eval element is replaced by the value from the input resource from the native duration resource. -->
            <eval input="/Zapp/{zapp_index}/Output/climbAngleAscent" outputFormat="Count_Threedigits" default="--" />
         </span>
         <span class="f-ico cm-mid" style="padding-right:5px">&#xF262;</span>
      </div>
      <!-- Bottom text area -->
      <!--  Workout Duration -->
      <div class="sp-d-m f-d-m f-num p-hc" style="top:calc(84% - 50%e)">
         <eval input="/Activity/Activity/-1/Duration/Current" outputFormat="Duration_Training" default="--" />
      </div>
   </div>
</uiView>