phantasma/app/templates/film.html
2021-10-21 18:27:34 +05:30

72 lines
1.7 KiB
HTML
Executable file

{% extends "base.html" %}
{% block main %}
<style>
:root {
--bg-color-1: {{ film.color_1 }};
--bg-color-2: {{ film.color_2 }};
--bg-color-3: {{ film.color_2 }};
--bg-color-4: {{ film.color_4 }};
}
body {
background-attachment: fixed;
}
</style>
<div class="film">
<div class="info">
<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">
Year: {{ film.data.date}}, Runtime: {{ film.duration }}
</div>
</div>
<div class="video-block">
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
</div>
<div class="bio-block">
<p>{{ film.data.summary|safe }}</p>
<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>
<div class="play">
<div class="texts">
{% for text in film.related_texts %}
<div class="text">
<a href="{{ text.get_absolute_url }}">
{{ text.title }}<br>
{{ text.byline }}
</a>
</div>
{% endfor %}
</div>
<div>
<a href="" id="play-fullscreen" class="icon-play">&#x25b6;</a>
<a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">Open on pad.ma</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block end %}
<script>
var film = {{ film.json | safe }};
</script>
<script src="{% static 'js/film.js' %}"></script>
{% endblock %}