-
Notifications
You must be signed in to change notification settings - Fork 1
/
template.mako
88 lines (83 loc) · 2.72 KB
/
template.mako
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
<!DOCTYPE html>
<%!
from utils import sluggify
from filters import legends, classes, special_char as special
%>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Little Pony Visualized</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class='main'>
<h1>Visual Transcript of My Little Pony: Friendship is Magic</h1>
<p>Each square represents a word, spoken or sung in the episode.
Data taken from the <a href="http://mlp.wikia.com/wiki/My_Little_Pony_Friendship_is_Magic_Wiki">Friendship is Magic Wiki</a>.
<a href="https://github.com/ZhangYiJiang/mlp-visualization">Fork this on GitHub</a>.
</p>
</header>
<nav>
% for season in seasons:
<a href="#${ season.name | sluggify }">${ season.name | h }</a>
% endfor
</nav>
<main>
% for season in seasons:
<h2 id="${ season.name | sluggify }">${ season.name | h }</h2>
<div class="season" data-transcript="${ season.code }">
% for episode in season.episodes:
<div>
<% lines = episode.lines.filter(lambda l: not l.is_action()) %>
<div class="meta">
<h3>${ episode.title | h }</h3>
<p>${ str(len(lines)) } lines <br> ${ lines.wc } words</p>
% if episode.title in special:
<ul class="special">
% for name, classname in sorted(special[episode.title].items()):
<li><span class="${ classname }"></span> ${ name | h }</li>
% endfor
</ul>
% endif
</div>
<ol class="lines">
% for line in lines:
<li class="${ line.classname() }">${ 'a' * line.wc }</li>\
% endfor
</ol>
</div>
% endfor
</div>
% endfor
</main>
<aside class="legend">
%for title, chars in legends:
<h2>${ title | h }</h2>
<ul>
%for char in sorted(chars):
<li><span class="${ classes[char] }"></span> ${ char | h}</li>
%endfor
</ul>
%endfor
<h2>Others</h2>
<ul>
<li><span class="so"></span>Songs</li>
<li><span class="a"></span>Antagonist</li>
</ul>
<p class="instructions">Click on the legend above to filter</p>
</aside>
<footer></footer>
<div class="line-info">
<p class="speaker"></p>
<p class="line"></p>
</div>
<div class="progress">Loading full transcript:
<strong>0/${ str(len(seasons)) }</strong></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="master.js"></script>
</body>
</html>