jpyomi-card-template.html

<!-- Universal Styling -->
<style>
    * {
        box-sizing: border-box;
    }

    .container {
        text-align: center;
        display: flex;
        justify-content: center;
        line-height: 1.5;
        font-family: serif;
    }

    :root>.card {
        position: unset;
        display: unset;
        flex-direction: unset;
        min-width: unset;
        word-wrap: unset;
        background-color: unset;
        background-clip: unset;
        border: unset;
        border-radius: unset;
    }

    :root>.card {
        background: #eee8d5;
    }

    .text-left {
        text-align: left;
    }

    .content {
        background: #fdf6e3;
        padding: 20px;
        margin: 10px;
        width: 500px;
        max-width: 100%;
        border-radius: 10px;
    }

    .alert-solarized {
        background-color: #eee8d5;
        border-color: #cec6af;
        padding: 5px;
    }

    hr {
        margin-top: 20px;
        border: none;
        border-bottom: rgba(0, 0, 0, 0.1) solid 1px;
        margin-bottom: 20px;
    }

    a {
        color: rgba(0, 0, 0, 0.7);
        text-decoration: none;
    }

    a:hover {
        color: rgba(0, 0, 0, 0.5);
    }

    .h3 {
        font-size: 1.75rem;
    }

    .h4 {
        font-size: 1.5rem;
    }
</style>

<!-- Custom Styling -->
<style>
    .question {
        /*font-family: HiraMinProN-W3;*/
        font-family: serif;
        font-size: 48px;
    }

    .kana-blue {
        color: rgb(67, 117, 175);
    }

    .answer {
        margin-top: 12px;
    }

    /* jmdict */

    .jmdict-meaning {
        text-align: left;
    }

    .jmdict-meaning .entry {
        margin-bottom: 20px;
    }

    .jmdict-meaning .gloss {
        position: relative;
        margin-left: 20px;
    }

    .jmdict-meaning .gloss:before {
        content: '•';
        position: absolute;
        left: -15px;
    }

    .jmdict-meaning .keb,
    .jmdict-meaning .reb {
        display: inline-block;
        border: solid 1px rgba(206, 198, 175, 0.3);
        border-radius: 2px;
        margin-bottom: 4px;
        padding: 0px 3px;
        font-size: 18px;
    }

    .jmdict-meaning .reb {
        font-size: 32px;
        border: solid 1px rgba(206, 198, 175, 1);
        background-color: rgba(238, 232, 213, 1);
        padding: 0px 6px;
    }

    .jmdict-meaning .current {
        border: solid 1px rgba(206, 198, 175, 0.5);
        background-color: rgba(238, 232, 213, 0.5);
    }

    .jmdict-meaning .unusual {
        color: rgba(0, 0, 0, 0.4);
    }

    .jmdict-meaning .s_inf,
    .jmdict-meaning .misc,
    .jmdict-meaning .field,
    .jmdict-meaning .dial,
    .jmdict-meaning .pos {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5)
    }

    #ccd_details {
        margin: 10px;
        margin-top: 20px;
    }
</style>

<!-- Front back style -->
<style id="flip-style">
    .anki-back-only {
        display: none;
    }
</style>

<style id="ccd-details-hider">
    .ccd-deep {
        display: none !important;
    }
</style>

<!-- Card -->
<div id="container" class="container">
    <div class="content">
        <div class="question">{{word}}</div>
        <div id="question-detail" class="anki-front-only"></div>
        <div id="answer_scroll" class="answer anki-back-only">
            <div id="jmdict_details"></div>
            <div id="ccd_details" class="text-left"
                onclick="document.getElementById('ccd-details-hider').innerHTML = ''; document.getElementById('ccd_details').removeAttribute('onclick');">
            </div>
        </div>
        <div class="anki-back-only">
            <hr>
            <a href="https://tangorin.com/sentences?search={{word}}&from=jpn&to=eng">単語林</a>
            ・
            <a href="https://www.google.com/search?safe=strict&tbm=isch&source=hp&q={{word}}">グーグル画像</a>
            ・
            <a href="japanese://search/{{word}}">レンゾ</a>
        </div>
    </div>
</div>

