52 lines
2.6 KiB
HTML
52 lines
2.6 KiB
HTML
{% extends 'base.html' %}
|
|
{% from 'utils.html' import index, root with context %}
|
|
{% block head %}
|
|
<link rel="stylesheet" type="text/css" href="{{ root() }}/static/viewer.css">
|
|
<script>
|
|
const WORK_ID = "{{ work['id'] }}";
|
|
const INDEX = "{{ index() }}";
|
|
const IMAGES = [
|
|
{% for filename in images %}
|
|
"{{ root() }}/images/{{ work['id'] }}/{{ filename }}",
|
|
{% endfor %}
|
|
];
|
|
</script>
|
|
<script src="{{ root() }}/static/viewer.js"></script>
|
|
{% endblock %}
|
|
{% block body %}
|
|
<div id="progress"></div>
|
|
<div id="page-num">
|
|
<table>
|
|
<tr><td id="current-page"></td></tr>
|
|
<tr><td id="total-pages">{{ images | length }}</td></tr>
|
|
</table>
|
|
</div>
|
|
<div id="duration"></div>
|
|
<div id="controls">
|
|
<div id="tap-left" class="tap">
|
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
|
|
<path d='M 60 -60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
|
</svg>
|
|
</div>
|
|
<div id="tap-right" class="tap">
|
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
|
|
<path d='M 0 -60 L 60 0 L 0 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
|
</svg>
|
|
</div>
|
|
<div id="tap-back" class="tap">
|
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='80' viewBox='-70 -10 140 80'>
|
|
<path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
|
</svg>
|
|
</div>
|
|
<div id="tap-restart" class="tap">
|
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='140' viewBox='-70 -70 140 140'>
|
|
<path d='M 54.16 9.55 A 55 55 0 1 1 54.16 -9.55' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
|
<path d='M 54.16 -9.55 l 9.39 -17.66' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
|
<path d='M 54.16 -9.55 l -17.66 -9.39' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="image-container" id="current-image"></div>
|
|
<div class="image-container" id="preload-images"></div>
|
|
{% endblock %}
|