Permalink
Browse files

dist

  • Loading branch information...
1 parent 3d4ce7d commit 8ea200427dbd5b8872e1e4e5d124700a3741fb20 @donpark committed Oct 8, 2012
Showing with 598 additions and 1 deletion.
  1. +183 −0 dist/playingcards.css
  2. +82 −0 dist/playingcards.html
  3. +324 −0 dist/playingcards.js
  4. +9 −1 fabfile.py
View
@@ -0,0 +1,183 @@
+.card {
+ background-color: #fff;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ -moz-border-radius: 0.8em;
+ -webkit-border-radius: 0.8em;
+ border-radius: 0.8em;
+ -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
+ -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
+ box-shadow: 0 0 5px rgba(0,0,0,0.5);
+ float: left;
+ width: 16em;
+ height: 22.4em;
+ margin: 0 1.2em 1.2em 0;
+ position: relative;
+ z-index: 2;
+}
+.card.noshadow {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.card .card-back img {
+ width: 16em;
+ height: 22.4em;
+}
+.card .flipped {
+ -ms-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg);
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+}
+.card .heart,
+.card .diamond {
+ color: #f00;
+}
+.card .corner {
+ line-height: 1;
+ position: absolute;
+ text-align: center;
+}
+.card .corner span {
+ display: block;
+ font-size: 1.5em;
+ font-weight: bold;
+}
+.card .corner .number {
+ font-size: 2em;
+ height: 1.92em/2;
+ line-height: 1.92em/2;
+}
+.card .corner.top {
+ left: 0.64em;
+ top: 0.96em;
+}
+.card .corner.bottom {
+ bottom: 0.96em;
+ right: 0.64em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .card-ace span.suit.middle_center {
+ font-size: 10.24em;
+ left: 0.45517241379310347em;
+ top: 0.593103448275862em;
+}
+.card .card-ten .corner .number {
+ font-size: 1.5em;
+}
+.card .face img {
+ position: absolute;
+ left: 2.56em;
+ top: 2.08em;
+ width: 10.8em;
+ height: 18.24em;
+}
+.card .suit {
+ font-size: 5.8em;
+ font-weight: bold;
+ height: 0.8275862068965517em;
+ line-height: 0.8275862068965517em;
+ overflow: hidden;
+ position: absolute;
+ text-align: center;
+ width: 0.6896551724137931em;
+}
+.card .suit.top_center {
+ left: 1.0482758620689656em;
+ top: 0.3310344827586207em;
+}
+.card .suit.top_left {
+ left: 0.41379310344827586em;
+ top: 0.3310344827586207em;
+}
+.card .suit.top_right {
+ right: 0.41379310344827586em;
+ top: 0.3310344827586207em;
+}
+.card .suit.middle_center {
+ left: 1.0482758620689656em;
+ top: 1.517241379310345em;
+}
+.card .suit.middle_top {
+ left: 1.0482758620689656em;
+ top: 0.9655172413793103em;
+}
+.card .suit.middle_bottom {
+ bottom: 0.9655172413793103em;
+ left: 1.0482758620689656em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .suit.middle_left {
+ left: 0.41379310344827586em;
+ top: 1.517241379310345em;
+}
+.card .suit.middle_right {
+ right: 0.41379310344827586em;
+ top: 1.517241379310345em;
+}
+.card .suit.middle_top_center {
+ left: 1.0482758620689656em;
+ top: 0.8275862068965517em;
+}
+.card .suit.middle_top_left {
+ left: 0.41379310344827586em;
+ top: 1.103448275862069em;
+}
+.card .suit.middle_top_right {
+ right: 0.41379310344827586em;
+ top: 1.103448275862069em;
+}
+.card .suit.middle_bottom_left {
+ bottom: 1.103448275862069em;
+ left: 0.41379310344827586em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .suit.middle_bottom_right {
+ bottom: 1.103448275862069em;
+ right: 0.41379310344827586em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .suit.middle_bottom_center {
+ bottom: 0.8275862068965517em;
+ left: 1.0482758620689656em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .suit.bottom_center {
+ bottom: 0.3310344827586207em;
+ left: 1.0482758620689656em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .suit.bottom_left {
+ bottom: 0.3310344827586207em;
+ left: 0.41379310344827586em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.card .suit.bottom_right {
+ bottom: 0.3310344827586207em;
+ right: 0.41379310344827586em;
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
View
@@ -0,0 +1,82 @@
+
+<script id="card-back" type="text/x-mustache-template">
+ <div class="card-back"><span class="middle_center"><img src="img/back.png"/></span></div>
+</script>
+<script id="card-two" type="text/x-mustache-template">
+ <div class="card-two">
+ <div class="corner top"><span class="number">2</span><span>{{{suite.symbol}}}</span></div><span class="suit top_center">{{{suite.symbol}}}</span><span class="suit bottom_center">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">2</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-three" type="text/x-mustache-template">
+ <div class="card-three">
+ <div class="corner top"><span class="number">3</span><span>{{{suite.symbol}}}</span></div><span class="suit top_center">{{{suite.symbol}}}</span><span class="suit middle_center">{{{suite.symbol}}}</span><span class="suit bottom_center">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">3</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-four" type="text/x-mustache-template">
+ <div class="card-four">
+ <div class="corner top"><span class="number">4</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">4</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-five" type="text/x-mustache-template">
+ <div class="card-five">
+ <div class="corner top"><span class="number">5</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_center">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">5</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-six" type="text/x-mustache-template">
+ <div class="card-six">
+ <div class="corner top"><span class="number">6</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_left">{{{suite.symbol}}}</span><span class="suit middle_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">6</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-seven" type="text/x-mustache-template">
+ <div class="card-seven">
+ <div class="corner top"><span class="number">7</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_left">{{{suite.symbol}}}</span><span class="suit middle_top">{{{suite.symbol}}}</span><span class="suit middle_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">7</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-eight" type="text/x-mustache-template">
+ <div class="card-eight">
+ <div class="corner top"><span class="number">8</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_left">{{{suite.symbol}}}</span><span class="suit middle_top">{{{suite.symbol}}}</span><span class="suit middle_right">{{{suite.symbol}}}</span><span class="suit middle_bottom">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">8</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-nine" type="text/x-mustache-template">
+ <div class="card-nine">
+ <div class="corner top"><span class="number">9</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_top_left">{{{suite.symbol}}}</span><span class="suit middle_center">{{{suite.symbol}}}</span><span class="suit middle_top_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span><span class="suit middle_bottom_left">{{{suite.symbol}}}</span><span class="suit middle_bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">9</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-ten" type="text/x-mustache-template">
+ <div class="card-ten">
+ <div class="corner top"><span class="number">10</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_top_left">{{{suite.symbol}}}</span><span class="suit middle_top_center">{{{suite.symbol}}}</span><span class="suit middle_top_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span><span class="suit middle_bottom_center">{{{suite.symbol}}}</span><span class="suit middle_bottom_left">{{{suite.symbol}}}</span><span class="suit middle_bottom_right">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">10</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-jack" type="text/x-mustache-template">
+ <div class="card-jack">
+ <div class="corner top"><span class="number">J</span><span>{{{suite.symbol}}}</span></div><span class="face middle_center"><img src="img/faces/face-jack-{{suite.name}}.png"/></span>
+ <div class="corner bottom"><span class="number">J</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-queen" type="text/x-mustache-template">
+ <div class="card-queen">
+ <div class="corner top"><span class="number">Q</span><span>{{{suite.symbol}}}</span></div><span class="face middle_center"><img src="img/faces/face-queen-{{suite.name}}.png"/></span>
+ <div class="corner bottom"><span class="number">Q</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-king" type="text/x-mustache-template">
+ <div class="card-king">
+ <div class="corner top"><span class="number">K</span><span>{{{suite.symbol}}}</span></div><span class="face middle_center"><img src="img/faces/face-king-{{suite.name}}.png"/></span>
+ <div class="corner bottom"><span class="number">K</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
+<script id="card-ace" type="text/x-mustache-template">
+ <div class="card-ace">
+ <div class="corner top"><span class="number">A</span><span>{{{suite.symbol}}}</span></div><span class="suit middle_center">{{{suite.symbol}}}</span>
+ <div class="corner bottom"><span class="number">A</span><span>{{{suite.symbol}}}</span></div>
+ </div>
+</script>
Oops, something went wrong.

0 comments on commit 8ea2004

Please sign in to comment.