Spaces:

ginigen
/

Sign-language

Building

App Files Files Community

openfree commited on Jan 26

Commit

a6c4533

verified ·

1 Parent(s): 142394e

Update src/templates/index.html

Browse files

Files changed (1) hide show

src/templates/index.html +51 -59

src/templates/index.html CHANGED Viewed

@@ -3,71 +3,63 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Display</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            text-align: center;
-            margin: 0;
-            padding: 0;
-            background-color: #f8f9fa;
         }
-        .container {
-            margin: 50px auto;
-            width: 80%;
-        }
-        .header {
-            background-color: #e9ecef;
-            padding: 20px;
-            border-radius: 5px;
-            margin-bottom: 20px;
-        }
-        .header h1 {
-            font-size: 24px;
-            margin: 0;
-        }
-        .video-container {
-            display: flex;
-            justify-content: center;
-            margin-bottom: 20px;
-        }
-        video {
-            width: 640px;
-            height: 480px;
-            border: 2px solid #dee2e6;
-            border-radius: 5px;
-        }
-        .footer {
-            font-size: 14px;
-            color: #6c757d;
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <div class="header clearfix">
-            <h3 class="text-muted">American Sign Langage Translation- Flask Demo</h3>
-          </div>
-          <div class="jumbotron">
-            <h1>Text to Sign Langage translator</h1>
-          </div>
-          <form action="{{ url_for('result') }}" method="post">
-              <div class="form-group row">
-                <label for="inputSentence" class="col-sm-3 col-form-label">Put your text to translate here</label>
-                <div class="col-sm-8">
-                    <input type="text" class="form-control" id="inputSentence" name="inputSentence" placeholder="text to translate">
-                </div>
-              </div>
-              <div class="form-group row">
-                <div class="col-sm-5">
-                  <button type="submit" class="btn btn-primary">Translate</button>
                 </div>
-              </div>
             </form>
-            <div class="footer">
-                © Sign Language Project
             </div>
-    </div>
 </body>
-</html>

 <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);
         }
     </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>
+</html>