<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
</head>
<body>
 <section class="section">
	<!-- CSS Styles -->
	<style>
	  .speech input {border: 0; width: 240px; display: inline-block; height: 30px; visibility:hidden;}
	  .speech img {float: right; width: 40px }
	</style>

	<!-- Search Form -->
	<form id="speak" method="post" action="/item/add">
	  <div class="speech">
		<input type="text" name="q" id="transcript" placeholder="Speak" />
		<img onclick="startDictation()" src="/static/img/mic.png" />
	  </div>
	  <div id="history">
		<table class="table is-striped is-fullwidth">
		<!-- php 
		foreach (array_reverse($rqList) as $rq => $ts)
		{
			echo "<tr><td>".date("d/m/Y H:i:s", $ts)."</td><td>".$rq."</td></tr>";
		}
		-->
		</table>
	  </div>
	</form>
 </section>
</body>
<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = "en-US";
      recognition.start();

      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('speak').submit();
      };

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }
</script>

