Files
gf-core/src/www/wc.html
hallgren ed9715dd92 Wide Coverage Translation Demo: you can now reorder the application grammars
When selecting which application grammars to use for translation, after
pressing the "Grammars..." button, it is now possible to change the order
of the selected grammars by dragging them up and down in the list.
2016-05-16 14:14:55 +00:00

138 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html> <head>
<title>Demo: GF Wide Coverage Translation</title>
<link rel="stylesheet" type="text/css" href="gfse/editor.css" title="Cloud">
<link rel="stylesheet" type="text/css" href="translator/overlay.css">
<meta name = "viewport" content = "width = device-width">
<meta charset="UTF-8">
<link rel=top href="../" title="GF">
<style>
div.center { text-align: center; }
table { border-collapse: collapse; table-layout: fixed; width: 100%; }
td { padding: 0 5px; vertical-align: top; }
td.output { background: #fcfcfc; border: 1px solid grey; }
td.input, td.output { font-family: sans-serif; font-size: 90%; }
div#output { white-space: pre-line; }
div.input { margin-right: 5px; }
textarea { font: inherit; }
body:target h1, body:target div.modtime { display: none; }
small { color: #666; }
#pick>* { padding: 0 0.5ex; }
#speak { display: none; }
.colors .default_quality { background-color: #ffb; }
.colors .high_quality { background-color: #bfb; }
.colors .low_quality { background-color: #fa7; }
.colors .bad_quality { background-color: #f89; }
.placeholder { color: #999; }
.error { color: #c00; }
div.e2 table { background: white; }
span.inflect { color: blue; }
.grammar_pick { margin: 5px; }
.node { cursor: pointer; }
/*.overlay { background-color: #eed; }*/
.node rect { fill: #fff; stroke: black; stroke-width: 1.5px; }
.node text { font-size: 10px; font-family: serif; }
.link { fill: none; stroke: #ccc; stroke-width: 1.5px; }
.speech_buttons > * { display: none; }
.speech_buttons > *:nth-child(1) { display: inline; }
.speech_buttons > *:nth-child(2) { display: inline; }
/* .speech_buttons:hover > * { display: inline; } */
</style>
</head>
<body id=embed>
<div>
<h1><a href="http://www.grammaticalframework.org/"><img class=nofloat src="P/gf-cloud.png" alt="GF"></a> Wide Coverage Translation Demo</h1>
</div>
<div class=overlay><div id=grammarbox class=grammarbox></div></div>
<form onsubmit="return wc.translate()" style="width: 100%">
<table>
<tr><td>
<select name=from>
<option value=Bul>Bulgarian</option>
<option value=Cat>Catalan</option>
<option value=Chi>Chinese</option>
<option value=Dut>Dutch</option>
<option value=Eng selected>English</option>
<option value=Est>Estonian</option>
<option value=Fin>Finnish</option>
<option value=Fre>French</option>
<option value=Ger>German</option>
<option value=Hin>Hindi</option>
<option value=Ita>Italian</option>
<option value=Jpn>Japanese</option>
<option value=Spa>Spanish</option>
<option value=Swe>Swedish</option>
<option value=Tha>Thai</option>
</select>
<input type=button value="Clear" onclick="wc.clear()">
<td style="text-align: right">
<input type=button name=swap onclick="wc.swap()" value="⇆">
<td>
<select name=to onchange="wc.translate()">
<option value=Bul>Bulgarian</option>
<option value=Cat>Catalan</option>
<option value=Chi>Chinese</option>
<option value=Dut>Dutch</option>
<option value=Eng>English</option>
<option value=Est>Estonian</option>
<option value=Fin>Finnish</option>
<option value=Fre>French</option>
<option value=Ger>German</option>
<option value=Hin>Hindi</option>
<option value=Ita>Italian</option>
<option value=Jpn>Japanese</option>
<option value=Spa>Spanish</option>
<option value=Swe selected>Swedish</option>
<option value=Tha>Thai</option>
</select>
<input name=colors type=checkbox checked onchange="wc.colors()"> Colors
<td><button name=translate type=submit><strong>Translate</strong></button>
<input type=button name=grammars onclick="wc.select_grammars()" value="Grammars...">
<tr><td class=input colspan=2>
<div class=input>
<textarea name=input rows=5 style="width: 100%" onkeyup="wc.delayed_translate()"></textarea>
</div>
<td class=output colspan=2>
<div id=output></div>
<tr><td colspan=2>
<small id=grammarinfo>Enter text to translate above.</small>
<td colspan=2>
<!--<small id=speak><input name=speak type=checkbox> Enable speech synthesis</small>-->
</table>
</form>
<div class=center>
<input type=button onclick="wc.try_google()" value="Try Google Translate">
<div id=pick></div>
<small id=extra></small>
</div>
<hr>
<div class=modtime><small>
<!-- hhmts start -->Last modified: Mon May 16 16:04:21 CEST 2016 <!-- hhmts end -->
</small></div>
<a href="http://www.grammaticalframework.org/demos/translation.html">About</a>
<script src="js/support.js"></script>
<script src="js/gftranslate.js"></script>
<script src="js/localstorage.js"></script>
<script src="js/langcode.js"></script>
<script src="js/pgf_online.js"></script>
<script src="minibar/minibar_support.js">/* speech functions */</script>
<script src="gfse/sort.js"></script>
<script src="js/wc.js"></script>
<script>
wc.initialize()
</script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/d3Tree.js"></script>
</body>
</html>