Spaces:
Building
Building
File size: 3,213 Bytes
c9f9492 a6c4533 c9f9492 a6c4533 c9f9492 a6c4533 c9f9492 a155343 c9f9492 a6c4533 a155343 a6c4533 a155343 a6c4533 a155343 a6c4533 a155343 a6c4533 c9f9492 a6c4533 a155343 a6c4533 c9f9492 a6c4533 a155343 a602f57 a6c4533 4c937d3 a6c4533 c9f9492 a6c4533 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<style>
.gradient-background {
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.translation-box {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.9);
}
.ko-text {
font-size: 0.7em;
color: #666;
}
</style>
</head>
<body class="gradient-background min-h-screen">
<nav class="bg-white/80 backdrop-blur-md shadow-lg">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="text-3xl font-bold text-gray-800">American Sign Language Translator</div>
<div class="text-sm text-gray-600">Text to Sign Language Video Generator</div>
</div>
</div>
</nav>
<main class="container mx-auto px-6 py-8">
<div class="translation-box rounded-xl shadow-2xl p-8 max-w-2xl mx-auto">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
Convert Text to Sign Language
<span class="ko-text block">텍스트를 수화로 변환</span>
</h2>
<form action="/translate/" method="post" class="space-y-6">
<div>
<label class="block text-gray-700 font-medium mb-2">
Enter Text
<span class="ko-text ml-2">텍스트 입력</span>
</label>
<textarea
name="inputSentence"
class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent"
rows="4"
placeholder="Type your message in English or Korean"
required
></textarea>
</div>
<button type="submit"
class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transform hover:scale-105 transition duration-200 font-medium">
Generate Sign Language Video
<span class="ko-text block">수화 영상 생성</span>
</button>
</form>
<div class="mt-8 text-gray-600">
<p>Our service converts text into American Sign Language (ASL) videos for effective communication with the deaf and hard of hearing community.</p>
<p class="ko-text mt-2">영어나 한글을 미국 수화(ASL) 영상으로 변환하여 청각장애인과의 의사소통을 돕습니다.</p>
</div>
</div>
</main>
<footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-md py-4">
<div class="container mx-auto px-6 text-center text-gray-600">
© 2025 American Sign Language Translator
</div>
</footer>
</body>
</html> |