/
index.html
147 lines (136 loc) · 6.77 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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<!--
Copyright (c) 2011 Kevin Decker (http://www.incaseofstairs.com/)
See LICENSE for license information
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>gradient-scanner</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/ui-darkness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="lib/colorpicker/css/colorpicker.css">
<link rel="stylesheet" type="text/css" href="css/gradient-scanner.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>gradient-scanner</h1>
</div>
<div class="content">
<div id="errorMsg"></div>
<div id="image-section" class="flow-section">
<h2>Select Image</h2>
<div class="help-text">
Open an image that contains a gradient and then draw a line over the major components of the gradient.
</div>
<label>
Image<div class="info-marker">
*
<div class="info">
Local files are only supported on browsers that support the <a href="http://www.w3.org/TR/FileAPI/">File API</a>.
If supported a browse button will appear next to the text box.
<br>
<br>
Due to the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements">security requirements</a> of the canvas API, remote URLs will be proxied through this server. Any URLs that require authentication to access will not be available.
</div>
</div>:
<input type="text" id="pathToImage">
<span class="fileInput localDependent">
<input type="button" value="Browse...">
<input type="file" accept="image/*" id="localImage">
</span>
</label>
<div class="image-display">
<canvas id="imageDisplay"></canvas>
<div id="lineOverlay"></div>
</div>
<img class="preview-component line-preview">
</div>
<div id="sensitivity-section" class="flow-section">
<h2>Adjust Color Sensitivity</h2>
<div class="help-text">
Use the slider to adjust the sensitivity of the color matcher.
</div>
<div class="display-gradient">
<div class="gradient-preview">
<img class="preview-component line-preview">
<div class="preview-component gradient-preview"></div>
</div>
<div class="delta-e-slider"></div>
<div class="stop-count"></div>
</div>
<pre class="generated-css"></pre>
</div>
<div id="editor-section" class="flow-section">
<h2>Edit Gradient</h2>
<div class="help-text">
Manually adjust the color stops as necessary.
</div>
<div class="display-gradient">
<div class="gradient-preview">
<img class="preview-component line-preview">
<div class="preview-component gradient-preview"></div>
</div>
<div class="stop-count"></div>
<div id="colorStops" class="stops-list"></div>
</div>
<div class="stop-editor">
Color:
<div class="color-sel"></div>
<label class="stop-editor-field">
Position:
<div class="stop-position-slider"></div>
</label>
<label class="stop-editor-field">
<input type="checkbox" id="disableCheck">
Disable Color Stop
</label>
</div>
<pre class="generated-css"></pre>
</div>
</div>
<div class="footer">
<button class="flow-prev">Prev</button>
<button class="flow-next">Next</button>
<div class="footer-link">
<a href="http://www.youtube.com/watch?v=XafYlc5Kps0">Demo</a>
|
<a href="http://www.incaseofstairs.com/">incaseofstairs</a>
|
<a href="http://twitter.com/kpdecker">@kpdecker</a>
|
<a href="http://www.border-image.com/">border-image.com</a>
|
<a href="http://www.github.com/kpdecker/gradient-scanner/">@github</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery-tmpl/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="lib/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="lib/user-image-cache/user-image-cache.js"></script>
<script type="text/javascript" src="lib/pixastic/pixastic.core.js"></script>
<script type="text/javascript" src="lib/pixastic/actions/edges.js"></script>
<script type="text/javascript" src="js/line-utils.js"></script>
<script type="text/javascript" src="js/image-data-utils.js"></script>
<script type="text/javascript" src="js/color-stops.js"></script>
<script type="text/javascript" src="js/flow-section.js"></script>
<script type="text/javascript" src="js/image-loader.js"></script>
<script type="text/javascript" src="js/line-selector.js"></script>
<script type="text/javascript" src="js/sensitivity.js"></script>
<script type="text/javascript" src="js/edit-gradient.js"></script>
<script type="text/javascript" src="js/gradient-scanner.js"></script>
<script type="text/javascript" src="js/example-image.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15628919-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>