squawk/index.html at master · idesignpixels/squawk · GitHub

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
<!DOCTYPE html>
<html>
	<head>
	<title>SQUAWK | Caption Builder</title>
	<!-- META -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="An easy way to add captions and subtitles to your short videos" >
	<meta name="keywords" content="caption editor, subtitle editor, subtitles, add subtitles, video captions, video subtitles" >
	<meta name="author" content="Dale Bailey" >

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!-- FONT -->
	<link href='http://fonts.googleapis.com/css?family=Lobster|Open+Sans:400,600,800,600italic,300|Libre+Baskerville' rel='stylesheet' type='text/css'>

	<!-- FAVICON -->

	<!-- SOCIAL -->

	</head>
	<body>
		<div id="container">
			<header>
				<h1>Squawk</h1>
				<h3> Add Captions To Your Videos</h3>
			</header>
			<section>
				<div id="upload_nav">
					<span id="urlSpan1"><h2>Insert url here</h2></span>
					<span id="urlSpan3">
						<button id="load">Load</button>
					</span>
					<span id="urlSpan2">
						<input type="text" id="userUrl">
					</span>
				</div>
			</section>
			<section>
				<video id="video" controls poster="images/poster.png">
					<source />
					<track label="English subtitles" kind="subtitles" srclang="en" src="captionTest.vtt" default>
				</video>
			</section>
			<section>
				<h2>Press and hold the record button for the duration of each caption</h2>
				<button id="playButton" disabled>Play</button>
				<button id="record" disabled>Record Caption</button>
			</section>
			<section id="captionSection">
				<h2>Enter your text for each caption</h2>
				<ol id="timeList"></ol>
			</section>
			<section>
				<h2>Press the generate button to get your subtitle file!</h2>
				<button id="generate" disabled>Generate!</button>
				<button id="create" disabled>Create file</button>
				<a download="captionTest.vtt" id="downloadlink" style="display: none">
					<button>Download</button>
				</a>
				<br>
				<br>
				<textarea id="code" rows="20" cols="80" disabled placeholder="All captions must be saved before you can generate your file."></textarea>
				<!-- use <code></code> tags? -->
				<p>Test url: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4</p>
				<p>Test url: http://www.lisaismycoach.com/wp-content/uploads/2014/08/coaching1.m4v</p>
			</section>
			<footer>
				<h2>Get social</h2>
				<ul id="iconNav">
					<li class="icon"><a href=""><img src="images/icons/facebook.png" alt="facebook icon"></a></li>
					<li class="icon"><a href=""><img src="images/icons/twitter.png" alt="twitter icon"></a></li>
					<li class="icon"><a href=""><img src="images/icons/youtube.png" alt="youtube icon"></a></li>
					<li class="icon"><a href=""><img src="images/icons/mail.png" alt="email icon"></a></li>
				</ul>
				<div id="credit">
					Created by Dale Bailey
				</div>
			</footer>
		</div>
		<!-- JAVASCRIPT -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<!-- <script src="js/_ui.controller.js"></script> -->
		<script src="dist/js/scripts.js"></script>
		<!-- <script src="js/saveFile.js"></script> -->
	</body>
</html>