Did design for Pokemon page

client/templates/pokemon.jade

@@ -1,23 +1,121 @@
 style
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    color: #3b3b3b;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    background: #2b2b2b;
+  }
+  table {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    display: table;
+    border-collapse: collapse;
+  }
   table.forme{
    display: inline-table;
-   border: 1px solid black;
+  }
-   }
+  td{
-   td{
    border: 1px solid black;
 
-   }
+  }
-   .img{
+  .img{
-   }
+  }
-   .imgcell{
+  .imgcell{
     width: 400px;
     height: 200px;
     text-align: center;
     vertical-align: middle;
-   }
+  }
-   .description{
+  .description{
-     width: 200px;
+     width: 400px;
-   }
+  }
+
+  tr {
+    display: table-row;
+    background: #f6f6f6;
+  }
+  tr:nth-of-type(odd) {
+    background: #e9e9e9;
+  }
+  th {
+    font-weight: 900;
+    color: #fff;
+    background: darkcyan;
+    height: 30px;
+    vertical-align: center;
+  }
+  td {
+    padding: 4px 8px;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    border: none;
+  }
+  .leftHeader{
+
+  }
+  .rightHeader{
+    width: 260px;
+  }
+  table.statTable{
+      border: 1px solid black;
+  }
+  .statDetail{
+      padding: 0px 10px;
+  }
+  .statCell{
+    width: 128px;
+  }
+  .stat{
+    height: 12px;
+    background-color: red;
+  }
+  #hp.stat{
+    background-color: #FF0000;
+    outline: 2px solid #A60000;
+  }
+  #attack.stat{
+    background-color: #F08030;
+    outline: 2px solid #9C531F;
+  }
+  #defense.stat{
+    background-color: #F8D030;
+    outline: 2px solid #A1871F;
+  }
+  #spatt.stat {
+    background-color: #6890F0;
+    outline: 2px solid #445E9C;
+  }
+  #spdef.stat {
+    background-color: #A7DB8D;
+    outline: 2px solid #4E8234;
+  }
+  #speed.stat {
+    background-color: #F85888;
+    outline: 2px solid #A13959;
+  }
+  #hp.statRow{
+    background-color: #FF5959;
+  }
+  #attack.statRow{
+    background-color: #F5AC78;
+  }
+  #defense.statRow{
+    background-color: #FAE078;
+  }
+  #spatt.statRow{
+    background-color: #9DB7F5;
+  }
+  #spdef.statRow{
+    background-color: #A7DB8D;
+  }
+  #speed.statRow{
+    background-color: #FA92B2;
+  }
+
 
 
 each forme, i in data.formedata
@@ -40,46 +138,66 @@ each forme, i in data.formedata
       td.imgcell(colspan=2)
         img.img(src="/Sprites/front/#{imgname}.png")
     tr
-      td Types
+      td.leftHeader Types
-      td #{forme.types}
+      td.rightHeader 
+        each type in forme.types
+          img(src="/Sprites/types/#{type.toLowerCase()}.png")
     tr
-      td Abilities
+      td.leftHeader Abilities
-      td #{forme.abilities}
+      td.rightHeader #{forme.abilities}
     tr
-      td Hidden Ability
+      td.leftHeader Hidden Ability
-      td #{forme.hiddenAbility}
+      td.rightHeader #{forme.hiddenAbility}
     tr
-      td Stats
+      td.leftHeader Stats
-      td
+      td.rightHeader
-        table
+        table.statTable
-          tr
+          tr.statRow#hp
-            td HP
+            td.statDetail HP
-            td #{forme.stats.hp}
+            td.statDetail #{forme.stats.hp}
-          tra
+            td.statDetail.statCell 
-            td Attack
+              div.stat#hp(style="width:#{(forme.stats.hp / 255) * 128}px")
-            td #{forme.stats.attack}
+          tr.statRow#attack
-          tr
+            td.statDetail Attack
-            td Defense
+            td.statDetail #{forme.stats.attack}
-            td #{forme.stats.defense}
+            td.statDetail.statCell
-          tr
+              div.stat#attack(style="width:#{(forme.stats.attack / 255) * 128}px")
-            td Sp. Att.
+          tr.statRow#defense
-            td #{forme.stats.specialAttack}
+            td.statDetail Defense
-          tr
+            td.statDetail #{forme.stats.defense}
-            td Sp. Def.
+            td.statDetail.statCell
-            td #{forme.stats.specialDefense}
+              div.stat#defense(style="width:#{(forme.stats.defense / 255) * 128}px")
-          tr
+          tr.statRow#spatt
-            td Speed
+            td.statDetail Sp. Att.
-            td #{forme.stats.speed}
+            td.statDetail #{forme.stats.specialAttack}
+            td.statDetail.statCell
+              div.stat#spatt(style="width:#{(forme.stats.specialAttack / 255) * 128}px")
+          tr.statRow#spdef
+            td.statDetail Sp. Def.
+            td.statDetail #{forme.stats.specialDefense}
+            td.statDetail.statCell
+              div.stat#spdef(style="width:#{(forme.stats.specialDefense / 255) * 128}px")
+          tr.statRow#speed
+            td.statDetail Speed
+            td.statDetail #{forme.stats.speed}
+            td.statDetail.statCell
+              div.stat#speed(style="width:#{(forme.stats.speed / 255) * 128}px")
     tr
-      td Tier
+      td.leftHeader Tier
-      td #{forme.tier}
+      td.rightHeader #{forme.tier}
     tr
-      td Generation
+      td.leftHeader Generation
-      td #{data.speciesdata.generation}
+      td.rightHeader #{data.speciesdata.generation}
 
 table
   tr
+    th 
+    th
+    th
+    th 
     th Learnset
+    th
+    th
   tr
     th Name
     th Type
@@ -91,9 +209,11 @@ table
   each move in data.learnablemoves
     tr
       td #{move}
-      td #{move_data[move].type}
+      td 
+        img(src="/Sprites/types/#{move_data[move].type.toLowerCase()}.png")
       td #{move_data[move].power}
-      td #{move_data[move].damage}
+      td
+        img(src="/Sprites/types/#{move_data[move].damage.toLowerCase()}.png")
       td #{move_data[move].accuracy}
       td #{move_data[move].priority}
       td.description #{move_data[move].description}