ZH
/
Matrix

<html>
    <head>
        <style>
            img {
                width: 480px;
            }
            .item {
                border: 1px solid lightgrey;
                padding: 8px;
                margin-left: 8px;
                margin-bottom: 50px;
            }
            body {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
    </body>

    <!-- Templates -->
    <script>
        var itemTemplate = `
<div class = "item">
    <h3 id="en-%ID%"></h3>
    <img id="img-%ID%" />
    <p id="zh-%ID%"></p>
    <p id="tr-%ID%"></p>
    <p><audio id="audio-%ID%" controls autoplay></audio></p>
</div>
`
    </script>

    <!-- English, Chinese, and transcription -->
    <script>
        var texts = {
            1: {
                en: "Cop: Freeze, Police"
                zh: "别动，警察",
                tr: "biedong jingcha",
            },
            2: {
                en: "Trinity: Is everything in place?",
                zh: "都准备好了吗",
                tr: "dou zhunbei hao le ma",
            },
            3: {
                en: "Cypher: You weren't supposed to relieve me",
                zh: "不该是你接我的班",
                tr: "bugai shi ni jie wodeban",
            },
            4: {
                en: "Trinity: I know, but I felt like taking your shift",
                zh: "可是我想要接你的班",
                tr: "keshi wo xiangyao jie nideban",
            },
            5: {
                en: "Cypher: You like him, don’t you? You like watching him",
                zh: "你挺喜欢他，想看看他",
                tr: "niting xihuan ta,  xiang kankan ta",
            },
            6: {
                en: "Trinity: Don't be ridiculous",
                zh: "你别胡扯了",
                tr: "nibie huche le",
            },
            7: {
                en: "Cypher: We’re going to kill him, do you understand that?",
                zh: "他会送命的, 知道吗",
                tr: "tahui songming de, zhidao ma",
            },
            8: {
                en: "Trinity: Morpheus believes he is The One",
                zh: "莫斐斯认为他最合适",
                tr: "mofeisi renwei tazui heshi",
            },
            9: {
                en: "Cypher: Do you?",
                zh: "你呢",
                tr: "ni ne",
            },
            10: {
                en: "Trinity: It doesn’t matter what I believe",
                zh: "我怎么认为无关紧要",
                tr: "wo zenme renwei wuguanjinyao",
            },
            11: {
                en: "Cypher: You don’t, do you?",
                zh: "啊，你不信吧",
                tr: "a nibu xinba",
            },
            12: {
                en: "Trinity: Did you hear that?",
                zh: "你听见什么了吧",
                tr: "ni tingjian shenme le ba",
            },
            13: {
                en: "Cypher: Hear what?",
                zh: "什么",
                tr: "shenme",
            },
            14: {
                en: "Trinity: Are you sure this line is clean?",
                zh: "你觉得线路没有问题吗",
                tr: "ni juede xianlu meiyou wenti ma",
            },
            15: {
                en: "Cypher: Yeah, ‘course I’m sure",
                zh: "我看没有问题",
                tr: "wo kan meiyou wenti",
            },
            16: {
                en: "Trinity: I better go",
                zh: "啊，我得挂了",
                tr: "ah wode guale",
            },
        }
    </script>

    <!-- Base64 encoded audio files -->
    <script>
        var b64Audios = {
            1: "",
        };
    </script>

    <!-- Base64 encoded image files -->
    <script>
        var b64Images = {
            1: "",
        };
    </script>

    <!-- Configure the page -->
    <script>
        // Create items in HTML.
        for (var i = 1; i <= 1; ++i) {
            document.body.innerHTML += itemTemplate.replaceAll("%ID%", i);
        }

        // Assign audios.
        for (var i in b64Audios) {
            var id = "audio-" + i;
            var elem = document.getElementById(id);
            elem.src = "data:audio/aac;base64," + b64Audios[i];
        }

        // Assign images.
        for (var i in b64Images) {
            var id = "img-" + i;
            var elem = document.getElementById(id);
            elem.src = "data:image/jpeg;base64," + b64Images[i];
        }

        // Assign texts.
        for (var i in texts) {
            var enId = "en-" + i;
            var zhId = "zh-" + i;
            var trId = "tr-" + i;
            var en = document.getElementById(enId);
            var zh = document.getElementById(zhId);
            var tr = document.getElementById(trId);
            en.textContent = i + '. ' + texts[i]["en"];
            zh.textContent = texts[i]["zh"];
            tr.textContent = texts[i]["tr"];
        }
    </script>
</html>