mirror of
https://github.com/scottlamb/moonfire-nvr.git
synced 2025-03-10 11:40:09 -04:00
e177cbd042
nav div changes: * make it togglable (on all devices) by hamburger button * on narrow devices, make it closed by default and be at the top rather than on the left open zoomed by default trim some arguably less important columns on narrow displays, and reduce some horizontal padding always show videos full-screen on narrow displays
107 lines
4.4 KiB
HTML
107 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<!-- vim: set et: -->
|
|
<html lang="en">
|
|
<head>
|
|
<title>Moonfire NVR</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<div id="top">
|
|
<a id="toggle-nav">☰</a>
|
|
<span id="session"></div>
|
|
</div>
|
|
<div id="nav">
|
|
<form action="#">
|
|
<fieldset>
|
|
<legend>Streams</legend>
|
|
<table id="streams"></table>
|
|
</fieldset>
|
|
<fieldset id="datetime">
|
|
<legend>Date & Time Range</legend>
|
|
<div id="from">
|
|
<div id="start-date"></div>
|
|
<label for="start-time">Time:</label>
|
|
<input id="start-time" name="start-time" type="text"
|
|
max-length="20"
|
|
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.">
|
|
</div>
|
|
<div id="range">Range:
|
|
<input type="radio" name="end-date-type" id="end-date-same" checked>
|
|
<label for="end-date-same">Single Day</label>
|
|
<input type="radio" name="end-date-type" id="end-date-other">
|
|
<label for="end-date-other">Multi Day</label><br/>
|
|
</div>
|
|
<div id="to">
|
|
<div id="end-date"></div>
|
|
<label for="end-time">Time:</label>
|
|
<input id="end-time" name="end-time" type="text" max-length="20"
|
|
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.">
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Recordings Display</legend>
|
|
<label for="split">Max Video Duration:</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">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><br>
|
|
<label for="timefmt">Time Format:</label>
|
|
<select name="timefmt" id="timefmt">
|
|
<option value="MM/DD/YY hh:mm A">US-short</option>
|
|
<option value="MM/DD/YYYY hh:mm:ss A">US</option>
|
|
<option value="MM/DD/YY HH:mm" selected>Military-short</option>
|
|
<option value="MM/DD/YYYY HH:mm:ss">Military</option>
|
|
<option value="DD.MM.YY HH:mm">EU-short</option>
|
|
<option value="DD-MM-YYYY HH:mm:ss">EU</option>
|
|
<option value="YY-MM-DD hh:mm A">ISO-short (12h)</option>
|
|
<option value="YY-MM-DD HH:mm">ISO-short (24h)</option>
|
|
<option value="YYYY-MM-DD hh:mm:ss A">ISO (12h)</option>
|
|
<option value="YYYY-MM-DD HH:mm:ss">ISO (24h)</option>
|
|
<option value="YYYY-MM-DD HH:mm:ss">ISO 8601-like (No TZ)</option>
|
|
<option value="YYYY-MM-DDTHH:mm:ss">ISO 8601 (No TZ)</option>
|
|
<option value="YYYY-MM-DDTHH:mm:ssZ">ISO 8601</option>
|
|
<option value="YYYY-MM-DDTHH:mm:ss:FFFFFZ">Internal</option>
|
|
</select>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<table id="videos"></table>
|
|
<div id="login">
|
|
<form>
|
|
<fieldset>
|
|
<table>
|
|
<tr>
|
|
<td><label for="login-username">Username:</label></td>
|
|
<td><input type="text" id="login-username" name="username"
|
|
autocomplete="username"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="login-password">Password:</label></td>
|
|
<td><input type="password" id="login-password" name="password"
|
|
autocomplete="current-password"></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
|
|
</tr>
|
|
</table>
|
|
<p id="login-error"></p>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|