add static output

static/html/print.html

@@ -0,0 +1,52 @@
+<script src="/static/oxjs/min/Ox.js"></script>
+<script>
+function pandora_api(action, data, callback) {
+    var url = '/api/';
+    var xhr = new XMLHttpRequest();
+    xhr.addEventListener('load', function (evt) {
+        var data = JSON.parse(evt.target.responseText);
+        callback(data);
+    });
+    var formData = new FormData();
+    formData.append('action', action);
+    formData.append('data', JSON.stringify(data));
+    xhr.open('POST', url);
+    xhr.send(formData);
+}
+
+function render() {
+    var hash = document.location.hash.slice(1).split('/')
+    if (hash.length == 2) {
+        var item = hash[0],
+            time = hash[1].split(','),
+            in_ = time[0],
+            out = time[1];
+
+        in_ = Ox.parseDuration(in_);
+        out = Ox.parseDuration(out);
+        pandora_api('get', {
+            id: item,
+            keys: ['title', 'layers']
+        }, function(result) {
+            var html = ''
+            html += '<h1>' + result.data.title + ': ' + time[0] + ' - ' + time[1] + '</h1>'
+            html += '<img src="/' + item + '/240p'+in_+'.jpg">'
+            Ox.sortBy(result.data.layers.keywords, 'value').forEach(function(keyword) {
+                if (keyword['in'] <= out && keyword['out'] >= in_) {
+                    html += '<br>' + keyword['value'];
+                }
+            })
+            document.body.innerHTML = html;
+        });
+    } else {
+    }
+}
+window.onhashchange = render
+
+render()
+</script>
+<style>
+body {
+    font-family: sans-serif;
+}
+</style>