diff --git a/02.Hotel.html b/02.Hotel.html
new file mode 100644
index 0000000..11a632e
--- /dev/null
+++ b/02.Hotel.html
@@ -0,0 +1,168 @@
+<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>
