Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history 
html
  • Loading branch information
@aayushikumari18
aayushikumari18 authored Dec 28, 2023
1 parent 90f8d5b commit 1875edf
Showing 1 changed file with 113 additions and 120 deletions.
233 changes: 113 additions & 120 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,145 +3,138 @@
<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 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">
<style>
body {
font-family: 'Oswald', sans-serif;
background-color: #f8f9fa;
color: #333;
margin: 0;
padding: 0;
}
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-weight: bold;
font-size: 2em;
text-align: center;
margin-top: 20px;
color: #a76cfd;
}

h1 {
font-weight: bold;
font-size: 2.5em;
text-align: center;
margin-top: 20px;
color: #6c757d;
}
.form-group {
margin-bottom: 20px;
}

div {
margin-bottom: 20px;
text-align: center;
}
.form-control {
border: 2px solid #a76cfd;
border-radius: 8px;
padding: 12px;
width: 100%;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
color: #333;
background-color: #fff;
transition: border-color 0.3s ease;
}

.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: #a76cfd;
outline: none;
}

.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: 'Arial', sans-serif;
cursor: pointer;
transition: background-color 0.3s ease;
background-color: #a76cfd;
color: #fff;
}

.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: #8e63c1;
}

.btn:hover,
.btn-success:hover {
background-color: #495057;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}

th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #a76cfd;
color: #fff;
}

th {
background-color: #6c757d;
color: #fff;
}
</style>
<title>Translator</title>
</head>
<body>
<div class="container">
<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>
<textarea name="text" cols="30" rows="5" class="form-control" placeholder="Enter some text"></textarea>
</div>
<div>
<label for="language">Language:</label>
<select name="language" class="form-control">
<option value="en">English</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ru">Russian</option>
<option value="de">German</option>
<option value="hi">Hindi</option>
</select>
<div class="container mt-4">
<div class="jumbotron">
<h1>MY-Translator-Hub</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">
<div class="col-md-6">
<form method="POST">
<div class="form-group">
<textarea name="text" cols="30" rows="5" class="form-control" placeholder="Enter some text"></textarea>
</div>
<div class="form-group">
<label for="language">Translate to:</label>
<select name="language" class="form-control">
<option value="en">English</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ru">Russian</option>
<option value="de">German</option>
<option value="hi">Hindi</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">Translate!</button>
</div>
</form>
</div>
<div>
<button type="submit" class="btn btn-success">Translate!</button>

<div class="col-md-6">
<h2 class="text-center">Recent Searches</h2>
<table class="table table-bordered table-hover">
<thead>
<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 %}
</tbody>
</table>
</div>
</form>
</div>
<div>
<h2>Recent Search</h2>
<table>
<thead>
<tr>
<th scope="col">Translated Text</th>
<th scope="col">Original Text</th>
<th scope="col">Language Code</th>
</tr>
</thead>
<tbody>
<!-- 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>
</div>
</div>
</body>
Expand Down

0 comments on commit 1875edf

Please sign in to comment.