-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
124 lines (111 loc) · 4.82 KB
/
index.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<meta name="viewport" content="width=device-width, sinitial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title> The fellowship of the ring</title>
<link href='http://fonts.googleapis.com/css?family=Italianno' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="vendors/jquery-ui/css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<link rel="stylesheet" href="styles/main.css" />
<link href='http://fonts.googleapis.com/css?family=Cherry+Swash:700,400' rel='stylesheet' type='text/css'>
</head>
<body data-helpOpen="false">
<div class="loader">
<span><span class="icon"></span><span class="text">loading ...</span></span>
</div>
<div class="helpWindow hidden">
<div class="windowHeader"></div>
<div class="mainText">
<span> Welcome stranger!</span>
<span> I present you an interactive visualization of the travels and adventures of Frodo Baggings and his colleagues on the lands of the middle-heart. Just press play and watch, or use the timeline to check any time point</span>
<span> This visualization can be synched with the film, so you can play it on your tablet or laptop while you see the movie, keeping track of the whereabouts of the main characters every minute!</span>
</div>
<div class="attribution">
<span class="icon"></span> by <a href="http://twitter.com/johnhackworth" target="_blank">@johnhackworth</a>
<span class="icon"></span> fork it on <a href="https://github.com/johnHackworth/middle-earth" target="_blank">github</a>
</div>
<a href="#closePopUp" id="closePopUp">Close me</a>
</div>
<div id="options">
<div id="controls">
<div id="flowControl">
<div class="line">
<a id="prevRound"></a>
<a id="stop" class="hidden"></a>
<a id="autoPlay" class="playControl"></a>
<a id="nextRound"></a>
</div>
<div class="line">
</div>
</div>
<div id="variables">
<div class="variable">
<a href="#switch" id="autozoom" class="switch disabled">
<span class="handle"></span>
</a><span class="optionLabel">No zoom to action</span>
</div>
<div class="variable">
<a href="#switch" id="autopan" class="switch disabled">
<span class="handle"></span>
</a><span class="optionLabel">No auto-move</span>
</div>
<div class="variable">
<a href="#switch" id="movieSynch" class="switch disabled">
<span class="handle"></span>
</a><span class="optionLabel">Synch with movie</span>
</div>
<div class="variable">
<a href="#switch" id="geopolitical" class="switch disabled">
<span class="handle"></span>
</a><span class="optionLabel">Hide places</span>
</div>
<div class="variable">
<a href="#help" id="help">
<span class="help"></span>
<span class="optionLabel">Help</span>
</a>
</div>
</div>
</div>
<div id="handle">
</div>
</div>
<div id='middleEarth'></div>
<div id="vizTitle"><p>The Fellowship of the ring</p></div>
<div class="time">
<div id="timeline"></div>
<div class="timeLegend">
<div class="origin"> </div>
<div id="date"></div>
<div class="end"></div>
</div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script src="vendors/jquery-ui/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="vendors/d3.v2.min.js"></script>
<script src="app/lotr.js"></script>
<script src="app/infowindows.js"></script>
<script type="text/template" id="infoTemplate">
<div class="popup-cont">
<div class="imgCont"><img src="./img/<%= id%>.jpg" /></div>
<h4><%= name %></h4>
<p><%= description %></p>
</div>
</script>
<script type="text/template" id="infoTemplatePlace">
<div class="cartodb-popup dark places">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-cont">
<% if(content && content.fields) { %>
<h4><%= content.fields[1].value%></h4>
<p><%= content.fields[2].value%></p>
<div class="imgCont"><img src="./img/places/<%= content.fields[1].value%>.jpg" /></div>
<% } %>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
</div>
</body>
</html>