<script>
    // Get vars
    var vocabJp = "{{word}}";
    var vocabKana = "";
    var vocabJpFurigana = "";
    var sentenceJp = "";
    var sentenceJpFurigana = "";
    var sentenceJpClozed = "";
    var sentenceJpClozedFurigana = "";
    var charsJp = vocabJp.split("");
    var vocabEn = "";
    var sentenceEn = "";
    var sentenceEnClozed = "";
    var id = "";
    var tags = "{{Tags}}".split(" ");

    // For kanji question (single letter word)

    if (charsJp.length == 1) {
        document.getElementById("question-detail").innerHTML = "Vocab? Onyomi?";
    }

    // JMDict

    var jmdict_has_significance = 0;

    var jmdict_details = (function () {/*
        {{jmdict_details}}
    */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
    var jmdict_details_obj = JSON.parse(jmdict_details);

    jmdict_details = `<div class="jmdict-meaning">`;

    jmdict_details_obj.forEach(entry => {
        jmdict_details += `<div class="entry">`;

        // Reading

        entry.r_ele.forEach(r_ele => {

            // If the reading is valid for the current word
            if (r_ele.re_restr === undefined || r_ele.re_restr.indexOf(vocabJp) !== -1) {
                jmdict_details += `
                    <span class="reb ${r_ele.re_pri ? '' : 'unusual'}">
                        ${r_ele.reb}
                    </span>
                `;
            }
        });

        jmdict_details += `<div class="separator"></div>`;

        // Kanji

        entry.k_ele.forEach(k_ele => {
            if (k_ele.ke_pri) {
                jmdict_has_significance = 1;
            }

            jmdict_details += `
                <span class="keb 
                    ${k_ele.keb == vocabJp ? 'current' : ''}
                    ${k_ele.ke_pri ? '' : 'unusual'}
                    ">
                    ${k_ele.keb}
                </span>
            `;
        });

        // Meaning

        entry.sense.forEach(sense => {
            if (sense.s_inf)
                sense.s_inf.forEach(s_inf => {
                    jmdict_details += s_inf ? `<div class="s_inf">${s_inf}</div> ` : ``;
                });

            if (sense.misc)
                sense.misc.forEach(misc => {
                    jmdict_details += misc ? `<div class="misc">${misc}</div> ` : ``;

                    if (misc == "word usually written using kana alone") {
                        document.getElementsByClassName('question').item(0).classList.add('kana-blue');
                    }
                });

            if (sense.pos)
                sense.pos.forEach(pos => {
                    jmdict_details += pos ? `<div class="pos">${pos}</div> ` : ``;
                });

            jmdict_details += `<div class="separator"></div>`;

            jmdict_details += `<div class="gloss">`;

            if (sense.gloss)
                sense.gloss.forEach(gloss => {
                    jmdict_details += gloss ? `${gloss.$t}, ` : ``;
                });
            jmdict_details = jmdict_details.slice(0, -2);

            jmdict_details += `</div>`;

            jmdict_details += `<div class="separator"></div>`;
        });

        jmdict_details += `</div>`;
    });

    document.getElementById("jmdict_details").innerHTML = jmdict_details;

    // For kanji question (single letter word)

    if (charsJp.length == 1 && jmdict_has_significance == 1) {
        document.getElementById("question-detail").innerHTML = "Onyomi? Vocab?";
    } else if (charsJp.length == 1) {
        document.getElementById("question-detail").innerHTML = "Onyomi?";
    }

    // CCD

    var ccd_details = (function () {/*
        {{ccd_details}}
    */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
    var ccd_details_obj = JSON.parse(ccd_details);

    function ccd_builder(obj, depth) {
        final_text = "";
        final_text += `
            <div style="padding-left: ${depth * 30}px; margin-bottom: 10px; display: flex;" class="${depth >= 2 ? "ccd-deep" : ""}">
                <div style="padding-right: 10px;">
                    <b style="font-size: 25px;">${obj.kanji ? obj.kanji : ""}</b><br>
                </div>
                <div>
                    <div>${obj.reading ? obj.reading : ""}</div>
                    <div>${obj.meaning ? obj.meaning : ""}</div>
                </div>
            </div>
        `;

        if (obj.compositions) {
            obj.compositions.forEach(comp => {
                final_text += ccd_builder(comp, depth + 1);
            });
        }
        return final_text;
    };

    ccd_details_obj.forEach(item => {
        document.getElementById("ccd_details").innerHTML += ccd_builder(item, 0);
    });
</script>

<!-- Back side
    {{FrontSide}}
    <div style="display: none;">
        {{tts ja_JP voices=Apple_Otoya,Microsoft_Haruka:word}}
    </div>
    <script>
        document.getElementById('flip-style').innerHTML = ".anki-front-only {display:none}";
        document.getElementById("answer_scroll").scrollIntoView({block: "start"});
    </script>
-->