dlibrary/dlibrary/templates/viewer.html

38 lines
1.7 KiB
HTML

{% extends 'base.html' %}
{% from 'utils.html' import root with context %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ root() }}static/viewer.css">
<script>
const WORK_ID = "{{ work['id'] }}";
</script>
<script src="{{ root() }}static/viewer.js"></script>
{% endblock %}
{% block body %}
<div id="viewer-images">
{% for filename in images %}
<img src="{{ root() }}images/{{ work['id'] }}/{{ filename }}" class="viewer-image">
{% endfor %}
</div>
<div id="progress"></div>
<div id="page-num"></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>
<div id="image-container"></div>
{% endblock %}