Spaces:

ginigen
/

Sign-language

Building

App Files Files Community

openfree commited on 29 days ago

Commit

a155343

verified ·

1 Parent(s): 3e5f425

Update src/templates/index.html

Browse files

Files changed (1) hide show

src/templates/index.html +19 -10

src/templates/index.html CHANGED Viewed

@@ -13,52 +13,61 @@
             backdrop-filter: blur(10px);
             background-color: rgba(255, 255, 255, 0.9);
         }
     </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">{{ title }}</div>
-                <div class="text-sm text-gray-600">Korean ⟶ English ⟶ Sign Language</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">Start Translation</h2>
             <form action="/translate/" method="post" class="space-y-6">
                 <div>
                     <label class="block text-gray-700 font-medium mb-2">
-                        Enter Korean Text / 한글 입력
                     </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 here... / 여기에 메시지를 입력하세요..."
                         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">
-                    Translate / 번역하기
                 </button>
             </form>
-            <div class="mt-8 text-center text-gray-600">
-                <p>Our service translates Korean text to English and converts it to sign language.</p>
-                <p class="mt-2">한글을 영어로 번역한 후 수화로 변환해주는 서비스입니다.</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">
-            &copy; 2025 {{ title }}. All rights reserved.
         </div>
     </footer>
 </body>

             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">
+            &copy; 2025 American Sign Language Translator
         </div>
     </footer>
 </body>