-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
154 lines (145 loc) · 6.27 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
148
149
150
151
152
153
154
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yarn Palette</title>
<meta name="description" content="Get the dominant colour or colour palette from an image, and find the closest matching yarns">
<meta name="author" content="Tom Fay">
<!-- Mobile Specific Metas –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/skeleton.2.0.4.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body class="hidden">
<div class="section">
<div class="container">
<h1 class="logo">Yarn Palette</h1>
<p class="webOnly">
Need help choosing colours for your next Fair Isle project?<br> Pick an image and find the nearest matching colours
of yarn.
</p>
<h2 class="webOnly">Try it</h2>
<form autocomplete="off">
<div class="row">
<div class="six columns">
<label for="yarnType">Yarn</label>
<select id="yarnType" class="u-full-width">
<option value="" disabled hidden selected>Please choose...</option>
<option value="SPINDRIFT">Jamieson's of Shetland Spindrift and Double Knitting</option>
<option value="JANDS">Jamieson and Smith 2ply Jumper Weight</option>
<option value="LETTLOPI">Ístex Léttlopi</option>
<option value="KLINTA">Klinta Wolle Nate</option>
<option value="FINULLGARN">Rauma Finullgarn</option>
<option value="KPPALETTE">Knit Picks Palette</option>
<option value="SCSPECIALDK">Stylecraft Special DK</option>
<option value="SCSPECIALARAN">Stylecraft Special Aran</option>
</select>
</div>
<div class="six columns">
<label for="numColours">Number of colours</label>
<select id="numColours" class="u-full-width">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</form>
<div class="hidden webOnly">
<label for="image-input">Pick an image</label>
<input type="file" name="inputfile" id="image-input" accept="image/*" />
<p>The selected image will not leave your device.</p>
</div>
<div class="hidden appOnly">
<div class="row">
<div class="six columns">
<button id="select-image-button" class="button-primary u-full-width">Select image</button>
</div>
<div class="six columns">
<button id="take-photo-button" class="button-primary u-full-width">Take photo</button>
</div>
</div>
</div>
<div id="selected-image"></div>
</div>
</div>
<div class="section hidden webOnly">
<div class="container">
<h2>Examples</h2>
<div id="example-images"></div>
</div>
</div>
<div class="section webOnly">
<div class="container">
<h2>Caveats</h2>
<ul>
<li>Real yarn colours can differ from those displayed on the internet.</li>
<li>This site uses the single dominant colour of a yarn when picking colours, so is useless for marled or speckled yarns.</li>
<li>The number of displayed yarns may slightly differ from the number chosen.</li>
</ul>
</div>
</div>
<footer>
<div class="container">
<p>
Created by Ravelry user <a href="http://www.ravelry.com/people/tofay" target="_blank">tofay</a>. Ravellers - please post any feedback on the <a href="https://www.ravelry.com/discuss/yarn-palette/topics/3699832" target="_blank">Ravelry group</a>.
Example images are copyright of Tom Fay, Finullgarn images are copyright of Ysolda Teague, and all other yarn images are copyright of the respective yarn companies.</p>
<p class="webOnly">Read about <a href="howitworks.html">how it works.</a></p>
</div>
</footer>
<!-- Mustache templates taken from color-thief. Copyright (c) 2015 Lokesh Dhakar -->
<script id='image-section-template' type='text/x-mustache'>
{{#images}}
<div class="row image-section">
<div class="six columns">
<img class="u-full-width target-image" src="{{file}}">
</div>
<div class="six columns">
<button class="button-primary pick-colours-button">Pick yarns!</button>
<div class="yarn-palette"></div>
</div>
</div>
{{/images}}
</script>
<script id="yarn-palette-template" type="text/x-mustache">
<div class="function get-palette">
Palette
<div class="swatches u-full-width">
{{#palette}}
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
{{/palette}}
</div>
Closest yarn colours are
<div class="u-full-width">
{{#yarns}}
<figure style="display: inline-block">
<img class="yarn-img" src="{{1}}" alt="{{0}}">
<figcaption>{{0}}</figcaption>
</figure>
{{/yarns}}
</div>
</div>
</script>
<script src="cordova.js" onload="javascript:window.isCordovaApp = true;"></script>
<script src="js/color-thief.2.0.1.min.js"></script>
<script src="js/jquery.3.2.1.min.js"></script>
<script src="js/mustache.2.3.0.min.js"></script>
<script src="js/d3-color.v1.min.js"></script>
<script src="js/deltae.global.min.js"></script>
<script src="js/yarns.js"></script>
<script src="js/yarn-palette.js"></script>
<script>
var index_script_url = "js/index_web.js";
if (window.isCordovaApp) {
index_script_url = "js/index_app.js";
}
$.getScript(index_script_url);
</script>
</body>
</html>