-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.htm
131 lines (128 loc) · 5.11 KB
/
index.htm
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing Timer (slideshows) - gesture, quicksketch, speedpainting</title>
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.plugin.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/main.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<svg style="display: none">
<def>
<rect id="svg-vb" x="6" width="6" height="32" />
<polygon id="svg-arr" points="4,0 32,16 4,32" />
<polygon id="svg-arr-thin" points="8,0 28,16 8,32 8,24 18,16 8,8" />
<rect id="svg-hb" width="24" height="4" />
</def>
</svg>
<section id="config">
<div class="panel">
<h1><a href="#settings">DrawTimer.com</a></h1>
<a class="link-about" href="#about">about</a>
<section id="about">
<p>Practice gesture drawing and quick sketching using reference photos from your computer, tablet or phone.</p>
<p>Absolutely no image data is uploaded.</p>
<h2>Keyboard Shortcuts</h2>
<ul class="keyboard-list">
<li><span class="key" data-key="a">A</span> Previous image</li>
<li><span class="key" data-key="d">D</span> Next</li>
<li><span class="key" data-key="s">S</span> Pause/resume</li>
<li><span class="key" data-key="w">W</span> Open and close options</li>
<li><span class="key" data-key="t">T</span> Toggle timer visibility</li>
<li><span class="key" data-key="q">Q</span> Shrink to fit</li>
<li><span class="key" data-key="e">E</span> Black & white</li>
<li><span class="key" data-key="z">Z</span> Change time, use with up and down arrow keys</li>
</ul>
<h2>Feedback</h2>
<p>Report issues or give feedback <a href="https://github.com/githue/drawing-timer">here</a>.</p>
<h2>Attributions</h2>
<ul>
<li><a href="http://keith-wood.name/countdown.html">jQuery Countdown</a></li>
<li><a href="http://hammerjs.github.io/">Hammer.js</a></li>
</ul>
</section>
<section id="settings" class="default">
<div id="share">
<a id="tweet" href="https://twitter.com/intent/tweet?hashtags=art%2Cquicksketch%2Clifedrawing%2Cgesture&original_referer=https%3A%2F%2Fabout.twitter.com%2Fresources%2Fbuttons&ref_src=twsrc%5Etfw&text=Practice%20drawing%20from%20ref%20with&tw_p=tweetbutton&url=http%3A%2F%2Fwww.drawtimer.com">Tweet</a>
<a id="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://www.drawtimer.com"><span></span>Share</a>
</div>
<p>Time:
<select id="speed">
<option value=".5" selected>30 seconds</option>
<option value="1">1 minute</option>
<option value="2">2 minutes</option>
<option value="3">3 minutes</option>
<option value="4">4 minutes</option>
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
<option value="20">20 minutes</option>
<option value="40">40 minutes</option>
<option value="" id="opt-custom-time">custom...</option>
</select>
<label id="custom-time">
<input type="text" value="" name="custom-time" size="3" maxlength="3" /> minutes
</label>
</p>
<p>Delay:
<label><input type="radio" name="delay" id="delay-0s" value="0" checked /> none</label>
<label><input type="radio" name="delay" id="delay-1s" value="1000" /> 1 second</label>
<label><input type="radio" name="delay" id="delay-2s" value="2000" /> 2 seconds</label>
</p>
<ul class="toggles">
<li><label class="switch"><input type="checkbox" id="timer-visible" checked> Always show time remaining</label></li>
<li><label class="switch"><input type="checkbox" id="shrink" checked> Shrink to fit</label></li>
<li><label class="switch"><input type="checkbox" id="desaturate"> Black & white</label></li>
</ul>
<h2>Reference images</h2>
<p><input type="file" id="input-files" multiple /></p>
<p><a href="#" id="reset">Cancel slideshow</a><button id="restart">Start again</button></p>
<div class="hide-config">
<svg width="16" height="16">
<use xlink:href="#svg-arr-thin" transform="scale(.5) rotate(-90) translate(-32, 0)" />
</svg>
</div>
</section>
</div>
<div class="handle hide">
<svg id="svg-handle" width="24" height="24">
<g>
<use xlink:href="#svg-hb" y="0" />
<use xlink:href="#svg-hb" y="8" />
<use xlink:href="#svg-hb" y="16" />
</g>
</svg>
</div>
</section>
<section id="slideshow">
<div id="image-container"><img /></div>
<div id="time-limit"></div>
<div id="controls" class="hide">
<button id="previous" title="back">
<svg width="32" height="32">
<use xlink:href="#svg-arr-thin" transform="translate(32,32) rotate(180)" />
</svg>
</button>
<button id="pause" title="pause/resume">
<svg width="32" height="32">
<g id="icon-pause">
<use xlink:href="#svg-vb" x="0" />
<use xlink:href="#svg-vb" x="12" />
</g>
<use id="icon-play" xlink:href="#svg-arr" />
</svg>
</button>
<button id="next" title="next">
<svg width="32" height="32">
<use xlink:href="#svg-arr-thin" />
</svg>
</button>
</div>
</section>
</body>
</html>