
<!DOCTYPE html>
<html>

<head>
	<title>TRIA AMB QUI VOLS PARLAR</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<style>
* {
  box-sizing: border-box;
}

.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
  
.menu {
  float:left;
  width:33%;
  text-align:center;
}
.menu a {
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:66%;
  padding:0 20px;
}
.right {
  float:left;
  width:33%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}
img { 
  width: 100%; 
}
.text {
  font-size:1vw;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
	
</head>
<body>

<div style="padding:15px;text-align:left;">
  <h1>MAIN MENU</h1>
</div>


<!-- Search Form -->
<form id="labnol" method="get">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<br>
<br>
<br>


<form action="{% url 'bateria1'%}" method="get">
	<button type="submit" name="bateria1" > seguent</button>
</form>


<!-- 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();
	
	  
        
      };

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

    }
  }
</script>

</div>

<div style="text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body>
</html>