HTML
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Axolotl App</title>
</head>
<body>
<div class="container">
<img src="axolotl_logo_white.png" alt="Axolotl Logo" class="logo">
<h1>Axolotl</h1>
<textarea class="input-text" rows="7" placeholder="Enter text..."></textarea>
<div class="button-row">
<button class="btn" id="clear">Clear</button>
<button class="btn" id="speak-start">Speak Start</button>
<button class="btn" id="send">Send</button>
</div>
<textarea class="input-text" rows="10" placeholder="Enter text..."></textarea>
<div class="stop-button">
<button class="btn" id="stop">Stop</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
]]>
CSS
<![CDATA[
body {
background-color: #74BEE8;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
}
.logo {
width: 184px;
height: 184px;
}
h1 {
font-size: 20px;
margin: 0;
}
.input-text {
display: block;
width: calc(100% - 20px);
margin: 10px auto;
background: transparent;
border: 1px solid white;
border-radius: 10px;
color: white;
padding: 5px;
}
.button-row {
display: flex;
justify-content: space-between;
}
.btn {
background-color: white;
color: #74BEE8;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
}
.stop-button {
text-align: right;
}
.stop-button .btn {
margin-right: 10px;
}
]]>
JavaScript
<![CDATA[
document.getElementById('clear').addEventListener('click', () => {
document.querySelectorAll('.input-text').forEach(textarea => {
textarea.value = '';
});
});
document.getElementById('speak-start').addEventListener('click', () => {
console.log('Speak Start button clicked');
// Add your Speak Start functionality here
});
document.getElementById('send').addEventListener('click', () => {
console.log('Send button clicked');
// Add your Send functionality here
});
document.getElementById('stop').addEventListener('click', () => {
console.log('Stop button clicked');
// Add your Stop functionality here
});
]]>