CardMotion

Features:

Shows realistic, smooth animations when flipping and moving to the next card
Easily integrates with any of your templates
Works across all Anki clients: Anki Desktop, AnkiMobile, AnkiDroid, AnkiWeb
Fully customizable: animation easing and speed, appearance, play a sound on flip, and more

AnkiMobile	AnkiDroid

Installation

Manually create or integrate into an existing template (recommended)

New template: after creating the required fields, paste the following three parts into the Anki card template editor
Integrate: the front and back display areas are highlighted in the code below for easy replacement with your own template content

WARNING

Do not use Anki’s FrontSide field in the Back Template, as it conflicts with this extension

Front TemplateBack TemplateStyling

html

<div class="ae-anim-container" data-doc="https://anki.ikkz.fun/">
  <div class="ae-anim-card">
    <div class="ae-card-face">
      {{Front}}
    </div>
  </div>
</div>

<script>
(function(T){typeof define=="function"&&define.amd?define(T):T()})((function(){"use strict";var pt;const T=n=>(t,e)=>{const s=()=>{customElements.get(n)||customElements.define(n,t)};e?e.addInitializer(s):s()};function ut(){const n=window.console;n.patched||(window.console=new Proxy(n,{get(t,e,s){return Reflect.has(t,e)?Reflect.get(t,e,s):Reflect.get(t,"log",s)}}),window.console.patched=!0)}const H=globalThis,D=H.ShadowRoot&&(H.ShadyCSS===void 0||H.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,K=Symbol(),Z=new WeakMap;let $t=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==K)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(D&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=Z.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&Z.set(e,t))}return t}toString(){return this.cssText}};const ft=n=>new $t(typeof n=="string"?n:n+"",void 0,K),_t=(n,t)=>{if(D)n.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=H.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,n.appendChild(s)}},G=D?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return ft(e)})(n):n;const{is:mt,defineProperty:At,getOwnPropertyDescriptor:vt,getOwnPropertyNames:yt,getOwnPropertySymbols:gt,getPrototypeOf:Et}=Object,f=globalThis,Q=f.trustedTypes,bt=Q?Q.emptyScript:"",j=f.reactiveElementPolyfillSupport,w=(n,t)=>n,R={toAttribute(n,t){switch(t){case Boolean:n=n?bt:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch{e=null}}return e}},z=(n,t)=>!mt(n,t),X={attribute:!0,type:String,converter:R,reflect:!1,useDefault:!1,hasChanged:z};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),f.litPropertyMetadata??(f.litPropertyMetadata=new WeakMap);class E extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=X){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&At(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:o}=vt(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:i,set(r){const c=i==null?void 0:i.call(this);o==null||o.call(this,r),this.requestUpdate(t,c,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??X}static _$Ei(){if(this.hasOwnProperty(w("elementProperties")))return;const t=Et(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(w("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(w("properties"))){const e=this.properties,s=[...yt(e),...gt(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(G(i))}else t!==void 0&&e.push(G(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return _t(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var o;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const r=(((o=s.converter)==null?void 0:o.toAttribute)!==void 0?s.converter:R).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var o,r;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const c=s.getPropertyOptions(i),a=typeof c.converter=="function"?{fromAttribute:c.converter}:((o=c.converter)==null?void 0:o.fromAttribute)!==void 0?c.converter:R;this._$Em=i;const l=a.fromAttribute(e,c.type);this[i]=l??((r=this._$Ej)==null?void 0:r.get(i))??l,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const o=this.constructor,r=this[t];if(s??(s=o.getPropertyOptions(t)),!((s.hasChanged??z)(r,e)||s.useDefault&&s.reflect&&r===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(o._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:o},r){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),o!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[o,r]of this._$Ep)this[o]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[o,r]of i){const{wrapped:c}=r,a=this[o];c!==!0||this._$AL.has(o)||a===void 0||this.C(o,void 0,r,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var o;return(o=i.hostUpdate)==null?void 0:o.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}}E.elementStyles=[],E.shadowRootOptions={mode:"open"},E[w("elementProperties")]=new Map,E[w("finalized")]=new Map,j==null||j({ReactiveElement:E}),(f.reactiveElementVersions??(f.reactiveElementVersions=[])).push("2.1.1");const C=globalThis,N=C.trustedTypes,Y=N?N.createPolicy("lit-html",{createHTML:n=>n}):void 0,tt="$lit$",_=`lit$${Math.random().toFixed(9).slice(2)}$`,et="?"+_,St=`<${et}>`,A=document,P=()=>A.createComment(""),x=n=>n===null||typeof n!="object"&&typeof n!="function",B=Array.isArray,wt=n=>B(n)||typeof(n==null?void 0:n[Symbol.iterator])=="function",q=`[ 	
\f\r]`,O=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,st=/-->/g,it=/>/g,v=RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ 	
\f\r"'\`<>=]|("|')|))|$)`,"g"),nt=/'/g,rt=/"/g,ot=/^(?:script|style|textarea|title)$/i,b=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),at=new WeakMap,y=A.createTreeWalker(A,129);function ct(n,t){if(!B(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return Y!==void 0?Y.createHTML(t):t}const Ct=(n,t)=>{const e=n.length-1,s=[];let i,o=t===2?"<svg>":t===3?"<math>":"",r=O;for(let c=0;c<e;c++){const a=n[c];let l,u,h=-1,$=0;for(;$<a.length&&(r.lastIndex=$,u=r.exec(a),u!==null);)$=r.lastIndex,r===O?u[1]==="!--"?r=st:u[1]!==void 0?r=it:u[2]!==void 0?(ot.test(u[2])&&(i=RegExp("</"+u[2],"g")),r=v):u[3]!==void 0&&(r=v):r===v?u[0]===">"?(r=i??O,h=-1):u[1]===void 0?h=-2:(h=r.lastIndex-u[2].length,l=u[1],r=u[3]===void 0?v:u[3]==='"'?rt:nt):r===rt||r===nt?r=v:r===st||r===it?r=O:(r=v,i=void 0);const m=r===v&&n[c+1].startsWith("/>")?" ":"";o+=r===O?a+St:h>=0?(s.push(l),a.slice(0,h)+tt+a.slice(h)+_+m):a+_+(h===-2?c:m)}return[ct(n,o+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class k{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const c=t.length-1,a=this.parts,[l,u]=Ct(t,e);if(this.el=k.createElement(l,s),y.currentNode=this.el.content,e===2||e===3){const h=this.el.content.firstChild;h.replaceWith(...h.childNodes)}for(;(i=y.nextNode())!==null&&a.length<c;){if(i.nodeType===1){if(i.hasAttributes())for(const h of i.getAttributeNames())if(h.endsWith(tt)){const $=u[r++],m=i.getAttribute(h).split(_),I=/([.?@])?(.*)/.exec($);a.push({type:1,index:o,name:I[2],strings:m,ctor:I[1]==="."?xt:I[1]==="?"?Ot:I[1]==="@"?kt:L}),i.removeAttribute(h)}else h.startsWith(_)&&(a.push({type:6,index:o}),i.removeAttribute(h));if(ot.test(i.tagName)){const h=i.textContent.split(_),$=h.length-1;if($>0){i.textContent=N?N.emptyScript:"";for(let m=0;m<$;m++)i.append(h[m],P()),y.nextNode(),a.push({type:2,index:++o});i.append(h[$],P())}}}else if(i.nodeType===8)if(i.data===et)a.push({type:2,index:o});else{let h=-1;for(;(h=i.data.indexOf(_,h+1))!==-1;)a.push({type:7,index:o}),h+=_.length-1}o++}}static createElement(t,e){const s=A.createElement("template");return s.innerHTML=t,s}}function S(n,t,e=n,s){var r,c;if(t===b)return t;let i=s!==void 0?(r=e._$Co)==null?void 0:r[s]:e._$Cl;const o=x(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==o&&((c=i==null?void 0:i._$AO)==null||c.call(i,!1),o===void 0?i=void 0:(i=new o(n),i._$AT(n,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=S(n,i._$AS(n,t.values),i,s)),t}class Pt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??A).importNode(e,!0);y.currentNode=i;let o=y.nextNode(),r=0,c=0,a=s[0];for(;a!==void 0;){if(r===a.index){let l;a.type===2?l=new M(o,o.nextSibling,this,t):a.type===1?l=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(l=new Mt(o,this,t)),this._$AV.push(l),a=s[++c]}r!==(a==null?void 0:a.index)&&(o=y.nextNode(),r++)}return y.currentNode=A,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class M{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=S(this,t,e),x(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==b&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):wt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==d&&x(this._$AH)?this._$AA.nextSibling.data=t:this.T(A.createTextNode(t)),this._$AH=t}$(t){var o;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=k.createElement(ct(s.h,s.h[0]),this.options)),s);if(((o=this._$AH)==null?void 0:o._$AD)===i)this._$AH.p(e);else{const r=new Pt(i,this),c=r.u(this.options);r.p(e),this.T(c),this._$AH=r}}_$AC(t){let e=at.get(t.strings);return e===void 0&&at.set(t.strings,e=new k(t)),e}k(t){B(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new M(this.O(P()),this.O(P()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class L{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d}_$AI(t,e=this,s,i){const o=this.strings;let r=!1;if(o===void 0)t=S(this,t,e,0),r=!x(t)||t!==this._$AH&&t!==b,r&&(this._$AH=t);else{const c=t;let a,l;for(t=o[0],a=0;a<o.length-1;a++)l=S(this,c[s+a],e,a),l===b&&(l=this._$AH[a]),r||(r=!x(l)||l!==this._$AH[a]),l===d?t=d:t!==d&&(t+=(l??"")+o[a+1]),this._$AH[a]=l}r&&!i&&this.j(t)}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class xt extends L{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===d?void 0:t}}class Ot extends L{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d)}}class kt extends L{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){if((t=S(this,t,e,0)??d)===b)return;const s=this._$AH,i=t===d&&s!==d||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==d&&(s===d||i);i&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Mt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t)}}const W=C.litHtmlPolyfillSupport;W==null||W(k,M),(C.litHtmlVersions??(C.litHtmlVersions=[])).push("3.3.1");const Ut=(n,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const o=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new M(t.insertBefore(P(),o),o,void 0,e??{})}return i._$AI(n),i};const g=globalThis;class U extends E{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Ut(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return b}}U._$litElement$=!0,U.finalized=!0,(pt=g.litElementHydrateSupport)==null||pt.call(g,{LitElement:U});const V=g.litElementPolyfillSupport;V==null||V({LitElement:U}),(g.litElementVersions??(g.litElementVersions=[])).push("4.2.1");const Tt={attribute:!0,type:String,converter:R,reflect:!1,hasChanged:z},Ht=(n=Tt,t,e)=>{const{kind:s,metadata:i}=e;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),s==="setter"&&((n=Object.create(n)).wrapped=!0),o.set(e.name,n),s==="accessor"){const{name:r}=e;return{set(c){const a=t.get.call(this);t.set.call(this,c),this.requestUpdate(r,a,n)},init(c){return c!==void 0&&this.C(r,void 0,n,c),c}}}if(s==="setter"){const{name:r}=e;return function(c){const a=this[r];t.call(this,c),this.requestUpdate(r,a,n)}}throw Error("Unsupported decorator location: "+s)};function Rt(n){return(t,e)=>typeof e=="object"?Ht(n,t,e):((s,i,o)=>{const r=i.hasOwnProperty(o);return i.constructor.createProperty(o,s),r?Object.getOwnPropertyDescriptor(i,o):void 0})(n,t,e)}var Nt=Object.defineProperty,Lt=Object.getOwnPropertyDescriptor,ht=(n,t,e,s)=>{for(var i=s>1?void 0:s?Lt(t,e):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Nt(t,e,i),i};let F=class extends U{disconnectedCallback(){var n;super.disconnectedCallback(),(n=this.callback)==null||n.call(this)}};ht([Rt()],F.prototype,"callback",2),F=ht([T("ae-removed-callback")],F);const It={backIndicatorId:"anki-eco-back-indicator"};function Dt(n,t,e,s){return fetch("https://pla.ikkz.fun/api/event",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({domain:n,name:e,url:`ae://localhost${t}`,props:s})}).catch(()=>{})}function jt(n,t,e){return Dt("anki-eco-ext",n,t,e)}function zt(n){return jt(n,"pageview")}ut();const lt="ankiEcoExtCMSavedDom";function Bt(){return sessionStorage.getItem(lt)}function dt(n){sessionStorage.setItem(lt,n)}window.ankiEcoExtCMClearId&&(clearTimeout(window.ankiEcoExtCMClearId),window.ankiEcoExtCMClearId=void 0);const J=document.getElementById("qa");function qt(n){const t=()=>dt(n.innerHTML);setTimeout(t,0);const e=new MutationObserver(()=>{J.contains(n)&&t()});e.observe(J,{childList:!0,subtree:!0,characterData:!0,attributes:!0});const s=document.createElement("ae-removed-callback");s.callback=()=>{e.disconnect(),window.ankiEcoExtCMClearId=setTimeout(()=>{dt("")},200)},J.appendChild(s)}const p={container:"ae-anim-container",card:"ae-anim-card",face:"ae-card-face",front:"ae-front",back:"ae-back",prev:"ae-prev",hasPrev:"ae-has-prev",animEnded:"ae-anim-ended"};function Wt(){var o;const n=!!document.getElementById(It.backIndicatorId),t=document.querySelector("."+p.container),e=document.querySelector("."+p.card),s=document.querySelector("."+p.face);if(!t||!e||!s)return;const i=Bt();if(qt(s),t.classList.add(n?p.back:p.front),e.classList.add(n?p.back:p.front),s.classList.add(n?p.back:p.front),i){const r=document.createElement("div");if(r.innerHTML=i,r.classList.add(p.face),n)r.classList.add(p.front),e.prepend(r),(o=window.ankiEcoExtCMHooks)==null||o.onFlipCard();else{r.classList.add(p.back);const c=document.createElement("div");c.appendChild(r),c.classList.add(p.card,p.prev),t.classList.add(p.hasPrev),t.prepend(c)}}setTimeout(()=>{requestAnimationFrame(()=>t.classList.add(p.animEnded))},100),n||zt("/card-motion")}Wt()}));
</script>

html

<div id="anki-eco-back-indicator"></div>
<div class="ae-anim-container" data-doc="https://anki.ikkz.fun/">
  <div class="ae-anim-card">
    <div class="ae-card-face">
      {{Back}}
      <hr id="answer" />
      {{Front}}
    </div>
  </div>
</div>

<script>
(function(T){typeof define=="function"&&define.amd?define(T):T()})((function(){"use strict";var pt;const T=n=>(t,e)=>{const s=()=>{customElements.get(n)||customElements.define(n,t)};e?e.addInitializer(s):s()};function ut(){const n=window.console;n.patched||(window.console=new Proxy(n,{get(t,e,s){return Reflect.has(t,e)?Reflect.get(t,e,s):Reflect.get(t,"log",s)}}),window.console.patched=!0)}const H=globalThis,D=H.ShadowRoot&&(H.ShadyCSS===void 0||H.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,K=Symbol(),Z=new WeakMap;let $t=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==K)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(D&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=Z.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&Z.set(e,t))}return t}toString(){return this.cssText}};const ft=n=>new $t(typeof n=="string"?n:n+"",void 0,K),_t=(n,t)=>{if(D)n.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=H.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,n.appendChild(s)}},G=D?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return ft(e)})(n):n;const{is:mt,defineProperty:At,getOwnPropertyDescriptor:vt,getOwnPropertyNames:yt,getOwnPropertySymbols:gt,getPrototypeOf:Et}=Object,f=globalThis,Q=f.trustedTypes,bt=Q?Q.emptyScript:"",j=f.reactiveElementPolyfillSupport,w=(n,t)=>n,R={toAttribute(n,t){switch(t){case Boolean:n=n?bt:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch{e=null}}return e}},z=(n,t)=>!mt(n,t),X={attribute:!0,type:String,converter:R,reflect:!1,useDefault:!1,hasChanged:z};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),f.litPropertyMetadata??(f.litPropertyMetadata=new WeakMap);class E extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=X){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&At(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:o}=vt(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get:i,set(r){const c=i==null?void 0:i.call(this);o==null||o.call(this,r),this.requestUpdate(t,c,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??X}static _$Ei(){if(this.hasOwnProperty(w("elementProperties")))return;const t=Et(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(w("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(w("properties"))){const e=this.properties,s=[...yt(e),...gt(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(G(i))}else t!==void 0&&e.push(G(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return _t(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var o;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const r=(((o=s.converter)==null?void 0:o.toAttribute)!==void 0?s.converter:R).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var o,r;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const c=s.getPropertyOptions(i),a=typeof c.converter=="function"?{fromAttribute:c.converter}:((o=c.converter)==null?void 0:o.fromAttribute)!==void 0?c.converter:R;this._$Em=i;const l=a.fromAttribute(e,c.type);this[i]=l??((r=this._$Ej)==null?void 0:r.get(i))??l,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const o=this.constructor,r=this[t];if(s??(s=o.getPropertyOptions(t)),!((s.hasChanged??z)(r,e)||s.useDefault&&s.reflect&&r===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(o._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:o},r){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,r??e??this[t]),o!==!0||r!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[o,r]of this._$Ep)this[o]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[o,r]of i){const{wrapped:c}=r,a=this[o];c!==!0||this._$AL.has(o)||a===void 0||this.C(o,void 0,r,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var o;return(o=i.hostUpdate)==null?void 0:o.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}}E.elementStyles=[],E.shadowRootOptions={mode:"open"},E[w("elementProperties")]=new Map,E[w("finalized")]=new Map,j==null||j({ReactiveElement:E}),(f.reactiveElementVersions??(f.reactiveElementVersions=[])).push("2.1.1");const C=globalThis,N=C.trustedTypes,Y=N?N.createPolicy("lit-html",{createHTML:n=>n}):void 0,tt="$lit$",_=`lit$${Math.random().toFixed(9).slice(2)}$`,et="?"+_,St=`<${et}>`,A=document,P=()=>A.createComment(""),x=n=>n===null||typeof n!="object"&&typeof n!="function",B=Array.isArray,wt=n=>B(n)||typeof(n==null?void 0:n[Symbol.iterator])=="function",q=`[ 	
\f\r]`,O=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,st=/-->/g,it=/>/g,v=RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ 	
\f\r"'\`<>=]|("|')|))|$)`,"g"),nt=/'/g,rt=/"/g,ot=/^(?:script|style|textarea|title)$/i,b=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),at=new WeakMap,y=A.createTreeWalker(A,129);function ct(n,t){if(!B(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return Y!==void 0?Y.createHTML(t):t}const Ct=(n,t)=>{const e=n.length-1,s=[];let i,o=t===2?"<svg>":t===3?"<math>":"",r=O;for(let c=0;c<e;c++){const a=n[c];let l,u,h=-1,$=0;for(;$<a.length&&(r.lastIndex=$,u=r.exec(a),u!==null);)$=r.lastIndex,r===O?u[1]==="!--"?r=st:u[1]!==void 0?r=it:u[2]!==void 0?(ot.test(u[2])&&(i=RegExp("</"+u[2],"g")),r=v):u[3]!==void 0&&(r=v):r===v?u[0]===">"?(r=i??O,h=-1):u[1]===void 0?h=-2:(h=r.lastIndex-u[2].length,l=u[1],r=u[3]===void 0?v:u[3]==='"'?rt:nt):r===rt||r===nt?r=v:r===st||r===it?r=O:(r=v,i=void 0);const m=r===v&&n[c+1].startsWith("/>")?" ":"";o+=r===O?a+St:h>=0?(s.push(l),a.slice(0,h)+tt+a.slice(h)+_+m):a+_+(h===-2?c:m)}return[ct(n,o+(n[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class k{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const c=t.length-1,a=this.parts,[l,u]=Ct(t,e);if(this.el=k.createElement(l,s),y.currentNode=this.el.content,e===2||e===3){const h=this.el.content.firstChild;h.replaceWith(...h.childNodes)}for(;(i=y.nextNode())!==null&&a.length<c;){if(i.nodeType===1){if(i.hasAttributes())for(const h of i.getAttributeNames())if(h.endsWith(tt)){const $=u[r++],m=i.getAttribute(h).split(_),I=/([.?@])?(.*)/.exec($);a.push({type:1,index:o,name:I[2],strings:m,ctor:I[1]==="."?xt:I[1]==="?"?Ot:I[1]==="@"?kt:L}),i.removeAttribute(h)}else h.startsWith(_)&&(a.push({type:6,index:o}),i.removeAttribute(h));if(ot.test(i.tagName)){const h=i.textContent.split(_),$=h.length-1;if($>0){i.textContent=N?N.emptyScript:"";for(let m=0;m<$;m++)i.append(h[m],P()),y.nextNode(),a.push({type:2,index:++o});i.append(h[$],P())}}}else if(i.nodeType===8)if(i.data===et)a.push({type:2,index:o});else{let h=-1;for(;(h=i.data.indexOf(_,h+1))!==-1;)a.push({type:7,index:o}),h+=_.length-1}o++}}static createElement(t,e){const s=A.createElement("template");return s.innerHTML=t,s}}function S(n,t,e=n,s){var r,c;if(t===b)return t;let i=s!==void 0?(r=e._$Co)==null?void 0:r[s]:e._$Cl;const o=x(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==o&&((c=i==null?void 0:i._$AO)==null||c.call(i,!1),o===void 0?i=void 0:(i=new o(n),i._$AT(n,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=S(n,i._$AS(n,t.values),i,s)),t}class Pt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??A).importNode(e,!0);y.currentNode=i;let o=y.nextNode(),r=0,c=0,a=s[0];for(;a!==void 0;){if(r===a.index){let l;a.type===2?l=new M(o,o.nextSibling,this,t):a.type===1?l=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(l=new Mt(o,this,t)),this._$AV.push(l),a=s[++c]}r!==(a==null?void 0:a.index)&&(o=y.nextNode(),r++)}return y.currentNode=A,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class M{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=S(this,t,e),x(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==b&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):wt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==d&&x(this._$AH)?this._$AA.nextSibling.data=t:this.T(A.createTextNode(t)),this._$AH=t}$(t){var o;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=k.createElement(ct(s.h,s.h[0]),this.options)),s);if(((o=this._$AH)==null?void 0:o._$AD)===i)this._$AH.p(e);else{const r=new Pt(i,this),c=r.u(this.options);r.p(e),this.T(c),this._$AH=r}}_$AC(t){let e=at.get(t.strings);return e===void 0&&at.set(t.strings,e=new k(t)),e}k(t){B(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new M(this.O(P()),this.O(P()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class L{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d}_$AI(t,e=this,s,i){const o=this.strings;let r=!1;if(o===void 0)t=S(this,t,e,0),r=!x(t)||t!==this._$AH&&t!==b,r&&(this._$AH=t);else{const c=t;let a,l;for(t=o[0],a=0;a<o.length-1;a++)l=S(this,c[s+a],e,a),l===b&&(l=this._$AH[a]),r||(r=!x(l)||l!==this._$AH[a]),l===d?t=d:t!==d&&(t+=(l??"")+o[a+1]),this._$AH[a]=l}r&&!i&&this.j(t)}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class xt extends L{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===d?void 0:t}}class Ot extends L{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d)}}class kt extends L{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){if((t=S(this,t,e,0)??d)===b)return;const s=this._$AH,i=t===d&&s!==d||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==d&&(s===d||i);i&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Mt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t)}}const W=C.litHtmlPolyfillSupport;W==null||W(k,M),(C.litHtmlVersions??(C.litHtmlVersions=[])).push("3.3.1");const Ut=(n,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const o=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new M(t.insertBefore(P(),o),o,void 0,e??{})}return i._$AI(n),i};const g=globalThis;class U extends E{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Ut(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return b}}U._$litElement$=!0,U.finalized=!0,(pt=g.litElementHydrateSupport)==null||pt.call(g,{LitElement:U});const V=g.litElementPolyfillSupport;V==null||V({LitElement:U}),(g.litElementVersions??(g.litElementVersions=[])).push("4.2.1");const Tt={attribute:!0,type:String,converter:R,reflect:!1,hasChanged:z},Ht=(n=Tt,t,e)=>{const{kind:s,metadata:i}=e;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),s==="setter"&&((n=Object.create(n)).wrapped=!0),o.set(e.name,n),s==="accessor"){const{name:r}=e;return{set(c){const a=t.get.call(this);t.set.call(this,c),this.requestUpdate(r,a,n)},init(c){return c!==void 0&&this.C(r,void 0,n,c),c}}}if(s==="setter"){const{name:r}=e;return function(c){const a=this[r];t.call(this,c),this.requestUpdate(r,a,n)}}throw Error("Unsupported decorator location: "+s)};function Rt(n){return(t,e)=>typeof e=="object"?Ht(n,t,e):((s,i,o)=>{const r=i.hasOwnProperty(o);return i.constructor.createProperty(o,s),r?Object.getOwnPropertyDescriptor(i,o):void 0})(n,t,e)}var Nt=Object.defineProperty,Lt=Object.getOwnPropertyDescriptor,ht=(n,t,e,s)=>{for(var i=s>1?void 0:s?Lt(t,e):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Nt(t,e,i),i};let F=class extends U{disconnectedCallback(){var n;super.disconnectedCallback(),(n=this.callback)==null||n.call(this)}};ht([Rt()],F.prototype,"callback",2),F=ht([T("ae-removed-callback")],F);const It={backIndicatorId:"anki-eco-back-indicator"};function Dt(n,t,e,s){return fetch("https://pla.ikkz.fun/api/event",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({domain:n,name:e,url:`ae://localhost${t}`,props:s})}).catch(()=>{})}function jt(n,t,e){return Dt("anki-eco-ext",n,t,e)}function zt(n){return jt(n,"pageview")}ut();const lt="ankiEcoExtCMSavedDom";function Bt(){return sessionStorage.getItem(lt)}function dt(n){sessionStorage.setItem(lt,n)}window.ankiEcoExtCMClearId&&(clearTimeout(window.ankiEcoExtCMClearId),window.ankiEcoExtCMClearId=void 0);const J=document.getElementById("qa");function qt(n){const t=()=>dt(n.innerHTML);setTimeout(t,0);const e=new MutationObserver(()=>{J.contains(n)&&t()});e.observe(J,{childList:!0,subtree:!0,characterData:!0,attributes:!0});const s=document.createElement("ae-removed-callback");s.callback=()=>{e.disconnect(),window.ankiEcoExtCMClearId=setTimeout(()=>{dt("")},200)},J.appendChild(s)}const p={container:"ae-anim-container",card:"ae-anim-card",face:"ae-card-face",front:"ae-front",back:"ae-back",prev:"ae-prev",hasPrev:"ae-has-prev",animEnded:"ae-anim-ended"};function Wt(){var o;const n=!!document.getElementById(It.backIndicatorId),t=document.querySelector("."+p.container),e=document.querySelector("."+p.card),s=document.querySelector("."+p.face);if(!t||!e||!s)return;const i=Bt();if(qt(s),t.classList.add(n?p.back:p.front),e.classList.add(n?p.back:p.front),s.classList.add(n?p.back:p.front),i){const r=document.createElement("div");if(r.innerHTML=i,r.classList.add(p.face),n)r.classList.add(p.front),e.prepend(r),(o=window.ankiEcoExtCMHooks)==null||o.onFlipCard();else{r.classList.add(p.back);const c=document.createElement("div");c.appendChild(r),c.classList.add(p.card,p.prev),t.classList.add(p.hasPrev),t.prepend(c)}}setTimeout(()=>{requestAnimationFrame(()=>t.classList.add(p.animEnded))},100),n||zt("/card-motion")}Wt()}));
</script>

css

:root {
  --ae-card-height: 600px;
  --ae-card-width: 80vw;
  --ae-card-border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ae-front-bg: #1e1e1e;
    --ae-back-bg: #2c2c2c;
    --ae-card-border: 1px solid #2c2c2c;
  }
}

.ae-anim-container {
  height: var(--ae-card-height);
  margin: 24px;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ae-anim-card {
  width: var(--ae-card-width);
  height: var(--ae-card-height);
  max-width: 65ch;
  position: absolute;
  inset: 0;
  margin: 0 auto;

  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: var(--ae-card-border-radius);
}

.ae-card-face {
  padding: 16px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--ae-card-border-radius);
  border: var(--ae-card-border, 1px solid #e0e0e0);
}

.ae-card-face.ae-front {
  transform: rotateY(0);
  background: var(--ae-front-bg, #ffffff);
}

.ae-card-face.ae-back {
  transform: rotateY(180deg);
  background: var(--ae-back-bg, #f7f7f7);
}

.ae-prev .ae-card-face.ae-back {
  transform: rotateY(0);
}

/* front has prev */
.ae-has-prev .ae-anim-card.ae-prev {
  transform: translate(0);
}

.ae-has-prev .ae-anim-card.ae-front {
  transform: translateY(calc(-100px - var(--ae-card-height)));
}

.ae-anim-ended.ae-has-prev .ae-anim-card.ae-prev {
  transform: translateX(calc(0px - 100vw));
}
.ae-anim-ended.ae-has-prev .ae-anim-card.ae-front {
  transform: translate(0);
}

/* back */
.ae-anim-card {
  transform: rotateY(0);
}

.ae-anim-ended.ae-back .ae-anim-card {
  transform: rotateY(-180deg);
}

Install by downloading a Deck

You can also download from AnkiWeb: link. However, it may not always be the latest. For the most up-to-date version, use the manual installation above.

Customization

Styles

Some CSS variables are predefined at the top of Styling. If they meet your needs, prefer adjusting these values first.

css

:root {
  --ae-card-height: 600px; /* card height */
  --ae-card-width: 80vw; /* card width */
  --ae-card-border-radius: 8px; /* card corner radius */
  --ae-front-bg: #1e1e1e; /* front background */
  --ae-back-bg: #2c2c2c; /* back background */
  --ae-card-border: 1px solid #2c2c2c; /* card border */
}

Of course, you can customize more advanced styles such as shadows, animation duration and easing, etc.

Flip callbacks

Set the following global variable to perform actions on card flip, such as playing a sound.

window.ankiEcoExtCMHooks = {
  onFlipCard: () => {
    console.log('play sound or sth');
  },
};

Feedback

If you have any questions or suggestions, please submit them on GitHub.

If you find it helpful, please consider giving it a star 🌟: GitHub

CardMotion ​

Installation ​

Manually create or integrate into an existing template (recommended) ​

Install by downloading a Deck ​

Customization ​

Styles ​

Flip callbacks ​

Feedback ​