-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
107 lines (78 loc) · 3.43 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
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ColorPal!</title>
<meta name="Generator" content="Vim/7.3">
<meta name="plugin-version" content="vim7.3_v10">
<meta name="syntax" content="html">
<link href="http://fonts.googleapis.com/css?family=Titan+One" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>
<link href="includes/farbtastic/farbtastic.css" rel="stylesheet" type="text/css" />
<link href="css/960_24_col.css" rel="stylesheet" type="text/css">
<link href="css/cp-styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container_24 container">
<img class="grid_3" src="images/logo.png" alt="ColorPal logo" />
<h1 class="grid_11">ColorPal!</h1>
<p class="grid_10 instructions">
Want to generate a color palette from an image?
<br />
Drag your image into the box below. :)
</p>
<div class="clear"></div>
<input type="file" id="cp-input-image"></input>
<div data-bind = "template: { name: 'CP_PaletteTemplate' }"></div>
<script id="CP_PaletteTemplate" type="text/html">
<div id="cp-swatches"
data-bind = "css: { off: !palette_created() }">
{{each(index,hex) colors}}
<div
class="cp-border cp-swatch grid_3"
id="cp-swatch-${index}"
data-bind="style: { backgroundColor: hex }">
</div>
{{/each}}
</div> <!-- /#cp-swatches -->
</script>
<div data-bind="template: { name: 'CP_PaletteColorCodeTemplate' }"></div>
<script id="CP_PaletteColorCodeTemplate" type="text/html">
<div id="cp-swatches-color-codes"
data-bind="visible: ColorPal_selected">
{{each(index,hex) colors}}
<input
class="cp-swatch-color-code cp-border grid_3"
data-bind="value: hex" />
{{/each}}
</div> <!-- /#cp-swatches-color-codes -->
</script>
<div class="clear"></div>
<canvas id="cp-canvas" class="cp-canvas-default cp-border grid_24"></canvas>
<div data-bind="css: { off: !palette_created() }" id="cp-toolbox" class="cp-border grid_6 fade">
<div id="cp-picker" class="fade"></div>
</div>
<div data-bind="css: { off: !palette_created() }" id="cp-output" class="cp-border grid_6 fade">
<textarea
data-bind="value: output, valueUpdate: 'keyup'"
rows="14"
id="cp-output"
name="cp-output"></textarea>
</div>
<div class="clear"></div>
<p class="credits grid_24">
<a href="http://mwcz.org">Author</a>
<a href="https://github.com/mwcz/ColorPal">Code</a>
<a href="https://twitter.com/mwcz">Twitter</a>
</p>
</div> <!-- /.container_24 -->
<script type="text/javascript" src="includes/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="includes/jquery.tmpl.js"></script>
<script type="text/javascript" src="includes/knockout-2.0.0.debug.js"></script>
<script type="text/javascript" src="includes/farbtastic/farbtastic.js"></script>
<script type="text/javascript" src="median-cut.js/median-cut.js"> </script>
<script type="text/javascript" src="js/imagedata_to_rgb.js"> </script>
<script type="text/javascript" src="js/cp-events.js"></script>
<script type="text/javascript" src="js/cp-knockout.js"></script>
</body>
</html>