Spaces:
Building
Building
| <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> |