-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0d266b3
commit b70b333
Showing
1 changed file
with
106 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,42 +5,103 @@ | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> | ||
| <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=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> | ||
| <style> | ||
| body { | ||
| font-family: 'Oswald', sans-serif; | ||
| } | ||
| body { | ||
| font-family: 'Oswald', sans-serif; | ||
| background-color: #f8f9fa; | ||
| color: #333; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .form-group { | ||
| padding: 0.5rem 0rem; | ||
| } | ||
| .container { | ||
| max-width: 600px; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .form-control { | ||
| border: 2px solid #ddd; | ||
| border-radius: 0rem; | ||
| } | ||
| h1 { | ||
| font-weight: bold; | ||
| font-size: 2.5em; | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| color: #6c757d; | ||
| } | ||
|
|
||
| .btn, .btn-success { | ||
| border-radius: 0rem; | ||
| font-weight: bold; | ||
| width: 100%; | ||
| margin: 0.5rem 0rem; | ||
| font-family: 'Oswald', sans-serif; | ||
| } | ||
| div { | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .form-control { | ||
| border: 2px solid #6c757d; | ||
| border-radius: 8px; | ||
| padding: 12px; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| font-family: 'Oswald', sans-serif; | ||
| color: #333; | ||
| background-color: #fff; | ||
| transition: border-color 0.3s ease; | ||
| } | ||
|
|
||
| .form-control:focus { | ||
| border-color: #6c757d; | ||
| outline: none; | ||
| } | ||
|
|
||
| .btn, | ||
| .btn-success { | ||
| border: none; | ||
| border-radius: 8px; | ||
| font-weight: bold; | ||
| width: 100%; | ||
| margin: 10px 0; | ||
| padding: 12px; | ||
| font-family: 'Oswald', sans-serif; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| background-color: #6c757d; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .btn:hover, | ||
| .btn-success:hover { | ||
| background-color: #495057; | ||
| } | ||
|
|
||
| table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
| margin-top: 30px; | ||
| } | ||
|
|
||
| th, | ||
| td { | ||
| border: 1px solid #ccc; | ||
| padding: 10px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| th { | ||
| background-color: #6c757d; | ||
| color: #fff; | ||
| } | ||
| </style> | ||
| <title>Translator</title> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Vox</h1> | ||
| <div>A short and powerful name that means voice in Latin. It conveys the message of giving voice to different languages and cultures</div> | ||
| <h1>Smart-Speak</h1> | ||
| <div>"Smart-Speak: Seamlessly bridging language barriers, Smart-Speak empowers fluent communication across diverse cultures. Harnessing cutting-edge technology, it ensures precision in translating, connecting global voices effortlessly."</div> | ||
| <div> | ||
| <form method="POST"> | ||
| <div class="form-group"> | ||
| <textarea name="text" cols="20" rows="10" class="form-control" placeholder="Enter some text"></textarea> | ||
| <div> | ||
| <textarea name="text" cols="30" rows="5" class="form-control" placeholder="Enter some text"></textarea> | ||
| </div> | ||
| <div class="form-group"> | ||
| <div> | ||
| <label for="language">Language:</label> | ||
| <select name="language" class="form-control"> | ||
| <option value="en">English</option> | ||
|
|
@@ -58,26 +119,30 @@ <h1>Vox</h1> | |
| </div> | ||
| <div> | ||
| <h2>Recent Search</h2> | ||
| <table class="table"> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Translated Text</th> | ||
| <th scope="col">Original Text</th> | ||
| <th scope="col">Language Code</th> | ||
| </tr> | ||
| <tr> | ||
| <th scope="col">Translated Text</th> | ||
| <th scope="col">Original Text</th> | ||
| <th scope="col">Language Code</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {% for x in myresult %} | ||
| <tr> | ||
| <td>{{ x[0] }}</td> | ||
| <td>{{ x[1] }}</td> | ||
| <td>{{ x[2] }}</td> | ||
| </tr> | ||
| {% endfor %} | ||
| <!-- Replace this section with dynamic data from your backend --> | ||
| <tr> | ||
| <td>Translated text 1</td> | ||
| <td>Original text 1</td> | ||
| <td>Language code 1</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Translated text 2</td> | ||
| <td>Original text 2</td> | ||
| <td>Language code 2</td> | ||
| </tr> | ||
| <!-- End of dynamic data section --> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| </div> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
| </html> | ||