word/memory.plp

   1 <(../common.inc.plp)><:
   2
   3 Html({
   4         raw => <<'EOT',
   5 <script src="/word/put.min.js"></script>
   6 <script src="/word/memory.js"></script>
   7 <style>
   8 /* cards */
   9 figure {
  10         display: inline-block;
  11         background: #224;
  12         border: 1px solid #888;
  13         margin: 2px;
  14         perspective: 100em;
  15         height: 300px;
  16         position: relative;
  17 }
  18 figure:not(.turn):hover {
  19         cursor: pointer;
  20 }
  21 figure, img {
  22         transition: all .5s ease-in;
  23 }
  24
  25 /* card faces */
  26 figure img {
  27         height: 100%;
  28         width: auto;
  29         backface-visibility: hidden;
  30         transform: rotateY(180deg); /* back */
  31         transform-style: preserve-3d;
  32         float: left; /* ff workaround to prevent click selection */
  33 }
  34
  35 /* turn results */
  36 figure.turn img {
  37         transform: rotateY(0deg);
  38 }
  39 figure.bad img {
  40         filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
  41 }
  42 figure.good {
  43         opacity: .8;
  44 }
  45 </style>
  46 EOT
  47 });
  48 say '<h1>memory</h1><p id="quiz"></p>';