index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real Time Voice Translator</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
        * {
            cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1034.ani), url(https://cur.cursors-4u.net/nature/nat-11/nat1034.gif), auto !important;
        }
    </style>
</head>

<body>
    <!-- Bobblehead Bunny cursor credit link -->
    <a href="https://www.cursors-4u.com/cursor/2012/01/29/bobblehead-bunny.html" target="_blank"
        title="Bobblehead Bunny">
        <img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Bobblehead Bunny"
            style="position:absolute; top: 0px; right: 0px;" />
    </a>
    <div id="container">
        <h1>Real Time Voice Translator</h1>
        <button id="recordBtn">Start</button>
        <p>Text <span id="recognizedText"></span></p>
        <p>Translation <span id="translatedText"></span></p>

        <div id="listeningText" style="display: none;">Listening...</div>


        <label for="sourceLang">Speak</label>
        <select id="sourceLang">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="ru">Russian</option>
            <option value="uk">Ukrainian</option>
        </select>


        <label for="targetLang"> Translate</label>
        <select id="targetLang">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="ru">Russian</option>
            <option value="uk">Ukrainian</option>
        </select>


    </div>

    <script src="main.js"></script>
</body>

</html>