|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>English to Ukrainian Translator</title> |
|
<style> |
|
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; } |
|
textarea { width: 80%; height: 100px; margin: 10px; } |
|
button { padding: 10px 20px; background: blue; color: white; border: none; cursor: pointer; } |
|
#result { margin-top: 20px; font-size: 18px; font-weight: bold; } |
|
</style> |
|
</head> |
|
<body> |
|
<h1>English to Ukrainian Translator</h1> |
|
<textarea id="inputText" placeholder="Enter English text..."></textarea> |
|
<br> |
|
<button onclick="translateText()">Translate</button> |
|
<div id="result"></div> |
|
|
|
<script> |
|
function translateText() { |
|
let text = document.getElementById("inputText").value; |
|
if (!text) return; |
|
|
|
fetch("/translate", { |
|
method: "POST", |
|
headers: { "Content-Type": "application/json" }, |
|
body: JSON.stringify({ text: text }) |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
document.getElementById("result").innerText = "Translation: " + data.translation; |
|
}) |
|
.catch(error => console.error("Error:", error)); |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
