LunaTranslator/py/files/anki/back.html

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

<script>
    if (document.getElementById('rubyword').innerHTML.trim().length > 0) {
        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">
    {{screenshot}}
</div>

<div id="remarks" class="centerdiv centertext remark-div">
    {{remarks}}
</div>

<div class="tab-widget">
    <div class="centerdiv" id="tab_buttons">
    </div>
    <div class="centerdiv">
        <div class="tab-content" id="tab_contents">
        </div>
    </div>
</div>
<script>
    function onclickbtn(_id) {

        var tabButtons = document.querySelectorAll('.tab-widget .tab-button');
        var tabPanes = document.querySelectorAll('.tab-widget .tab-pane');
        for (var i = 0; i < tabButtons.length; i++)
            tabButtons[i].classList.remove('active');
        for (var i = 0; i < tabPanes.length; i++)
            tabPanes[i].classList.remove('active');

        document.getElementById('luna_dict_btn_' + _id).classList.add('active');
        document.getElementById('luna_dict_tab_' + _id).classList.add('active');
    }
</script>
<script>
    var dictionaryInfo = {{ dictionaryInfo }};
    var dictionaryContent = {{ dictionaryContent }}
    var htmltabbuttons = ''
    var htmlcontents = ''
    var scriptElementss = []
    var scriptElementsssrc = []
    for (var iiii = 0; iiii < dictionaryInfo.length; iiii++) {
        htmltabbuttons += '<button type="button" onclick="onclickbtn(\'' + dictionaryInfo[iiii]['dict'] + '\')" id="luna_dict_btn_' + dictionaryInfo[iiii]['dict'] + '" class="tab-button">' + dictionaryInfo[iiii]['name'] + '</button>'

        var tempParent = document.createElement('div');
        tempParent.innerHTML = decodeURIComponent(dictionaryContent[dictionaryInfo[iiii]['dict']]);

        var fragment = document.createElement('div');
        while (tempParent.firstChild) {
            fragment.appendChild(tempParent.firstChild);
        }

        htmlcontents += '<div id="luna_dict_tab_' + dictionaryInfo[iiii]['dict'] + '" class="tab-pane">' + fragment.innerHTML + '</div>'
        var scriptElements = fragment.getElementsByTagName('script');

        for (var jjjj = 0; jjjj < scriptElements.length; jjjj++) {
            scriptElementss.push(scriptElements[jjjj].textContent)
            scriptElementsssrc.push(scriptElements[jjjj].src)
        }
    }
    document.getElementById('tab_buttons').innerHTML = htmltabbuttons
    document.getElementById('tab_contents').innerHTML = htmlcontents
    for (var iiii = 0; iiii < scriptElementss.length; iiii++) {
        eval(scriptElementss[iiii])
        let newScript = document.createElement('script')
        if (scriptElementsssrc[iiii]) {
            newScript.src = scriptElementsssrc[iiii];
            document.head.appendChild(newScript);
        }
    }
    if (dictionaryInfo.length > 0) {
        onclickbtn(dictionaryInfo[0]['dict'])
    }
</script>
<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>