-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (54 loc) · 3 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orkestra | Social Image Maker</title>
<link rel="stylesheet" href="/maker/css/min.css" type="text/css">
<link rel="stylesheet" href="/maker/css/style.css" type="text/css">
</head>
<body>
<div class="container">
<h2>Social Image Maker</h2>
<div class="row">
<div id="canvas-container" class="col" style="width:610px";>
<canvas id="canvas" class="canvas"></canvas><br/>
<a href="#" class="btn btn-a btn-sm mini smooth" id="btn-download" download="orkestra-img.png">Download</a>
</div>
<div class="col c6">
<form action="#">
<fieldset>
<legend>Content</legend>
<textarea name="caption" placeholder="Content Text"/></textarea> <br/>
<label>Position:<br/>
<span class="mini">Top:</span> <input type="radio" name="header-pos" value="top"/><br/>
<span class="mini">Right:</span> <input type="radio" name="header-pos" value="right"/><br/>
</label><br/>
<label>Container:<br/>
<span class="mini">Brightness:</span></br> <input type="range" name="brightness" value="90" min="0" max="255"><br/>
<span class="mini">Alpha:</span></br> <input type="range" name="alpha" value="10"><br/>
</label>
</fieldset>
<fieldset>
<legend>Media</legend>
<span class="mini">Chose a media file...</span></br>
<input type="file" name="media" accept="video/mp4,image/*"></br>
<span class="mini">Scale:</span></br> <input type="range" name="img-scale" value="100" max="150" min="10"><br/>
</fieldset>
<fieldset>
<legend>Hashtag</legend>
<input name="hashtag" type="text" placeholder="hashtag"/><br/>
<label>Position:<br/>
<span class="mini">Hidden:</span> <input type="radio" name="hashtag-pos" value="hidden"/><br/>
<span class="mini">Left:</span> <input type="radio" name="hashtag-pos" value="left"/><br/>
<span class="mini">Right:</span> <input type="radio" name="hashtag-pos" value="right"/><br/>
</label>
</fieldset>
</form>
</div>
</div>
</div>
<script src="/maker/js/zepto.min.js"></script>
<script src="/maker/js/script.js"></script>
</body>
</html>