------------------------------ index.html ------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

<html>
  
  <head>
	<title>Orca Call Catalog</title>
	
	<link href="/assets/reset-fonts-grids.css" media="screen, projection" rel="stylesheet" type="text/css" />
	<link href="/assets/calls.css" media="screen, projection" rel="stylesheet" type="text/css" />
	
	<script src="/assets/jquery.min.js" type="text/javascript"></script>
	
  </head>

<body>
  <div id="doc2">
	<center>
	  <h1>Onset detection</h1>
	</center>
	
	<svg:svg version="1.1" baseProfile="full" width="150" height="150">
      <svg:rect x="10" y="10" width="100" height="100" fill="red"/>
      <svg:circle cx="50" cy="50" r="30" fill="blue"/>
    </svg:svg>

	<div id="recording" class="recording" style="background-image: url(/{{ recording.image }});">
	</div>
	
	onsets={{ onsets }}

	recording.length = {{ recording.length }}

	<form action="/onsets/{{ recording.id}}" method="post">
	  <input type="hidden" name="testname" />
	  <input type="submit" value="Detect Onsets" />
	</form>



</body>
</html>
