ascroll for item/edits
This commit is contained in:
parent
bbae18bcf3
commit
21db49fe48
19 changed files with 348 additions and 75 deletions
|
|
@ -13,16 +13,14 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">
|
||||
<a href="/polis" class="active">
|
||||
phtantasmapolis: Looking Back to the Future
|
||||
<br>
|
||||
未竟之城：回顧未來
|
||||
</a>
|
||||
<nav>
|
||||
<a href="{% url 'films'%}">films - 影片</a>
|
||||
<a href="{% url 'edits' %}">edits - 編輯</a>
|
||||
<a href="{% url 'tv' %}">tv - 頻道</a>
|
||||
<a href="{% url 'essays' %}">essays - 專文</a>
|
||||
<a href="{% url 'texts' %}">assemblies - </a>
|
||||
<a href="{% url 'about' %}">about - 關於</a>
|
||||
</nav>
|
||||
<a class="icon">
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
some overview page with stuff
|
||||
{% endblock %}
|
||||
90
app/templates/fallback.html
Normal file
90
app/templates/fallback.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "wrong font";
|
||||
src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff");
|
||||
}
|
||||
h1 {
|
||||
font-family: "wrong font";
|
||||
margin: auto;
|
||||
font-weight: normal;
|
||||
color: yellow;
|
||||
font-size: 66px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2 {
|
||||
color: #6666ff;
|
||||
font-family: "wrong font";
|
||||
}
|
||||
#box {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
body {
|
||||
font-family: "wrong font";
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#shadowBox {
|
||||
background-color: rgb(0, 0, 0);
|
||||
/* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
/* Black w/opacity/see-through */
|
||||
border: 3px solid;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.rainbow_text_animated {
|
||||
background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: rainbow_animation 6s ease-in-out infinite;
|
||||
background-size: 400% 100%;
|
||||
}
|
||||
.reflection {
|
||||
transform: scaley(-1);
|
||||
opacity: 0.3;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
@keyframes rainbow_animation {
|
||||
0%,100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<title>phantas.ma</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="box">
|
||||
<div id="shadowBox">
|
||||
<h1 class="rainbow rainbow_text_animated">Phantas.ma</h1>
|
||||
<h2></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
path = document.location.pathname.slice(1)
|
||||
if (path) {
|
||||
document.querySelector('h1').innerHTML = 'Phantas.ma/' + path
|
||||
if (path == 'polis') {
|
||||
setTimeout(() => {
|
||||
document.querySelector('h2').innerHTML = 'Oct 30, 2021 – Mar 6, 2022'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,21 +1,23 @@
|
|||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
|
||||
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
|
||||
|
||||
|
||||
<div class="film">
|
||||
<div class="info">
|
||||
<h1>{{ film.data.title | safe }}</h1>
|
||||
<h2>{{ film.data.director|join:", "|safe }}</h2>
|
||||
<p>{{ film.data.summary|safe }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="" id="play-fullscreen">Watch Fullscreen</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="play/en">Watch with Annotations</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="play/zh">Watch with Annotations (Mandarin title)</a>
|
||||
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
|
||||
<div class="play">
|
||||
<div>
|
||||
<a href="" id="play-fullscreen">Watch Fullscreen</a>
|
||||
</div>
|
||||
{% for text in film.related_texts %}
|
||||
<div>
|
||||
<a href="{{ text.get_absolute_url }}">{{ text.title }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@
|
|||
<h1><a href="{% url 'film' film.slug %}">{{ film.data.title | safe }}</a></h1>
|
||||
<h2>{{ film.data.director|join:", "|safe }}</h2>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="right">
|
||||
|
||||
<a href="{% url 'film' film.slug %}">
|
||||
<img src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/timeline.jpg">
|
||||
</a>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
some overview page with stuff
|
||||
<div>
|
||||
<div>
|
||||
Phantas.ma/polis is mainly in support by the Cultural Taiwan Foundation and in cooperation with SEA plateaus
|
||||
<div>
|
||||
</div>
|
||||
本計畫由財團法人文化臺灣基金會支持、SEA plateaus協力
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
10
app/templates/text.html
Normal file
10
app/templates/text.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
<div id="ascroll"></div>
|
||||
{% endblock %}
|
||||
{% block end %}
|
||||
<script>
|
||||
var config = {{ text.json | safe }};
|
||||
</script>
|
||||
<script src="/static/js/ascroll.js"></script>
|
||||
{% endblock %}
|
||||
10
app/templates/texts.html
Normal file
10
app/templates/texts.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
|
||||
<div class="texts">
|
||||
{% for text in texts %}
|
||||
<div class="text">
|
||||
<a href="{{ text.get_absolute_url }}">{{ text.title }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue