generated.html

<!-- example of generated markup -->

<section class="cc-ttz:container">
  <header class="cc-ttz:header">
    <h1 class="cc-ttz:title">
      Team Timezones
    </h1>

    <div class="cc-ttz:currentContainer">
      <h2 class="cc-ttz:currentTime">
        <svg class="cc-ttz:iconClock" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
          <path d="M13,26A13,13,0,1,1,26,13,13,13,0,0,1,13,26ZM13,1.322A11.678,11.678,0,1,0,24.678,13h0A11.678,11.678,0,0,0,13,1.322Z"></path>
          <path d="M12.785,15.179l1.053-.715,4.03-2.8.377-.26a.728.728,0,0,1,1.027.091h0a.715.715,0,0,1-.117,1h0c-.507.377-1.053.715-1.534,1.053L14.189,15.92c-.546.39-1.118.78-1.677,1.157a.7.7,0,0,1-.988-.156.741.741,0,0,1-.143-.325V6.872a.754.754,0,0,1,.611-.819.7.7,0,0,1,.819.546,1.95,1.95,0,0,1,0,.39v8.2Z" transform="translate(0.091 -0.227)"></path>
        </svg>
        4:47pm
        <button class="cc-ttz:enterTime">Enter time</button>
      </h2>

      <p class="cc-ttz:currentTimezoneContainer">
        <span class="cc-ttz:currentTimezoneLabel">Current time</span>
        <span class="cc-ttz:currentTimezoneAbbr">EST</span>
      </p>
    </div>

    <form class="cc-ttz:form" style="display: none;">
      <fieldset class="cc-ttz:formFieldset">
        <input value="" class="cc-ttz:formInput" type="text" placeholder="Enter time">
        <span class="cc-ttz:formTimezoneAbbr">EST</span>
      </fieldset>
      <div class="cc-ttz:formButtons">
        <button type="submit" class="cc-ttz:buttonApply">Apply</button>
        <button class="cc-ttz:cancel cc-ttz:buttonCancel">Cancel</button>
      </div>
    </form>
  </header>

  <ul class="cc-ttz:people">
    <!-- first item  -->
    <li class="cc-ttz:timezoneItem cc-ttz:timezoneItemFirst">
      <span class="cc-ttz:timezoneDate">Apr 2</span>
      <h3 class="cc-ttz:timezoneTime">3:47am EST</h3>
      <span class="cc-ttz:timezoneOffset">+13 hours</span>
      <div class="cc-ttz:personAvatar">
        <img class="cc-ttz:personAvatarImage" src="https://pbs.twimg.com/profile_images/425872431975133184/OLU3zsLe_400x400.jpeg">
      </div>
      <span class="cc-ttz:personName">Human Bean</span>
    </li>
    <!-- local time item  -->
    <li class="cc-ttz:timezoneItem cc-ttz:timezoneItemLocal"><!-- ... --></li>
    <!-- last item  -->
    <li class="cc-ttz:timezoneItem cc-ttz:timezoneItemLast"><!-- ... --></li>
  </ul>
</section>