| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>Audio Transcription</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <a href="https://www.labsoft.ai" target="_blank" id="logo-link"> |
| <img src="Logo.png" alt="Logo" id="logo-img" /> |
| </a> |
| <div id="thought-bubble"> |
| <div class="cloud-puff" style="--i: 0"></div> |
| <div class="cloud-puff" style="--i: 1"></div> |
| <div class="cloud-puff" style="--i: 2"></div> |
| <div class="cloud-puff" style="--i: 3"></div> |
| <div class="cloud-puff" style="--i: 4"></div> |
| <div class="cloud-puff" style="--i: 5"></div> |
| </div> |
|
|
| <div class="content"> |
| <div class="button-container centered"> |
| <input type="checkbox" id="micButton" class="mic-checkbox" /> |
| <label for="micButton" class="mic-button"> |
| <div class="mic"> |
| <div class="mic-button-loader"></div> |
| <div class="mic-base"></div> |
| </div> |
| <div class="button-message"> |
| <span> PRESS TO TALK </span> |
| </div> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="blob-container centered"> |
| <div class="blob"></div> |
| <div class="blob"></div> |
| <div class="blob"></div> |
| <div class="blob"></div> |
| </div> |
|
|
| <audio id="audioResponse" style="display: none" controls></audio> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
|
|
