code-stats-vscode/assets/profile.html.eex
Valentin Ivanov ed2b511762 About done
2018-07-04 13:37:33 +02:00

66 lines
2.4 KiB
Elixir

<link rel="stylesheet" href="file:///${profile.style}">
<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
<% if( profile.new_xp > 0 ) { %>
<sup>(
<%= profile.new_xp %>)</sup>
<% } %>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${profile.progress}%;'>
<span class="sr-only">Level progress ${profile.progress - profile.new_progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${profile.new_progress}%;'>
<span class="sr-only">Recent level progress ${profile.new_progress}%.</span>
</div>
</div>
<div style="clear: both;">
<% for( let l in languages) { %>
<div class="circle-progress">
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].level %>
</span>
</div>
<span class="tooltiptext">
Total XP: <strong><%=languages[l].xp %></strong> <br/>
New XP: <%=languages[l].new_xp%>
</span>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#424242" stroke-width="5"></circle>
<circle cx="50" cy="50" r="45" stroke="#ddca7e" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
<circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
</svg>
</div>
<% } %>
</div>
<p/>
<div class="machines">
<% for( let m in machines) { %>
<div class="machine">
<strong>
<%= machines[m].name %>
</strong>
<span class="level">
level <%= machines[m].level %>
</span>
<span class="xp">
(<%= machines[m].xp %> XP)
</span>
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
<span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${machines[m].new_progress}%;'>
<span class="sr-only">Recent level progress ${machines[m].new_progress}%.</span>
</div>
</div>
</div>
<% } %>
</div>
<circle cx="60" cy="60" r="50"/>