<html lang="en">
	<head>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
			rel="stylesheet"
		/>
		<link rel="stylesheet" href="index.css" />
		<title>Text to Speech</title>
	</head>
	<body class="container mt-5">
		<div class="wrapper">
			<h1 class="text-light">Text to Speech</h1>
			<p class="lead text-light mt-4">Select Voice</p>

			<!-- Select Menu for Voice -->
			<select id="voices" class="form-select bg-secondary text-light"></select>

			<!-- Range Sliders for Volume and Rate -->
			<div class="d-flex mt-4 text-light">
				<div>
					<p class="lead">Volume</p>
					<input
						type="range"
						min="0"
						max="2"
						value="1"
						step="0.1"
						id="volume"
					/>
					<span id="volume-label" class="ms-2">1</span>
				</div>
				<div class="mx-5">
					<p class="lead">Speech Speed</p>
					<input type="range" min="1" max="3" value="1" id="rate" step="0.5" />
					<span id="rate-label" class="ms-2">1</span>
				</div>
			</div>
			<div class="mt-3 text-light">
				<p>Note: To apply change to the Speech Rate or Volume, after adjusting to your preference, Click "Start" button again</p>
			</div>

			<!-- Text Area  for the User to Type -->
			<textarea
				class="form-control bg-light text-dark mt-5"
				cols="30"
				rows="10"
				placeholder="Type here..."
				id="text"
			></textarea>

			<div class="mt-3 text-light">
				<label for="text">Word Count:</label>
				<p id="count"></p>
			</div>

			<!-- Control Buttons -->
			<div class="mb-5">
				<button id="start" class="btn btn-success mt-5 me-3">Start</button>
				<button id="pause" class="btn btn-warning mt-5 me-3">Pause</button>
				<button id="resume" class="btn btn-info mt-5 me-3">Resume</button>
				<button id="cancel" class="btn btn-danger mt-5 me-3">Cancel</button>
			</div>
		</div>
	</body>
	<script src="/text-to-speech.js"></script>
</html>