67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Voice to Voice & Text Translator</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<h1>Voice to Voice & Text Translator</h1>
|
|
<p>Speak, translate, and hear the answer in another language.</p>
|
|
|
|
<div class="controls">
|
|
<label>
|
|
From
|
|
<select id="sourceLang">
|
|
<option value="en">English</option>
|
|
<option value="es">Spanish</option>
|
|
<option value="fr">French</option>
|
|
<option value="de">German</option>
|
|
<option value="hi">Hindi</option>
|
|
<option value="ta">Tamil</option>
|
|
<option value="te">Telugu</option>
|
|
<option value="ml">Malayalam</option>
|
|
<option value="pa">Punjabi</option>
|
|
<option value="kn">Kannada</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
To
|
|
<select id="targetLang">
|
|
<option value="es">Spanish</option>
|
|
<option value="en">English</option>
|
|
<option value="fr">French</option>
|
|
<option value="de">German</option>
|
|
<option value="hi">Hindi</option>
|
|
<option value="ta">Tamil</option>
|
|
<option value="te">Telugu</option>
|
|
<option value="ml">Malayalam</option>
|
|
<option value="pa">Punjabi</option>
|
|
<option value="kn">Kannada</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<textarea id="sourceText" placeholder="Type text or click voice to speak..."></textarea>
|
|
<div class="buttons">
|
|
<button id="voiceBtn">🎤 Voice Input</button>
|
|
<button id="speakBtn">🔊 Speak</button>
|
|
<button id="clearBtn">🧹 Clear</button>
|
|
</div>
|
|
<div id="status" class="status">Ready</div>
|
|
</div>
|
|
|
|
<div class="panel output">
|
|
<h2>Translation</h2>
|
|
<div id="translatedText">Translation will appear here...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|