-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (61 loc) · 2.9 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
<html>
<head>
<title>GIF Photobooth</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/gif.js/gif.js"></script>
<script src="js/glfx/glfx.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a href="#" id="statustext">Warming up</a>
<video autoplay="autoplay" id="video"></video>
<canvas id="videomirror"></canvas>
<div id="preview-wrapper">
<img id="preview" />
<div class="links">
<a href="#" id="closelink">close</a>
<a href="#" id="downloadlink">download</a>
</div>
</div>
<form onsubmit="submitConfigForm()">
<label for="config_style">Style</label>
<select id="config_style">
<option value="none">None</option>
<option value="grayscale">Black & white</option>
<option value="beauty">Beauty</option>
<option value="purikura">Purikura (Japanese photobooth)</option>
<option value="sepia">Sepia-tone</option>
<option value="vignette">Vignette</option>
<option value="motionblur">Motion blur</option>
</select>
<label for="config_width">Photo strip width</label>
<input id="config_width" type="text">
<label for="config_height">Photo strip height</label>
<input id="config_height" type="text">
<p>The size of the preview frame above is calculated by taking the total strip height divided by the number of
poses, minus any gutter size. The total size is important for sharing and printing, choose wisely.</p>
<label for="config_rows">Number of poses</label>
<input id="config_rows" type="text">
<p>Warning: Facebook kinda hates GIFs so you're best off doing one or two poses. Twitter works great regardless!</p>
<label for="config_gutter_color">Gutter color</label>
<input id="config_gutter_color" type="color">
<label for="config_gutter">Gutter height (in pixels)</label>
<input id="config_gutter" type="text">
<p>The gutter is the space in between photos in the strip.</p>
<label for="config_num_frames">Number of GIF frames</label>
<input id="config_num_frames" type="text">
<label for="config_frame_delay">Time between frames (in milliseconds)</label>
<input id="config_frame_delay" type="text">
<p>The length of the GIF is determined by the number of frames multiplied by the time between frames. Many frames
with a short time between them will feel smoother, but the filesize will get out of hand. Find a balance!</p>
<label for="config_prep_time">Time between poses (in milliseconds)</label>
<input id="config_prep_time" type="text">
<label for="config_auto_download">Automatically download</label>
<input id="config_auto_download" type="checkbox">
</form>
<div id="purikura">
<img src="images/purikura-1.png" />
</div>
<script src="js/main.js"></script>
</body>
</html>