-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (109 loc) · 4.92 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
<!DOCTYPE html>
<!-- WARNING: Please only edit index-dev.html. index.html is DESTROYED every time the build script is ran -->
<html>
<head>
<title>easyAnnotate Demo</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Font Awesome v4.3 gives us some cool icons... http://fortawesome.github.io/Font-Awesome/icons/ -->
<link rel="stylesheet" href="dependencies/fontawesome/css/font-awesome.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="addAnnotationForm">
<ul id="tabNav">
<li><a href="#" class="control selected no-select" id="textTab">Text</a></li>
<li><a href="#" class="control no-select" id="imageTab">Image</a></li>
</ul>
<div id="textTabContent">
<form>
<textarea name="annotationText" id="form-annotation-text" rows=2 cols=23 placeholder="Enter your annotation text here..."></textarea>
<input type="text" name="link" size=23 id="form-annotation-link" placeholder="Add link here..." />
<br />
<!--<label>
<input type="checkbox" id="form-remove-text-whitespace" name="remove-text-whitespace" class="add-checkbox">
<span class="checkbox-span">Get rid of whitespace?</span>
</label>-->
<br />
<br />
<div class="form-colour-container">Colour:<div id="background-colour-button" class="colour-button"></div></div>
<div class="form-colour-container">Text:<div id="text-colour-button" class="colour-button"></div></div>
</form>
</div>
<div id="imageTabContent">
<h2>Image URL</h2>
<form>
<input type="text" name="image-url" size=26 value="" id="form-image-url" placeholder="http://google.com/cool-img.jpg" />
<br />
<!--<label>
<input type="checkbox" id="form-remove-image-whitespace" name="remove-image-whitespace" class="add-checkbox" value'1'>
<span class="checkbox-span">Get rid of whitespace?</span>
</label>-->
<br />
</form>
</div>
<br />
Length (seconds): <input type="text" name="length" size=3 value="2" id="form-annotation-length" />
<br />
<br />
<a class="control no-select" id="saveAddForm">Save</a>
<a class="control no-select" id="cancelAddForm">Cancel</a>
</div>
<div id="vidTitle">
<h1 id="title">easyAnnotate Demo</h1>
</div>
<!-- Important: 'data-easyannotation-file-id' is going to specify what to save the annotations as in local storage! Keep this consistent on a per video basis -->
<div id="vidContainer">
<div id="vid">
<div id="vid-overlay"></div>
<canvas id="vid-canvas" width="400" height="220"></canvas>
<video width="400" data-easyannotation-file-id="ExampleFileName" id="videoPlayer">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" id="MP4-video">
Your browser does not support MP4 HTML5 video, lulz.
</video>
</div>
<div id="vidAnnotation">
<div id="vidAnnotationInner">
<ul id="vidAnnotationList">
</ul>
</div>
</div>
</div>
<div id="informationalText"></div>
<div id="annotationButton">
<p><a id="addAnnotation" href="#">Add Annotation</a></p>
</div>
<div id="controls">
<p>
<a href="#" id="playPauseButton" class="control player-button no-select"><i class="fa fa-play"></i></a>
<progress id="progress" max="100" value="0">% played</progress>
<span id="play-time">0:00</span>
<a href="#" class="control player-button no-select" id="volume-down"><i class="fa fa-volume-down"></i></a>
<a href="#" class="control player-button no-select" id="volume-up"><i class="fa fa-volume-up"></i></a>
<br />
<br />
<br />
<a href="#" id="hidey-showy" class="control padded-button player-button no-select">Hide Annotation List</a>
<a href="#" id="delete-everything-button" class="control padded-button player-button no-select">Delete all annotations</a>
<a href="#" id="toggle-annotations-button" class="control padded-button player-button no-select">Turn off annotations</a>
<a href="#" id="change-video-button" class="control padded-button player-button no-select">Change video</a>
</p>
<br /><br /><br />
<form id="videoURL">
Change the video: <input type="text" name="videoURL" id="form-video-URL" placeholder="Submit a .mp4 video (e.g. http://www.w3schools.com/html/mov_bbb.mp4)" />
<a class="control no-select" id="videoURLSubmit">Change</a>
</form>
</div>
</div>
<!-- Linking JS at the end of the document to take advantage of lazy/faster loading -->
<!-- We need jQuery and any other libraries (from the dependenices folder) first... -->
<script src="dependencies/jquery-2.1.3.min.js"></script>
<script src="dependencies/md5.min.js"></script>
<script src="dependencies/mousetrap.min.js"></script>
<script src="dependencies/colors.min.js"></script>
<script src="dependencies/jqColorPicker.min.js"></script>
<!-- Now for the actual js that does the cool stuff... -->
<script src="main.min.js"></script>
</body>
</html>