LunaTranslator/LunaTranslator/files/anki/front.html

<div class="hide-style">
    <div id="audio">{{audio}}</div>
    <div id="audio_sentence">{{audio_sentence}}</div>
</div>
<div class="centerdiv" onclick='playAudio("audio")'>
    <div class="ruby-div" id="word">{{ word }}</div>
    <div id="rubyword" class="ruby-div"></div>
</div>

<script>
    ruby = JSON.parse(decodeURIComponent("{{ rubytext }}"))
    html = ''
    if (ruby.length) {
        for (i = 0; i < ruby.length; i++) {
            html += ruby[i]['orig'];
            if (ruby[i]['orig'] != ruby[i]['hira'])
                html += '<rt>' + ruby[i]['hira'] + '</rt>';
            else
                html += '<rt></rt>';
        }
        html = '<ruby>' + html + '</ruby>'
        document.getElementById('rubyword').innerHTML = html
        document.getElementById('word').classList.add("hide-style");
    }
    else {
        document.getElementById('rubyword').classList.add("hide-style");
    }

</script>

<div id="example_sentence" class="example-div" onclick='playAudio("audio_sentence")'>
    {{example_sentence}}
</div>
<div id="image" class="centerdiv">
    {{image}}
</div>


<script>
    function playAudio(audioId) {
        var audioDiv = document.getElementById(audioId);
        var audio = audioDiv.getElementsByTagName('*');
        if (audio.length > 0) {
            audio[0].click();
        }
    }
    function checkhide(eid) {
        var emptyDiv = document.getElementById(eid);
        if (emptyDiv && emptyDiv.innerText.trim() === "") {
            emptyDiv.classList.add("hide-style");
        }
    }
    function checkhide2(eid) {
        var emptyDiv = document.getElementById(eid);
        if (emptyDiv && emptyDiv.children.length == 0) {
            emptyDiv.classList.add("hide-style");
        }
    }
    checkhide("example_sentence")
    checkhide2("image")
    checkhide("remarks")
</script>