-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (148 loc) · 11.2 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Global-ASP Translator</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="https://yegor256.github.io/tacit/tacit.min.css"/>
<link rel="stylesheet" type="text/css" href="css/translator.css"/>
<link rel="stylesheet" type="text/css" href="css/modal.css" />
<link rel="stylesheet" type="text/css" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>
<script src="js/stories.js" type="text/javascript"></script>
<script src="js/translator.js" type="text/javascript"></script>
<script src="js/completed.js" type="text/javascript"></script>
<script type="text/javascript">
// Check manifest
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
window.location.reload();
} else {
// Manifest didn't change. Nothing new to serve.
}
}, false);
}, false);
</script>
</head>
<body onload="story_api()">
<div id="frametop">
<a href="https://global-asp.github.io/translator/"><h1>Global-ASP Translator</h1></a>
<div id="status_bar">
<a href="#modal-about" class="call-modal" title="Clicking this link shows the modal">About</a>
<span class="dot"> • </span>
<a href="#modal-help" class="call-modal">Help</a>
<span class="dot"> • </span>
<a href="https://github.com/dohliam/gasp-translator" title="Project page on GitHub">
<img src="https://cloud.githubusercontent.com/assets/9295750/10420174/4bff1bc4-7041-11e5-80d5-496a9cdd2672.png">
</a>
<span id="nav_buttons" style="display:none">
<span class="dot"> • </span>
<button id="hide" accesskey="h" title="Hide translated works" onclick="toggle_hide_translated()">
<img src="img/show.png">
</button>
<span class="dot"> • </span>
<button id="prev" accesskey="p" title="Previous story" onclick="translate_story('prev')">
<img src="img/previous.png">
</button>
<span class="dot"> • </span>
<button accesskey="r" title="Random Story" onclick="random_story()">
<img src="img/random.png">
</button>
<span class="dot"> • </span>
<button id="next" accesskey="n" title="Next story" onclick="translate_story(0)">
<img src="img/next.png">
</button>
</span>
</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>Global-ASP Translator - Translation system for the <a href="https://global-asp.github.io/">Global African Storybook Project</a></p>
<p>This is intended to be an easy-to-use and accessible translation system to help automate the process of translating <a href="http://africanstorybook.org/">African Storybook Project</a> stories into other languages for <a href="https://global-asp.github.io/">Global-ASP</a>.</p>
<p>It has deliberately been kept as minimal as possible to allow translators to focus on the work (and joy) of translation with as little distraction as possible.</p>
<p>Stories are presented in order of length, from shortest to longest, to make the barrier to entry as low as possible for anyone who would like to participate in the project and contribute a translation. If you can only translate a few sentences or a few words, you can still help!</p>
<p>All of the ASP and Global-ASP stories are <a href="http://creativecommons.org/">Creative Commons-licensed</a>. By contributing a translation to the project you agree to release your work under a Creative Commons license (either <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY</a> or <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC</a>) in accordance with the license of the original story.</p>
</div>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--show" id="modal-help" tabindex="-1"
role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="modal-label">Help</h2>
</header>
<div class="modal-content">
<p>To begin translating stories, just click on the "Translate!" button at the bottom of the page. This will open up a story from the <a href="http://africanstorybook.org/">African Storybook Project</a> collection, with empty space on the right for you to enter your translation.</p>
<p>Make sure to enter your name and the language you are translating into at the top of the page. Your work will be released under the same <a href="http://creativecommons.org/">Creative Commons</a> license as the original story, and you will be credited for attribution using the name you select here. You can edit either field at any time, for example if you want to change the way you are attributed or translate into a different language.</p>
<p>Within the main translation area of the page, images from each page of the story will appear on the left side accompanied by the original text of that page. On the far right side is a box where you can input your translation. You can hover over the image thumbnails to see larger versions of the pictures.</p>
<p>If you have completed part of a translation but want to move on to another story or close the window, the text you have entered in each box will be saved automatically on your local machine so you can return to it later. Note that it will <strong>NOT</strong> be submitted until you click on the "Review submission" button and then finally scroll down and click on "Submit Translation" to send it to <a href="https://global-asp.github.io">Global-ASP</a> for inclusion in the project.</p>
<p>When you click on the "Review submission" button, a window will appear on screen containing the formatted text of your translation alongside the original story images. If there is anything you would like to add or change you can exit this window by clicking on the close button in the top right corner and make your changes in the translation area before submitting. To go back to the review window, click on the "Continue reviewing" button at the bottom of the page.</p>
<p>Once you are satisfied with your translation in the Review window, click on the "Submit Translation" button to send it for inclusion in <a href="https://global-asp.github.io">Global-ASP</a>. You can optionally include your email address in the box above the submit button if you would like us to be able to contact you about your translation.</p>
<h3>Navigation</h3>
<p>The "Next" and "Previous" arrow buttons located at the top of the page can be used to navigate through the available stories in the collection. All work is saved in local storage, so you can feel free to browse the collection for stories you would like to translate, even if you have already begun working on another translation.</p>
<p>Click on the "Random Story" button to visit a random story from the collection. There are over 300 stories in the collection, all of different lengths, styles, and subject matter, so go ahead and browse around until you see something you would be comfortable translating!</p>
<h3>Linking to stories</h3>
<p>You can link directly to individual stories for translation using the Translator's simple API. Just add <code>?</code> and the story's <a href="https://global-asp.github.io/stories/master.html">index number</a> to the end of the Translator url. For example:</p>
<ul><li><code>https://global-asp.github.io/translator/?0030</code> (this links to the translation template for story #0030)</li></ul>
<p>Try it out by clicking on <a href="https://global-asp.github.io/translator/?0030">this link</a>!</p>
</div>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--show" id="modal-review" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="modal-label">Review</h2>
</header>
<div class="modal-content">
<div id="review_table"> </div>
<div id="rev_msg"> </div><br>
<div id="submit_form" style="display:none">
<form action="https://formspree.io/globalafricanstorybook@gmail.com" method="post">
<input type="hidden" type="final" name="name" id="name_line">
<input type="text" id="email" name="_replyto" placeholder="Your email (optional)" oninput="localStorage['gtr_email']=this.value" />
<input id="thanks" type="hidden" name="_next" value="/translator/thanks.html" />
<input type="hidden" name="_subject" id="subject_line" value="New submission!" />
<input type="hidden" name="story_number" id="story_number" value="" />
<input type="hidden" name="story_language" id="story_language" value="" />
<input type="hidden" name="md_title" id="md_title" value="" />
<input type="hidden" name="story_translation" id="story_translation" value="" />
<input type="submit" value="Submit Translation">
</form>
</div>
</div>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">×</a>
</section>
<div id="dynamic_content">
<div id="messages">Welcome to the Global-ASP Translator!<br>To get started, press the Translate! button below.</div>
<div id="translated_msg" style="display:none"> </div>
<div id="translator_div" style="display:none">Translated by: <span class="editable" contenteditable="true" oninput="localStorage['gtr_a']=this.innerHTML" id="translator" placeholder="Your name" tabindex="2"></span></div>
<div id="story_table"> </div>
<div id="translate_button">
<button type="button" accesskey="t" onclick="translate_story('first')">Translate!</button>
</div>
</div>
</div>
<br>
<div id="framebottom">
<div id="idx" style="display:none;">0000</div>
<div id="serial" style="display:none;">0</div>
<div id="number_of_sections" style="display:none;"> </div>
<div id="output" style="display:none">
<textarea id="translation_output" rows="10"></textarea>
</div>
<div id="review_sub" class="tooltip" style="display:none">
<a href="#modal-review" class="call-modal" onclick="review_translation()"><button id="rev_btn" type="button" accesskey="g">Review submission</button></a>
</div>
</div>
<script src="js/modal.js"></script>
</body>
</html>