-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
185 lines (153 loc) · 7.57 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/hap.css" rel="stylesheet" type="text/css" />
<link href="css/hap-player.css" rel="stylesheet" type="text/css" />
<link href="css/font.css" rel="stylesheet" type="text/css" />
<link href="font/SourceSansPro/SourceSansPro-Semibold-webfont.css" rel="stylesheet" type="text/css" />
<link href="font/Crimson/Crimson.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="control-hldr">
<div class="control">
<span class="logo">◨</span>The Hyperaudio Pad
<!--<span class="state">alpha</span>-->
</div>
</div>
<!-- transcript file chooser -->
<div class="left col">
<div class="header row">
Transcripts
</div>
<div class="body row scroll-y">
<ul id="transcript-files" class="listview">
<!--<li><a class="transcript-file" href="internetindians" >Internet Indians</a></li>
<li><a class="transcript-file" href="raidsinrainforest" >Rainforest Raids</a></li>-->
<li>loading...</li>
</ul>
</div>
<div class="footer row">
<div id="transcript-file-hint" class="hint">
<strong>Hint :</strong> Start by selecting a transcript.
</div>
</div>
</div>
<!-- transcript content -->
<div id="transcript" class="middle col">
<div class="header row">
<span id="script-title"></span> <span id="load-status-source"></span> <span id="source-header-ctrl" class="header-ctrl" style="display:none"><a id="show-video-source" href="#" style="display:none">show video</a><a id="hide-video-source" href="#" >hide video</a><!-- . <a id="play-btn-source" href="#" style="display:none">play</a><a id="pause-btn-source" href="#" >pause</a>--></span>
</div>
<!-- video display (when required) -->
<div id="media-source" class="media-hldr">
<!-- Player controls -->
<div id="jp_container_source" class="jp-video jp-video-flex" style="display:none">
<div id="jquery_jplayer_source" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-controls unselectable">
<a class="jp-play"></a>
<a class="jp-pause"></a>
</div>
<div class="jp-bar">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
<div class="jp-current-time unselectable"></div>
<div class="jp-duration unselectable"></div>
<div class="fb-title unselectable"></div>
</div>
</div>
</div>
</div>
</div>
<div id="transcript-content" class="body row scroll-y">
<div id="temp-note">
<strong>Temporary Note</strong>
<p>Please note that this application currently <strong>works best in Firefox and Chrome</strong>.</p>
<p>We are using very new technology and even though we are adhering to standards, inevitably behaviour varies between browsers. (Especially when it comes to media).</p>
<p>We haven't tested other browsers yet, but we do aim to make this application truly cross-browser by the time we reach beta.</p>
<p>Any browser bugs discovered will be filed.</p>
<p>Select a transcript to begin.</p>
</div>
</div>
<div class="footer row">
<div id="transcript-content-hint" class="hint" style="display:none">
<strong>Hint :</strong> Highlight text in the transcript above to move it into your target panel.
</div>
</div>
</div>
<div class="drag-bar col">
</div>
<!-- target content -->
<div class="right col">
<div class="header row">
<!--<span class="header-ctrl"><a href="#">play</a> | <a href="#">clear</a></span>-->
<span id="target-action-ctrl" style="display:none">
<a id="clear-target" href="#">clear</a> .
<a id="save-target" href="#">save</a><!--<a id="copy-url" href="#" style="display:none">copy</a>-->
<!--<input id="save-url" type="text" value="" style="display:none">-->
</span>
<span id="load-status-target"></span> <span id="target-header-ctrl" class="header-ctrl" style="display:none"><a id="full-screen-target" href="#">fullscreen</a> . <a id="show-video-target" href="#" style="display:none">show video</a><a id="hide-video-target" href="#">hide video</a> . <a id="play-btn-target" href="#">play</a><a id="pause-btn-target" href="#" style="display:none">pause</a></span>
</div>
<div id="media-target" class="media-hldr" style="display:none">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<canvas id="caption-canvas" width="480" height="270"></canvas>
</div>
<div class="media-hldr">
<!-- Player controls -->
<div id="jp_container_target" class="jp-video jp-video-flex">
<canvas id="target-canvas" width="480" height="270"></canvas>
<div class="jp-gui">
<div class="jp-controls unselectable">
<a class="jp-play"></a>
<a class="jp-pause"></a>
</div>
<div class="jp-bar">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
<div class="jp-current-time unselectable"></div>
<div class="jp-duration unselectable"></div>
<div class="fb-title unselectable"></div>
</div>
</div>
<div class="jp-controls-2 unselectable">
<a class="jp-viewsource"></a>
</div>
</div>
</div>
</div>
<div id="target-content" class="body row scroll-y" contenteditable="true" spellcheck="false">
</div>
<div class="footer row">
</div>
</div>
<div id="jquery_jplayer_audio" class="jp-audio"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag.js"></script>
<script type="text/javascript" src="js/popcorn.js"></script>
<script type="text/javascript" src="js/popcorn.transcript.js"></script>
<script type="text/javascript" src="js/iemobile-fix.js"></script>
<script type="text/javascript" src="js/hap.js"></script>
<script type="text/javascript" src="js/seriously/seriously.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.ascii.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.bleach-bypass.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.blend.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.colorcube.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.emboss.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.fader.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.invert.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.nightvision.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.noise.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.ripple.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.scanlines.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.sepia.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.sketch.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.tvglitch.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.vignette.js"></script>
</body>
</html>