pandora_cms/static/html/print.html

<meta charset="utf-8" />
<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 = ''
            var url = document.location.protocol + '//' + document.location.host + '/' + item + '/' + time[0] + ',' + time[1];
            html += '<h1>' + result.data.title + ': ' + time[0] + ' - ' + time[1] + '</h1>'
            html += url + '<br><br>'
            html += '<a href="' + url + '"><img src="/' + item + '/240p'+in_+'.jpg"></a><br>'
            var current
            Ox.sortBy(result.data.layers.keywords, 'value').forEach(function(keyword) {
                if (keyword['in'] <= out && keyword['out'] >= in_) {
                    var section = keyword['value'].split(': ')[0]
                    if (section != current) {
                        current = section
                            html += '<br><b>' + section + ':</b><br>';
                    }
                    html += keyword['value'].split(': ')[1] + '<br>';
                }
            })
            document.body.innerHTML = html;
        });
    } else {
    }
}
window.onhashchange = render

render()
</script>
<style>
body {
    font-family: sans-serif;
}
</style>