blob: 3fd8bafc5e66f91f32453693408c75d539931498 (
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
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
<% global.title = lang.metranslator.title; %>
<%- include(`${private}/header.ejs`) %>
<a href="/<%- slang %>">← <%- lang.global.back %></a>
<hr class="rnbwsquare-separator rnbwsquare-outer">
<div class="container" style="min-height: 100vh;margin-left: 5vw;margin-right: 5vw;">
<style>
mark {
background: transparent;
color: #ff6161;
padding: 0;
font-weight: bold;
}
</style>
<h2 style="text-align:center;"><%- lang.metranslator.title %></h2>
<p style="text-align:center;">💡 <i><%- lang.metranslator.tip %></i></p>
<div style="display:grid;grid-template-columns: 1fr 1fr;background:#111;padding-top:10px;border-radius:5px;">
<div>
<a style="cursor:pointer;color: white !important; text-decoration: none;" onclick="switchLangs();"><p
id="lang-source"
style="text-align:center;font-weight:bold;">
<%- lang.metranslator.base %></p></a>
<textarea maxlength="500" placeholder="<%- lang.metranslator.placeholder %>" onresize="resizeTarget();"
onchange="process();"
onkeydown="process();" onkeyup="process();"
id="text-source"
style="padding:20px;outline:none;overflow:hidden;resize:none;background: #222;border: none;width: 100%;margin-bottom: -3px;color: #eee;border-right:1px solid #151515;"></textarea>
<script>document.getElementById('text-source').value = "";</script>
</div>
<div>
<a style="cursor:pointer;color: white !important; text-decoration: none;" onclick="switchLangs();"><p
id="lang-target"
style="text-align:center;font-weight:bold;">
Metroz</p></a>
<div id="text-target" disabled
style="padding:20px;outline:none;overflow:hidden;resize: none;background: #222;border: none;width: 100%;margin-bottom: -3px;color: #eee;"></div>
<script>document.getElementById('text-target').innerText = "";</script>
</div>
</div>
<div id="facts"
style="background:#424242;padding: 3px 10px;width:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;">
<span id="facts-inner"><%- lang.metranslator.facts %></span>
</div>
<details style="margin-top:20px;">
<summary><%- lang.metranslator.insights.title %></summary>
<ul>
<li><%- lang.metranslator.insights.name %> <span id="insights-01">n/a</span></li>
<li><%- lang.metranslator.insights.version %> <span id="insights-02">n/a</span></li>
<li><%- lang.metranslator.insights.size %> <span id="insights-03">n/a</span></li>
<li><%- lang.metranslator.insights.time %> <span id="insights-04">n/a</span></li>
</ul>
</details>
</div>
<script>
function switchLangs() {
if (document.getElementById("text-target").innerHTML === "...") return;
tval = document.getElementById("text-target").innerText;
sval = document.getElementById("text-source").value;
document.getElementById("text-target").innerText = "...";
document.getElementById("text-source").value = tval;
if (document.getElementById("lang-target").innerText === "English") {
document.getElementById("lang-target").innerText = "Metroz";
document.getElementById("lang-source").innerText = "<%- lang.metranslator.base %>";
} else {
document.getElementById("lang-source").innerText = "Metroz";
document.getElementById("lang-target").innerText = "<%- lang.metranslator.base %>";
}
translate();
}
typing = false;
function startTyping() {
typing = true;
document.getElementById("facts-inner").innerText = "<%- lang.metranslator.waiting %>";
document.getElementById("text-target").innerText = "...";
}
function stopTyping() {
typing = false;
translate();
}
setInterval(() => {
if (typing) stopTyping();
}, 2000)
function translate() {
if (document.getElementById("text-source").value.trim() === "") {
document.getElementById("facts-inner").innerText = "<%- lang.metranslator.facts %>";
document.getElementById("text-target").innerText = "";
return;
}
document.getElementById("facts-inner").innerText = "<%- lang.metranslator.processing %>";
document.getElementById("text-target").innerText = "...";
if (document.getElementById("lang-target").innerText === "<%- lang.metranslator.base %>") {
target = "en";
} else {
target = "mt";
}
document.getElementById("insights-01").innerText = "n/a";
document.getElementById("insights-02").innerText = "n/a";
document.getElementById("insights-03").innerText = "n/a";
document.getElementById("insights-04").innerText = "n/a";
window.fetch("/<%- slang %>/metranslator/api?t=" + target + "&u=" + encodeURI(document.getElementById("text-source").value)).then((a) => {
a.blob().then((b) => {
b.text().then((c) => {
try {
data = JSON.parse(c);
words = data.output.split(" ");
newds = [];
initw = document.getElementById("text-source").value.toLowerCase().split(" ");
for (word of words) {
if (initw.includes(word)) {
newds.push("<mark>" + word + "</mark>");
nothing = "<%- lang.metranslator.nothing %>";
data.facts.push(nothing.replace("%1", word).replace("%2", document.getElementById("lang-target").innerText))
} else {
newds.push(word);
}
}
if (data.facts.length > 0) {
document.getElementById("facts-inner").innerHTML = "<ul style='margin-bottom: 0;margin-top: 0;'><li>" + data.facts.join("</li><li>") + "</li></ul>";
} else {
document.getElementById("facts-inner").innerText = "<%- lang.metranslator.facts %>";
}
document.getElementById("text-target").innerHTML = newds.join(" ");
} catch (e) {
console.error(e);
document.getElementById("text-target").innerHTML = "<%- lang.metranslator.error %>";
document.getElementById("facts-inner").innerText = "<%- lang.metranslator.facts %>";
document.getElementById("insights-01").innerText = "n/a";
document.getElementById("insights-02").innerText = "n/a";
document.getElementById("insights-03").innerText = "n/a";
document.getElementById("insights-04").innerText = "n/a";
}
if (data.system.version.startsWith("-")) {
document.getElementById("insights-01").innerText = "n/a";
document.getElementById("insights-02").innerText = "n/a";
document.getElementById("insights-03").innerText = "n/a";
document.getElementById("insights-04").innerText = "n/a";
} else {
document.getElementById("insights-01").innerText = data.system.name;
document.getElementById("insights-02").innerText = data.system.version + " (<%- lang.metranslator.update %> " + data.system.last_author + ")";
document.getElementById("insights-03").innerText = data.system.length + " <%- lang.metranslator.entries %>";
document.getElementById("insights-04").innerText = data.duration + " ms";
}
resizeTarget()
if (data.system.version.startsWith("-")) {
document.getElementById("insights-01").innerText = "n/a";
document.getElementById("insights-02").innerText = "n/a";
document.getElementById("insights-03").innerText = "n/a";
document.getElementById("insights-04").innerText = "n/a";
}
})
})
})
}
function process() {
resizeTarget()
startTyping()
}
function resizeTarget() {
size = 167;
document.getElementById("text-source").style.height = size + "px";
document.getElementById("text-target").style.height = size + "px";
}
resizeTarget()
</script>
<%- include(`${private}/footer.ejs`) %>
|
