njpma/app/templates/film.html

92 lines
2.3 KiB
HTML
Raw Normal View History

2021-09-28 13:10:22 +00:00
{% extends "base.html" %}
{% block body_class%}animated{% endblock %}
2021-09-28 13:10:22 +00:00
{% block main %}
2021-10-13 15:35:47 +00:00
<style>
:root {
2021-10-13 15:54:25 +00:00
--bg-color-1: {{ film.color_1 }};
--bg-color-2: {{ film.color_2 }};
--bg-color-3: {{ film.color_2 }};
--bg-color-4: {{ film.color_4 }};
2021-10-13 15:35:47 +00:00
}
2021-10-16 09:15:46 +00:00
body {
background-attachment: fixed;
}
2021-10-13 15:35:47 +00:00
</style>
2021-09-28 13:10:22 +00:00
2021-10-10 15:06:43 +00:00
<div class="film">
2021-10-11 14:38:22 +00:00
<div class="info">
2021-10-16 09:15:46 +00:00
<div class="info-meta">
<h1>
<span class="font-bold">{{ film.data.title | safe }}</span>
<span>{{ film.data.title_zh | safe }}</span>
</h1>
<h2>
{% for director in film.data.director %}
{{ director|safe }}<br>
{% endfor %}
</h2>
<div class="details">
{{ film.data.date}}, {{ film.duration }}
</div>
2021-10-16 09:15:46 +00:00
</div>
<div class="video-block">
2021-10-27 09:26:53 +00:00
<img src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" class="video-fallback-block">
<video
id="timeline-video"
src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4"
poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg"
autoplay
loop
muted
playsinline>
2021-10-27 09:26:53 +00:00
</video>
2021-10-11 14:38:22 +00:00
</div>
2021-10-22 11:46:00 +00:00
<div class="summary-block">
2021-10-16 09:15:46 +00:00
<p>{{ film.data.summary|safe }}</p>
<br>
<p>{{ film.data.summary_zh|safe }}</p>
2021-10-22 11:46:00 +00:00
</div>
<div class="bio-block">
2021-10-16 09:15:46 +00:00
<div class="bio">
<div class="en">
{{film.data.director.0}}: {{ film.data.bio|safe }}
</div>
<div class="zh">
{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
</div>
</div>
2021-10-11 14:38:22 +00:00
</div>
2021-10-22 11:46:00 +00:00
<div class="play">
<div class="film-play-block">
<div><a href="" id="play-fullscreen" class="icon-play"><span class="animated-title"><span class="text">&#xe901;</span></span></a></div>
2021-10-22 11:46:00 +00:00
<div class="film-play-spacer">OR</div>
2021-10-24 13:43:02 +00:00
<div class="film-play-padma"><a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">View on Pad.ma</a></div>
2021-10-22 11:46:00 +00:00
</div>
</div>
2021-10-22 16:20:26 +00:00
{% if film.related_texts.exists %}
<div class="texts">
2021-10-26 15:39:44 +00:00
<h2>Related Assemblies 相關選集</h2>
2021-10-22 16:20:26 +00:00
{% for text in film.related_texts %}
<div class="text">
<a href="{{ text.get_absolute_url }}">
{{ text.title | safe }}<br>
2021-10-26 11:26:52 +00:00
{{ text.byline | striptags }}
2021-10-22 16:20:26 +00:00
</a>
</div>
{% endfor %}
</div>
{% endif %}
2021-10-11 14:38:22 +00:00
</div>
2021-09-30 17:30:36 +00:00
</div>
{% endblock %}
{% block end %}
<script>
2021-10-11 14:38:22 +00:00
var film = {{ film.json | safe }};
2021-09-30 17:30:36 +00:00
</script>
2021-10-11 14:38:22 +00:00
<script src="{% static 'js/film.js' %}"></script>
2021-09-28 13:10:22 +00:00
{% endblock %}