Updates

Brutalist HTML.json

@@ -1 +1 @@
-{"frontHtml":"{{#audio}}\n<section class=\"pa3 min-h-100 bg-white black flex flex-column\">\n  <p class=\"ma0 f3 blue pointer underline dib button mr-auto\">{{audio}}</p>\n  <p class=\"ma0 f3 pt2\">What is the meaning of what is being said?</p>\n</section>\n{{/audio}}\n","backHtml":"<section class=\"pa3 min-h-100 bg-white black flex flex-column\">\n  <p class=\"ma0 f3 blue underline pointer dib button mr-auto\">{{audio}}</p>\n  <h1 class=\"ma0 f1 pt2\">{{term}}</h1>\n  <p class=\"ma0 f2\">{{reading}}</p>\n  <ul class=\"mv2\">\n    {{#translation}}\n    <li class=\"ma0 f3\">{{translation}}</li>\n    {{/translation}} {{#transliteration}}\n    <li class=\"ma0 f3\">{{transliteration}}</li>\n    {{/transliteration}} {{#Tags}}\n    <li class=\"ma0 f3 pb2\">{{Tags}}</li>\n    {{/Tags}}\n  </ul>\n  {{#picture}}\n  <div id=\"dynamic-img\" class=\"f3 image-wrapper v-align-mid\">{{picture}}</div>\n  {{/picture}}\n</section>\n","cardCss":":root {\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n  overflow-y: scroll;\n  font-family: \"Liberation Serif\", \"DejaVu Serif\", \"Times New Roman\",\n    \"SF Pro Display\", \"Segoe UI\", system-ui, serif;\n}\n\n.v-align-mid {\n  vertical-align: middle;\n  line-height: 0;\n}\n","designName":"Brutalist HTML"}
+{"frontHtml":"{{#audio}}\n<section class=\"pa3 min-h-100 bg-white black flex flex-column\">\n  <p\n    class=\"ma0 f3 blue pointer underline dib button mr-auto grow-custom append-play-btn-text\"\n  >\n    {{audio}}\n  </p>\n  <p class=\"ma0 f3 pt2\">What is the meaning of what is being said?</p>\n  <!---->\n  <!-- INPUT BLOCK START -->\n  <div id=\"input-container\" class=\"pt2 f3\" 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 blue underline 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 id=\"hint4753594160\" class=\"hint f3\" style=\"display: none\">\n      {{Tags}}\n    </div>\n  </div>\n  <!---->\n</section>\n{{/audio}}\n","backHtml":"<section class=\"pa3 min-h-100 bg-white black flex flex-column\">\n  <p\n    class=\"ma0 f3 blue underline pointer dib button mr-auto grow-custom append-play-btn-text\"\n  >\n    {{audio}}\n  </p>\n  <h1 class=\"ma0 f1 pt2\">{{term}}</h1>\n  {{#reading}}\n  <p class=\"ma0 f2 pt1\">{{reading}}</p>\n  {{/reading}}\n  <ul class=\"mv2\">\n    {{#translation}}\n    <li class=\"ma0 f3\">{{translation}}</li>\n    {{/translation}} {{#transliteration}}\n    <li class=\"ma0 f3\">{{transliteration}}</li>\n    {{/transliteration}} {{#Tags}}\n    <li class=\"ma0 f3 pb2\">{{Tags}}</li>\n    {{/Tags}}\n  </ul>\n  {{#picture}}\n  <div id=\"dynamic-img\" class=\"f3 image-wrapper v-align-mid\">{{picture}}</div>\n  {{/picture}}\n</section>\n","cardCss":":root {\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n  overflow-y: scroll;\n  font-family: \"Liberation Serif\", \"DejaVu Serif\", \"Times New Roman\",\n    \"SF Pro Display\", \"Segoe UI\", system-ui, serif;\n}\n\n.v-align-mid {\n  vertical-align: middle;\n  line-height: 0;\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.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  background-color: white;\n  font-size: 1.5rem;\n  padding: 0.5rem;\n  width: 100%;\n  text-align: left;\n  color: black;\n}\n\n/* Anki Only Styles*/\n.append-play-btn-text a::after {\n  content: \"▶\";\n  color: red;\n}\n\n.append-play-btn-text svg {\n  display: none;\n}\n\n.append-play-btn-text button {\n  font-size: 2.5rem;\n  line-height: 3rem;\n  cursor: pointer;\n  height: 3rem;\n  width: 3rem;\n  vertical-align: top;\n}\n\n.append-play-btn-text {\n}\n\n.replay-button {\n  margin: 0;\n  font-size: 2.5rem;\n}\n","designName":"Brutalist HTML"}

