
<!DOCTYPE html>
<html>

<head>
	<title>PARTE</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="/static/forkilla/style8.css">

</head>
<body>

<script type="text/javascript" src="/static/forkilla/voice10.js"></script>
<script>
  window.speechSynthesis.cancel();
  var text = "Si tienes el parte delante primero miraremos la parte de arriba. Iremos siguiendo los números que puedes ver en la imagen. Primero rellenamos en el número uno la fecha del accidente y la hora.";
  voice_talk(text);

  var nom = "{{ nom }}";

  var opciones = ["siguiente", "atrás", "Pausa","pausa", "repite", "repetir", "stop", "continúa", "continuar", "1"];
  voice_start(opciones, text, nom);
  window.setInterval(function(){
    /// call your function here
    voice_start(opciones, text, nom);
  }, 5000);
</script>


<div style="padding:28px;text-align:center;color: white;">
  <h1>DATOS BÁSICOS DEL ACCIDENTE</h1>
</div>

<div style="raw">

  <div class="column" style="text-align: center;">
	  {% if nom == "María" %} 
		<img id="imatgeAvatar" src="/static/forkilla/fig14.PNG"  alt="AVATAR 1" style="width:250px;height:380px;">	
	  {% elif nom == "Jennifer" %} 
		<img src="/static/forkilla/fig18.PNG"  alt="AVATAR 2" style="width:250px;height:380px;">	
	  {% elif nom == "Isabel" %} 
		<img src="/static/forkilla/fig22.PNG"  alt="AVATAR 3" style="width:250px;height:380px;">	
	  {% else %}
		<img src="/static/forkilla/fig14.PNG"  alt="AVATAR 1" style="width:250px;height:380px;">		   
	  {% endif %}

  </div>


  <div class="column2">
    
	<img width="800" height="400" src="/static/forkilla/img_parte.png" alt="FOTO PARTE"  width="5000" height="6000">
	
	<!--
	<div class="raw">
		
	  <h3> 1. Fecha y hora del accidente<span style="padding-left: 35px;"> 2. Lugar del accidente.<span style="padding-left: 35px;"> 3. Víctimas.</h3>
			
    </div>

    <div class="raw">
      <img src="/static/forkilla/img_parte.png"  alt="FOTO PARTE">
    </div>

    <div class="raw">
	  <h3> 4. Daños materiales <span style="padding-left: 100px;"> 5. Testigos.</h3>	
    </div>
  
    </div>-->
  </div>


  <!--<div class="right">
    <img src="navigation.png" alt="AVERIA">
  </div>-->


<footer>


	<div style="text-align: center;float: left;">
		<input type="image" src='/static/forkilla/back.png' onclick='window.location.href = "{% url "triaAvatar"%}"' style="width:40px;height:40px;margin-top:12px;margin-right:30px;margin-left:50px;"/>
	</div>

	{% if nom == "María" %} 

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte1/?triaAvatar=María";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% elif nom == "Jennifer" %} 

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte1/?triaAvatar=Jennifer";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% elif nom == "Isabel" %} 

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte1/?triaAvatar=Isabel";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% else %}

		<div style="text-align: center;float: right;">
			<input type="image" src='/static/forkilla/next.png' onclick='window.location = "/forkilla/parte1/?triaAvatar=María";' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
		</div>

	{% endif %}





    <!--
	<div style="text-align: center;float: left;">
		<input type="image" src='/static/forkilla/back.png' onclick='window.location.href = "{% url "triaAvatar"%}"' style="width:40px;height:40px;margin-top:12px;margin-right:30px;margin-left:50px;"/>
	</div>
	

	<div style="text-align: center;float: right;">
		<input type="image" src='/static/forkilla/next.png' onclick='window.location.href = "{% url "parte1"%}"' style="width:40px;height:40px;margin-top:12px;margin-right:50px;margin-left:30px;"/>
	</div>
	-->

	<div style="text-align: center;float: none;">
		<input type="image" src='/static/forkilla/pause.png' onclick="pause();" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
		<input type="image" src='/static/forkilla/play-button.png' onclick="resume();" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
		<input type="image" src='/static/forkilla/replay.png' onclick="voice_talk(text);" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
		<input type="image" src='/static/forkilla/stop.png' onclick="stop();" style="width:40px;height:40px;margin-top:12px;margin-right:12px;margin-left:12px;"/>
	</div>
	


		
</footer>





</body>
</html>