<!DOCTYPE html> <!-- vim: set et: --> <html lang="en"> <head> <title>moonfire ui</title> <script src="bundle.js"></script> <style type="text/css"> #nav { position: fixed; left: 0px; top: 0px; width: 17em; } .ui-datepicker { width: 100%; } #videos { margin-left: 18em; } #videos tbody:after { content: ''; display: block; height: 3ex; } tbody .name { background-color: #eee; } tr.r:hover { background-color: #ddd; } tr.r th, tr.r td { padding: 0.5ex 1.5em; text-align: right; } .ui-dialog .ui-dialog-content { overflow: visible; /* remove stupid scroll bars when resizing. */ padding: 0; } video { width: 100%; height: 100%; } </style> </head> <body> <div id="nav"> <form action="#"> <fieldset> <legend>Cameras</legend> <table id="cameras"> </table> </fieldset> <fieldset id="datetime"> <legend>Datetime range</legend> <div id="start-date"></div> <input id="start-time" name="start-time" type="text" title="Starting time within the day. Blank for the beginning of the day. Otherwise HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a second. Timezone is normally left out; it's useful once a year during the ambiguous times of the "fall back" hour."><br> <input type="radio" name="end-date-type" id="end-date-same" checked> <label for="end-date-same">to same day</label><br> <input type="radio" name="end-date-type" id="end-date-other"> <label for="end-date-other">to other day</label> <div id="end-date"></div> <input id="end-time" name="end-time" type="text" title="Ending time within the day. Blank for the end of the day. Otherwise HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a second. Timezone is normally left out; it's useful once a year during the ambiguous times of the "fall back" hour."><br> </fieldset> <label for="split">Max video length</label> <select name="split" id="split"> <option value="324000000">1 hour</option> <option value="1296000000">4 hours</option> <option value="7776000000">24 hours</option> <option value="">infinite</option> </select><br> <input type="checkbox" checked id="trim" name="trim"> <label for="trim">Trim segment start/end</label><br> <input type="checkbox" checked id="ts" name="ts"> <label for="ts">Timestamp track</label> </form> </div> <table id="videos"></table> </body> </html>