Update index.html

pmahajan1121 · Jan 2, 2024 · b363281 · b363281
1 parent 008b5d2
commit b363281
Showing 1 changed file with 66 additions and 21 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -1,93 +1,138 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Translator</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f5f5f5;
-    color: #333;
-    margin: 0;
+    font-family: 'Josefin Sans', sans-serif;
+    background-color: #212121;
+    color: #ddd;
+    margin: 0;  
     padding: 0;
 }
 
 h1 {
     font-weight: bold;
-    font-size: 2em;
     text-align: center;
     margin-top: 20px;
-    color: #a76cfd;
+    color: #1d74ad;
+}
+
+p {
+    text-align: center;
+}
+
+.row {
+    flex-direction: row-reverse;
+    align-items: center;
+    padding: 2.5rem;
+    background: #000;
+    box-shadow: 0px 0px 20px 0px black;
 }
 
 .form-group {
     margin-bottom: 20px;
 }
 
 .form-control {
-    border: 2px solid #a76cfd;
-    border-radius: 8px;
+    border: 2px solid #1d74ad;
+    border-radius: 0px;
     padding: 12px;
     width: 100%;
     box-sizing: border-box;
-    font-family: 'Arial', sans-serif;
+    font-family: 'Josefin Sans', sans-serif;
     color: #333;
-    background-color: #fff;
+    background-color: #212121;
     transition: border-color 0.3s ease;
 }
 
+.form-control:active, .form-control:focus, .form-control::placeholder {
+    background-color: #212121 !important;
+    color: #ddd;
+}
+
 .form-control:focus {
-    border-color: #a76cfd;
+    border-color: #181818;
     outline: none;
 }
 
 .btn,
 .btn-success {
     border: none;
-    border-radius: 8px;
+    border-radius: 0px;
     font-weight: bold;
     width: 100%;
     margin: 10px 0;
     padding: 12px;
     font-family: 'Arial', sans-serif;
     cursor: pointer;
-    transition: background-color 0.3s ease;
-    background-color: #a76cfd;
+    transition: all 0.3s ease;
+    background-color: #1d74ad;
+    box-shadow: 0px 0px 20px 0px black;
     color: #fff;
 }
 
 .btn:hover,
 .btn-success:hover {
-    background-color: #8e63c1;
+    background-color: #093755;
+    box-shadow: none;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 30px;
+    background-color: #212121;
+    height: 400px !important;
+    display: block;
+    overflow-y: scroll;
+}
+
+thead {
+    position: sticky;
+    top: 0;
+    box-shadow: 0px 0px 20px 0px black;
+}
+
+
+tbody {
+    height: 250px !important;
+    width: 100%;
+    overflow-y: scroll !important;
 }
 
-th,
+
 td {
-    border: 1px solid #ccc;
+    border: 1px solid #212121;
     padding: 10px;
     text-align: left;
+    background-color: #212121 !important;
+    color: #ddd !important;
 }
 
 th {
-    background-color: #a76cfd;
+    background-color: #1d74ad !important;
     color: #fff;
 }
 
+tr {
+    border-style: none;
+}
+
     </style>
 </head>
 <body>
     <div class="container mt-4">
         <div class="jumbotron">
-            <h1>MY-Translator-Hub</h1>
+            <h1>TranslateExpress</h1>
             <p>"MY-Translator-Hub" could potentially represent a personalized translation platform offering diverse language services, facilitating seamless communication across various cultures and languages</p>
 
             <div class="row">
@@ -119,7 +164,7 @@ <h2 class="text-center">Recent Searches</h2>
                         <thead>
                             <tr>
                                 <th scope="col">Translated Text</th>
-                                <th scope="col">Original Text</th>
+                                <th scope="col" style="width: 50%;">Original Text</th>
                                 <th scope="col">Language Code</th>
                             </tr>
                         </thead>