Add machines

assets/profile.css

@@ -1,8 +1,8 @@
 .language {
   float: left;
-  width: 6rem;
-  height: 6rem;
-  padding-top: 2rem;
+  width: 5rem;
+  height: 5rem;
+  padding-top: 1.5rem;
   text-align: center;        
   margin: 0.1rem;
   border-radius: 50%;              
@@ -13,6 +13,11 @@
   border: solid 2px; 
 }
 
+.language span{
+  display: block;
+}
+
+
 .language span {
   font-weight: bold;
   font-size: 1.1em;
@@ -41,4 +46,55 @@ h3 {
 
 img {
   float: left;  
-}
+}
+
+.machines {
+  clear: both;
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+.machine {
+  float: none;
+}
+
+.progress {
+  height: 20px;
+  margin-bottom: 20px;
+  /* background-color: #f5f5f5; */
+  border-radius: 4px;
+  border: solid 1px; 
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+}
+
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  /* color: #fff; */
+  text-align: center;
+  background-color: #337ab7;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+  -webkit-transition: width .6s ease;
+  -o-transition: width .6s ease;
+  transition: width .6s ease;
+}
+
+.progress-bar-success {
+  background-color: #ddca7e;;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+

assets/profile.html

@@ -1,6 +1,40 @@
-<link rel="stylesheet" href="file:///${style}">
-<h3> ${user}'s Profile Level ${level} (${xp} XP)
-    <% if( newxp > 0 ) { %>
-     <sup>(<%= newxp %>)</sup>
+<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>
+</h3>
+<div style="display: block;">
+  <% for( let l in languages) { %>
+    <div class="language">
+      <%= languages[l].name %>
+        <span>
+          <%= languages[l].xp %>
+        </span>
+    </div>
+    <% } %>
+</div>
+<p/>
+<div class="machines">
+  <% for( let m in machines) { %>
+    <div class="machine">
+      <strong>
+        <%= machines[m].name %>
+      </strong>
+      <span>
+        <%= machines[m].xp %>
+      </span>
+
+      <div class="progress">
+        <div class="progress-bar progress-bar-success" style="width:50%">
+          <span class="sr-only">Level progress ${machines[m].progress}%.</span>
+        </div>
+        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 7%;">
+          <span class="sr-only">Recent level progress 7%.</span>
+        </div>
+      </div>
+
+    </div>
+    <% } %>
+</div>