Did design for Pokemon page
This commit is contained in:
Deukhoofd
parent
53bc6677d4
commit
ff1867b5af
|
|
@ -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{
|
||||
}
|
||||
.imgcell{
|
||||
}
|
||||
.img{
|
||||
}
|
||||
.imgcell{
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.description{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.description{
|
||||
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 #{forme.types}
|
||||
td.leftHeader Types
|
||||
td.rightHeader
|
||||
each type in forme.types
|
||||
img(src="/Sprites/types/#{type.toLowerCase()}.png")
|
||||
tr
|
||||
td Abilities
|
||||
td #{forme.abilities}
|
||||
td.leftHeader Abilities
|
||||
td.rightHeader #{forme.abilities}
|
||||
tr
|
||||
td Hidden Ability
|
||||
td #{forme.hiddenAbility}
|
||||
td.leftHeader Hidden Ability
|
||||
td.rightHeader #{forme.hiddenAbility}
|
||||
tr
|
||||
td Stats
|
||||
td
|
||||
table
|
||||
tr
|
||||
td HP
|
||||
td #{forme.stats.hp}
|
||||
tra
|
||||
td Attack
|
||||
td #{forme.stats.attack}
|
||||
tr
|
||||
td Defense
|
||||
td #{forme.stats.defense}
|
||||
tr
|
||||
td Sp. Att.
|
||||
td #{forme.stats.specialAttack}
|
||||
tr
|
||||
td Sp. Def.
|
||||
td #{forme.stats.specialDefense}
|
||||
tr
|
||||
td Speed
|
||||
td #{forme.stats.speed}
|
||||
td.leftHeader Stats
|
||||
td.rightHeader
|
||||
table.statTable
|
||||
tr.statRow#hp
|
||||
td.statDetail HP
|
||||
td.statDetail #{forme.stats.hp}
|
||||
td.statDetail.statCell
|
||||
div.stat#hp(style="width:#{(forme.stats.hp / 255) * 128}px")
|
||||
tr.statRow#attack
|
||||
td.statDetail Attack
|
||||
td.statDetail #{forme.stats.attack}
|
||||
td.statDetail.statCell
|
||||
div.stat#attack(style="width:#{(forme.stats.attack / 255) * 128}px")
|
||||
tr.statRow#defense
|
||||
td.statDetail Defense
|
||||
td.statDetail #{forme.stats.defense}
|
||||
td.statDetail.statCell
|
||||
div.stat#defense(style="width:#{(forme.stats.defense / 255) * 128}px")
|
||||
tr.statRow#spatt
|
||||
td.statDetail Sp. Att.
|
||||
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 #{forme.tier}
|
||||
td.leftHeader Tier
|
||||
td.rightHeader #{forme.tier}
|
||||
tr
|
||||
td Generation
|
||||
td #{data.speciesdata.generation}
|
||||
td.leftHeader 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}
|
||||
Loading…
Reference in New Issue