<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Visual Novel Game</title>
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/bg-awal.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
overflow: hidden;
}
#passages {
font-family: 'Comic Sans MS';
max-width: 500px;
margin: 0 auto;
}
.content {
text-align: center;
font-size: 50px;
color: #FFFF;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
padding: 10px;
}
.content p {
top: 10px;
margin-bottom: 0px;
margin-top: 20px;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 350px;
margin-bottom: 30px;
top: 0;
bottom: ;
left: 0;
right: 0;
width: 40%;
height: 10%;
font-size: 40px
}
.link a {
text-decoration: none;
}
</style>
<!-- Nama pasage: dialog -->
<div class="content">
<p>WELCOME TO THE COLLEGE</p>
<p>STUDENT JOURNEY</p>
</div>
<div class="wrapper" id="demo"></div>
<span class= "link" id="link1">[[START]]</span>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=MUcL1p4W"></script>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"start"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("start")) {
choice = 'START';
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script>
</body>
</html><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/bg-awal.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
padding-top: 30px;
justify-content: center;
position: fixed;
margin: auto;
margin-top: 100px;
margin-right: 680px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 30%;
height: 10%;
}
#link2 {
top: 0px;
margin-left: 0px;
margin-top: 300px;
}
#link3 {
margin-right: 200px;
}
#link4 {
top: 0px;
bottom: 100px;
margin-top: 300px;
margin-right: 200px;
}
.link a {
text-decoration: none;
}
</style>
<!-- Nama pasage: dialog -->
<span class= "link" id="link1">[[CANTEEN]]</span>
<span class= "link" id="link2">[[BOARDING HOUSE]]</span>
<span class= "link" id="link3">[[LIBRARY]]</span>
<span class= "link" id="link4">[[TOURIS ATTRACTION]]</span>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"canteen",
"house",
"library",
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("canteen")) {
choice = "CANTEEN";
} else if (speechResult.includes("house")) {
choice = "BOARDING HOUSE";
} else if (speechResult.includes("library")) {
choice = "LIBRARY";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria2.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
margin-right: 160px;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 42%;
height: 40%;
background-color: #6497b1;
opacity: 0.9;
border: 3px solid #E4F1EE;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 250px;
border-radius: 20px;
color: #eae2b7;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: inline-block;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-top: 60px;
margin-right: 0px;
margin-left: 200px;
}
.tittle-name {
font-weight: bold;
margin-bottom: 5px;
text-align: center;
color: ffb703;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/menu-1.png" alt="Character" style="width: 300px; height: auto; filter: grayscale(100%);">
<div class="dialogue" id="demo">
<div class="tittle-name">MISSIONS</div>
</div>
<script>
$(document).ready(function() {
var text = "A college student finishes class at noon and he starts to get hungry. But the menu he's looking for is a filling and healthy lunch menu. Can you help Alex to find the lunch menu him wants? And will he be able to overcome the challenges?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("tambahan1")
}, 13000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #fcbf49;
border: 2px solid #eae2b7;
color: #f6f8fa;
opacity: 0.9;
padding: 10px;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 80px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 240px;
height: 10%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-sad_002-1.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9; ">
</div>
<span class= "link" id="link1">[[Let's just go to the campus cafeteria and get lunch there->Cafeteria]]</span>
<span class= "link" id="link2">[[How about going for lunch around off-campus]]</span>
<div class="dialogue">
<div class="character-name">Alex</div>
<div class="dialogue-text">Hmmmm. The break has finally come. That class was very draining and now I'm getting hungry. But I don't know what to eat, and I need something healthy and filling.
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
margin-right: 160px;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 42%;
height: 50%;
background-color: #F4ACB7;
opacity: 0.9;
border: 3px solid #E4F1EE;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 200px;
border-radius: 20px;
color: #FEFEFF;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: inline-block;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
max-width: 800px;
width: 90%;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-top: 60px;
margin-right: 0px;
margin-left: 200px;
}
.tittle-name {
font-weight: bold;
margin-bottom: 5px;
text-align: center;
color: ffb703;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/poster.png" style="width: 300px; height: auto; filter: grayscale(100%);">
<div class="dialogue" id="demo">
<div class="tittle-name">MISSIONS</div>
</div>
<script>
$(document).ready(function() {
var text = "Emely came home in the afternoon, and she came home tired. Emely entered her boarding house and didn't see her cat. She looked for her cat in the room and in front of the boarding room. It turned out that her cat was not in her room. Where did Emely's cat go? Can Emely find her favorite cat?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding1")
}, 16000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.2,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/class2.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="dialogue" id="demo"></div>
</div>
<script>
$(document).ready(function() {
var text = "The class ended.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong1")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-sad_002-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hmmmm. The break has finally come. That class was very draining and now I'm getting hungry. But I don't know what to eat, and I need something healthy and filling.";
var i = 0;
var speed = 62;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong3")
}, 12000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Okay. Then, let's go to the cafeteria."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria Image")
}, 4000);
typeWriter();
</script>
<<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria-rame-1.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
</style>
<script>
setTimeout(function() {
story.show("Cafetaria1")
}, 4000);
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria-rame-1.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
display: flex;
justify-content: center;
align-items: center;
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70vw;
height: 25vh;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-wow-suprise_002-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Wow Oh my god. The queue at the campus cafeteria is really long. Moreover, we have another class later. Are we still looking in this area of the campus?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria2")
}, 10000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria-rame-1.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 30px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 200px;
margin-leftt: 50px;
right: 0;
left: 50;
width: 40%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
padding-top: 20px;
width: 40%;
height: 20%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-wow-suprise_002-1.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[I think we should look outside the campus]]</span>
<span class= "link" id="link2">[[Yes, just keep looking around the campus cafeteria, because there is a class in about 1 hour]]</span>
<div class="dialogue">
<div class="character-name">Alex</div>
<div class="dialogue-text">Wow Oh my god. The queue at the campus cafeteria is really long. Moreover, we have another class later. Are we still looking in this area of the campus?
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria-rame-1.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Okay, that's right. We'll just wait in line at one of the food courts here. But I don't know what's healthy for lunch. What should I do?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria3")
}, 10000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria-rame-1.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 12%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[It's best to ask a friend who is familiar with healthy lunches]]</span>
<div class="dialogue">
<div class="character-name">Alex</div>
<div class="dialogue-text">Okay, that's right. We'll just wait in line at one of the food courts here. But I don't know what's healthy for lunch. What should I do?
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria-rame-1.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-mikir_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Good idea. Let's go back to class first. I want to ask my classmates if they know anything, or maybe have a friend who knows about healthy food."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Lorong Img1")
}, 10000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "Alex walks with fast footsteps....";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong5")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-hai_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Alex!"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong6")
}, 2000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
</style>
<script>
setTimeout(function() {
story.show("lorong4")
}, 4000);
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-hai_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-hai_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Uh... Hi Emely"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong7")
}, 2000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-hai_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Where are you going, why are you in such a hurry?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong8")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Look Emely, we want to go back to class, to ask our classmates something. But since we met you here. So I'll just ask you."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong9")
}, 8000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Really, what do you want to ask?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong10")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 12%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Actually, Alex is confused about what to eat. Because what Alex needs is a healthy lunch.]]</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">Really, what do you want to ask?
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
top: 20;
bottom: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Emmm... yes Emely. Do you know what the characteristics of the food are or maybe you have an acquaintance who knows about it?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong11")
}, 8000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "When it comes to healthy food, I've never known how it's characterized."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong12")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "But I have an acquaintance who knows about it, because she often eats healthy food for her diet every day. How about I deliver it to my acquaintance?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong13")
}, 8000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
height: 20%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Yes, please deliver it to your acquaintance now]]</span>
<span class= "link" id="link2">[[Sorry, do you have any other recommendations? Since we don't have much time]]</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">But I have an acquaintance who knows about it, because she often eats healthy food for her diet every day. How about I deliver it to my acquaintance?
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Okay. Let's go!"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong14")
}, 4000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "They walked and arrived at the classroom....";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class img1")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald-nulis_004-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "....."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class1")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-hai_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald-nulis_004-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Hi, Renald"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class2")
}, 2000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-hai_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "Hi Emely, you're in my class, what's up?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class3")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "So here's the thing, Ren. A friend of mine wants to ask you about healthy food."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class4")
}, 6000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "And I happen to know that you're on a diet, can you tell me what are the characteristics of healthy food?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class5")
}, 7000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "Actually, if it's a matter of knowing or not, I don't really know. But I can give you advice on healthy foods that I used to eat during my diet."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class6")
}, 8000);
typeWriter();
</script>
<<!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Wow.... Can you suggest a healthy lunch that you usually eat, Ren?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class7")
}, 6000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "That's totally fine. So I usually eat something with a lot of vegetables for lunch, like a vegetable salad or vegetable soup with a low-fat protein, like chicken."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class8")
}, 9000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "Because it's lunch, we also need carbohydrates to keep us energized. But I always use brown rice or white rice with just one spoonful."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class9")
}, 8000);
typeWriter();
</script>
</<!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "That's a healthy diet Ren. But do you usually bring lunch from home?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class10")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "That's right, Lex...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class11")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "Because I don't think the campus cafeteria provides a lot of vegetables and most of them sell food with a lot of oil."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class12")
}, 6000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "But there is one food court that provides healthy food that is quite popular and very crowded."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class13")
}, 6000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "They sell vegetable soup with a large selection of protein there. You should try it, because I go there quite often."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class14")
}, 7000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-left: 200px;
top: 20;
bottom: 50;
right: 0;
left: 0;
width: 40%;
height: 20%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Well, it looks like we should try going to that food court as soon as possible, in case it's not crowded right now]]</span>
<div class="dialogue">
<div class="character-name">Renald</div>
<div class="dialogue-text">They sell vegetable soup with a large selection of protein there. You should try it, because I go there quite often.
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Okay thanks for the suggestion Renald. I'll try the food court you mentioned."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class15")
}, 5000);
typeWriter();
</script>
<<!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Renald</div>
</div>
</div>
<script>
var text = "Okay you are welcome. Hope you like it."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class16")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Alex, I'm coming..."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class17")
}, 2000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-hai_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 400px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/renald_004.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Bye, Renald"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria4")
}, 2500);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "They walked back to the campus cafeteria.";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria5")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-wow-suprise_002-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Oh no... "
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria6")
}, 2000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-wow-suprise_002-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "It turns out that the food court that sells vegetable soup is really queuing."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria7")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "And we have class in an hour. What do you think?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria8")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 30px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 200px;
margin-leftt: 50px;
right: 0;
left: 50;
width: 40%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Keep ordering vegetable soup food court]]</span>
<span class= "link" id="link2">[[Order another food court instead]]</span>
<div class="dialogue">
<div class="character-name">Alex</div>
<div class="dialogue-text">Wow Oh my god. The queue at the campus cafeteria is really long. Moreover, we have another class later. Are we still looking in this area of the campus?
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Well Alex, we'll just order the vegetable soup anyway. Let's queue first."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria9")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-bingung_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "But roughly, 1 hour is enough if we order vegetable soup. I'm afraid we'll be late for class."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria10")
}, 5500);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-bingung_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-gatau_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "I don't know either Alex, let's try it first."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria11")
}, 5000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "30 minutes later…";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria12")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Come on Alex, the next queue is our turn."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria13")
}, 5000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/ms.-lena-senyum_003-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Mrs. Lena</div>
</div>
</div>
<script>
var text = "Good afternoon, what would you like to order?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria14")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/ms.-lena-senyum_003-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "I would like to order 3 vegetable soups and rice as well."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria15")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/ms.-lena-oke_003-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Mrs. Lena</div>
</div>
</div>
<script>
var text = "Okay, what protein do you want to add to the soup?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria16")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.9;
padding: 10px;
padding-top: 20px;
text-align: center;
border-radius: 10px;
position: fixed;
margin: auto;
margin-top: 250px;
margin-right: 620px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 13%;
height: 8%;
}
#link2 {
margin-right: 223px;
height: 12%;
padding-top: 8px;
}
#link3 {
margin-right: 421px;
}
.link a {
text-decoration: none;
}
.image-link {
position: relative;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/ms.-lena-oke_003-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<span class="image-link">
<img src= "https://lissakinah.files.wordpress.com/2024/04/chicken.png" alt="chicken" style="width: 192px; height: auto; margin-top: 50px; background-color: #F0F0F0; opacity: 0.9; border-radius: 10px; margin-left: 250px;">
<span class= "link" id="link1">[[Chicken]]</span>
</span>
<span class="image-link">
<img src= "https://lissakinah.files.wordpress.com/2024/04/beef.png" alt="tofu" style="width: 192px; height: auto; margin-top: 50px; background-color: #F0F0F0; opacity: 0.9; border-radius: 10px; margin: 0 auto;">
<span class= "link" id="link2">[[Tofu and tempeh]]</span>
</span>
<span class="image-link">
<img src= "https://lissakinah.files.wordpress.com/2024/04/tofu.png" alt="beef" style="width: 192px; height: auto; margin-top: 100px; background-color: #F0F0F0; opacity: 0.9; border-radius: 10px; margin: 0 auto;">
<span class= "link" id="link3">[[Beef]]</span>
</span>
<div class="dialogue">
<div class="character-name">Mrs. Lena</div>
<div class="dialogue-text">Okay, what protein do you want to add to the soup?
</div>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "It looks like the perfect match for vegetable soup is chicken, Lex."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria17")
}, 4500);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "What do you want Emely?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria19")
}, 2500);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "I'm on a diet, Lex. I don't think I need to."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria23")
}, 3000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Students leave the classroom and head to the cafetaria.";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong2")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/cafetaria2.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.9;
padding: 10px;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 350px;
margin-right: 160px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 10%;
height: 8%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
margin-right: 160px;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 42%;
height: 40%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 250px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-top: 60px;
margin-right: 0px;
margin-left: 200px;
}
.tittle-name {
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/menu-1.png" alt="Character" style="width: 300px; height: auto; filter: grayscale(100%);"></div>
<span class= "link" id="link1">[[Let's Go]]</span>
<div class="dialogue">
<div class="tittle-name">MISSIONS</div>
<div class="dialogue-text">A college student finishes class at noon and he starts to get hungry. But the menu he's looking for is a filling and healthy lunch menu. Can you help Alex to find the lunch menu him wants? And will he be able to overcome the challenges?
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Well then, I'll just have chicken."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria18")
}, 2500);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Chicken meat yes...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria27")
}, 2200);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Emmm I don't know, Lex, I'm confused. You just have to match your choices."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria20")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "How about beef? Would you like some?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria21")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Yes...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria22")
}, 1300);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Yes, I already use meat protein."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria27")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "We need protein Emely, especially since we're going to have another class so we'll be more energized. How about tofu and tempeh?"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria24")
}, 7200);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Hmmm well, if you insist. Just tofu and tempeh."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria25")
}, 3200);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "There you go..."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria26")
}, 1500);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Just want tofu and tempeh...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria27")
}, 2500);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 40px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 200px;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/ms.-lena-senyum_003-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Mrs. Lena</div>
</div>
</div>
<script>
var text = "Okay. Please wait for to the order...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria28")
}, 3000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "Finally, they waited for their order...";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria29")
}, 3000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "15 minutes later... ";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria30")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-merenung_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Our food just arrived. I have a lecture in less than 15 minutes."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria31")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F0F0F0;
opacity: 0.8;
padding: 10px;
padding-top: 10px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 12%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-merenung_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Better go ahead and eat, so we can get to class on time]]</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">Our food just arrived. I have a lecture in less than 15 minutes.
</div>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "They also eat in a hurry....";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria32")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "How about you guys finish eating? If so, we'd better get out of here."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria33")
}, 4000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Let's go..."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("lorong15")
}, 1500);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "They ran to their classrooms...";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Class door")
}, 3000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
var text = "And they reached the front of the class..";
var i = 0;
var speed = 30;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class img2")
}, 3000);
typeWriter();
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
</style>
<script>
setTimeout(function() {
story.show("class18")
}, 3000);
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-capek_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Ah... ah... ah... "
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class19")
}, 2300);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-mohon-maaf_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Excuse me sir. Sorry we're late sir."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class20")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-mohon-maaf_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/mr.-bram-marah_004-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Mr. Bram</div>
</div>
</div>
<script>
var text = "Why are you guys so late, I've been here for 15 minutes. But you just arrived. As punishment, you're out of my class."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class21")
}, 7000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-mohon-maaf_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-sedih_008-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 410px; margin-left: 0px;">
<img src="https://lissakinah.files.wordpress.com/2024/04/mr.-bram-marah_004-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Good sir, please forgive us."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class22")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-sedih_008-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Hmmmm. We can't go to class today."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class23")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-sedih_008-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Hmmmm. We can't go to class today."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class24")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-sedih_008-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-sedih_009.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Yes... next time, we shouldn't be like this."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class25")
}, 3200);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://i.pinimg.com/564x/01/2b/d0/012bd0675387e71ce7c3ac5019bb5d5c.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 30%;
background-color: #FF0;
opacity: 0.9;
border: 3px solid orange;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/emely-sedih_008-2.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "If the cafeteria is crowded and the queue is long, we have to find another option. And later we have to come to Mr. Bram's room to apologize to him directly."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("class26")
}, 9000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.files.wordpress.com/2024/04/corridor3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #6497b1;
border: 3px solid #E4F1EE;
color: #eae2b7;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.files.wordpress.com/2024/04/alex-biasa_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Alex</div>
</div>
</div>
<script>
var text = "Okay. Then, let's go to the cafeteria."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Cafetaria Image")
}, 4000);
typeWriter();
</script>
<<!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #9EA1D4;
border: 1px solid #E4F1EE;
opacity: 0.9;
padding: 10px;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 400px;
margin-right: 160px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 10%;
height: 8%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
margin-right: 160px;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 42%;
height: 50%;
background-color: #F4ACB7;
opacity: 0.9;
border: 3px solid #E4F1EE;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 200px;
border-radius: 20px;
color: #FEFEFF;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-top: 60px;
margin-right: 0px;
margin-left: 200px;
}
.tittle-name {
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/poster.png" alt="Character" style="width: 300px; height: auto; filter: grayscale(100%);"></div>
<span class= "link" id="link1">[[Let's Go...]]</span>
<div class="dialogue">
<div class="tittle-name">MISSIONS</div>
<div class="dialogue-text">Emely came home in the afternoon, and she came home tired. Emely entered her boarding house and didn't see her cat. She looked for her cat in the room and in front of the boarding room. It turned out that her cat was not in her room. Where did Emely's cat go? Can Emely find her favorite cat?
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"go"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("go")) {
choice = "Let's Go...";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely searched for Kiyo, who had not been at his boarding house since this morning....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding2")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Where is Kiyo?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding3")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "He's usually hanging around my room or the front porch, but why hasn't he been seen for a while?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding4")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-oh-iya_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh yeah I know, I'll call him something that will lure him out.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding5")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F4ACB7;
border: 1px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 8px;
padding-top: 12px;
text-align: center;
border-radius: 10px;
position: fixed;
margin: auto;
margin-top: 285px;
margin-right: 520px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 20%;
height: 12%;
}
#link2 {
margin-right: 210px;
padding-top: 8px;
}
.link a {
text-decoration: none;
}
.image-link {
position: relative;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-oh-iya_001.png" alt="Mainan" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<span class="image-link">
<img src= "https://lissakinah.wordpress.com/wp-content/uploads/2024/06/mainan.png" alt="mainan" style="width: 260px; height: auto; margin-top: 30px; background-color: #F4ACB7; border: 2px solid #E4F1EE; opacity: 0.9; border-radius: 10px; margin-left: 269px;" id="toyImage">
<span class= "link" id="link">[[Calling him with his toys]]</span>
</span>
<span class="image-link">
<img src= "https://lissakinah.wordpress.com/wp-content/uploads/2024/06/makanan-kucing.png" alt="Makanan" style="width: 244px; height: auto; margin-top: 100px; background-color: #F4ACB7; border: 2px solid #E4F1EE; opacity: 0.9; border-radius: 10px; margin: 0 auto; margin-left: 50px" id="foodImage">
<span class= "link" id="link2">[[Calling with his favorite food]]</span>
</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">Oh yeah I know, I'll call him something that will lure him out.
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"his toys",
"food"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("his toys")) {
choice = "Calling him with his toys";
} else if (speechResult.includes("food")) {
choice = "Calling with his favorite food";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F4ACB7;
border: 1px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 8px;
padding-top: 12px;
text-align: center;
border-radius: 10px;
position: fixed;
margin: auto;
margin-top: 320px;
margin-right: 520px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 20%;
height: 7%;
}
#link2 {
margin-right: 210px;
padding-top: 8px;
}
.link a {
text-decoration: none;
}
.image-link {
position: relative;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-mikir_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<span class="image-link">
<img src= "https://lissakinah.wordpress.com/wp-content/uploads/2024/06/lonceng.png" alt="bell" style="width: 240px; height: auto; margin-top: 30px; background-color: #F4ACB7; border: 2px solid #E4F1EE; opacity: 0.9; border-radius: 10px; margin-left: 275px;" id="toyImage">
<span class= "link" id="link">[[Bell Toy]]</span>
</span>
<span class="image-link">
<img src= "https://lissakinah.wordpress.com/wp-content/uploads/2024/06/bola.png" alt="ball" style="width: 260px; height: auto; margin-top: 100px; background-color: #F4ACB7; border: 2px solid #E4F1EE; opacity: 0.9; border-radius: 10px; margin: 0 auto; margin-left: 50px" id="foodImage">
<span class= "link" id="link2">[[Ball Toy]]</span>
</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">Which toy do I call him?
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"bell toy",
"ball toy"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("bell toy")) {
choice = "Bell Toy";
} else if (speechResult.includes("ball toy")) {
choice = "Ball Toy";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Suddenly a cat came out of the outside window....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding7")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Suddenly a cat came out of the outside window....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding7")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-hai_02_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh...... Hi Yowo it's you who came, I'm looking for Kiyo.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding8")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-mikir_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Yowo</div>
</div>
</div>
<script>
var text = "Meow.. Meow.. Meow.."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding10")
}, 6000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/QuNOrxxmoEiUUGEjpWCXEGUtTKYjZ1Dg" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-mikir_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I'll look for Kiyo another way.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding11")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-membantuku_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Yowo</div>
</div>
</div>
<script>
var text = "Meow.. Meow.. Meow.."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding13")
}, 6000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/QuNOrxxmoEiUUGEjpWCXEGUtTKYjZ1Dg" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-mikir_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I haven't seen Kiyo around the boarding house, where is he?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding9")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-membantuku_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Do you want to help me find Kiyo?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding12")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 350px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 35%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-membantuku_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Looking for Kiyo in the boarding yard]]</span>
<span class= "link" id="link2">[[Making a missing cat poster]]</span>
<div class="dialogue">
<div class="character-name">Yowo</div>
<div class="dialogue-text">Meow.. Meow.. Meow..
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"yard",
"cat poster"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("yard")) {
choice = "Looking for Kiyo in the boarding yard";
} else if (speechResult.includes("cat poster")) {
choice = "Making a missing cat poster";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely circled around her boarding house to look for Kiyo, followed by Yowo....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding14")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely went back to the boarding house and Emely went back to her room and she made a missing cat poster....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding24")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hum..... I don't know where to find Kiyo first.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding15")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 35%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Kindergarten playground]]</span>
<span class= "link" id="link2">[[Market]]</span>
<div class="dialogue">
<div class="character-name">Yowo</div>
<div class="dialogue-text">Meow.. Meow.. Meow..
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"playground",
"market"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("playground")) {
choice = "Kindergarten playground";
} else if (speechResult.includes("market")) {
choice = "Market";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yowo, I think I need to go to the market to do some shopping and in case we run into Kiyo.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding22")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
audio {
display: none;
}
</style>
<script>
setTimeout(function() {
story.show("playground2")
}, 7000);
</script>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/Ht7Ff2mL34RpHTYRkkZTqORmiuqYZWCf" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely looked for Kiyo around the swings....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground3")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-manggil_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Kiyooo....Kiyooo....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground4")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Several hours of Emely searching for Kiyo....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground5")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-oh-iya_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Ah... Kiyo likes dark places, should I check the hallway where the children's toys are?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground6")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 350px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 20%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-oh-iya_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Yes]]</span>
<span class= "link" id="link2">[[No]]</span>
<div class="dialogue">
<div class="character-name">Yowo</div>
<div class="dialogue-text">Ah... Kiyo likes dark places, should I check the hallway where the children's toys are?
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"yes",
"no"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("yes")) {
choice = "Yes";
} else if (speechResult.includes("no")) {
choice = "No";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely heading towards the hallway, as the sound is heard behind the hallway of children playing....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground7")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.2,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-jalan_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "There's a seat over there, I'll just take a break first.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground15")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div> <!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-serius_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I have to find Kiyo in that hallway.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground8")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/dog_001.png" alt="Character" style="width: 330px; height: auto; top: 10; left: 0; right: 0; margin-top: 50px; margin-right: 0px; margin-left: 680px;">
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely went to the hallway, and there was a very cute dog but he seemed to be afraid of humans....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground9")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-hai_02_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/dog_001.png" alt="Character" style="width: 330px; height: auto; top: 0; left: 10; right: 0; margin-bottom: 140px; margin-right: 0px; margin-left: 212px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Uh there's a dog here, hello...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground10")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-hai_02_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/dog2_001.png" alt="Character" style="width: 330px; height: auto; top: 0; left: 10; right: 0; margin-bottom: 50px; margin-right: 0px; margin-left: 212px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Dog</div>
</div>
</div>
<script>
var text = "Guk guk!!!"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground11")
}, 5000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/NKzAL02kZM8Lx8nPSEoZ1aKiUQPwvEBG" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-membantuku_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/dog2_001.png" alt="Character" style="width: 330px; height: auto; top: 0; left: 10; right: 0; margin-bottom: 50px; margin-right: 0px; margin-left: 212px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Relax dog I won't hurt you, I'll feed you, you must be hungry right?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground12")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely's hand wanted to pet the dog, but the dog rebelled, and wanted to chase Emely. Emely ran away, and the dog chased Emely....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground13")
}, 9000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-lari_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/dog2_001.png" alt="Character" style="width: 330px; height: auto; top: 0; left: 10; right: 0; margin-bottom: 50px; margin-right: 0px; margin-left: 212px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Aaaaa.... Run there Dog!!!";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground14")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-lari_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/dog2_001.png" alt="Character" style="width: 330px; height: auto; top: 0; left: 10; right: 0; margin-bottom: 50px; margin-right: 0px; margin-left: 212px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Dog</div>
</div>
</div>
<script>
var text = "Guk guk!!!"
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Game Over")
}, 6000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/NKzAL02kZM8Lx8nPSEoZ1aKiUQPwvEBG" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely sat down. A few minutes later, suddenly the sound of lightning was heard...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground16")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div> <style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/cloudy-sky.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
audio {
display: none;
}
</style>
<script>
setTimeout(function() {
story.show("playground17")
}, 7000);
</script>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/5spgzDOvA4f8hPG31iVTsSnojCUNKOkh" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-lihat-keatas_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Well it looks like I have to go back to the boarding house, because after this it will rain.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground18")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/playground2-1-937813128-e1718547005289.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-lari2_001.png" alt="Character" style="width: 461px; height: 667px;">
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely ran to the boarding house, but before reaching the boarding house, Emely was drenched with rainwater. Emely arrived home soaking wet...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding16")
}, 12000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/5spgzDOvA4f8hPG31iVTsSnojCUNKOkh" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bersin_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
var text = "Hacyu..... hacyu... "
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding17")
}, 7000);
typeWriter();
</script>
</div>
<audio id="audio" autoplay loop>
<source src="https://audio.jukehost.co.uk/frsEDk8CeCfpGyyiOSKrkXdTsGXHNlGn" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-sakit_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I think I'll change my clothes first so I don't get sick and tomorrow I'll continue looking for Kiyo.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("sunrise")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div> <style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/bg-game-over.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
audio {
display: none;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/game-over-6-22-2024-2.gif" alt="Character" style="width: 700px; height: auto; top: 0; left: 0; right: 0; margin-top: 160px; margin-right: 0px; margin-left: 0px;">
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/ejuC5akOo6tINjpcc8C8JR1lKMbOxklF" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/sunrise3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
audio {
display: none;
}
</style>
<script>
setTimeout(function() {
story.show("boarding18")
}, 8000);
</script>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/erCefPfDyEvIpawNxI17CgJ2zxhOmcx1" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely suddenly felt her whole body heat up....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding19")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
margin-top: 150px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/thermometer.png" alt="Character" style="width: 461px; height: auto;">
</div>
</div>
<script>
var text = "....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i< text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding21")
}, 3000);
typeWriter();
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-sakit2_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I have to check my temperature first...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding20")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-sedih_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "It turns out I have a fever, well I can't look for Kiyo....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Game Over")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-membantuku_001.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Do you want to come along?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding23")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-membantuku_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Yowo</div>
</div>
</div>
<script>
var text = "Mewo...meow...meow...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market")
}, 2000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/QuNOrxxmoEiUUGEjpWCXEGUtTKYjZ1Dg" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely went to the market with Yowo....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market1")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Wow, it's very crowded, Yowo, and there are also many of your friends here.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market2")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Yowo</div>
</div>
</div>
<script>
var text = "Meow...meow...meow..."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market3")
}, 2000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/QuNOrxxmoEiUUGEjpWCXEGUtTKYjZ1Dg" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely wandered around with Yowo and she came to a fishmonger....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market4")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div> <!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/mr.-asep-nyapa_005.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Mr. Asep</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Loo Emely, what do you want to buy?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market5")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'US English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/mr.-asep-nyapa_005.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Eh yes sir, I want to buy 1 kg of Tilapia fish, sir...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market6")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/mr.-asep-senyum_005.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Mr. Asep</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Okay, ready....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market7")
}, 2000);
typeWriter();
responsiveVoice.speak(text, 'US English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/mr.-asep-senyum_005.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "How many fish are there in total, sir?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market8")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/mr.-asep-senyum_005.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Mr. Asep</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "25,000 thousand....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market9")
}, 2000);
typeWriter();
responsiveVoice.speak(text, 'US English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-jalan2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely walked back to her boarding house....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market10")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "As she was walking, Emely suddenly saw a cat like Kiyo....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("semak")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/semak-semak.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely headed to where the cat was....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("semak1")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/semak-semak.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "When she wanted to walk. Suddenly Yowo's voice was heard....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("semak3")
}, 9000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/5RphAOwTtndA8ACz275Bd7gWuzLBW1HG" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/semak-semak.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #fcbf49;
border: 2px solid #eae2b7;
color: #f6f8fa;
opacity: 0.9;
padding: 10px;
padding-top: 20px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 80px;
margin-right: 200px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 40%;
height: 13%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 240px;
height: 10%;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bawa-tas_001-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
<div class="dialogue">
<div class="dialogue-text">When she wanted to walk. Suddenly Yowo's voice was heard....
</div>
<script>
function goToNextPassage() {
setTimeout(function() {
story.show("semak")
}, 8000);
}
goToNextPassage();
</script>
</div>
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/semak-semak.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-noleh_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely turned around and saw Yowo fighting with another cat....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market11")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely went to Yiwo and saved him by chasing the cats away....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market12")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-hus_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
<script>
$(document).ready(function() {
var text = "Yowoooo... you guys hus hus don't fight.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market13")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "The cat left, Emely also remembered something to check the place where she saw Kiyo earlier.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market14")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-sedih2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
</div>
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
<script>
$(document).ready(function() {
var text = "Well... I lost track of Kiyo...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Game Over")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hum.... I have to make a missing poster for Kiyo, so that he can be found soon.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding25")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
margin-top: 30px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/komputer.png" alt="Character" style="width: 461px; height: auto;">
</div>
</div>
<script>
$(document).ready(function() {
var text = "Emely made a lost cat poster for Kiyo, and she put in his address and phone number. And so the poster was finished....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding26")
}, 9000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/fntoslxFUkgVjnLYYmKt47Nec47dOEmD" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-taraa_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/poster-hilang.png" alt="Character" style="width: 261px; height: auto;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Taraaaa... finally the poster for Kiyo is finished yeyyy.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding28")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-taraa_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/poster-hilang.png" alt="Character" style="width: 261px; height: auto;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Taraaaa... finally the poster for Kiyo is finished yeyyy.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding28")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "But where should I share it?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding29")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-right: 250px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 35%;
height: 10%;
}
.link a {
text-decoration: none;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bingung_001-1.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Putting the poster on the pole]]</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">But where should I share it?
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"on the pole"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("on the pole")) {
choice = "Putting the poster on the pole";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-oh-iya_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Ahh I see, I should just attach this poster to a pole or tree by the roadside.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding30")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I have to go to the printing shop to print this poster.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan-18558058-e1718868711961.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely also went to the printing place, and after 15 minutes later Emely arrived at the printing place....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print")
}, 8000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Excuse me, Vina....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print1")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina-senyum_006-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Vina</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Uh Emely, what are you doing here?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print2")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina-senyum_006-1.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I want to print a poster sis, here is the flashdisk. The file name is Kiyo Poster sis.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print3")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina_006.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Vina</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Okay Ly, how many sheets do you want printed Ly?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print4")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina_006.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Just 30 sheets sis...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print5")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "A few minutes later, the 30 sheets poster was printed....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print6")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina-megang_006.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Vina</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "This is Ly's poster. I hope Kiyo will be found soon Ly.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print7")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina-megang_006.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes, hopefully. If you find Kiyo, please contact me.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print8")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina-oke_006.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Vina</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Okay Ly take it easy....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print9")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/vina-oke_006.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Okay sis thank you....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("print10")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/print.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely paid for the poster and walked away thinking about where to paste the poster.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan1")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster3_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I'm confused about where to put this poster?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan2")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster4_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Eh there is Yowo, Yowo you know not I have to paste this poster anywhere?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan3")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster4_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Yowo</div>
</div>
</div>
<script>
var text = "Meow....meow....meow...."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan4")
}, 8000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/QuNOrxxmoEiUUGEjpWCXEGUtTKYjZ1Dg" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 50px;
margin-right: 450px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 25%;
height: 10%;
}
#link2 {
top: 0px;
bottom: 100px;
margin-top: 210px;
}
.link a {
text-decoration: none;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster4_001.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Alley near home]]</span>
<span class= "link" id="link2">[[Shared with people]]</span>
<div class="dialogue">
<div class="character-name">Yowo</div>
<div class="dialogue-text">Meow....meow....
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"home",
"people"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("home")) {
choice = "Alley near home";
} else if (speechResult.includes("people")) {
choice = "Shared with people";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan-18558058-e1718868711961.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster5_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yowo, I think I should put this poster near a pole or tree in this alley.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan5")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan2-3081973095-e1718956419984.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster5_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I think I should share this with everyone. So that we can find Kiyo quickly.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan9")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan-18558058-e1718868711961.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Then Emely pasted the posters on poles and walls…..";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan6")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan-18558058-e1718868711961.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-yeyy_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Well, finally this poster is up. Hopefully someone will find Kiyo. There's only one more poster left.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan7")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan-18558058-e1718868711961.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster5_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Well there's a tree I'll stick it there.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan8")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/street-4042183640-e1718976758632.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "When Emely walked near the tree. Suddenly the poster flew out of Emely's hand.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman2")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/YSte3kFvB2okjLzPJ244DM6bquUUEfgF" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan2-3081973095-e1718956419984.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-bagi_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 100px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/orang2_004-1.png" alt="Character" style="width: auto; height: 600px; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-left: 500px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Please, if you see this cat, call the number below. Thank you.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan10")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan2-3081973095-e1718956419984.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely also shared the poster until there was only one poster left…..";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan11")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan2-3081973095-e1718956419984.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I'm tired too. There's only one left, but I think I need to rest first.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "As Emely walked to the seat near the garden. Suddenly the poster flew out of Emely's hand…..";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman1")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-kaget_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh my gosh, the poster….";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman2")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/bg-sukses2-2.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
audio {
display: none;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/success-6-22-2024-2.gif" alt="Character" style="width: 700px; height: auto; top: 0; left: 0; right: 0; margin-top: 110px; margin-right: 0px; margin-left: 0px;">
</div>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/XYAazAxJfnPI6s3j5zCWcWSyf0lkmouX" type="audio/mp3">
</audio>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/Nt3AbTG3bizTMHoLahKcf1kzVuN6QqmV" type="audio/mp3">
</audio>
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "As Emely was about to take the paper. Yowo came and took the paper and ran away leaving Emely behind.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman3")
}, 7000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-lari_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh my gosh Yowo, stop!!!!";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan12")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely also chased after Yowo. The poster suddenly fell from Yowo. Emely also picked up the poster that fell in the middle of the road. Emely also took it.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan13")
}, 13000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-syukur_001.png" alt="Character" style="width: auto; height: 500px; position: fixed; top: 10; left: 0; right: 0; margin-top: 100px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Ah! Thank goodness.....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan14")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Suddenly there is a car that wants to hit Emely....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan15")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/aO8MhdemhCDTuBUXazWP2bb8TOqu9FSF" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/yowo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Suddenly a cat came out of the outside window....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding7")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-mikir_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Which toy do I call him?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding6")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-serius_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I'll try to find Kiyo around the kindergarten.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("playground1")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-takut_001.png" alt="Character" style="width: auto; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Aaaa.... No!!!";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan16")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/aO8MhdemhCDTuBUXazWP2bb8TOqu9FSF" type="audio/mp3">
</audio><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
audio {
display: none;
}
</style>
<script>
setTimeout(function() {
story.show("jalan17")
}, 4000);
</script>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/0MJiSSWqsnBE0A215HFpYegPxWXV1cNf" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-panik_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Eeee..... sorry. You're okay, right?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan18")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-terkejut_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-panik_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Aaahh what?, ooo yeah I'm fine. Ahhh where's Kiyo's poster?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan19")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-terkejut_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-ngasih_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh what do you mean this poster?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan20")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-ngasih_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes, that's right, thank you.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan21")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Uh wait a minute, I think I've seen this cat. Is this your cat?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan22")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster4_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes, you know Kiyo. Have you ever seen him?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan23")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster4_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-kyut_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh..... Her name is Kiyo. What a cute name.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan24")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster4_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes, I've seen him before, he comes to my house a lot. And I always give him fish. Oh yeah, let me introduce my name is Juan.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan25")
}, 11000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster5_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-biasa_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh hi yes, my name is Emely. Ahhh really, sorry for the trouble, Kiyo usually comes to your place in the afternoon or evening?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan26")
}, 12000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster5_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-senyum2_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Well, it's okay. I also like it when cats come to my house, he's a very active and funny cat, Kiyo usually comes in the afternoon.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan27")
}, 11000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster5_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-liat-hp_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh, this is your number, I'll call you if Kiyo comes to my place again.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan28")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-liat-hp_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Oh well, thank you, sorry for the trouble";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("jalan29")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/jalan5-702003396-e1719129257903.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-poster_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-liat-hp_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Sure, No problem....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding31")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-mohon_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I hope Kiyo comes back soon, I'm really worried about him";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding32")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/sunrise3.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "The next day...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living")
}, 8000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/erCefPfDyEvIpawNxI17CgJ2zxhOmcx1" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "On a sunny morning Juan heads to the living room after brewing coffee...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living1")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Then he opened the glass door of his house which leads directly to his private garden so that his air circulation changes...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living2")
}, 9000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kiyo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Not long after, an orange-colored cat came in...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living4")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kiyo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Not long after, an orange-colored cat came in...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living4")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-santai_002.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kiyo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Wow kiyo where have you been your owner was looking for you everywhere yesterday. I need to contact the owner right away.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living5")
}, 9000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-santai_002.png" alt="Character" style="width: 461px; height: 667px;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kiyo_001.png" alt="Character" style="width: 400px; height: auto; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 100px; margin-right: 150px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Ah but where is the poster from yesterday?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living6")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-right: 250px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 35%;
height: 10%;
}
.link a {
text-decoration: none;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-santai_002.png" alt="Character" style="width: 461px; height: 667px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Search the room table]]</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">Ah but where is the poster from yesterday?
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"table"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("table")) {
choice = "Search the room table";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-santai_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I guess I'll have to look for that poster on the nightstand.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living7")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Juan searched the table for the poster, and finally found it....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("living8")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'US English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/living-room-4099208718-e1719264779305.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-megang_002.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "I finally found the poster. I need to contact Emely immediately.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding33")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasaa_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Whose number is this? Could this be the number of someone who has found Kiyo?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding34")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/EdN2eX3wWRyULWDha29OB2dkzzK4qL3s" type="audio/mp3">
</audio><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Emely picked up the phone....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("boarding35")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'US English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hi Emely, it's me Juan, Kiyo came to my place again today.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("gabungan1")
}, 5000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/kos-2427103805-e1717935963704.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hello, who is this?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("gabungan")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; ">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Wow, really, Juan. Thank you for contacting me.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("gabungan2")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.link {
background-color: #F4ACB7;
border: 2px solid #E4F1EE;
color: #FEFEFF;
opacity: 0.9;
padding: 10px;
padding-top: 25px;
border-radius: 10px;
text-align: center;
position: fixed;
margin: auto;
margin-top: 150px;
margin-right: 450px;
margin-leftt: 50px;
top: 20;
bottom: 50;
right: 0;
left: 50;
width: 30%;
height: 10%;
}
.link a {
text-decoration: none;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<span class= "link" id="link1">[[Meeting in a flower garden]]</span>
<div class="dialogue">
<div class="character-name">Emely</div>
<div class="dialogue-text">Wow, really, Juan. Thank you for contacting me.
</div>
</div>
<script>
var audioQueue = [];
var isAudioPlaying = false;
function handleRecognitionResult(event) {
if (event.results.length > 0) {
// Get the recognized speech
var speechResult = event.results[0][0].transcript.trim().toLowerCase();
console.log(speechResult)
// Log the recognized speech for debugging
console.log('Recognized speech:', speechResult);
// Define keywords to match
var keywords = [
"flower garden"
];
// Check if any keyword is found in the speech
var foundKeyword = keywords.some(function(keyword) {
return speechResult.includes(keyword);
});
// If at least one keyword is found, execute story.show()
if (foundKeyword) {
var choice = null;
if (speechResult.includes("flower garden")) {
choice = "Meeting in a flower garden";
}
story.show(choice);
} else {
// Handle unrecognized speech
console.log('Unrecognized speech:', speechResult);
startSpeechRecognition();
// You can add error handling or prompt the user to repeat
}
} else {
// No speech detected
console.log('No speech detected.');
// You can add error handling or prompt the user to repeat
}
}
function startSpeechRecognition() {
// Create a new SpeechRecognition object
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-EN'
// Event listener for speech recognition result
recognition.onresult = handleRecognitionResult;
// Event listener for speech recognition error
recognition.onerror = function(event) {
// Handle speech recognition errors
console.error('Speech recognition error:', event.error);
// You can add error handling here
};
// Start speech recognition
recognition.start();
console.log("Start Recog:")
}
startSpeechRecognition();
</script><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes, you're welcome Emely. How about today we meet at this flower garden. Because I'm also leaving for the office after this.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("gabungan3")
}, 8000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; ">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes, Juan...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("gabungan4")
}, 3500);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; ">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Okay Ly, see you later....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("gabungan5")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/gabungan.png');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
audio {
display: none;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-angkat-telpn_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; ">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-angkat-telpn_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
</div>
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Yes Juan, bye....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman4")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.dialogue.text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Juan and Emely went to the flower garden. They arrived and met each other…..";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman5")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-babay_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Juan!!";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman6")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-babay_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-babay_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hi Emely";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman7")
}, 3000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; ">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-babay_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px; filter: grayscale(100%); opacity: 0.9;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Hi Juan, where's Kiyo?";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman8")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-biasa2_001.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 0; right: 0; margin-bottom: 10px; margin-right: 0px; margin-left: 120px; filter: grayscale(100%); opacity: 0.9;">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/juan-biasa2_002.png" alt="Character" style="width: 461px; height: 667px; position: fixed; top: 10; left: 10; right: 0; margin-bottom: 10px; margin-right: 120px; margin-left: 0px;">
<div class="dialogue" id="demo">
<div class="character-name">Juan</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "One second Ly...";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman9")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'UK English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="dialogue" id="demo"></div>
<script>
$(document).ready(function() {
var text = "Kiyo came out from behind the door....";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("taman10")
}, 4000);
typeWriter();
responsiveVoice.speak(text, 'US English Male', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/taman-3741937598-e1719019948341.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
z-index: -1;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-peluk_001.png" alt="Character" style="width: 461px; height: 667px;">
<div class="dialogue" id="demo">
<div class="character-name">Emely</div>
</div>
</div>
<script>
$(document).ready(function() {
var text = "Kiyoooo... you're finally back. I was so worried and missed you.";
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("Success")
}, 6000);
typeWriter();
responsiveVoice.speak(text, 'UK English Female', {
rate: 1.0,
onend: function() {
}
});
})
</script>
</div><!-- Nama pasage: stylesheet -->
<style>
/* CSS untuk tampilan visual novel */
body {
background-image: url('https://lissakinah.wordpress.com/wp-content/uploads/2024/06/market2-369625520-e1718630195865.jpg');
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */
}
#passages {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
}
.dialogue {
position: fixed;
margin: auto;
background-color: #F4ACB7;
border: 3px solid #E4F1EE;
color: #FEFEFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 25%;
opacity: 0.9;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 10px;
border-radius: 20px;
animation: animateText 2x infinite alternate;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.character-image {
position: fixed;
top: 10;
left: 0;
right: 0;
z-index: -1;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 120px;
}
.character-name {
font-weight: bold;
margin-bottom: 5px;
}
.dialogue .text {
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(30) infinite;
}
@keyframes typing {
from {
width: 0; /* Start with no text */
}
to {
width: 100%; /* Fully display the text */
}
}
.wrapper .text::after {
content: "|";
animation: typing 3s steps(30) infinite;
}
</style>
<!-- Nama pasage: dialog -->
<div class="container">
<div class="character-image">
<img src="https://lissakinah.wordpress.com/wp-content/uploads/2024/06/emely-peluk_001.png" alt="Character" style="width: 461px; height: 667px;">
<div class="dialogue" id="demo">
<div class="character-name">Kiyo</div>
</div>
</div>
<script>
var text = "Meow...meow...meow..."
var i = 0;
var speed = 40;
function typeWriter() {
if (i < text.length) {
document.getElementById("demo").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
setTimeout(function() {
story.show("market3")
}, 8000);
typeWriter();
</script>
</div>
<audio id="audio" controls autoplay>
<source src="https://audio.jukehost.co.uk/QuNOrxxmoEiUUGEjpWCXEGUtTKYjZ1Dg" type="audio/mp3">
</audio>