-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
132 lines (116 loc) · 4.66 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>harmonic16</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
<!-- style -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- SEO -->
<meta name="description" content="A simple harmonic color generator for base16 color schemes.">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="revisit-after" content="3 days">
<meta name="distribution" content="web">
<meta name="keywords" content="color generator, base16, harmonic, harmonic16">
<meta name="robots" content="index, follow">
<!-- colorMaker -->
<script src="js/pusher.color.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/colors.js"></script>
<!-- external -->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- sliders -->
<script src="js/sliders.js"></script>
<script src="js/punch.js"></script>
</head>
<body>
<a class="fork_me" href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="content">
<p>A simple harmonic color generator for base16 colors.</p>
<p>Read more about <a href="http://chriskempson.github.io/base16/">base16</a>.</p>
<div class="control">
<!-- SLIDERS -->
<div class="row">
<div id="hue"></div>
<input type="number" onChange="updateLabel('hue');" id="hue_label">
</div>
<div class="row">
<div id="fun"></div>
<input type="number" onChange="updateLabel('fun');" id="fun_label">
</div>
<div class="row">
<div id="sat"></div>
<input type="number" onChange="updateLabel('sat');" id="sat_label">
</div>
<div class="row">
<div id="val"></div>
<input type="number" onChange="updateLabel('val');" id="val_label">
</div>
<div class="row">
<div id="ind"></div>
<input type="number" onChange="updateLabel('ind');" id="ind_label">
</div>
<!-- CHECKBOXES -->
<label><input type="checkbox" name="switch" id="switch" value="switch" onChange="refresh();">
2 Hues in Base Colors
</label>
<label><input type="checkbox" name="comp" id="comp" value="comp" checked="checked" onChange="refresh();">
Complement Bases
</label>
<label><input type="checkbox" name="indv" id="indv" value="indv" checked="checked" onChange="hideIndividual('ind');">
Individual Saturation
</label>
</div>
<div id="base00"></div>
<div id="base01"></div>
<div id="base02"></div>
<div id="base03"></div>
<div id="base04"></div>
<div id="base05"></div>
<div id="base06"></div>
<div id="base07"></div>
<div id="base08"></div>
<div id="base09"></div>
<div id="base0A"></div>
<div id="base0B"></div>
<div id="base0C"></div>
<div id="base0D"></div>
<div id="base0E"></div>
<div id="base0F"></div>
<a class="export" onClick="makeFile();" href="#">Builder</a>
<a class="export" onClick="makeSass();" href="#">Sass</a>
<p>Use exported .yml file with <a href="https://github.com/chriskempson/base16-builder">base16-builder</a>.</p>
<div class="preview preview1">
<div class="preview-pop preview1">
<div class="preview-header preview1">
<div class="preview-title preview1">HEADER</div>
</div>
<div class="preview-content preview1">
<div class="preview-text preview1">Lorem ipsum content...</div>
</div>
<div class="preview-footer preview1">
<button class="preview-deny preview1">DENY</button>
<button class="preview-accept preview1">ACCEPT</button>
</div>
</div>
</div>
<div class="preview preview2">
<div class="preview-pop preview2">
<div class="preview-header preview2">
<div class="preview-title preview2">HEADER</div>
</div>
<div class="preview-content preview2">
<div class="preview-text preview2">Lorem ipsum content...</div>
</div>
<div class="preview-footer preview2">
<button class="preview-deny preview2">DENY</button>
<button class="preview-accept preview2">ACCEPT</button>
</div>
</div>
</div>
</div>
</body>
</html>