PictureFilter/index.html at master · pixma140/PictureFilter · 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
<!DOCTYPE html>

<head>
	<meta charset="utf-8">

	<title>Picture Filter</title>

	<!-- meta -->
	<meta name="author" content="Corbinian Grimm">
	<meta name="description" content="This is my webapp project to filter pictures in browser">
	<meta name="keywords" content="filter, images, application, webapp, filter images">
	<meta name="viewport" content="user-scalable=no"/>

	<!-- Load the script -->
	<script src="js/script.js"></script>

	<!-- css -->
	<link media="only screen and (max-width: 480px)" href="css/style.css" type= "text/css">
	<link rel="stylesheet" href="css/style.css" title="main-template">

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

</head>

<body>
	<!-- button header -->
	<header>
		<p><input type="button" value="Switch Camera" id="buttonSwitchCamera" onclick="buttonSwitchKameraPressed()"/></p>
		<p><input type="button" value="Back" id="buttonBack" onclick="buttonBackPressed()"/></p>
	</header>

	<!-- video/canvas section -->
	<section>
		<div id="myVideoDiv">
			<video width="80%" id="myVideo" poster="img\pokemon.jpg" autoplay></video>
		</div>

		<div id="myCanvasDiv">
			<!-- <canvas id="myCanvas" style="display:none;"></canvas> -->
		</div>

		<!-- debug label -->
		<!-- <p>
			<label id="filterDebugLabel"></label>
		</p> -->

	</section>

	<!-- button footer -->
	<footer>

		<p><table id="myTable" style="width:100%" align="center">
		  <tr>
			<td><input type="button" value="Last Filter" id="buttonBackward" onclick="buttonBackwardPressed()"/></td>
			<td><input type="button" value="Next Filter" id="buttonForward" onclick="buttonForwardPressed()"/></td>
		  </tr>
		</table></p>

		<!-- <p><input type="button" value="Last Filter" id="buttonBackward" onclick="buttonBackwardPressed()"/></p>

		<p><input type="button" value="Next Filter" id="buttonForward" onclick="buttonForwardPressed()"/></p> -->

		<p><input type="button" value="Take Picture" id="buttonNewPicture" onclick="buttonNewPicturePressed()"/></p>

		<p><a id="myDownloadLink" download="myImage.png"><input type="button" value="Save Image" id="buttonSave"/> <!-- onclick="buttonSavePressed()"--></a></p>

		<div id="snackbar">Some text message...</div>
	</footer>

	<!-- initialize video, cookies and buttons -->
	<script>initialize()</script>
</body>
</html>