-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
129 lines (129 loc) · 7.88 KB
/
index.html
File metadata and controls
129 lines (129 loc) · 7.88 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="./dist/main.css" />
<link rel="apple-touch-icon" sizes="180x180" href="./src/assets/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/assets/favicon_io/favicon-16x16.png">
<script src="./dist/main.js"></script>
<title>Etchify</title>
</head>
<body>
<header>
<h1>Etchify</h1>
<div class="divider"></div>
<h2>Created by Nicholas Angleton</h2>
<div class="icons">
<a href="https://github.com/N-Angleton/Etchify" target="_blank"><i class="fa-brands fa-github-square"></i></a>
<a href="https://linkedin.com/in/nhangleton" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
<a href="mailto:nick.angleton@gmail.com"><i class="fa-solid fa-envelope"></i></a>
<a href="https://angel.co/nicholas-angleton" target="_blank"><i class="fa-brands fa-angellist"></i></a>
<a href="https://angleton.io/" target="_blank" class="angletonIcon">A</a>
</div>
</header>
<main>
<div class="step step1">
<h2>Step One: Upload an image</h2>
<input type="file" id="upload" class="fileInput" accept="image/*">
<label id="fileInputContainer" for="upload" class="fileInputContainer">Choose File</label>
</div>
<div class="step step2">
<h2>Step Two: Select a style</h2>
<div class="styleSelection radioContainer">
<input type="radio" class="radio style" id="style1" name="style" value="shade">
<label class="radioLabel" for="style1">Shade</label>
<input type="radio" class="radio style" id="style2" name="style" value="line">
<label class="radioLabel" for="style2">Outline</label>
<input type="radio" class="radio style" id="style3" name="style" value="shade&line">
<label class="radioLabel" for="style3">Shade & Outline</label>
<input type="radio" class="radio style" id="style4" name="style" value="silhouette">
<label class="radioLabel" for="style4">Silhouette</label>
</div>
</div>
<div class="step step3">
<h2>Step Three: Select a color</h2>
<div class="colorSelection radioContainer">
<input type="radio" class="radio color" id="black"
data-red="0" data-green="0" data-blue="0" data-color="#000000" name="color" value="black">
<label class="radioLabel black" for="black">Black</label>
<input type="radio" class="radio color" id="red"
data-red="194" data-green="24" data-blue="7" data-color="#C21807" name="color" value="red">
<label class="radioLabel red" for="red">Red</label>
<input type="radio" class="radio color" id="green"
data-red="11" data-green="102" data-blue="35" data-color="#0B6623" name="color" value="green">
<label class="radioLabel green" for="green">Green</label>
<input type="radio" class="radio color" id="blue"
data-red="15" data-green="82" data-blue="186" data-color="#0F52BA" name="color" value="blue">
<label class="radioLabel blue" for="blue">Blue</label>
</div>
</div>
<div class="step step4">
<h2>Step Four (Optional): Advanced Settings</h2>
<input type="checkbox" id="toggleAdvancedSettings" class="toggleAdvancedSettings">
<label class="toggleHideSettings" for="toggleAdvancedSettings"></label>
<div class="advancedSettingsContainer">
<div class="outerSettingContainer">
<h3 class="title">Shade <i id="shadeIcon" class="fa-solid fa-circle-info"></i></h3>
<input type="checkbox" id="toggleShading" class="toggleShading toggleSettingCheckbox changeStyle">
<label class="toggleSettingLabel" for="toggleShading"></label>
<div class="innerSettingContainer">
<h3>Dimension of cell</h3>
<input type="range" min="1" max="8" id="shadeSensitivity"
value="3" class="shadePrecision notSilhouette"
oninput="this.nextElementSibling.value = this.value">
<output>3</output>
<h3>Color</h3>
<input id="shadeColor" type="color" class="shadeColor colorInput">
</div>
</div>
<div class="outerSettingContainer">
<h3 class="title">Outline <i id="outlineIcon" class="fa-solid fa-circle-info"></i></h3>
<input type="checkbox" id="toggleOutline" class="toggleOutline toggleSettingCheckbox changeStyle">
<label class="toggleSettingLabel" for="toggleOutline"></label>
<div class="innerSettingContainer">
<h3>Color difference threshold</h3>
<input type="range" min="0" max="255"
value="64" class="lineSensitivity" id="minColorDiff"
oninput="this.nextElementSibling.value = this.value">
<output>64</output>
<h3>Minimum percent of neighbors</h3>
<input type="range" min="0" max="100" value="50"
class="neighborRequirement" id="minNeighbors"
oninput="this.nextElementSibling.value = this.value">
<output>50</output>
<h3>Color</h3>
<input id="lineColor" type="color" class="lineColor colorInput">
</div>
</div>
<div class="outerSettingContainer">
<h3 class="title">Refine Outline <i id="refineIcon" class="fa-solid fa-circle-info"></i></h3>
<input type="checkbox" id="toggleRefining" class="toggleRefining toggleSettingCheckbox">
<label class="toggleSettingLabel" for="toggleRefining"></label>
<div class="innerSettingContainer">
<h3>Minimum continguous line size</h3>
<input type="range" min="2" max="100"
value="10" class="refiningQuotient" id="minLineSize"
oninput="this.nextElementSibling.value = this.value">
<output>10</output>
</div>
</div>
</div>
</div>
<div class="step step5">
<h2>Step Five: Enjoy</h2>
<button id="start" class="start">Draw</button>
<div class="otherDivider"></div>
<div id="status" class="status"></div>
</div>
</main>
<div class="canvasContainer">
<canvas id="originalCanvas" class="originalCanvas"></canvas>
<canvas id="shadeCanvas" class="shadeCanvas"></canvas>
<canvas id="lineCanvas" class="lineCanvas"></canvas>
</div>
</body>
</html>