|
<!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> |
|
|
