gatoBot/templates/index.html

<!DOCTYPE html>
<html>

	<head>
		<title>Robot Cam</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>

<style>
table ,td, tr {
		width: 30%;
}

</style>

	<body>
		<img src="http://{{ server_ip }}:8081/" style="width:100%; max-width: 600px; max-height:600px; border-radius:10px"></img>

		<table style="width:100%; max-width: 500px; height:300px;">
			<tr>
				<td>
					<form action="/1" method="POST">
						<input type="image" name="direction" src="/static/img/left.svg" value="left" style="float:left; width:80% ;">
						</br>
					</form>
				</td>
				<td>
					<form action="/2" method="POST">
						<input type="image" name="direction" src="/static/img/forward.svg" value="forward" style="float:left; width:80%;">
						</br>
					</form>
				</td>
				<td>

					<form action="/3" method="POST">
						<input type="image" name="direction" src="/static/img/right.svg" value="right" style="float:left; width:80%;">
						</br>
					</form>

				</td>
			</tr>
			<tr>
				<td>
					<form action="/4" method="POST">
						<input type="image" name="direction" src="/static/img/reverse.svg" value="reverse" style=" margin-left:80px; width:80%;">
						</br>
					</form>
				</td>
				<td>
					<form action="/5" method="POST">
						<input type="image" name="direction" src="/static/img/stop.svg" value="stop" style="margin-left:80px; width:80%;">
						</br>
					</form>
				</td>
			</tr>
		</table>

	</body>
</html>