njpma/app/templates/film.html

{% extends "base.html" %}
{% block body_class%}animated{% endblock %}
{% 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">
				{{ film.data.date}}, {{ 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>
                <br>
            <p>{{ film.data.summary_zh|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 %}