code-stats-vscode/assets/profile.html.eex

<link rel="stylesheet" href="${style}">
<div class="profile">
  <h3> ${profile.user} <sup>${profile.level}</sup> ${profile.total_xp} xp
    <% if( profile.new_xp > 0 ) { %>
      <sup>+<%= profile.new_xp %></sup>
    <% } %>
  </h3>

  <div class="progress">
    <div class="progress-bar" style='width:${profile.progress}%;'>    
    </div>
    <div class="progress-bar progress-bar-new" style='width:${profile.new_progress}%;'>    
    </div>
  </div>

  <div class="languages">
    <% for( let l in languages) { %>
      <div class="language-progress">
        <span class="tooltiptext">
          <strong><%=languages[l].xp %> xp</strong>        
          <% if( languages[l].new_xp > 0 ) { %>
            <sup>+<%= languages[l].new_xp %></sup>
          <% } %>        
        </span>
        <svg viewBox="0 0 100 100">
          <circle class="backg" cx="50" cy="50" r="45" ></circle>
          <circle class="newxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
          <circle class="oldxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
        </svg>
        <div class="language">
          <%= languages[l].name %>
            <span>
              <%= languages[l].level %>
            </span>
        </div>      
      </div>
      <% } %>
  </div>
  <p/>

  <div class="machines">
    <% for( let m in machines) { %>
      <div class="machine">
          <strong>
            <%= machines[m].name %>
          </strong>
          <sup> <%= machines[m].level %> </sup>
          <%= machines[m].xp %> xp
          <% if( machines[m].new_xp > 0 ) { %>
            <sup>+<%= machines[m].new_xp %></sup>
          <% } %>      
        <div class="progress">
          <div class="progress-bar" style='width:${machines[m].progress}%;'>
          </div>
          <div class="progress-bar progress-bar-new" style='width:${machines[m].new_progress}%;'>
          </div>
        </div>
      </div>
    <% } %>
  </div>
<div>