<html>
<head>
<title>Soil Moisture Date Downloader</title>
<!--<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="date_downloader.js"></script>
</head>
<body>
<h1>Soil Moisture Date Downloader</h1>
<!--<p>Date: <input type="text" id="datepicker"></p>
<p> <br/><br/></p>-->
<label for="pick_depths">Select depths</label>
<div id="pick_depths">
<!--<input type="checkbox" name="5cm" id="5cm" value="5" checked="checked"><label for="5cm">5cm</label>
<input type="checkbox" name="25cm" id="25cm" value="25" checked="checked"><label for="25cm">25cm</label>
<input type="checkbox" name="60cm" id="60cm" value="60" checked="checked"><label for="60cm">60cm</label>-->
</div>
<br/>
<div id="pick_dates" style="overflow:auto;">
<div id="pick_start_date" style="float:left;">
<label for="datepicker_start">Select start date</label>
<div id="datepicker_start"></div>
<br/>
</div>
<div id="pick_end_date" style="float:left;">
<label for="datepicker_end">Select end date</label>
<div id="datepicker_end"></div>
<br/>
</div>
</div>
<button id="generate_urls">Generate URLs</button>
<br/>
<p><span id="blah"></span></p>
<p><span id="blah2"></span></p>
<div id="outputs">
<ul>
<li><a href="#urls">Links</a></li>
<li><a href="#curl">curl Commands</a></li>
<li><a href="#wget">wget Commands</a></li>
<li><a href="#download_list">Download List</a></li>
</ul>
<div id="urls"></div>
<div id="curl"></div>
<div id="wget"></div>
<div id="download_list"></div>
</div>
</body>
</html>
