|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Prakrit to English Translation</title> |
|
<link rel="stylesheet" href="/static/styles.css"> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<header> |
|
<h1>प्राट्रान/praTran</h1> |
|
</header> |
|
<main> |
|
<form action="/translate" method="POST" id="translation-form"> |
|
<div class="form-group"> |
|
<label for="prakrit_text">Enter Maharashtri Prakrit Sentence:</label> |
|
<textarea name="prakrit_text" id="prakrit_text" rows="4" required></textarea> |
|
</div> |
|
<button type="submit" class="translate-btn" id="translate-btn"> |
|
<span id="btn-text">Translate</span> |
|
<span id="loading-spinner" class="spinner hidden"></span> |
|
</button> |
|
</form> |
|
|
|
{% if original_text %} |
|
<section class="translation-result"> |
|
<h2>Prakrit Text:</h2> |
|
<p>{{ original_text }}</p> |
|
|
|
<h2>Translated English Text:</h2> |
|
<p>{{ translated_text }}</p> |
|
|
|
<h3>Translation Time: {{ time_taken }} seconds</h3> |
|
</section> |
|
{% endif %} |
|
</main> |
|
</div> |
|
|
|
<script> |
|
|
|
document.getElementById('translation-form').addEventListener('submit', function() { |
|
|
|
document.getElementById('loading-spinner').classList.remove('hidden'); |
|
|
|
document.getElementById('btn-text').textContent = 'Translating...'; |
|
|
|
document.getElementById('translate-btn').setAttribute('disabled', 'true'); |
|
}); |
|
|
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
|
|
