Updates

8 Bit Console.json

@@ -1 +1 @@
-{"frontHtml":"<section\n  class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100 w-100\"\n>\n  <section\n    class=\"bg-mid-gray pa4 pv3 br4 measure-wide w-100 h-100 overflow-hidden mr-auto ml-auto\"\n  >\n    <section\n      class=\"pa3 bg-light-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n    >\n      <!---->\n      <p class=\"ma0 dib mr-auto lh-audio append-play-btn-text grow-custom\">\n        {{audio}}\n      </p>\n      <!-- PROMPT -->\n      <p class=\"ma0 f3 lh-title dark-green\">\n        What is the meaning of what is being said?\n      </p>\n      <!---->\n      <!-- INPUT BLOCK START -->\n      <div id=\"input-container\" class=\"pt2\" placeholder=\"Type your answer here\">\n        {{type:term}}\n      </div>\n      <!---->\n      <!-- HINT BLOCK START -->\n      <div class=\"hint-block lh-title pv2\">\n        <a\n          class=\"hint link underline dark-green f3\"\n          href=\"#\"\n          onclick=\"this.style.display='none';document.getElementById('hint4753594160').style.display='inline-block';return false;\"\n        >\n          Click here for a hint</a\n        >\n        <div\n          id=\"hint4753594160\"\n          class=\"hint medium-green f3\"\n          style=\"display: none\"\n        >\n          {{Tags}}\n        </div>\n      </div>\n      <!---->\n    </section>\n  </section>\n</section>\n<!-- DON'T TOUCH BELOW THIS LINE PLEASE THANK YOU. The following img tag will configure Anki's built-in text input placeholder -->\n<img\n  class=\"dn\"\n  src\n  onerror=\"document.getElementById('typeans').placeholder=document.getElementById('input-container').getAttribute('placeholder'); document.getElementById('typeans').value=''; document.getElementById('typeans').removeAttribute('readonly');\"\n/>\n","backHtml":"<section\n  class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100 w-100\"\n>\n  <section\n    class=\"bg-mid-gray pa4 pv3 br4 measure-wide w-100 h-100 overflow-hidden mr-auto ml-auto\"\n  >\n    <section\n      class=\"pa3 bg-light-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n    >\n      <!---->\n      <p class=\"ma0 dib mr-auto lh-audio append-play-btn-text grow-custom\">\n        {{audio}}\n      </p>\n      <h1 class=\"ma0 dark-green f1 lh-title\">{{term}}</h1>\n      <p class=\"ma0 f2 lh-title\">{{reading}}</p>\n      <p class=\"ma0 f3 lh-title\">{{translation}}</p>\n      <p class=\"ma0 f3 lh-title\">{{transliteration}}</p>\n      <p class=\"ma0 f3 lh-title pb2\">{{Tags}}</p>\n      <!---->\n      <div class=\"f3 image-wrapper\">{{picture}}</div>\n    </section>\n  </section>\n</section>\n\n<!-- IMAGE FILTER -->\n<div class=\"off-screen\">\n  <!-- 2 Bit Console Color Filter -->\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    color-interpolation=\"sRGB\"\n    color-interpolation-filters=\"sRGB\"\n  >\n    <defs>\n      <filter id=\"colorFilter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n        <!-- Convert to Grayscale -->\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0.3333 0.3333 0.3333 0 0\n                                                  0.3333 0.3333 0.3333 0 0\n                                                  0.3333 0.3333 0.3333 0 0\n                                                  0      0      0      1 0\"\n        />\n        <!-- Apply discrete color mapping -->\n        <feComponentTransfer>\n          <feFuncR\n            type=\"discrete\"\n            tableValues=\"0.06 0.19 0.545 0.608\"\n          ></feFuncR>\n          <feFuncG\n            type=\"discrete\"\n            tableValues=\"0.22 0.384 0.675 0.737\"\n          ></feFuncG>\n          <feFuncB\n            type=\"discrete\"\n            tableValues=\"0.06 0.19 0.059 0.059\"\n          ></feFuncB>\n        </feComponentTransfer>\n      </filter>\n    </defs>\n  </svg>\n</div>\n","cardCss":"@import url(\"https://unpkg.com/[email protected]/css/tachyons.min.css\");\n\n/* https://fontlibrary.org/en/font/gnu-unifont */\n@font-face {\n  font-family: UnifontMedium;\n  /*src: url(UnifontMedium.woff) format(\"woff\");*/\n  src: url(\"https://cdn.jsdelivr.net/gh/avidrucker/anki-card-test-1/public/UnifontMedium.woff\")\n    format(\"woff\");\n}\n\n/* Anki-only styling to take up all vertical space of the card display window */\nhtml,\nbody,\ndiv#qa {\n  height: 100%;\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.invisible-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE, Edge and Firefox */\n.invisible-scrollbar {\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.shift-up-right {\n  position: relative;\n  top: -0.1rem;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap; /* Prevents content from \"spilling\" */\n  border-width: 0;\n}\n\n.visually-hidden:hover {\n  position: inherit;\n  width: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  clip: auto;\n  white-space: normal;\n  border-width: 0;\n}\n\n.off-screen {\n  position: absolute;\n  left: -9999px;\n}\n\n.balance {\n  text-wrap: balance;\n}\n\n.play-button {\n  color: inherit;\n  background-color: transparent;\n  border: none;\n  z-index: inherit;\n  cursor: inherit;\n  text-shadow: inherit;\n  line-height: inherit;\n  padding: 0;\n}\n\n:root {\n  --dark-green: #0f380f;\n  --medium-green: #306230;\n  --green: #8bac0f;\n  --light-green: #9bbc0f;\n  --light-gray: #cbcbcb;\n}\n\n.unifont-medium {\n  font-family: \"UnifontMedium\", mono;\n  font-weight: normal;\n  font-style: normal;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n  background-color: var(--light-gray);\n  overflow-y: hidden;\n}\n\n.dark-green {\n  color: var(--dark-green);\n}\n\n.bg-light-green {\n  background-color: var(--light-green);\n}\n\n.b--dark-green {\n  border-color: var(--dark-green);\n}\n\n.b--medium-green {\n  border-color: var(--medium-green);\n}\n\n.medium-green {\n  color: var(--medium-green);\n}\n\n.bg-green {\n  background-color: var(--green);\n}\n\n.bg-light-gray {\n  background-color: var(--light-gray);\n}\n\n.image-wrapper img:hover {\n  filter: url(); /* intentionally left blank */\n}\n\n.image-wrapper img {\n  filter: url(#colorFilter);\n}\n\n.image-wrapper {\n}\n\n.lh-audio {\n  line-height: 2.5rem;\n}\n\n.grow-custom > * {\n  -moz-osx-font-smoothing: grayscale;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  transition: transform 0.25s ease-out;\n}\n\n.grow-custom > *:hover,\n.grow-custom > *:focus {\n  transform: scale(1.05);\n}\n\n.grow-custom > *:active {\n  transform: scale(0.9);\n}\n\n/* input-reset input-8-bit f3 w-100 dark-green ba b--medium-green bg-green pa2 */\n#input-container input {\n  -webkit-appearance: none;\n  background-color: var(--green);\n  color: var(--dark-green);\n  font-size: 1.5rem;\n  padding: 0.5rem;\n  border: 1px solid var(--medium-green);\n  width: 100%;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n#input-container input::placeholder {\n  color: var(--medium-green);\n}\n\n#input-container input:focus {\n  outline: 0 none;\n  background-color: var(--light-green);\n  border: 1px solid var(--dark-green) !important;\n}\n\n#input-container input::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n/* Anki Only Styles*/\n.append-play-btn-text a::after {\n  content: \"▶\";\n  color: var(--medium-green);\n}\n\n.append-play-btn-text svg {\n  display: none;\n}\n\n.append-play-btn-text button {\n  font-size: 5rem;\n  cursor: pointer;\n}\n\n.append-play-btn-text {\n  height: 2.5rem;\n}\n\n.replay-button {\n  margin: 0;\n  font-size: 5rem;\n}\n","designName":"8 Bit Console"}
+{"frontHtml":"<section\n  class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100 w-100\"\n>\n  <section\n    class=\"bg-mid-gray pa4 pv3 br4 measure-wide w-100 h-100 overflow-hidden mr-auto ml-auto\"\n  >\n    <section\n      class=\"pa3 bg-light-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n    >\n      <!---->\n      <p class=\"ma0 dib mr-auto lh-audio append-play-btn-text grow-custom\">\n        {{audio}}\n      </p>\n      <!-- PROMPT -->\n      <p class=\"ma0 f3 lh-title dark-green\">\n        What is the meaning of what is being said?\n      </p>\n      <!---->\n      <!-- INPUT BLOCK START -->\n      <div id=\"input-container\" class=\"pt2\" placeholder=\"Type your answer here\">\n        {{type:term}}\n      </div>\n      <!---->\n      <!-- HINT BLOCK START -->\n      <div class=\"hint-block lh-title pv2\">\n        <a\n          class=\"hint link underline dark-green f3\"\n          href=\"#\"\n          onclick=\"this.style.display='none';document.getElementById('hint4753594160').style.display='inline-block';return false;\"\n        >\n          Click here for a hint</a\n        >\n        <div\n          id=\"hint4753594160\"\n          class=\"hint medium-green f3\"\n          style=\"display: none\"\n        >\n          {{Tags}}\n        </div>\n      </div>\n      <!---->\n    </section>\n  </section>\n</section>\n<!-- DON'T TOUCH BELOW THIS LINE PLEASE THANK YOU. The following img tag will configure Anki's built-in text input placeholder -->\n<img\n  class=\"dn\"\n  src\n  onerror=\"document.getElementById('typeans').placeholder=document.getElementById('input-container').getAttribute('placeholder'); document.getElementById('typeans').value=''; document.getElementById('typeans').removeAttribute('readonly');\"\n/>\n","backHtml":"<section\n  class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100 w-100\"\n>\n  <section\n    class=\"bg-mid-gray pa4 pv3 br4 measure-wide w-100 h-100 overflow-hidden mr-auto ml-auto\"\n  >\n    <section\n      class=\"pa3 bg-light-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n    >\n      <!---->\n      <p class=\"ma0 dib mr-auto lh-audio append-play-btn-text grow-custom\">\n        {{audio}}\n      </p>\n      <h1 class=\"ma0 dark-green f1 lh-title\">{{term}}</h1>\n      <p class=\"ma0 f2 lh-title\">{{reading}}</p>\n      <p class=\"ma0 f3 lh-title\">{{translation}}</p>\n      <p class=\"ma0 f3 lh-title\">{{transliteration}}</p>\n      <p class=\"ma0 f3 lh-title pb2\">{{Tags}}</p>\n      <!---->\n      <div class=\"f3 image-wrapper\">{{picture}}</div>\n    </section>\n  </section>\n</section>\n\n<!-- IMAGE FILTER -->\n<div class=\"off-screen\">\n  <!-- 2 Bit Console Color Filter -->\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    color-interpolation=\"sRGB\"\n    color-interpolation-filters=\"sRGB\"\n  >\n    <defs>\n      <filter id=\"colorFilter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n        <!-- Convert to Grayscale -->\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0.3333 0.3333 0.3333 0 0\n                0.3333 0.3333 0.3333 0 0\n                0.3333 0.3333 0.3333 0 0\n                0      0      0      1 0\"\n        />\n        <!-- Apply discrete color mapping -->\n        <feComponentTransfer>\n          <feFuncR\n            type=\"discrete\"\n            tableValues=\"0.137 0.267 0.553 0.816\"\n          ></feFuncR>\n          <feFuncG\n            type=\"discrete\"\n            tableValues=\"0.208 0.404 0.604 0.812\"\n          ></feFuncG>\n          <feFuncB\n            type=\"discrete\"\n            tableValues=\"0.004 0.063 0.290 0.616\"\n          ></feFuncB>\n        </feComponentTransfer>\n      </filter>\n    </defs>\n  </svg>\n</div>\n","cardCss":"@import url(\"https://unpkg.com/[email protected]/css/tachyons.min.css\");\n\n/* https://fontlibrary.org/en/font/gnu-unifont */\n@font-face {\n  font-family: UnifontMedium;\n  /*src: url(UnifontMedium.woff) format(\"woff\");*/\n  src: url(\"https://cdn.jsdelivr.net/gh/avidrucker/anki-card-test-1/public/UnifontMedium.woff\")\n    format(\"woff\");\n}\n\n/* Anki-only styling to take up all vertical space of the card display window */\nhtml,\nbody,\ndiv#qa {\n  height: 100%;\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.invisible-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE, Edge and Firefox */\n.invisible-scrollbar {\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.shift-up-right {\n  position: relative;\n  top: -0.1rem;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap; /* Prevents content from \"spilling\" */\n  border-width: 0;\n}\n\n.visually-hidden:hover {\n  position: inherit;\n  width: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  clip: auto;\n  white-space: normal;\n  border-width: 0;\n}\n\n.off-screen {\n  position: absolute;\n  left: -9999px;\n}\n\n.balance {\n  text-wrap: balance;\n}\n\n.play-button {\n  color: inherit;\n  background-color: transparent;\n  border: none;\n  z-index: inherit;\n  cursor: inherit;\n  text-shadow: inherit;\n  line-height: inherit;\n  padding: 0;\n}\n\n:root {\n  --dark-green: #233501;\n  --medium-green: #446710;\n  --green: #8d9a4a;\n  --light-green: #d0cf9d;\n  --light-gray: #cbcbcb;\n}\n\n.unifont-medium {\n  font-family: \"UnifontMedium\", mono;\n  font-weight: normal;\n  font-style: normal;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n  background-color: var(--light-gray);\n  overflow-y: hidden;\n}\n\n.dark-green {\n  color: var(--dark-green);\n}\n\n.bg-light-green {\n  background-color: var(--light-green);\n}\n\n.b--dark-green {\n  border-color: var(--dark-green);\n}\n\n.b--medium-green {\n  border-color: var(--medium-green);\n}\n\n.medium-green {\n  color: var(--medium-green);\n}\n\n.bg-green {\n  background-color: var(--green);\n}\n\n.bg-light-gray {\n  background-color: var(--light-gray);\n}\n\n.image-wrapper img:hover {\n  filter: url(); /* intentionally left blank */\n}\n\n.image-wrapper img {\n  filter: url(#colorFilter);\n}\n\n.image-wrapper {\n}\n\n.lh-audio {\n  line-height: 2.5rem;\n}\n\n.grow-custom > * {\n  -moz-osx-font-smoothing: grayscale;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  transition: transform 0.25s ease-out;\n}\n\n.grow-custom > *:hover,\n.grow-custom > *:focus {\n  transform: scale(1.05);\n}\n\n.grow-custom > *:active {\n  transform: scale(0.9);\n}\n\n/* input-reset input-8-bit f3 w-100 dark-green ba b--medium-green bg-green pa2 */\n#input-container input {\n  -webkit-appearance: none;\n  background-color: var(--green);\n  color: var(--dark-green);\n  font-size: 1.5rem;\n  padding: 0.5rem;\n  border: 1px solid var(--medium-green);\n  width: 100%;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n#input-container input::placeholder {\n  color: var(--medium-green);\n}\n\n#input-container input:focus {\n  outline: 0 none;\n  background-color: var(--light-green);\n  border: 1px solid var(--dark-green) !important;\n}\n\n#input-container input::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n/* Anki Only Styles*/\n.append-play-btn-text a::after {\n  content: \"▶\";\n  color: var(--medium-green);\n}\n\n.append-play-btn-text svg {\n  display: none;\n}\n\n.append-play-btn-text button {\n  font-size: 5rem;\n  cursor: pointer;\n}\n\n.append-play-btn-text {\n  height: 2.5rem;\n}\n\n.replay-button {\n  margin: 0;\n  font-size: 5rem;\n}\n","designName":"8 Bit Console LS"}