-
Notifications
You must be signed in to change notification settings - Fork 40
/
Copy pathindex.html
110 lines (99 loc) · 4.79 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Colorpicker for data | tristen</title>
<meta name='twitter:site' content='@fallsemo' />
<meta property='og:site_name' content='Colorpicker for data' />
<meta name='twitter:url' content='http://tristen.ca/hcl-picker/' />
<meta name='twitter:domain' content='http://tristen.ca/hcl-picker/' />
<meta property='og:url' content='http://tristen.ca/hcl-picker/' />
<meta name='twitter:title' content='Colorpicker for data' />
<meta property='og:title' content='Colorpicker for data' />
<meta name='twitter:description' content='Avoiding equidistant HSV colors' />
<meta property='og:description' content='Avoiding equidistant HSV colors' />
<meta name='twitter:image' content='http://tristen.ca/hcl-picker/img/twitter-card.png' />
<meta name='st:image' content='http://tristen.ca/hcl-picker/img/twitter-card.png' />
<meta property='og:image' content='http://tristen.ca/hcl-picker/img/twitter-card.png' />
<meta property='og:type' content='website' />
<meta name='twitter:card' content='summary' />
<link rel='shortcut icon' href='img/favicon.png' type='image/x-icon' />
<link rel='stylesheet' href='css/base.css' />
<link rel='stylesheet' href='css/site.css' />
</head>
<body>
<header class='fill-white pad2y space-bottom2'>
<div class='limiter clearfix'>
<div class='col8 margin2'>
<a href='/' class='sprite logo fl'>HCL</a>
<div class='fl pad1x pad0y'>
<h1>Colorpicker for data</h1>
<span class='quiet'>Built off Gregor Aisch's <a href='http://vis4.net/blog/posts/avoid-equidistant-hsv-colors'>article</a> and color conversion library <a href='https://github.com/gka/chroma.js'>chroma.js</a>. Fork it on <a href='https://github.com/tristen/hcl-picker/'>GitHub</a>.</span>
</div>
</div>
</div>
</header>
<div class='limiter'>
<div class='col12 clearfix'>
<div class='pill col4 margin4 clearfix'><!--
--><button href='#picker' class='button active mode col6 js-mode'>
<span class='sprite icon picker'></span> Colorpicker
</button><!--
--><button href='#visualization' class='button mode col6 js-mode'>
<span class='sprite icon map'></span> Visualized
</button>
</div>
</div>
<section id='picker' class='picker active contain space-bottom2 space-top2'>
<nav class='axis-select pin-topleft z100'></nav>
<div class='canvas fl'>
<div id='bg'>
<canvas id='colorspace' width='210' height='210'></canvas>
</div>
<canvas id='grad' width='440' height='440'></canvas>
<div class='drag_cont'>
<div class='drag from'></div>
<div class='drag to'></div>
</div>
<input id='slider' class='slider col12' type='range' value='0' min='0' max='1' step='0.05' />
<div class='slider-output pin-bottomleft'>
<span class='quiet capitalize js-slider-title'></span>
<span class='quiet js-slider-value'></span>
</div>
</div>
<div class='sidebar'>
<div class='output pad1'>
<div id='visual-output' class='fl'></div>
<div id='code-output' class='fl hexes quiet'></div>
</div>
<button id='select' class='z1 pin-bottom keyline-bottom button col12 js-select select-all control unround'>
Copy<div class='sprite icon clipboard'></div>
</button>
<div id='controls' class='controls pill unround pin-bottom col12 clearfix'><!--
--><button class='col6 button unround js-add' data-tooltip='Add a swatch' >
<span class='icon sprite plus'></span>
</button><!--
--><button class='col6 button round-bottomright js-subtract' data-tooltip='Remove a swatch'>
<span class='icon sprite minus'></span>
</button>
</div>
</div>
</section>
<section id='visualization' class='hidden'>
<div id='legend' class='legend dark pin-bottomright pad1'>
<h4>U.S Unemployment 2008</h4>
<ul id='legend-output' class='clearfix'></ul>
<div class='clearfix'>
<span class='fl'>Low</span>
<span class='fr'>High</span>
</div>
</div>
</section>
</div>
<script src='bundle.js'></script>
<script>
var analytics=analytics||[];(function(){var e=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group"],t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})(),analytics.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+e+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
analytics.load("ppyh4q5xb3");
</script>
</body>
</html>