-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
57 lines (56 loc) · 4.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="shrink-to-fit=no,width=device-width,height=device-height,initial-scale=1,user-scalable=1">
<meta name="description" content="A tool to help generate crochet patterns">
<title>Stitchy</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="styles.css" rel="stylesheet" type="text/css">
<script defer type="text/javascript" src="konva.min.js"></script>
<script defer type="text/javascript" src="color-thief.umd.js"></script>
<script defer type="text/javascript" src="nearestColor.js"></script>
<script defer type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div id="flex">
<form action="#" method="post" id="form">
<a href="https://github.com/jamestomasino/stitchy" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div id="intro">
<p>Stitchy is a crochet pattern generator. It's here to help you convert an image into a rectangular pattern of knots.</p>
<p>Choose your pattern size and the number of colors you'd like to use, then upload the image you want to use as a pattern. You can resize, move, and rotate the image. When it's just right, click “Render” and generate your pattern.</p>
<p>Once your pattern is rendered you can fix up any mistakes by clicking on the grid. The square you click on will cycle through the palette colors. When you are satisfied, click “Download” to save your work.</p>
</div>
<label for="rows">
<span>Number of rows:</span>
<input type="number" id="rows" name="rows" min="1" max="1000" value="50" />
</label>
<label for="columns">
<span>Number of columns:</span>
<input type="number" id="columns" name="columns" min="1" max="1000" value="50" />
</label>
<label for="columns">
<span>Number of colors to extract:</span>
<input type="number" id="colors" name="colors" min="1" max="100" value="3" />
</label>
<button type="submit">Next</button>
</form>
<div id="imageForm">
<label>
Image File:
<input type="file" id="imageLoader" name="imageLoader"/>
</label>
</div>
<div id="container"></div>
</div>
<div id="render">Render</div>
<div id="gridonholder">
<label for="gridon">
<span>Grid on:</span>
<input type="checkbox" name="gridon" id="gridon" checked>
</label>
</div>
<div id="logo"><a href="https://github.com/jamestomasino/stitchy"><img src="stitchy.svg" alt="Stitchy"></a></div>
</body>
</html>