Spaces:
Building
Building
Update src/templates/index.html
Browse files- src/templates/index.html +24 -50
src/templates/index.html
CHANGED
|
@@ -9,66 +9,40 @@
|
|
| 9 |
.gradient-background {
|
| 10 |
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
|
| 11 |
}
|
| 12 |
-
.translation-box {
|
| 13 |
-
backdrop-filter: blur(10px);
|
| 14 |
-
background-color: rgba(255, 255, 255, 0.9);
|
| 15 |
-
}
|
| 16 |
-
.ko-text {
|
| 17 |
-
font-size: 0.7em;
|
| 18 |
-
color: #666;
|
| 19 |
-
}
|
| 20 |
</style>
|
| 21 |
</head>
|
| 22 |
<body class="gradient-background min-h-screen">
|
| 23 |
-
<
|
| 24 |
-
<
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
<main class="container mx-auto px-6 py-8">
|
| 33 |
-
<div class="translation-box rounded-xl shadow-2xl p-8 max-w-2xl mx-auto">
|
| 34 |
-
<h2 class="text-2xl font-bold mb-6 text-gray-800">
|
| 35 |
-
Convert Text to Sign Language
|
| 36 |
-
<span class="ko-text block">텍스트를 수화로 변환</span>
|
| 37 |
-
</h2>
|
| 38 |
-
|
| 39 |
-
<form action="/translate/" method="post" class="space-y-6">
|
| 40 |
-
<div>
|
| 41 |
-
<label class="block text-gray-700 font-medium mb-2">
|
| 42 |
-
Enter Text
|
| 43 |
-
<span class="ko-text ml-2">텍스트 입력</span>
|
| 44 |
</label>
|
| 45 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 46 |
name="inputSentence"
|
| 47 |
-
class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent"
|
| 48 |
rows="4"
|
| 49 |
-
|
| 50 |
required
|
| 51 |
></textarea>
|
| 52 |
</div>
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
</
|
| 59 |
</form>
|
| 60 |
-
|
| 61 |
-
<div class="mt-8 text-gray-600">
|
| 62 |
-
<p>Our service converts text into American Sign Language (ASL) videos for effective communication with the deaf and hard of hearing community.</p>
|
| 63 |
-
<p class="ko-text mt-2">영어나 한글을 미국 수화(ASL) 영상으로 변환하여 청각장애인과의 의사소통을 돕습니다.</p>
|
| 64 |
-
</div>
|
| 65 |
-
</div>
|
| 66 |
-
</main>
|
| 67 |
-
|
| 68 |
-
<footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-md py-4">
|
| 69 |
-
<div class="container mx-auto px-6 text-center text-gray-600">
|
| 70 |
-
© 2025 American Sign Language Translator
|
| 71 |
</div>
|
| 72 |
-
</
|
| 73 |
</body>
|
| 74 |
</html>
|
|
|
|
| 9 |
.gradient-background {
|
| 10 |
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
|
| 11 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 12 |
</style>
|
| 13 |
</head>
|
| 14 |
<body class="gradient-background min-h-screen">
|
| 15 |
+
<div class="container mx-auto px-4 py-8">
|
| 16 |
+
<h1 class="text-4xl font-bold text-center mb-8">{{ title }}</h1>
|
| 17 |
+
|
| 18 |
+
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8">
|
| 19 |
+
<form action="{{ url_for('result') }}" method="post">
|
| 20 |
+
<div class="mb-6">
|
| 21 |
+
<label for="inputSentence" class="block text-gray-700 text-sm font-bold mb-2">
|
| 22 |
+
Enter text to translate / 번역할 텍스트를 입력하세요
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
</label>
|
| 24 |
+
<div class="mb-4">
|
| 25 |
+
<p class="text-sm text-gray-600">
|
| 26 |
+
고유명사는 작은따옴표(' ')로 묶어주세요. <br>
|
| 27 |
+
예시: '한국'은 아름다운 나라입니다. / 'Korea' is a beautiful country.
|
| 28 |
+
</p>
|
| 29 |
+
</div>
|
| 30 |
+
<textarea
|
| 31 |
+
id="inputSentence"
|
| 32 |
name="inputSentence"
|
|
|
|
| 33 |
rows="4"
|
| 34 |
+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
| 35 |
required
|
| 36 |
></textarea>
|
| 37 |
</div>
|
| 38 |
+
<div class="flex justify-center">
|
| 39 |
+
<button type="submit"
|
| 40 |
+
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
| 41 |
+
Translate / 번역하기
|
| 42 |
+
</button>
|
| 43 |
+
</div>
|
| 44 |
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 45 |
</div>
|
| 46 |
+
</div>
|
| 47 |
</body>
|
| 48 |
</html>
|