You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
2.0 KiB
47 lines
2.0 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="lib/style.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Overpass">
|
|
<script src="lib/book.js"></script>
|
|
<title>Storybook</title>
|
|
</head>
|
|
<body>
|
|
<div id="book">
|
|
<h2 id="title">{book.title}</h2>
|
|
<div id="page">
|
|
<img src="images/noimage.png" id="pageImage">
|
|
<div id="pageText">
|
|
{page.text}
|
|
</div>
|
|
</div>
|
|
<div id="buttons">
|
|
{page.buttons}
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
// array of pages
|
|
pages = [];
|
|
|
|
// page 1
|
|
buttons = [];
|
|
buttons.push(new Button(1, "Visit Lonely Mountain"));
|
|
|
|
pages.push(new Page("images/theshire.jpg", "The Shire is a region of J. R. R. Tolkien's fictional Middle-earth, described in The Lord of the Rings and other works. The Shire is an inland area settled exclusively by hobbits, the Shire-folk, largely sheltered from the goings-on in the rest of Middle-earth. It is in the northwest of the continent, in the region of Eriador and the Kingdom of Arnor.", buttons));
|
|
|
|
// page 2
|
|
buttons = [];
|
|
buttons.push(new Button(0, "Visit The Shine"));
|
|
|
|
pages.push(new Page("images/lonelymountain.jpg", "Erebor stood hundreds of miles from the nearest mountain range. Tolkien's rendering of Thrór's map in The Hobbit shows it with six ridges stretching out from a central peak that was snowcapped well into spring. The whole mountain was perhaps ten miles in diameter; it contained an immense wealth of gold and jewels.", buttons));
|
|
|
|
|
|
book = new Book("The Hobbit Locations", pages);
|
|
|
|
book.displayPage(0);
|
|
</script>
|
|
</body>
|
|
</html> |