summaryrefslogtreecommitdiff
path: root/src/www/wc.html
blob: f3c836ee848736848dbbb6541ffa3b53dc660db0 (plain)
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
<!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; }
h2 > input { float: right; }

.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(true)" 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: Thu May 19 11:08: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>