Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@avidrucker
avidrucker committed Jul 12, 2024
1 parent d18182d commit b4dcf22
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 48 deletions.
2 changes: 1 addition & 1 deletion 8 Bit Console.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"frontHtml":"<section\n class=\"medium-green-1 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-1 br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n >\n <p class=\"ma0 f1 dib mr-auto pointer lh-audio append-play-btn-text grow\">\n {{audio}}\n </p>\n <!-- PROMPT -->\n <p class=\"ma0 f3 lh-title\">What is the meaning of what is being said?</p>\n <!-- HINT BLOCK START -->\n <div class=\"hint-block lh-title pv2\">\n <a\n class=\"hint link underline dark-green-1 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-1 f3\"\n style=\"display: none\"\n >\n {{Tags}}\n </div>\n </div>\n <!-- INPUT BLOCK START -->\n <!-- COMMENT OUT BELOW FOR ANKI-->\n <div class=\"pt2\">\n <input\n class=\"input-reset input-8-bit f3 w-100 dark-green-1 ba b--medium-green-1 bg-green-1 pa2\"\n placeholder=\"Enter your answer here\"\n type=\"text\"\n />\n </div>\n <!-- UNCOMMENT OUT BELOW FOR ANKI-->\n <!--<div class=\"input-container pt2\">\n{{type:term}}\n</div>-->\n </section>\n </section>\n</section>\n<!-- Hack to configure Anki's built-in text input placeholder -->\n<!--<img\n src\n onerror=\"document.getElementById('typeans').placeholder='Enter your answer here'; document.getElementById('typeans').value=''; document.getElementById('typeans').removeAttribute('readonly');\"\n/>-->\n","backHtml":"<section\n class=\"medium-green-1 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-1 br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n >\n <p class=\"ma0 f1 dib mr-auto pointer lh-audio append-play-btn-text grow\">\n {{audio}}\n </p>\n <h1 class=\"ma0 dark-green-1 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=\"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\n <div class=\"f3 image-wrapper\">{{picture}}</div>\n </section>\n </section>\n</section>\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}\n\n:root {\n --dark-green-1: #0f380f;\n --medium-green-1: #306230;\n --green-1: #8bac0f;\n --light-green-1: #9bbc0f;\n --light-gray-1: #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-1);\n overflow-y: hidden;\n}\n\n.dark-green-1 {\n color: var(--dark-green-1);\n}\n\n.bg-light-green-1 {\n background-color: var(--light-green-1);\n}\n\n.b--dark-green-1 {\n border-color: var(--dark-green-1);\n}\n\n.b--medium-green-1 {\n border-color: var(--medium-green-1);\n}\n\n.medium-green-1 {\n color: var(--medium-green-1);\n}\n\n.bg-green-1 {\n background-color: var(--green-1);\n}\n\n.bg-light-gray-1 {\n background-color: var(--light-gray-1);\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.input-8-bit::placeholder {\n color: var(--medium-green-1);\n}\n\n.input-8-bit:focus {\n outline: none;\n background-color: var(--light-green-1);\n border-color: var(\n --dark-green-1\n ) !important; /* overrides default Anki styling for input fields */\n}\n\n.grow {\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:hover,\n.grow:focus {\n transform: scale(1.05);\n}\n\n.grow:active {\n transform: scale(0.9);\n}\n\n.append-play-btn-text a::after {\n content: \"▶\";\n color: var(--medium-green-1);\n}\n\n.append-play-btn-text svg {\n display: none;\n}\n\n/* input-reset input-8-bit f3 w-100 dark-green-1 ba b--medium-green-1 bg-green-1 pa2 */\n.input-container input {\n -webkit-appearance: none;\n background-color: var(--green-1);\n color: var(--dark-green-1);\n font-size: 1.5rem;\n padding: 0.5rem;\n border: 1px solid var(--medium-green-1);\n}\n\n.input-container input::placeholder {\n color: var(--medium-green-1);\n}\n\n.input-container input:focus {\n outline: 0 none;\n background-color: var(--light-green-1);\n border: 1px solid var(--dark-green-1) !important;\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.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"}
Loading

0 comments on commit b4dcf22

Please sign in to comment.