Card Types for Tsumego

Back Template.txt

{{FrontSide}}{{Extra}}

Front Template.html

<p id="pMain">{{Main}}</p><script>$('img').addClass('guruguru' + Math.floor(Math.random() * 8)).show();</script>

Styling.css

.card {
  font-family: Open Sans;
  font-size: 24px;
  text-align: center;
}

#pMain img { display: none; }
#pMain img.guruguru1 { -webkit-transform: rotate( 90deg); }
#pMain img.guruguru2 { -webkit-transform: rotate(180deg); }
#pMain img.guruguru3 { -webkit-transform: rotate(270deg); }
#pMain img.guruguru4 { -webkit-transform: scaleX(-1); }
#pMain img.guruguru5 { -webkit-transform: scaleX(-1) rotate( 90deg); }
#pMain img.guruguru6 { -webkit-transform: scaleX(-1) rotate(180deg); }
#pMain img.guruguru7 { -webkit-transform: scaleX(-1) rotate(270deg); }