Game Menu UI.json

@@ -1 +1 @@
-{"frontHtml":"<section class=\"white unifont-medium pa3 flex flex-column lh-title relative\">\n  <div class=\"content-wrapper pa3 relative z-0\">\n    <div\n      class=\"ba b--white bw1 br4 pa3 border-glow bg-linear-blue relative z-0 pb4\"\n    >\n      <div class=\"glowing-text\">\n        <p tabindex=\"0\" class=\"ma0 dib f2 z-1 pointer focused-text ml1 mb1\">\n          {{audio}}\n        </p>\n        <div class=\"ph2\">\n          <p tabindex=\"0\" class=\"ma0 f2 focused-text di\">\n            What is the meaning of what is being said?\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n","backHtml":"<section class=\"white unifont-medium pa3 flex flex-column lh-title relative\">\n  <div class=\"content-wrapper pa3 relative z-0\">\n    <div\n      class=\"ba b--white bw1 br4 pa3 border-glow bg-linear-blue relative z-0 pb4\"\n    >\n      <div class=\"glowing-text\">\n        <p tabindex=\"0\" class=\"ma0 dib f2 z-1 pointer focused-text ml1 mb1\">\n          {{audio}}\n        </p>\n        <div class=\"back-content ph2\">\n          <div>\n            <h1 tabindex=\"0\" class=\"ma0 f2 lh-copy z-1 focused-text dib\">\n              {{term}}\n            </h1>\n          </div>\n          {{#reading}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 lh-copy z-1 focused-text dib\">\n              {{reading}}\n            </p>\n          </div>\n          {{/reading}} {{#translation}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 z-1 focused-text dib\">\n              {{translation}}\n            </p>\n          </div>\n          {{/translation}} {{#transliteration}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 z-1 focused-text dib\">\n              {{transliteration}}\n            </p>\n          </div>\n          {{/transliteration}} {{#Tags}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 z-1 focused-text dib\">{{Tags}}</p>\n          </div>\n          {{/Tags}} {{#picture}}\n          <div\n            tabindex=\"0\"\n            class=\"image-overlay focused-text relative matrix measure-narrow z-1 mt2 lh-0\"\n          >\n            <div class=\"img-container lh-0\">{{picture}}</div>\n            <div class=\"img-container o-50 bloom absolute left-0 top-0 lh-0\">\n              {{picture}}\n            </div>\n          </div>\n          {{/picture}}\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n","cardCss":":root {\n  --neon-blue: cyan;\n}\n\n/* https://fontlibrary.org/en/font/gnu-unifont */\n@font-face {\n  font-family: UnifontMedium;\n  src: url(UnifontMedium.woff) format(\"woff\");\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n  background-color: black;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  overflow: hidden;\n  overflow-y: scroll;\n}\n\n.noto-sans-jp {\n  font-family: \"Noto Sans JP\", sans-serif;\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n.unifont-medium {\n  font-family: \"UnifontMedium\", mono;\n  font-weight: normal;\n  font-style: normal;\n}\n\n.matrix {\n  position: relative;\n  display: inline-block;\n}\n\n.matrix::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 255, 255, 0.1); /* Orange color with some opacity */\n  mix-blend-mode: overlay;\n}\n\n.matrix:hover::after {\n  background: none; /* Remove the background on hover */\n  mix-blend-mode: normal; /* Reset mix-blend-mode */\n}\n\n.image-overlay img {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%; /* Ensures overlay size matches the base image */\n  height: auto;\n  display: block; /* Removes any extra space below the image */\n  filter: saturate(0.5) contrast(1.25);\n}\n\n.image-overlay:hover img {\n  filter: saturate(1) contrast(1);\n}\n\n.image-overlay img {\n  position: relative; /* Keeps the base image in the normal flow */\n}\n\n.glowing-text {\n  color: white; /* White text */\n  text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);\n}\n\n.content-wrapper {\n}\n\n.border-glow {\n  box-shadow:\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1);\n}\n\n.lh-0,\n.lh-0 img {\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.focused-text:focus::before,\n.play-button:focus::before {\n  content: \"\";\n  background-image: url(\"pointer.svg\");\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  width: 40px;\n  height: 20px;\n  left: -0.25rem;\n  vertical-align: middle;\n  transform: translate(-100%, -50%);\n  position: absolute;\n  top: 50%; /* Center vertically relative to the focused element */\n  z-index: 9999;\n}\n\n.focused-text {\n  position: relative;\n}\n\n.focused-text:focus,\n.focused-text:active {\n  /*outline: none;\n  border: none;*/\n}\n\n.overflow-x-visible {\n  overflow-x: unset;\n}\n\n.bg-linear-blue {\n  background: linear-gradient(153.84deg, #0100ac 0%, #000022 100%);\n}\n","designName":"Game Menu UI"}
+{"frontHtml":"<section class=\"white unifont-medium pa3 flex flex-column lh-title relative\">\n  <div class=\"content-wrapper pa3 relative z-0\">\n    <div\n      class=\"ba b--white bw1 br4 pa3 border-glow bg-linear-blue relative z-0 pb4\"\n    >\n      <div class=\"glowing-text\">\n        <p\n          tabindex=\"0\"\n          class=\"ma0 dib f2 z-1 pointer focused-text grow-custom append-play-btn-text\"\n        >\n          {{audio}}\n        </p>\n        <div class=\"ph2\">\n          <p tabindex=\"0\" class=\"ma0 f2 focused-text di\">\n            What is the meaning of what is being said?\n          </p>\n        </div>\n\n        <!---->\n        <!-- INPUT BLOCK START -->\n        <div\n          id=\"input-container\"\n          class=\"ph2 pt2 z-1 f2\"\n          placeholder=\"Type your answer here\"\n        >\n          {{type:term}}\n        </div>\n        <!---->\n        <!-- HINT BLOCK START -->\n        <div class=\"hint-block lh-title pv2 ph2 z-1\">\n          <a\n            class=\"hint link white 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 id=\"hint4753594160\" class=\"hint f3\" style=\"display: none\">\n            {{Tags}}\n          </div>\n        </div>\n        <!---->\n      </div>\n    </div>\n  </div>\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 class=\"white unifont-medium pa3 flex flex-column lh-title relative\">\n  <div class=\"content-wrapper pa3 relative z-0\">\n    <div\n      class=\"ba b--white bw1 br4 pa3 border-glow bg-linear-blue relative z-0 pb4\"\n    >\n      <div class=\"glowing-text\">\n        <p\n          tabindex=\"0\"\n          class=\"ma0 dib f2 z-1 pointer focused-text grow-custom append-play-btn-text\"\n        >\n          {{audio}}\n        </p>\n        <div class=\"back-content ph2\">\n          <div>\n            <h1\n              tabindex=\"0\"\n              class=\"ma0 f2 lh-copy z-1 focused-text dib noto-sans-jp\"\n            >\n              {{term}}\n            </h1>\n          </div>\n          {{#reading}}\n          <div>\n            <p\n              tabindex=\"0\"\n              class=\"ma0 f2 lh-copy z-1 focused-text dib noto-sans-jp\"\n            >\n              {{reading}}\n            </p>\n          </div>\n          {{/reading}} {{#translation}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 z-1 focused-text dib\">\n              {{translation}}\n            </p>\n          </div>\n          {{/translation}} {{#transliteration}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 z-1 focused-text dib\">\n              {{transliteration}}\n            </p>\n          </div>\n          {{/transliteration}} {{#Tags}}\n          <div>\n            <p tabindex=\"0\" class=\"ma0 f2 z-1 focused-text dib\">{{Tags}}</p>\n          </div>\n          {{/Tags}} {{#picture}}\n          <div\n            tabindex=\"0\"\n            class=\"image-overlay focused-text relative matrix measure-narrow z-1 mt2 lh-0\"\n          >\n            <div class=\"img-container lh-0\">{{picture}}</div>\n            <div class=\"img-container o-50 bloom absolute left-0 top-0 lh-0\">\n              {{picture}}\n            </div>\n          </div>\n          {{/picture}}\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n","cardCss":":root {\n  --neon-blue: cyan;\n}\n\n/* https://fontlibrary.org/en/font/gnu-unifont */\n@font-face {\n  font-family: UnifontMedium;\n  src: url(UnifontMedium.woff) format(\"woff\");\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n  background-color: black;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  overflow: hidden;\n  overflow-y: scroll;\n}\n\n.noto-sans-jp:hover {\n  font-family: \"Noto Sans JP\", sans-serif;\n  font-optical-sizing: auto;\n  font-weight: 400;\n  font-style: normal;\n}\n\n.unifont-medium {\n  font-family: \"UnifontMedium\", mono;\n  font-weight: normal;\n  font-style: normal;\n}\n\n.matrix {\n  position: relative;\n  display: inline-block;\n}\n\n.matrix::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 255, 255, 0.1); /* Orange color with some opacity */\n  mix-blend-mode: overlay;\n}\n\n.matrix:hover::after {\n  background: none; /* Remove the background on hover */\n  mix-blend-mode: normal; /* Reset mix-blend-mode */\n}\n\n.image-overlay img {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%; /* Ensures overlay size matches the base image */\n  height: auto;\n  display: block; /* Removes any extra space below the image */\n  filter: saturate(0.5) contrast(1.25);\n}\n\n.image-overlay:hover img {\n  filter: saturate(1) contrast(1);\n}\n\n.image-overlay img {\n  position: relative; /* Keeps the base image in the normal flow */\n}\n\n.glowing-text {\n  color: white; /* White text */\n  text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);\n}\n\n.content-wrapper {\n}\n\n.border-glow {\n  box-shadow:\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    0 0 2px rgba(255, 255, 255, 1),\n    0 0 4px rgba(200, 200, 200, 1),\n    0 0 6px rgba(100, 100, 100, 1),\n    0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1),\n    inset 0 0 2px rgba(255, 255, 255, 1),\n    inset 0 0 4px rgba(200, 200, 255, 1),\n    inset 0 0 6px rgba(100, 100, 100, 1),\n    inset 0 0 8px rgba(0, 0, 0, 1);\n}\n\n.lh-0,\n.lh-0 img {\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.focused-text:focus::before,\n.play-button:focus::before {\n  content: \"\";\n  background-image: url(\"pointer.svg\");\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  width: 40px;\n  height: 20px;\n  left: -0.25rem;\n  vertical-align: middle;\n  transform: translate(-100%, -50%);\n  position: absolute;\n  top: 50%; /* Center vertically relative to the focused element */\n  z-index: 9999;\n}\n\n.focused-text {\n  position: relative;\n}\n\n.focused-text:focus,\n.focused-text:active {\n  /*outline: none;\n  border: none;*/\n}\n\n.overflow-x-visible {\n  overflow-x: unset;\n}\n\n.bg-linear-blue {\n  background: linear-gradient(153.84deg, #0100ac 0%, #000022 100%);\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.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: transparent;\n  color: white;\n  font-size: 1.5rem;\n  padding: 0.5rem;\n  border: 1px solid gray;\n  width: 100%;\n  text-align: left;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n#input-container input::placeholder {\n  color: lightgray;\n  opacity: 0.7;\n}\n\n#input-container input:focus {\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: white;\n}\n\n.append-play-btn-text svg {\n  display: none;\n}\n\n.append-play-btn-text button {\n  font-size: 2.5rem;\n  line-height: 3rem;\n  cursor: pointer;\n  height: 3rem;\n  width: 3rem;\n  vertical-align: top;\n}\n\n.append-play-btn-text {\n}\n\n.replay-button {\n  margin: 0;\n  font-size: 2.5rem;\n}\n","designName":"Game Menu UI"}