Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@avidrucker
avidrucker committed Jul 17, 2024
1 parent eb3d6cf commit 56d5989
Show file tree
Hide file tree
Showing 7 changed files with 5 additions and 4 deletions.
1 change: 1 addition & 0 deletions Beach Night Poster.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"frontHtml":"<section\n class=\"m-plus-rounded-1c-bold tc min-h-100 lh-copy relative overflow-hidden h-100\"\n>\n <div class=\"blur-bg w-100 h-100 bg-center cover white absolute z-0\"></div>\n <section\n class=\"z-1 h-100 flex flex-column justify-center w-100 measure mr-auto ml-auto pa3\"\n >\n <p class=\"ma0 dib mr-auto ml-auto grow-custom append-play-btn-text\">\n {{audio}}\n </p>\n <p class=\"ma0 f3 pt2 ph2 z-1 measure-narrow balance mr-auto ml-auto\">\n What is the meaning of what is being said?\n </p>\n <!---->\n <!-- INPUT BLOCK START -->\n <div\n id=\"input-container\"\n class=\"pt2 z-1\"\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 z-1\">\n <a\n class=\"hint link underline o-70 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</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=\"m-plus-rounded-1c-bold tc min-h-100 lh-copy relative overflow-hidden\"\n>\n <div class=\"blur-bg bg-center w-100 cover h-100 white absolute z-0\"></div>\n <section class=\"z-1 flex flex-column justify-center\">\n <section class=\"z-1 pa3\">\n <p class=\"ma0 dib mr-auto ml-auto grow-custom append-play-btn-text z-5\">\n {{audio}}\n </p>\n\n <section class=\"\">\n <div class=\"relative dib show-hide-children lh-title shift-up-title\">\n <h1\n class=\"z-4 w-100 show left-0 poster-effect f-subheadline ma0 fw9 di\"\n >\n {{term}}\n </h1>\n </div>\n\n <p class=\"ma0 f2 lh-title shift-up-subtitle\">{{reading}}</p>\n <p class=\"ma0 f3 lh-copy\">{{translation}}</p>\n <p class=\"ma0 f3 lh-copy\">{{transliteration}}</p>\n <p class=\"ma0 f4 lh-copy\">{{Tags}}</p>\n\n {{#picture}}\n <div\n class=\"relative measure mt2 mr-auto ml-auto\"\n style=\"overflow: hidden\"\n >\n <div class=\"z-999 child-img-lh-0\">{{picture}}</div>\n </div>\n {{/picture}}\n </section>\n </section>\n </section>\n</section>\n\n<div class=\"off-screen\">\n <svg style=\"width: 0; height: 0;\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <filter id=\"poster-effect\">\n <!-- COLORS -->\n <feFlood flood-color=\"#A38ACF\" result=\"COLOR-purple\" />\n <feFlood flood-color=\"#FF401A\" result=\"COLOR-orange\" />\n <feFlood flood-color=\"#FFFCD8\" result=\"COLOR-yellow\" />\n\n <!-- Define the pattern fill using an external SVG -->\n <feImage\n xlink:href=\"data:image/svg+xml;utf8,<svg x='0' y='0' width='100%' height='100%' viewBox='0 0 4096 1558' xmlns='http://www.w3.org/2000/svg'><rect width='4096' height='1558' fill='%23FCCE2E'/><circle cx='587' cy='-32' r='1149' fill='%23FFFCD8'/><circle cx='1830' cy='1943' r='1137' fill='%23F9FFAB'/><circle cx='2468.5' cy='-358.5' r='822.5' fill='%23F9FFAB'/><circle cx='4044.5' cy='2343.5' r='2095.5' fill='%23FFFCD8'/></svg>\"\n preserveAspectRatio=\"xMidYMid slice\"\n result=\"imageFill\"\n />\n <feTile in=\"imageFill\" result=\"tiledFill\" />\n\n <!-- Use the filled pattern as the base for further effects -->\n <feComposite\n in=\"tiledFill\"\n in2=\"SourceAlpha\"\n operator=\"in\"\n result=\"patternFilledAlpha\"\n />\n\n <!-- EXTRUDE -->\n <feConvolveMatrix\n order=\"8,8\"\n divisor=\"1\"\n kernelMatrix=\"1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 \"\n in=\"SourceAlpha\"\n result=\"EXTRUDE_10\"\n />\n <feOffset dx=\"4\" dy=\"4\" in=\"EXTRUDE_10\" result=\"EXTRUDE_20\" />\n\n <!-- Blur the extrude for smoother lighting -->\n <feGaussianBlur\n in=\"EXTRUDE_20\"\n stdDeviation=\"4\"\n edgeMode=\"duplicate\"\n result=\"EXTRUDE_BLUR\"\n />\n\n <!-- Orange/red light from bottom -->\n <feSpecularLighting\n in=\"EXTRUDE_BLUR\"\n lighting-color=\"#FF401A\"\n surfaceScale=\"10\"\n specularConstant=\"0.5\"\n specularExponent=\"4\"\n result=\"ORANGE_LIGHT\"\n >\n <feDistantLight azimuth=\"270\" elevation=\"180\" />\n </feSpecularLighting>\n\n <feComposite\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n in=\"ORANGE_LIGHT\"\n in2=\"ORANGE_LIGHT\"\n result=\"ORANGE_LIGHT2\"\n />\n\n <!-- Purple light from right -->\n <feSpecularLighting\n in=\"EXTRUDE_BLUR\"\n lighting-color=\"#A38ACF\"\n surfaceScale=\"2\"\n specularConstant=\"0.5\"\n specularExponent=\"30\"\n result=\"PURPLE_LIGHT\"\n >\n <fePointLight x=\"3000\" y=\"-200\" z=\"2000\" />\n </feSpecularLighting>\n\n <feComposite\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n in=\"PURPLE_LIGHT\"\n in2=\"PURPLE_LIGHT\"\n result=\"PURPLE_LIGHT2\"\n />\n <feComposite\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n in=\"PURPLE_LIGHT2\"\n in2=\"PURPLE_LIGHT2\"\n result=\"PURPLE_LIGHT4\"\n />\n <feComposite\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n in=\"PURPLE_LIGHT4\"\n in2=\"PURPLE_LIGHT4\"\n result=\"PURPLE_LIGHT8\"\n />\n\n <!--<feComponentTransfer in=\"PURPLE_LIGHT\" result=\"SHARP_PURPLE_LIGHT\">\n <feFuncA type=\"discrete\" tableValues=\"0 1 1 1 1 1 1\"/>\n </feComponentTransfer>-->\n\n <!-- Combine lights -->\n <feComposite\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n in=\"PURPLE_LIGHT8\"\n in2=\"ORANGE_LIGHT2\"\n result=\"COMBINED_LIGHT\"\n />\n\n <!-- Apply lighting to extrude -->\n <feComposite\n operator=\"in\"\n in=\"COMBINED_LIGHT\"\n in2=\"EXTRUDE_20\"\n result=\"EXTRUDE_LIT\"\n />\n\n <!-- ORANGE OUTLINE -->\n <feMorphology\n operator=\"dilate\"\n radius=\"2\"\n in=\"SourceAlpha\"\n result=\"OUTLINE_10\"\n />\n <feComposite\n operator=\"out\"\n in=\"OUTLINE_10\"\n in2=\"SourceAlpha\"\n result=\"OUTLINE_20\"\n />\n <feComposite\n operator=\"in\"\n in=\"COLOR-orange\"\n in2=\"OUTLINE_20\"\n result=\"OUTLINE_30\"\n />\n\n <!-- FAT OUTLINE -->\n <feMorphology\n operator=\"dilate\"\n radius=\"2\"\n in=\"EXTRUDE_20\"\n result=\"FAT-OUTLINE_10\"\n />\n <feComposite\n operator=\"in\"\n in=\"COLOR-orange\"\n in2=\"FAT-OUTLINE_10\"\n result=\"FAT-OUTLINE_20\"\n />\n\n <!-- COMBINE LAYERS -->\n <feMerge>\n <feMergeNode in=\"OUTLINE_30\" />\n <feMergeNode in=\"FAT-OUTLINE_20\" />\n <feMergeNode in=\"EXTRUDE_LIT\" />\n <feMergeNode in=\"patternFilledAlpha\" />\n </feMerge>\n </filter>\n </defs>\n </svg>\n</div>\n","cardCss":"@import url(\"https://unpkg.com/[email protected]/css/tachyons.min.css\");\n\n@import url(\"https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap\");\n\n.m-plus-rounded-1c-bold {\n font-family: \"M PLUS Rounded 1c\", sans-serif;\n font-weight: 700;\n font-style: normal;\n}\n\n.transparent-dark-blue {\n color: #090e1999;\n}\n\n.blur-bg {\n background-image: linear-gradient(\n rgba(10, 10, 20, 0.6),\n rgba(10, 10, 20, 0.6)\n ),\n url(\"beach_night.png\"),\n url(\"https://cdn.jsdelivr.net/gh/avidrucker/anki-card-test-1/public/beach_night.png\");\n filter: blur(5px) saturate(0.7);\n background-attachment: fixed;\n}\n\n.text-shadow-dark-blue {\n text-shadow: 2px 2px 10px #0a1830;\n}\n\n:root {\n}\n\n.noto-serif-jp {\n font-family: \"Noto Serif JP\", serif;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n\n.show-hide-children * {\n transition: opacity 0.5s ease-out;\n}\n\n.show-hide-children:hover *.show {\n opacity: 1;\n}\n\n.show-hide-children:hover *.hide {\n opacity: 0;\n}\n\n.show-on-hover {\n opacity: 0;\n transition: opacity 0.5s ease-out;\n}\n\n.show-on-hover:hover {\n opacity: 1;\n}\n\n.lh-0 {\n vertical-align: middle;\n line-height: 0;\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.card::-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.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: center;\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 outline: 0 none;\n background-color: transparent;\n border: 1px solid lightgray !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: 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: 4rem;\n cursor: pointer;\n height: 4rem;\n width: 4rem;\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\n.poster-effect {\n filter: url(#poster-effect);\n}\n\n.shift-up-title {\n transform: translateY(-0.5rem);\n}\n\n.shift-up-subtitle {\n transform: translateY(-0.25rem);\n}\n\n.v-align-mid {\n vertical-align: middle;\n}\n\n.child-img-lh-0 img {\n line-height: 0;\n vertical-align: middle;\n}\n","designName":"Beach Night Poster"}
Loading

0 comments on commit 56d5989

Please sign in to comment.