index.view

<svg>
  <!-- setting background -->
  <svg><image id="background" href="greenbg.jpeg" x="0" y="0" width="100%" height="100%" class="dog"/></svg>
    
  <!-- Animation Group -->
    
    <svg><image id="dog" href="blank.png" x="0" y="0" width="100%" height="100%" class="dog"/></svg>
    <svg><image id="hearts" href="blank.png" x="0" y="0" width="100%" height="100%" class="dog"/></svg>
    <svg><image id="monthobject" href="blank.png" x="0" y="0" width="100%" height="100%" class="dog"/></svg>
  
  <!-- clock information set for 24 hour clock and DD MM YYYY-->
  
  <text id="myLabel" class="showLabel">
  <text id="date" class= "labelyellow"/> 
  <text id="ampm" class= "ampm"/> 
    
  <!-- battery information -->
  <text id="batteryLabel" x="243" y="23" class="label" />
  
  <!-- Data information -->
  <text id="stepsLabel" class="labelpurple" />
   <text id="distancelabel" x="42" y="175" class="labellightblue" /> 
   <text id="stairslabel" x="42" y="205" class="labellightblue" />   
   <text id="firelabel" x="42" y="235" class="labellightblue" /> 
   <text id="boltlabel" x="42" y="265" class="labellightblue" />   
   <text id="heartlabel" x="42" y="295" class="labellightblue" />  
  </text>

</svg>