84 lines
2.9 KiB
HTML
84 lines
2.9 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>
|
|
|
|
<button id="swapBtn" class="swap-btn">↔ Swap</button>
|
|
</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 class="microphone-hint">Allow microphone access when prompted to use voice input.</div>
|
|
<div id="ttsNotice" class="tts-notice">Select a language and click Speak to use browser or server TTS.</div>
|
|
<div class="panel-footer">
|
|
<span id="charCount">0</span> characters
|
|
<span id="voiceStatus" class="voice-status"></span>
|
|
</div>
|
|
<div id="status" class="status">Ready</div>
|
|
</div>
|
|
|
|
<div class="panel output">
|
|
<div class="output-header">
|
|
<h2>Translation</h2>
|
|
<button id="copyBtn">📋 Copy</button>
|
|
</div>
|
|
<div id="translatedText">Translation will appear here...</div>
|
|
<div id="copyFeedback" class="copy-feedback"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="devLog" class="dev-log">
|
|
<div class="dev-log-header">Dev Log <button id="clearLogBtn" class="clear-log">Clear</button></div>
|
|
<div id="devLogBody" class="dev-log-body">(permission-state and debug messages appear here)</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|