-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (97 loc) · 4.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Storybook Jukebox</title>
<meta content="">
<link rel="stylesheet" type="text/css" href="https://yegor256.github.io/tacit/tacit.min.css"/>
<link rel="stylesheet" type="text/css" href="css/modal.css" />
<style type="text/css">
body {
height: 100vh;
padding-top: 0;
padding-bottom: 0;
}
h1 {
font-size: 2vh;
margin: 0;
}
h1 img {
max-width: 3vh;
}
h1 button {
margin: 0;
}
h2 {
font-size: 3.5vh;
padding-bottom: 1vh;
margin: 0;
}
#player_container {
height: 85vh;
}
#image_div img {
height: 60vh;
padding-top: 5vh;
margin: 0;
}
#control_buttons img {
width: 5vh;
margin: 0;
}
#control_buttons button {
margin: 0;
}
#story_text {
font-size: 3.5vmin;
}
.grey {
color: #C2BBB8;
}
</style>
<script src="js/player.js" type="text/javascript"></script>
<script src="js/json-no.js" type="text/javascript"></script>
<script type="text/javascript">
fileadded = "";
load_page();
</script>
</head>
<body onload="window.json = 'stories_' + lang; load_player(0, 0)">
<h1 class="grey">Storybook Jukebox <a onclick="show_attribution()" href="#modal-about" class="call-modal" title="Clicking this link shows the modal"><button accesskey="?"><img src="img/help.svg" title="Show help"></button></a></h1>
<div id="player_container">
<div id="title_div"> </div>
<div id="media_controls"> </div>
<div id="audio_item"> </div>
<div id="image_div"> </div>
<div id="story_text"> </div>
<div id="playlist"> </div>
</div>
<section class="modal--show" id="modal-about" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="modal-label">About</h2>
</header>
<div class="modal-content">
<p><div id="attribution"><script type="text/javascript">show_attribution()</script></div>
<h2>Storybook Jukebox - A media player for multilingual storybooks</h2>
<p>The Storybook Jukebox plays text, images, and audio of translated stories from the Global ASP collection. The stories play automatically, reading through each page in sequence. This is a counterpart to the existing audio slideshows, which are user-controlled and play one page at a time. Unlike the audio slideshows, the Storybook Jukebox requires no user interaction.</p>
<p>Story audio plays automatically. Click anywhere on the text to <b>toggle translation</b>. There are also shortcut keys to allow control of playback using the keyboard.</p>
<p><a href="https://github.com/dohliam/storybook-jukebox">See project page on GitHub</a>.</p>
<h3>Shortcuts</h3>
<ul>
<li>Play/Pause: Shortcut modifier key + <b>p</b></li>
<li>Stop: Shortcut modifier key + <b>x</b></li>
<li>Previous chapter: Shortcut modifier key + <b>h</b></li>
<li>Previous story: Shortcut modifier key + <b>j</b></li>
<li>Next chapter: Shortcut modifier key + <b>k</b></li>
<li>Next story: Shortcut modifier key + <b>l</b></li>
<li>Show help: Shortcut modifier key + <b>?</b></li>
</ul>
<h3>License</h3>
<p>All of the ASP and Global-ASP stories are <a href="http://creativecommons.org/">Creative Commons-licensed</a>. You can find the open-licensed text of the stories in various languages <a href="https://github.com/global-asp/global-asp">here</a>, and audio files <a href="https://github.com/global-asp/gasp-audio">here</a>.</p>
</div>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">×</a>
</section>
</body>
</html>