{% 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" poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" autoplay loop muted playsinline></video> </div> <div class="summary-block"> <p>{{ film.data.summary|safe }}</p> <br> <p>{{ film.data.summary_zh|safe }}</p> </div> <div class="bio-block"> <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> <div class="play"> <div class="film-play-block"> <div><a href="" id="play-fullscreen" class="icon-play"><span class="animated-title"><span class="text">▶</span></span></a></div> <div class="film-play-spacer">OR</div> <div class="film-play-padma"><a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">View on Pad.ma</a></div> </div> </div> {% if film.related_texts.exists %} <div class="texts"> <h2>related assemblies</h2> {% for text in film.related_texts %} <div class="text"> <a href="{{ text.get_absolute_url }}"> {{ text.title | safe }}<br> {{ text.byline | safe }} </a> </div> {% endfor %} </div> {% endif %} </div> </div> {% endblock %} {% block end %} <script> var film = {{ film.json | safe }}; </script> <script src="{% static 'js/film.js' %}"></script> {% endblock %}