169 lines
4.9 KiB
HTML
169 lines
4.9 KiB
HTML
<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>
|